ディビの列の境界線をクリエイティブに使用して、見事なヒーローセクションデザインを作成する方法

ページのヒーローセクションは通常、ページの残りの部分のバーを設定します。 また、訪問者の第一印象にも大きな役割を果たします。 Diviを使用すると、組み込みのオプションのみを使用して素晴らしいヒーローセクションを作成できます。 今、あなたがあなたの次のヒーローセクションを目立たせる方法を探しているなら、あなたはこの投稿を気に入るはずです。 ディビの列の境界線をいじりながら、効果的で美しいヒーローセクションのデザインを作成する方法を紹介します。 デザインJSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

ヒーローセクションのレイアウトを無料でダウンロード

無料のヒーローセクションのレイアウトを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

再作成を始めましょう！

私たちのYoutubeチャンネルを購読する

新しいセクションを追加

グラデーションの背景

先に進んで新しいページを作成するか、既存のページを開きます。 新しい通常のセクションを追加し、セクション設定を開いて、次のグラデーションの背景を追加します。

• 色1：＃7e2dff
• 色2：#ffffff
• 開始位置：63％
• 終了位置：63％

間隔

[デザイン]タブに移動し、さまざまな画面サイズにカスタムの上下のパディングを追加します。

• トップパディング：6vw（デスクトップ）、13vw（タブレット）、32vw（電話）
• 下部のパディング：6vw（デスクトップ）、10vw（タブレット）、20vw（電話）

行＃1を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

サイジング

モジュールをまだ追加せずに、行設定を開き、最大幅を変更します。

• 最大幅：100％

間隔

行のデフォルトの上部と下部のパディングも削除します。

• トップパディング：0px
• ボトムパディング：0px

画像モジュールを列に追加

画像をアップロード

モジュールの追加を開始する時が来ました！ 最初に必要なモジュールは画像モジュールです。 このチュートリアルの最初にダウンロードできたzipフォルダーにある画像をアップロードします。 別の画像を使用する場合は、幅1160px、高さ1385pxを使用していることを確認してください。

サイジング

画像モジュールのデザインタブに移動し、「全幅を強制」オプションを有効にします。

• 全幅を強制：はい

間隔

次に間隔設定を変更します。

• 画像の下にスペースを表示：いいえ
• 左パディング：17vw

国境

そして、イメージモジュールの右上隅に「50vw」を追加します。

フィルタ

また、カラーパレットに合わせて画像の色を変更しています。 フィルタ設定を開き、次の設定を適用します。

• 色相：211度
• 飽和度：600％
• 明るさ：67％
• コントラスト：112％
• 反転：18％

テキストモジュール＃1を列に追加

H1コンテンツを追加する

この行で必要な2番目のモジュールは、H1コンテンツを含むテキストモジュールです。

H1テキスト設定

[デザイン]タブに移動し、それに応じてH1テキスト設定を変更します。

• 見出しフォント：Montserrat
• 見出しフォントの太さ：半太字
• 見出しのテキストの色：#ffffff
• 見出しのテキストサイズ：5vw
• 見出し文字の間隔：-2px

サイジング

次に、モジュールの幅を変更します。

• 幅：70％

間隔

そして、負の上部マージンを使用して、このモジュールと前のモジュールの間にオーバーラップを作成します。

• 上マージン：-57vw（デスクトップ）、-75vw（タブレット）、-91vw（電話）

Dividerモジュールを列に追加

可視性

次に必要なモジュールはディバイダーモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。

• 仕切りを表示：はい

ライン

次に線の色を変更します。

• 線の色：＃00dcff

サイジング

サイズ設定も変更します。

• 仕切りの重量：0.8vw
• 幅：27％

テキストモジュール＃2を列に追加

段落コンテンツを追加する

選択した段落コンテンツを含む新しいテキストモジュールを追加して続行します。

テキスト設定

[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

• テキストフォント：Open Sans
• テキストの色：#ffffff
• テキストサイズ：1vw（デスクトップ）、2vw（タブレット）、2.5vw（電話）
• テキスト行の高さ：1.8em

サイジング

モジュールの幅も変更します。

• 幅：53％（デスクトップ）、65％（タブレット）、100％（電話）

ボタンモジュールを列に追加

コピーを追加

この行で必要な次の最後のモジュールはボタンモジュールです。 選択したコピーをいくつか追加します。

ボタンの設定

次にボタン設定に移動し、それに応じてボタンのスタイルを変更します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• ボタンのテキストの色：#ffffff
• ボタンの背景色：＃000000
• ボタンの境界線の幅：0px
• ボタンフォント：Sansを開く

間隔

いくつかのカスタムパディング値も追加します。

• トップパディング：1vw
• ボトムパディング：1vw
• 左パディング：4vw
• 右パディング：4vw

行＃2を追加

カラム構造

次の行へ！ 次の列構造を選択します。

背景色

モジュールをまだ追加せずに、行設定を開きます。 背景色を白に変更します。

• 背景色：#ffffff

サイジング

デザインタブに移動し、最大幅を増やします。

• 最大幅：100％

間隔

次に、いくつかのカスタムパディング値を追加します。

• トップパディング：3vw
• ボトムパディング：8vw
• 左パディング：7vw
• 右パディング：7vw

国境

行の左下隅と右上隅に「20vw」を追加して続行します。 次の設定も使用して、上部の境界線を追加します。

• トップボーダー幅：1.2vw
• 上枠の色：＃00dcff

ボックスシャドウ

また、ページに奥行きを持たせるために、微妙なボックスシャドウを追加しています。

• ボックスシャドウブラー強度：120px

Zインデックス

行が画像モジュールの上に表示されるようにするために、可視性設定で行Zインデックスを増やします。

• Zインデックス：10

列1に宣伝文モジュールを追加する

コンテンツを追加する

行の設定が完了したら、行の最初の列に宣伝文句モジュールを追加できます。 お好みのコンテンツを入力してください。

アイコンを選択

次に、お好みのアイコンを選択します。

アイコン設定

デザインタブに移動し、アイコンの設定を変更します。

• アイコンの色：＃000000
• アイコンの配置：上
• アイコンのフォントサイズを使用：はい
• アイコンのフォントサイズ：5vw

タイトルテキスト設定

タイトル設定も変更します。

• タイトルフォント：Montserrat
• タイトルフォントの太さ：太字
• タイトルテキストの配置：中央
• タイトルテキストの色：＃000000
• タイトルテキストサイズ：1.1vw（デスクトップ）、2.5vw（タブレット）、3vw（電話）
• タイトル文字の間隔：-1px

本文の設定

本文の設定とともに。

• ボディフォント：Open Sans
• 本文の配置：中央
• 本文のサイズ：0.8vw（デスクトップ）、1.6vw（タブレット）、2vw（電話）
• ボディラインの高さ：1.5vw（デスクトップ）、3vw（タブレットと電話）

宣伝文句モジュールを2回クローンし、残りの列に複製を配置します

列1の宣伝文句モジュールを完了したら、それを2回複製して、行の残りの2つの列に複製を配置できます。

コンテンツの変更

両方の複製の内容を変更して、完了していることを確認してください。

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

最終的な考え

この投稿では、Diviに組み込まれている行の境界線を使ってクリエイティブになり、次のDiviプロジェクトで使用できる見事なヒーローセクションを作成する方法を紹介しました。 美しい例を最初から再作成しました。JSONファイルを無料でダウンロードすることもできました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。