セクションディバイダーは、Diviで人気のあるデザイン要素であり続けています。 独自のトランジションや背景をページに簡単に追加できる便利なオプションなど、さまざまなスタイルのセパレーターがあります。

このチュートリアルでは、セクション区切り線を少し異なる方法で使用します。 Divi では、各ディバイダーの高さとレイアウトを調整できます。 これにより、セクション内の特定の領域またはコンテンツの上にセパレーターを配置できるようになります。 ディバイダーの高さのホバー オプションを使用すると、独自のホバー効果を追加して、 コンテンツ 部分的に隠れています。 これは、行動喚起やクリックしてもらいたい特定のボタンに注意を引くのに最適です。 訪問者 クリック。

のは、始めましょう。

サンプル結果

ディビはコンテンツアニメーションを明らかにした始めるために必要なもの

開始するには、次のものが必要です。

  1. Le Diviテーマ インストール済みでアクティブ
  2. フロントエンドで最初から構築するために作成された新しいページ(ビジュアルコンストラクター)
  3. デザインで使用するいくつかのダミー画像。 からの透明な背景を持ついくつかの画像を使用するつもりです ジュースショップのレイアウトパック .

その後、開始する準備ができました!

Diviでセクションディバイダーの高さホバー効果の設計を実装する

セクションとラインの作成

まず、2つの列からなる通常のセクションを作成します。

diviレイアウトを選択してくださいモジュールを追加する前に、セクション設定を開き、以下を更新してください。

左背景のグラデーション:#73ba57
右背景のグラデーション:#2a4c23
幅:80%
最大幅:1080px
セクションの配置:中央

ただし、画像に応じて好きな配色を選択することもできます。 私の配色は次のとおりです。#fff200-#e09900のグラデーション。

劣化したdiviの背景を追加する

セクションタイトルを追加

セクションのタイトルを追加するには、テキスト モジュールを作成し、 コンテンツ 本文に次の h2 ヘッダーを付けます。

ジュース

次に、図面を次のように更新します。

Heading 2フォントの:Lato
見出し2テキストサイズ:80px
見出し2文字の間隔:-5px
余白:上部に-50px、下部に-40px
Zインデックス:-1

カスタムマージンとzインデックスにより、テキストを次のステップで追加する画像の後ろに配置できます。

画像を追加

列1にタイトルが付いたテキストモジュールの下に、画像モジュールを追加します。 次に、背景が透明な画像をアップロードします。 240ピクセル×300ピクセルのジュースショップレイアウトパックの画像を使用しています。

ディビフルーツジュース画像の中央への配置を調整します。

ディビセンターアライメント

列2にアクションの呼び出しを追加する

2列で、アクションモジュールへの呼び出しを追加します。

列2でのアクションの呼び出し

ボタンリンクURLを追加して、ボタンが表示されることを確認します。

diviアクション呼び出しリンクを追加します

CTAの背景とタイトルのスタイル

次に、以下の設計パラメーターを更新します。

背景色:#ffffff
テキストの色:
titleフォント:ラト
タイトル重量ポリシー:ヘビー
タイトルフォントスタイル:TT
titleテキストサイズ:18px

diviの行動を促すフレーズをカスタマイズする

CTAボタンを定型化する

次のようにボタンのデザインを更新します。

ボタンのテキストの色:#ffffff
ボタンの背景色:#e09900
ボタンの枠線の幅:0 px

iamgediviの背景をカスタマイズする

CTA境界線のスタイル

次に、次のようにモジュールを囲む枠線を追加します。

ボーダーの幅:10px
枠の色:rgba(224,145,0,0.25)

カスタムボーダーディビ

アクションの呼び出しを明らかにするために仕切りの高さホバー効果を追加しました

次に、セクション分割の高さホバー効果を追加して、アクションの呼び出しを明らかにします。 これを行うには、最初にセクション仕切りを作成する必要があります。

上部セパレーターの追加

次のパラメーターを使用して、セクションパラメーターと上部の区切り記号を開きます。

トップディバイダースタイル:スクリーンショットを参照トップディバイダーの色:#73ba57トップディバイダーの高さ:70%(デフォルト)、0%(ホバー)
フリップトップディバイダー:水平

セパレーターの高さはデフォルトの高さ70%で始まり、ロールオーバー時に0%の高さに移動することに注意してください。

下仕切りの追加

次に、次のパラメーターを使用して、セクションと同様の下部セパレーターを追加します。

トップディバイダースタイル:スクリーンショットを参照トップディバイダーの色:#73ba57トップディバイダーの高さ:70%(デフォルト)、0%(ホバー)
フリップトップディバイダー:水平
ディバイダーのレイアウト: セクションの上部 中身

この背景セパレーターも70%の高さで始まり、ホバーすると0%に変わります。 ただし、区切り文字のレイアウトオプションがコンテンツの上部に設定されているため、セクション区切り記号は、列1のアクション呼び出しの下部を非表示にします。次に、カーソルを合わせると、残りのl行動への呼びかけが明らかにされる。

これまでの結果を確認してください。

ディビボーダーをカスタマイズする

ユニークなトランジションとデザインのためのボックスシャドウホバー効果を追加しました

独自のホバリングトランジションとデザインのために、仕切りの高さホバー効果と同時に発生するボックスシャドウホバー効果を追加できます。 これを行うには、次のボックスの影をセクションに追加します。

ボックスシャドウ:スクリーンショットを参照
ボックスシャドー水平位置:0px
ボックスシャドー垂直位置:0px
Box Shadow Spread Force:0px(デフォルト)、150px(ホバー)
ボックスシャドウカラー:#73ba57

ディビボーダーアニメーション

移行期間を遅くする

最後のステップでは、遷移の時間を遅くしましょう。

移行期間:700ms

diviトランジションを構成する最終結果

これがデスクトップ上の最終結果です。

ディビの最終結果

上記で行ったことに基づいて、モバイルとタブレットの表示をカスタマイズできるようになります。

最終的な考え

このチュートリアルが、コンテンツを明らかにするための独自のセクション仕切りの高さホバー効果を作成するためのインスピレーションを与えてくれることを願っています。 実際、ホバリングディバイダーの高さを調整することは、注目に値する設計要素になる可能性があります。 そして、デザインサンプルはあなたがあなた自身の探求とあなた自身のデザインを始めるのを助けるべきです。

コメントであなたから聞いてみたいです。

あなたの健康に!