ディビの専門セクションでユニークなマルチコラムヒーローセクションをデザインする方法
公開: 2019-07-04すべてのデザイントレンドを通じて、ヒーローセクションをデザインする方法は非常に重要です。 Diviを使用すると、さまざまなアプローチを取り、目立つヒーローセクションを作成して、人々がWebサイトでの滞在を延長することを奨励できます。 今後のDiviプロジェクトにインスピレーションを与えるために、Diviの組み込みオプションのみを使用して独自のマルチカラムヒーローセクションを設計する方法を紹介します。 複数列のヒーローセクションは見栄えが良いだけでなく、訪問者を圧倒することなく、ヒーローセクションにより多くのコンテンツを戦略的に配置するのに役立ちます。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
マルチコラムヒーローセクションレイアウトを無料でダウンロード
複数列のヒーローセクションのレイアウトに手を置くには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
再作成を始めましょう！
新しい専門セクションを追加
カラム構造
シームレスな複数列のヒーローセクションを作成するために、VisualBuilder内でアクセスできるDivi専門セクションの1つを使用します。 特殊なセクションを選択すると、複数列のヒーローセクションを設計するときに、使用するグリッド構造をより適切に把握できます。 この特定の例では、次の列構造を選択しています。
背景色
セクション設定を開き、白い背景色を追加します。
- 背景色：#ffffff
サイジング
サイズ設定を変更することで、セクション列の間にギャップがないことを確認しています。
- 列の高さを等しくする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
- 幅：100％
- 最大幅：100％
- 内幅：100％
- 内側の最大幅：100％
間隔
また、行と列のデフォルトの上部と下部のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
- 列1の上部パディング：0px
- 列1の下部パディング：0px
- 列2のトップパディング：0px
- 列2の下部パディング：0px
- 列3のトップパディング：0px
- 列3の下部パディング：0px
行＃1を追加
カラム構造
次の列構造を使用して、最初のセクション列に新しい行を追加して続行します。
間隔
モジュールをまだ追加せずに、行設定を開き、デフォルトの上下のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
列にテキストモジュールを追加
段落とH1コンテンツを追加する
モジュールの追加を開始する時が来ました！ 選択した段落とH1コンテンツを含む新しいテキストモジュールを追加します。
テキスト設定
デザインタブに移動し、テキスト設定を変更します。
- テキストフォント：Open Sans
- テキストサイズ：0.9vw（デスクトップ）、1.6vw（タブレット）、2.2vw（電話）
H1テキスト設定
H1テキスト設定も変更します。
- 見出しフォント：Open Sans
- 見出しフォントの太さ：半太字
- 見出しフォントスタイル：大文字
- 見出しのテキストの色：＃000000
- 見出しのテキストサイズ：4vw
- 見出し線の高さ：1.1em
間隔
いくつかのカスタムパディング値も追加します。
- トップパディング：10.8vw
- 左パディング：4vw
- 右パディング：4vw
行＃2を追加
カラム構造
最初のセクションの列に必要な2番目の行は、次の列構造を使用しています。
間隔
モジュールをまだ追加せずに、行設定を開き、パディング値を変更します。
- トップパディング：3vw
- 左パディング：4vw
- 右パディング：4vw
テキストモジュール＃1を列1に追加します
H3コンテンツを追加する
行の設定が完了したら、先に進んで新しいテキストモジュールを最初の列に追加できます。 お好みのH3コンテンツを入力してください。
H3テキスト設定
[デザイン]タブに移動し、それに応じてH3テキスト設定を変更します。
- 見出し3フォント：Open Sans
- 見出し3フォントの太さ：半太字
- 見出し3フォントスタイル：大文字
- 見出し3テキストの色：＃000000
- 見出し3テキストサイズ：1.5vw（デスクトップ）、2vw（タブレット）、2.5vw（電話）
間隔
電話にトップマージンを追加して続行します。
- トップマージン：2vw（電話のみ）
Dividerモジュールを列1に追加します
可視性
最初の列に必要な2番目のモジュールはDividerモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。
- 仕切りを表示：はい
ライン
次に線の色を変更します。
- 線の色：＃000000
間隔
仕切りの周りにスペースを作成するために、いくつかのカスタムマージン値を追加します。
- トップマージン：2vw
- 下マージン：2vw
- 右マージン：2vw
テキストモジュール＃2を列1に追加します
コンテンツを追加する
この列で必要な次の最後のモジュールは、別のテキストモジュールです。 選択した段落の内容を入力します。
テキスト設定
[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストフォント：Open Sans
- テキストサイズ：0.6vw（デスクトップ）、1.1vw（タブレット）、2vw（電話）
- テキスト行の高さ：2em
間隔
下部と右側のパディングも追加します。
- 下マージン：5vw（電話のみ）
- 右マージン：2vw
列1のすべてのモジュールのクローンを作成し、残りの列に複製を2回配置します
列1のすべてのモジュールを完了したら、先に進んで、各モジュールのクローンを2回作成できます。 行の残りの2つの列に重複を配置します。
コンテンツの変更
テキストモジュールのすべてのコンテンツを必ず変更してください。
行＃3を追加
カラム構造
最初のセクションの列に必要な次の最後の行は、次の列構造を使用します。
間隔
行設定を開き、間隔の値を変更します。
- トップマージン：2vw
- トップパディング：0px
- ボトムパディング：0px
列1にテキストモジュールを追加
コンテンツを追加する
選択したCTAコピーを使用して、最初の列にテキストモジュールを追加して続行します。
リンクを追加
モジュール全体へのリンクも追加します。
背景色
テキストモジュールの背景色も変更します。
- 背景色：＃000000
テキスト設定
[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストフォント：Open Sans
- テキストフォントの太さ：超太字
- テキストフォントスタイル：大文字
- テキストの配置：中央
- テキストの色：#ffffff
- テキストサイズ：1vw（デスクトップ）、1.7vw（タブレット）、2.5vw（電話）
間隔
また、カスタムのマージンとパディング値を使用して、モジュールの周囲にスペースを作成します。
- トップマージン：4vw（デスクトップ）、11vw（タブレット）、0vw（電話）
- トップパディング：4vw
- ボトムパディング：4vw
テキストモジュールのクローンを作成し、列2に複製を配置します
列1のテキストモジュールを完了したら、それを複製して2番目の列に複製を配置できます。
コンテンツの変更
必ずコンテンツとリンクを変更してください。
背景色を変更する
だけでなく、背景色。
- 背景色：＃e5e5e5
テキストの色を変更する
次に、[デザイン]タブに移動し、テキストの色を変更します。
- テキストの色：＃000000
間隔を変更する
最後になりましたが、間隔の設定に次の値のみが含まれていることを確認してください。
- トップパディング：4vw
- ボトムパディング：4vw
セクション列2に画像モジュールを追加
画像をアップロード
次のセクションのコラムに進みましょう！ ここで、最初に必要なモジュールは画像モジュールです。 選択した画像をアップロードするか、この投稿の冒頭で共有したzipフォルダーにある画像を使用してください。
サイジング
サイズ設定に移動し、[全幅を強制]オプションが有効になっていることを確認します。 これにより、画像がすべての画面サイズでそのサイズを維持できるようになります。
- 全幅を強制：はい
フィルタ
次に、フィルター設定を変更します。
- 飽和度：0％
- 明るさ：50％
セクション列2にテキストモジュールを追加
段落とH3コンテンツを追加する
この列で必要な2番目のモジュールはテキストモジュールです。 選択した段落とH3コンテンツを入力します。
背景色
モジュールに背景色を追加します。
- 背景色：＃000000
テキスト設定
[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストフォント：Open Sans
- テキストの色：#ffffff
- テキストサイズ：0.9vw（デスクトップ）、1.6vw（タブレット）、2.2vw（電話）
H3テキスト設定
H3テキスト設定も変更します。
- 見出し3フォント：Open Sans
- 見出し3フォントの太さ：半太字
- 見出し3フォントスタイル：大文字
- 見出し3のテキストの色：#ffffff
- 見出し3テキストサイズ：1.5vw（デスクトップ）、2.5vw（タブレット）、3vw（電話）
間隔
そして、間隔設定にいくつかのカスタムパディング値を追加します。
- トップパディング：3vw
- ボトムパディング：3vw
- 左パディング：2vw
- 右パディング：2vw
両方のモジュールのクローンを作成し、セクション列3（逆順）に複製を配置します
両方のモジュールを完了したら、先に進んでそれらのクローンを作成できます。 複製を残りのセクション列に逆の順序で配置します。
テキストモジュールの変更
背景色を変更する
3番目のセクションの列で重複するテキストモジュールを開き、背景色を変更します。
- 背景色：#ffffff
テキストの色を変更する
次にテキストの色を変更します。
- テキストの色：＃000000
H3テキストの色を変更する
H3のテキストの色と一緒に。
- 見出し3テキストの色：＃000000
画像モジュールの変更
画像を変更する
次に、別の画像を複製の画像モジュールにアップロードします。
フィルターの変更
そして、フィルター設定を変更します。
- 飽和度：0％
- 明るさ：147％
セクション列2にディバイダーモジュールを追加します
ポジション
また、デザインにディテールを追加するために、いくつかの変換された仕切りを追加しています。 最初のディバイダーモジュールをここに配置します。
可視性
[仕切りを表示]オプションが有効になっていることを確認してください。
- 仕切りを表示：はい
ライン
次に線の色を追加します。
- 線の色：#ffffff
変換回転
そして、左側の変換回転値を変更して、水平分割器を垂直分割器に変換します。
- 左：270度
変換翻訳
変換変換設定でビューポート幅の単位を使用して、ディバイダーモジュールを再配置します。
- 右：-19vw（デスクトップ）
- 下：-11vw（デスクトップ）、-24vw（タブレット）
可視性
そして、電話でモジュール全体を非表示にします。
セクション列3にディバイダーモジュールを追加します
ポジション
次で最後のディバイダーモジュールをここに追加する必要があります。
可視性
[仕切りを表示]オプションが有効になっていることを確認してください。
- 仕切りを表示：はい
ライン
デザインタブに移動し、線の色を変更します。
- 線の色：＃000000
変換回転
次に、水平の仕切りを垂直の仕切りに変換します。
- 左：270度
変換翻訳
そして、変換変換設定を使用して仕切りを再配置します。
- 右：2vw
- 下：-11vw（デスクトップ）、-24vw（タブレット）
可視性
仕切りがその下の画像モジュールの上に表示されるようにするために、可視性設定でZインデックスを増やします。 また、モジュール全体を電話で非表示にします。
- Zインデックス：2
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
最終的な考え
この投稿では、Diviの組み込みオプションのみを使用して美しくユニークなマルチカラムヒーローセクションを作成する方法を紹介しました。 これは、さまざまな種類のWebサイトに使用できる優れた手法です。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。