Diviであなたの個人的なウェブサイトのための美しいヒーローセクションを作成する方法

個人のウェブサイトを作成することは楽しくて挑戦的です。 あなたはあなたのウェブサイトがあなたの物語を語らせるのに十分魅力的で個人的に見えることを望みます。 同時に、自分が何をしているかを知っていることを示す、美しく本物のWebサイトが必要です。

このような個人的なウェブサイトを作成する創造的なプロセスを支援するために、私たちはあなたのウェブサイトを確実に際立たせる美しいヒーローセクションを作成しました。 この投稿では、各ステップのDiviの組み込み設定以外の何も使用せずに、その結​​果を作成する方法をステップバイステップで示します。 チュートリアルに入る前に、結果を見てみましょう。

デスクトップでの結果

デスクトップでの結果は次のようになります。

モバイルでの結果

また、モバイルでWebサイトにアクセスした訪問者には、次の結果が表示されます。

Diviであなたの個人的なウェブサイトのための美しいヒーローセクションを作成する方法

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

セクションの作成

まず、WordPress Webサイトに新しいページを作成し、Divi Builderを有効にして、Visual Builderに切り替え、新しいセクションを追加します。

グラデーションの背景

このセクション内で変更する必要があるのは、背景だけです。 この背景は、この投稿の次のステップで追加するすべての行に適用されます。 背景サブカテゴリを開き、次のグラデーション背景を追加します。

• 最初の色：＃c2c6f3
• 2番目の色：＃cea5b9
• グラデーションタイプ：ラジアル
• 半径方向：中心
• 開始位置：45％
• 終了位置：45％

最初の行を追加

次に、先に進み、最初の行をセクションに追加します。 この行には、レイアウトの上部に表示されるテキストモジュールのみが含まれます。

カラム構造

次に、1つの列を持つ列構造を選択します。

サイジング

行設定の[デザイン]タブに移動し、[サイズ設定]サブカテゴリに次の設定を使用します。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1

テキストモジュール

前に述べたように、この行にはテキストモジュールのみが必要です。

テキスト設定

[コンテンツ]タブに表示するテキストを入力したら、[デザイン]タブに移動し、次の設定を[テキスト]サブカテゴリに適用します。

• テキストフォント：アリゾニア
• テキストフォントの太さ：通常
• テキストサイズ：150（デスクトップ）、80（タブレット）、70（電話）
• テキストの色：rgba（255,255,255,0.39）
• テキストの向き：中央

2行目を追加

最初の行が完成したら、先に進んで同じセクションに2番目の行を追加します。

カラム構造

前の行と同様に、この行にも1つの列しかありません。

背景画像

行設定を開き、最初の列の背景画像として使用する個人画像を追加します。 画像の位置も「中央」に設定されていることを確認してください。

サイジング

次に、[サイズ設定]サブカテゴリを開き、次の変更を加えます。

• カスタム幅を使用：はい
• カスタム幅：557px

間隔

次に、行の上下左右のパディングに「0px」を使用します。

ボックスシャドウ

最後に、次のボックスシャドウを適用します。

• ボックスシャドウの水平位置：0px
• ボックスシャドウの垂直位置：2px
• ボックスシャドウブラー強度：53px
• ボックスシャドウスプレッド強度：10px
• 影の色：rgba（0,0,0,0.3）
• 影の位置：外側の影

テキストモジュール

行の設定が完了したら、先に進んでテキストモジュールを列に追加します。

背景色

まず、このテキストモジュールには、「rgba（0,0,0,0.66）」色の背景色が必要です。

テキスト設定

次に、[デザイン]タブに移動し、テキストサブカテゴリに次の変更を適用します。

• テキストフォント：Andika
• テキストフォントの太さ：太字
• テキストフォントスタイル：大文字
• テキストサイズ：78px（デスクトップ）、70px（タブレット）、50px（電話）
• テキストの色：＃c2c6f3
• テキスト行の高さ：1em
• テキストの向き：中央

国境

次に、Borderサブカテゴリを開き、次の境界線を使用します。

• 境界線を使用：はい
• 境界線の色：＃c2c6f3
• ボーダー幅：8px
• ボーダースタイル：ソリッド

間隔

次に、次のマージンとパディングを追加します。

• 上、右、下、左のマージン：50px
• トップパディング：200px
• ボトムパディング：200px

ボックスシャドウ

最後に、次のボックスシャドウをテキストモジュールに使用します。

• ボックスシャドウの水平位置：0px
• ボックスシャドウの垂直位置：0px
• ボックスシャドウブラー強度：0px
• ボックスシャドウスプレッド強度：50px
• 影の色：rgba（206,165,185,0.41）
• ボックスシャドウの位置：外側のシャドウ

3行目を追加

前述のように、このチュートリアルでは1つのセクションのみを使用しています。 その背後にある理由は、セクションのグラデーションの背景を、共有されているさまざまなコンテンツすべてに分散させたいためです。 先に進み、新しい行を追加します。

カラム構造

この行に2つの列を選択します。

サイジング

次に、[カスタム幅を使用]オプションを有効にして、「663px」の幅を適用します。

間隔

最後に、「50px」の上下の余白を追加します。

最初のテキストモジュール

行の最初の列に最初のテキストモジュールを追加します。

テキスト設定

次に、[デザイン]タブに移動し、テキストフォントとして「Andika」を使用し、テキストフォントの太さとして「Regular」を使用します。

テキストモジュールのクローンを作成し、2列目に配置します

2番目の列のテキストモジュールの設定はまったく同じなので、先に進み、テキストモジュールのクローンを作成して、2番目の列に配置します。

4行目を追加

設計が完了する前に、セクションに追加する行がもう1つ残っています。

カラム構造

この新しい行にも2つの列があります。

サイジング

行設定を開き、次の設定をサイズ設定サブカテゴリに適用します。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1

間隔

次に、20pxの上部パディングを追加します。

最初の画像モジュール

先に進み、この最後の行の最初の列に最初のイメージモジュールを追加します。

ボックスシャドウ

そして、それに次のボックスシャドウを追加します。

• ボックスシャドウの水平位置：-6px
• ボックスシャドウの垂直位置：2px
• ボックスシャドウブラー強度：53px
• ボックスシャドウスプレッド強度：10px
• 影の色：rgba（0,0,0,0.3）
• ボックスシャドウの位置：外側のシャドウ

画像モジュールのクローンを作成して2列目に配置

最後に、このイメージモジュールのクローンを作成し、2番目の列にも配置して、この行を完成させます。

結果

この投稿に追加したすべての手順を実行すると、次の結果が得られるはずです。

デスクトップ上

モバイルで

最終的な考え

Diviで得られる可能性は無限大です。 リアルタイムで変更を表示するビジュアルビルダーを使用して、Webサイトを希望どおりに表示することができます。 特にこの投稿では、個人のWebサイト用に美しいヒーローセクションを作成する方法を紹介しました。 このチュートリアルは、Diviの組み込みオプション以外は何も使用せずに作成されました。 質問や提案がある場合; 下のコメントセクションにコメントを残してください！

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。