Diviの新しいサイズ設定とオーバーフロー設定でホバーセクションを作成する方法
公開: 2019-05-20Diviの新しいドラッグ可能なサイズ設定オプションを使用すると、レスポンシブWebサイトを作成するのに役立つだけでなく、独自のインタラクションを作成するのにも役立ちます。 これらのオプションを試してみると、作成しているWebサイトをカスタマイズしたり、現在のデザイントレンドに合わせてページ構造をカスタマイズしたりできます。
このチュートリアルでは、具体的には、Diviを使用してホバーセクションを作成する方法を示します。 新しいページを作成し、すべてのセクションタイトルを表示できるようにしますが、各セクションはホバー（デスクトップ）またはクリック（モバイル）でのみ開きます。 別のセクションを開くとすぐに、前に開いたセクションが自動的に閉じます。 一般的なアプローチを説明することから始め、以下に示す例を最初から再現することから続けます。 このチュートリアルで、独自のホバーセクションデザインも作成できるようになることを願っています。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
ホバーセクションのレイアウトを無料でダウンロード
無料のホバーセクションのレイアウトに手を置くには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
アプローチ
実際のチュートリアルに入る前に、ホバーセクションの作成に使用される手法について説明します。 この手法は、あらゆる種類のデザインスタイルで、構築しているあらゆる種類のWebサイトに適用できます。
1.最初のセクションをページに追加します
まったく新しいページで新しいデザインを始めているとしましょう。 最初に行う必要があるのは、それに新しい通常のセクションを追加することです。
2.セクションタイトルを含む新しい行を追加します
次に、セクションタイトルを含むテキストモジュールを使用して新しい行を追加することで続行できます。 仕切りモジュールと、ホバーまたはタッチで行が展開することを示すものを追加することもできます（この投稿のプレビューの例を参照してください）。 セクションタイトルをセクションコンテンツの残りの部分から分離しておくことが重要です。そのため、セクションタイトルと次に来るものとの間に十分な空白を残すようにしてください。
3.セクションの残りのコンテンツを微調整します（必要な数の行とモジュールを追加します）
セクションタイトルに続くデザイン要素は完全にあなた次第です。 セクションは好きなだけ長くしたり短くしたりして、あらゆる種類のデザインスタイルを利用できます。
4.セクションのデフォルトとホバーの最大高さを変更します
セクションとその中のすべてのデザイン要素の微調整が完了したら、ホバー効果を作成します。 セクションのデフォルトの高さは、セクションのタイトルのみに収まるようになっています。 ホバーすると、セクションは初期サイズに戻ります。
5.垂直オーバーフローを非表示にします
この手法のもう1つの重要な部分は、垂直オーバーフローを隠すことです。 セクションの初期の高さよりも小さいデフォルトの最大高さをセクションに設定すると、オーバーフローが作成されます。 オーバーフローが表示されないようにするには、セクションの表示設定でオーバーフローが非表示になっていることを確認する必要があります。
5.ページのすべてのセクションに対して手順を繰り返します
ページのすべてのセクションで同じ手順を繰り返して、訪問者が喜ぶ明らかなユーザーエクスペリエンスを作成します。
私たちのYoutubeチャンネルを購読する
再作成を始めましょう！
新しいセクションを追加
デフォルトの背景色
この投稿のアプローチを終えたので、今度は物事を実行に移し始めます！ WordPress Webサイトの新しいページに最初の通常のセクションを追加し、セクション設定を開きます。 セクションのデフォルトの背景色を選択した色に変更します。
- 背景色：＃000000
背景色にカーソルを合わせる
ホバー時にこの背景色を変更します。
- 背景色：#ffffff
行＃1を追加
カラム構造
次の列構造を使用して、セクションに最初の行を追加して続行します。
テキストモジュールを追加
H2コンテンツを追加する
次に、テキストモジュールを新しい行に追加します。 次に何かが来ることを示す「▼」記号とともに、H2コピーを追加します。
H2テキスト設定
モジュールのデザインタブに移動し、H2テキスト設定を変更します。
- 見出し2フォント：Trebuchet
- 見出し2フォントの太さ：超太字
- 見出し2テキストの配置：左
- 見出し2のテキストの色：＃ff0f3b
- 見出し2テキストサイズ：100px（デスクトップ）、80px（タブレット）、60px（電話）
- 見出し2文字の間隔：-5px
仕切りモジュールを追加
可視性
この行で必要な2番目で最後のモジュールはDividerモジュールです。 可視性設定で[仕切りを表示]オプションが有効になっていることを確認してください。
- 仕切りを表示：はい
色
次に、[デザイン]タブに移動し、仕切りの色を変更します。
- 色：＃ff0f3b
サイジング
モジュールのサイズ設定も変更します。
- 仕切りの重量：2px
- 幅：14％
行＃2を追加
カラム構造
次の行へ！ これは、ホバー（デスクトップ）またはクリック（タブレットおよびモバイル）した後に表示するすべてのコンテンツを配置する必要がある場所です。 次の列構造を使用していますが、必要な数の行とモジュールを追加して、必要に応じてスタイルを設定できることに注意してください。
列1にテキストモジュールを追加
コンテンツを追加する
選択したコンテンツを含むテキストモジュールを最初の列に配置します。
テキスト設定
テキストモジュールのデザインタブに移動し、テキストの向きを変更します。
- テキストの向き：正当化
列2にテキストモジュールを追加します
コンテンツを追加する
テキストモジュールを2番目の列にも追加し、選択したコンテンツをいくつか追加します。
テキスト設定
繰り返しますが、モジュールのテキスト設定でテキストの向きを変更します。
- テキストの向き：正当化
セクションにサイズ設定を追加
デフォルトのサイズ
セクションを完了したら、ホバー効果を発生させます。 セクション設定を開き、さまざまな画面サイズで最大の高さを変更します。
- 最大高さ：300px（デスクトップ）、280px（タブレット）、260px（電話）
ホバーサイジング
最大高さでもホバーオプションを有効にし、さまざまな画面サイズのすべての要素をカバーするのに十分な高さの値を追加します。 この値により、セクションコンテナの初期サイズを超えずにすべての要素が表示されます。
- 最大高さ：5000px
垂直オーバーフロー
次に、セクションの[詳細設定]タブに移動し、垂直オーバーフローを変更します。 これにより、セクションコンテナを超えるすべてのコンテンツが非表示になります。
- 垂直オーバーフロー：非表示
トランジション
スムーズなトランジションを作成するために、[詳細設定]タブのトランジション設定も変更しています。
- 移行時間：800ms
- 遷移遅延：500ms
セクション全体を必要な回数だけクローンします
最初のホバーセクションの作成が完了したら、必要な回数だけクローンを作成できます。
セクションタイトルの変更
もちろん、重複のセクションタイトルを変更することをお勧めします。
H2テキストの色を変更する
デザインにバリエーションを加えるために、下の印刷画面で強調表示されているモジュールのテキストの色も変更します。
- 見出し2のテキストの色：＃c4c4c4
仕切りの色を変更する
テキストモジュールに付随する仕切りの色とともに。
- 色：＃c4c4c4
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviの新しいドラッグ可能なサイズ設定オプションをクリエイティブに使用して、作成中のWebサイトでホバーセクションを使用して独自のインタラクションを作成する方法を示しました。 アプローチを説明することから始め、設計例を最初から作り直すことから続けました。 JSONファイルを無料でダウンロードすることもできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。