スタイル付きセクションを使用してバンドのWebサイトのデザインをカスタマイズする方法

スタイル付きセクションは、サイトのコンテンツを強調しながら、独自の芸術的ブランドとの一体感を保つのに役立つ非常に強力なツールです。 彼らはあなたのサイトを魅力的に保つために、より多くの画像、色、そしてレイアウトのオプションを含む多くの扉を開きます。

セクションは1ページのWebサイトで特に役立ちますが、追加する機能に注意と差別化をもたらしたいWebサイトの任意のページに確実に適用できます。

効果的な経歴、素晴らしい音楽ページ、EPKなど、バンドのWebサイトのデザインが徹底的でプロフェッショナルであることを確認するために含めるべき多くの側面があります。 音楽Webサイトを作成し、メインコンテンツを配置したら、もう少し深く掘り下げていくつかのセクションをカスタマイズし、自分のスタイルに合ったWebサイトを作成できます。

優れたウェブサイトデザインの鍵は、サイト訪問者の目をページに沿って動かし続けることです。 色、テクスチャ、および動きの変更は、これを支援することができます。これはすべて、カスタムセクションスタイルを介して実現できます。 ここで考えることは非常にたくさんあります、そしてあなたは不思議に思うかもしれません：あなたはあまり散らかることなくあなたのコンテンツを引き立たせるバンドのウェブサイトのデザインを作ることができますか？

はい！ 重要なのは、単色の配色を考え出し、サイト全体で使用できる優れたテクスチャ画像を見つけることです。 これは、スタイリングされたセクションで美しいサイトを作成するために従うべき手順のウォークスルーです！

コンテンツを整理する

セクションは基本的に、機能を追加できるページ上のスペースのブロックです。 セクションを使用してカテゴリごとに分類したり、ページの特定の機能に重点を置いたりするのは便利です。

たとえば、スタイル付きセクションを使用してメーリングリストのサインアップ機能に注意を喚起したり、セクションを3つの列に分割して、ホームページでの行動を促す3つの画像およびテキスト機能を追加したりできます。 これは、以下の例に見られます。

コントロールパネル内の任意のページにセクションを追加するのは非常に簡単です。 [コンテンツの編集]の下で、マウスをページレイアウト上に移動します。青い[+セクションの追加]ボタンが既存のセクションの上または下に表示されます。

そのボタンをクリックして、新しいセクションを追加してください。

セクションの左上にある[列の編集]ボタンをクリックして、ここで個々のセクションの列を調整することもできます。 1、2、および3列から選択でき、左側または右側のサイドバーにいくつかの非対称オプションがあります。

セクションスタイルをカスタマイズする

より芸術的なセンスを得るには、[テーマの編集]タブで最大3つの異なるセクションスタイルを設定します。 セクションスタイルは、セクションの背景、テキスト、リンク、ボタンの色をカスタマイズする場所です。 ここで、サイトのセクションのトーンを実際に設定します。セクション間に高コントラストの色を設定したり、より微妙な色の違いを選択したりできます。

他のバンドWebサイトテンプレートデザインオプションと同様に、コントロールパネルの[テーマの編集]タブでセクションスタイルを調整します。

左側のテーマエディタオプションで、[セクションスタイル1]、[セクションスタイル2]、および[セクションスタイル3]オプションまで下にスクロールし、色設定を選択し、すべてが適切に設定されたら、[]をクリックします。保存して変更を適用します。

セクションのプロパティを設定する

[テーマの編集]タブでセクションスタイルを設定したら、[コンテンツの編集]タブに戻って、サイトのセクションにさまざまなプロパティを適用できます。 セクションにカーソルを合わせ、そのセクションの左上隅にある[セクションの編集]をクリックします。 調整できるプロパティは、セクションの色（設定したセクションのスタイルから取得）、背景画像とスクロール効果、セクションのパディングです。

オプションのタイトルをセクションに追加して、このタイトルの位置合わせを好みに合わせて調整することもできます。 このタイトルは、「メニューに表示」スイッチを「オン」に切り替えると、サブメニュー項目として追加することもできます。 これは、特定のページに非常に多くのコンテンツがあり、このすべてのコンテンツにアクセスするためのより簡単な方法を提供したい場合に使用されます。

セクションの色を変更するには、[セクションの色]をクリックし、ドロップダウンメニューからセクションのスタイルを選択します。

セクションパディングを変更するには、「セクションパディング」をクリックして、なし、小、中、大、または特大から選択します。 パディングは、セクション内のコンテンツの上部と下部の間隔を広げ、洗練された外観の空白を作成できます。



「保存」をクリックして、これらの変更をすべて保存します。 ここでは非常に多くの可能性があるため、以下の背景画像オプションについて詳しく説明します。

背景画像を追加する

セクションの背景機能の可能性は、これらが提供する追加のテクスチャ、深さ、および個人的なスタイルで無限です。 理論的には、サイトのすべてのセクションに背景画像を設定して、色の固いブロックがなく、完全に画像ベースになるようにすることができます。 非常に視覚的なサイトを作成したい場合、これは非常に強力な動きです。

これを行うときは、結束を念頭に置くことが重要です。 これらの画像がすべて同じようなカラーパレット内にあり、詳細があまりないことを確認する必要があります。 空と雲のさまざまな画像を使用して作成したサイトの例を次に示します。空のレクイエム

セクションに背景画像を追加するには、もう一度[セクションの編集]をクリックしてから、[背景画像]をクリックします。 ここから、[画像を追加]をクリックして、新しい画像をアップロードするか、画像ピッカーから画像を選択します。 「適用」をクリックします。 次に、必要に応じて画像を切り抜いて拡大し、[保存]をクリックします。

ここから、画像の透明度を設定できます。 セクションの内容によっては、画像の透明度を低いパーセンテージ（20％未満）のままにしておくことをお勧めします。 ただし、画像がここのコンテンツの邪魔にならない場合は、かなり大きくすることができます。 ここでの私の例では、透明度を70％に設定しました。 別のセクションスタイルを選択して、色付きの背景を選択した画像と組み合わせることができます。

次に、スクロール効果を設定します。 これを省略することもできますが、非常にすばらしいオプションがいくつかあります。 視差スクロール効果は、背景画像がページ自体とはわずかに異なる速度でスクロールするため、きちんとした3次元効果をもたらします。 固定スクロール効果は、背景の画像を固定し、残りのコンテンツはその上をスクロールします。 必要に応じて、これらをいじることができます。 もう一度、「保存」をクリックしてこれらの変更を適用します。

カスタムセクションスタイルで遊んで楽しんでください！

これらの例からわかるように、セクションが提供するスタイリングとレイアウトのオプションは、操作するのがとても楽しいです。 彼らは美しい音楽のウェブサイトを設計することを容易にします。 当社のウェブサイトテンプレートの多くには、使い始めるための事前に作成されたスタイルのセクションがいくつか付属しており、それらはすべてモバイル対応です。 この投稿があなたにこれらすべての可能性を試す自信を与えてくれることを願っています！

更新と保守が簡単な、プロフェッショナルでモバイル対応のWebサイトを数分で設計します。 今日Bandzoogleであなたのバンドのウェブサイトを構築してください！