次のDiviプロジェクトの鮮やかなセクションタイトルを作成する方法

私たちはあなたのほとんどがあなたが作成するウェブサイトをユニークにするための新しい方法を常に探していることを知っています。 Diviを使用すると、他のWebサイトからWebサイトを目立たせる方法がたくさんあります。 今日は、Diviの組み込みオプションのみを使用して見事なセクションタイトルを作成する方法を紹介します。 このアプローチは、見事なデザインを作成し、全体的なページ構造を維持し、ナビゲーションをシームレスに保ちたい場合に最適です。

それを手に入れよう！

プレビュー

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

作り始めましょう！

新しい通常のセクションを追加する

間隔

新しいページを開き、Visual Builderに切り替えて、最初のセクションを追加することから始めます。 行やモジュールをまだ追加せずに、セクション設定を開き、いくつかのパディングを追加します。

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

新しい行を追加

カラム構造

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

背景色

次に行の設定を開き、行全体に背景色を追加します。

• 背景色：＃f9f9f9

列1のグラジエントバックグラウンド

次に、最初の列に微妙なグラデーションの背景を追加します。 これは、列間でセクションタイトルのオーバーラップを作成するのに役立ちます。

• 色1：＃0031c4
• 色2：＃00aeff
• 列1の勾配方向：125度

サイジング

行の間隔も変更して、画面の幅全体を占めるようにします。

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

間隔

最後に、さまざまな画面サイズに応じて間隔設定を変更します。

• トップパディング：0px
• ボトムパディング：0px
• 列2の上部パディング：200px
• 列2の下部パディング：200px
• 列2の左パディング：350px（デスクトップ）、50px（タブレットと電話）
• 列2の右パディング：50px

セクションタイトルテキストモジュールを列1に追加

H2テキスト設定

すべての行設定が整ったので、モジュールの追加を開始できます。 最初の列から始めます。 ここで必要なモジュールはテキストモジュールだけです。 [コンテンツ]ボックスにH2コンテンツを追加したら、先に進んでH2テキスト設定を変更します。

• 見出し2フォントの太さ：超太字
• 見出し2フォントスタイル：大文字
• 見出し2テキストの配置：中央
• 見出し2のテキストの色：#ffffff
• 見出し2テキストサイズ：150px
• 見出し2行の高さ：1.25em
• 見出し2テキストシャドウ垂直長：-0.55em
• 見出し2テキストの影の色：rgba（0,255,255,0.25）

間隔

列間のオーバーラップは、デスクトップ、タブレット、電話で異なります。 オーバーラップを作成するために、テキストモジュールの間隔設定にいくつかの変更を加えます。

• 上マージン：325px（デスクトップ）、150px（タブレットと電話）
• 下マージン：325px、-120px（タブレット）、-110px（電話）
• 右マージン：-100％（デスクトップ）、0px（タブレットと電話）

フィルター

最後になりましたが、ブレンドモードを使用して、表示されるテキストの色の違いを作成します。

• ブレンドモード：オーバーレイ

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

H3テキスト設定

2番目の列に移りましょう。 そこで必要な最初のモジュールは、タイトルのテキストモジュールです。 H3コンテンツを追加した後、H3テキスト設定を変更します。

• 見出し3フォントの太さ：半太字
• 見出し3テキストの色：＃00aeff
• 見出し3テキストサイズ：60px
• 見出し3文字の間隔：-3px

間隔

次に下マージンを追加して、スペースを作成します。

• 下マージン：50px

Dividerモジュールを列2に追加します

仕切りの色

必要な2番目のモジュールはDividerモジュールです。 色設定を開き、デザインのカラーパレットに一致するように色を変更します。

• 仕切りの色：＃00ffff

サイジング

次に、サイズ設定を変更します。

• 高さ：56px
• 幅：75％

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

テキスト設定

次のテキスト設定を使用して、説明テキストモジュールを追加します。

• テキストサイズ：17px
• テキスト行の高さ：1.3em
• テキストの向き：正当化

サイジング

次に、サイズ設定を変更します。

• サイズ：70％（デスクトップ）、100％（タブレットと電話）

間隔

下マージンも使用して、このモジュールの下にスペースを追加します。

• 下マージン：50px

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

ボタンの設定

この列で必要になる最後のモジュールはボタンモジュールです。 CTAを追加した後、ボタンの設定を変更します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：17px
• ボタンのテキストの色：#ffffff
• ボタンの背景色：＃00aeff
• ボタンの境界線の幅：0px
• ボタンの境界線半径：100px
• ボタンの文字間隔：-1px
• フォントの太さ：超太字
• フォントスタイル：大文字

間隔

また、ボタンの外観をすっきりさせるために、パディングも追加します。

• トップパディング：10px
• ボトムパディング：10px
• 左パディング：30px
• 右パディング：30px

ボックスシャドウ

最後になりましたが、微妙なボックスシャドウを使用して、セクションに少し深みを加えます。

• ボックスシャドウブラー強度：54px
• ボックスシャドウスプレッド強度：-8px
• 影の色：rgba（0,0,0,0.3）

クローンセクション

すべてのコピーを変更

2番目のセクションを作成するには、作成済みのセクションのクローンを作成してから、すべてのコピーを変更します。

行の背景色を変更する

この新しいセクションでは、別のカラーパレットを使用します。 行の背景色を変更することから始めます。

• 背景色：#efefef

列1のグラデーションの背景を変更する

次に、別のグラデーションの背景も選択します。

• 色1：＃5f00a8
• カラー2：＃9000ff

セクションタイトルの影の色を変更する

テキストシャドウカラーも新しいカラーパレットと一致しています。

• 見出し2テキストの影の色：rgba（255,0,255,0.24）

セクションタイトルの間隔設定を変更する

使用しているコピーの長さに応じて、負の右マージンを試してみる必要があります。

• 右マージン：-110％（デスクトップ）

タイトルテキストモジュールのテキストの色を変更する

次に、列2のタイトルテキストモジュールのテキストの色を変更します。

• 見出し3テキストの色：＃9000ff

仕切りの色を変更する

同様に、仕切りの色をデザインと一致させます。

• 色：＃ff00ff

ボタンの背景色を変更する

最後に、ボタンモジュールの背景色を変更する必要があります。

• ボタンの背景色：＃9000ff

プレビュー

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

最終的な考え

あなたがそこにある他のウェブサイトからあなたのウェブデザインを際立たせることができる多くの方法があります。 この投稿では、Diviの組み込みオプションのみを使用して、見事なセクションタイトルと一般的なセクションを作成する方法を示しました。 列のグラデーションの背景をテキストモジュールのオーバーラップ、テキストシャドウ、ブレンドモードと組み合わせて、見事な最終結果を作成しました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！