セクションディバイダーの高さホバー効果を使用してDiviのコンテンツを表示する方法
公開: 2019-06-24セクションディバイダーは、引き続き人気のあるDiviデザイン要素です。 ユニークなトランジションや背景をページに簡単に追加できる便利なオプションを備えた、多くの仕切りスタイルから選択できます。
このチュートリアルでは、セクションディバイダーの使用方法を少し変えます。 Diviを使用すると、各仕切りの高さと配置を調整できます。 これにより、セクション内の特定の領域またはコンテンツの上に仕切りを配置できます。 仕切りの高さにホバーオプションを使用することで、部分的に非表示のコンテンツを表示する独自のホバー効果を追加できます。 これは、訪問者にクリックしてもらいたい特定の行動の呼びかけやボタンに注意を引くのに最適です。
始めましょう。
スニークピーク
セクションディバイダーの高さホバー効果を無料でダウンロード
このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。
チュートリアルに行きましょう。
私たちのYoutubeチャンネルを購読する
始めるために必要なもの
開始するには、次のものが必要です。
- Diviテーマがインストールされ、アクティブになっています
- フロントエンドでゼロから構築するために作成された新しいページ（ビジュアルビルダー）
- デザインで使用するいくつかのモック画像。 Juice Shop LayoutPackの背景が透明な画像をいくつか使用します。
その後、あなたは始める準備ができています！
Diviでのセクションディバイダー高さホバー効果設計の実装
セクションと行の作成
まず、2列の行を持つ通常のセクションを作成しましょう。
モジュールを追加する前に、セクション設定を開き、以下を更新してください。
背景グラデーション左色：＃73ba57
背景のグラデーションの正しい色：＃2a4c23
幅：80％
最大幅：1080px
セクションの配置：中央
セクションタイトルの追加
セクションのタイトルを追加するには、テキストモジュールを作成し、次のh2ヘッダーで本文のコンテンツを更新します。
<h2>The Juice</h2>
次に、次のようにデザインを更新します。
見出し2フォント：Lato
見出し2テキストサイズ：80px
見出し2文字の間隔：-5px
マージン：上-50px、下-40px
Zインデックス：-1
カスタムマージンとzインデックスにより、次のステップで追加する画像の後ろにテキストを配置できます。
画像の追加
列1にタイトルが付いたテキストモジュールの下に、画像モジュールを追加します。 次に、背景が透明な画像をアップロードします。 240px x300pxのJuiceShop LayoutPackの画像を使用しています。
画像の配置を中央に調整します。
列2に召喚状を追加する
列2で、アクションモジュールへの呼び出しを追加します。
ボタンリンクURLを追加して、ボタンが表示されることを確認します。
CTAの背景とタイトルテキストのスタイリング
次に、次の設計設定を更新します。
背景色：#ffffff
テキストの色：暗い
タイトルフォント：ラト
タイトルフォントの太さ：重い
タイトルフォントスタイル：TT
タイトルテキストサイズ：18px
CTAボタンのスタイリング
ボタンのデザインを次のように更新します。
ボタンのテキストの色：#ffffff
ボタンの背景色：＃73ba57
ボタンの境界線の幅：0px
CTAボーダーのスタイリング
次に、次のように境界線を追加してモジュールをフレーム化します。
ボーダー幅：10px
ボーダーカラー：rgba（115,186,87,0.15）
召喚状を明らかにするための仕切りの高さホバー効果の追加
次に、セクションディバイダーの高さホバー効果を追加して、アクションの呼び出しを明らかにします。 これを行うには、最初にセクション仕切りを作成する必要があります。
トップディバイダーの追加
次の設定でセクション設定と上部仕切りを開きます。
トップディバイダースタイル：スクリーンショットを参照
トップディバイダーカラー：＃73ba57
トップディバイダーの高さ：70％（デフォルト）、0％（ホバー）
トップディバイダーフリップ：水平
Divider Heightはデフォルトの高さ70％で始まり、ホバーすると0％の高さに変化することに注意してください。
ボトムディバイダーの追加
次に、次の設定でセクションに同様の下部分周器を追加します。
トップディバイダースタイル：スクリーンショットを参照
トップディバイダーカラー：＃73ba57
トップディバイダーの高さ：70％（デフォルト）、0％（ホバー）
トップディバイダーフリップ：水平
仕切りの配置：セクションの内容の上に
この下部の仕切りも70％の高さで始まり、ホバーすると0％に変わります。 ただし、仕切りの配置オプションがコンテンツの上部に設定されているため、セクションの仕切りは、列1のアクションの呼び出しの下部を非表示にします。次にカーソルを合わせると、アクションの呼び出しの残りの部分が表示されます。
これまでの結果を確認してください。
ユニークなトランジションとデザインのためのボックスシャドウホバー効果の追加
ホバーのユニークなトランジションとデザインのために、仕切りの高さのホバー効果と同時に発生するボックスシャドウホバー効果を追加できます。 これを行うには、次のボックスシャドウをセクションに追加します。
ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：0px
ボックスシャドウの垂直位置：0px
ボックスシャドウの広がりの強さ：0px（デフォルト）、150px（ホバー）
ボックスシャドウカラー：＃73ba57
移行期間を遅くする
最後のステップとして、遷移時間を少し遅くしましょう。
移行時間：700ms
最終結果
これがデスクトップでの最終結果です。
タブレットや携帯電話のディスプレイでコンテンツを非表示にしたくない場合は、これらのデバイスのDividerの配置を「セクションコンテンツの下」に簡単に変更できます。
これがタブレットと電話の最終的なデザインです。
完全にユニークなデザインを数秒で実現するために、他のセクションディバイダースタイルを試す
この設定を行うと、さまざまな仕切りのスタイルと組み合わせを簡単に試すことができます。
これが私が無料ダウンロードに含めたものです。
最終的な考え
うまくいけば、この投稿は、コンテンツを明らかにするためにいくつかのユニークなセクションディバイダーの高さホバー効果を作成する方法について少しインスピレーションを与えてくれました。 実際、ホバー時に仕切りの高さを調整することは、それ自体が優れた設計要素になる可能性があります。 また、設計例は、独自の調査と設計をすぐに開始するのに役立つはずです。
コメントでお返事をお待ちしております。
乾杯！