Diviを使用してページのホバー/クリックで宣伝メニューを作成する方法

公開: 2019-07-03

毎週、次のプロジェクトに使用できる新しい無料のDiviレイアウトパックを提供します。 レイアウトパックの1つとして、Webサイトを次のレベルに引き上げるのに役立つユースケースも共有しています。

今週は、進行中のDiviデザインイニシアチブの一環として、ホバーまたはクリックすると展開する魅力的な宣伝文メニューを作成する方法を紹介します。 まず、いくつかの一般的な手順を実行することから始めます。 宣伝文句モジュールを使用してメニュー項目を追加し、ホバー効果またはクリック効果のいずれかを選択できるようにして終了します。

それを手に入れよう！

プレビュー

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

ホバーモード

デスクトップ

宣伝文メニュー

モバイル

宣伝文メニュー

Modusをクリックします

デスクトップ

宣伝文メニュー

モバイル

宣伝文メニュー

1.空白のページを作成し、観光ランディングページをアップロードします

新しい空白ページを追加してDiviBuilderを有効にする

最初に行う必要があるのは、新しい空白のページを作成することです。 ページにタイトルを付けて、DiviBuilderに切り替えます。

宣伝文メニュー

観光ランディングページをアップロードする

Divi Builderを有効にしたら、Sightseeing LayoutPackのランディングページレイアウトをアップロードします。

宣伝文メニュー

2.ページの下部に新しい通常のセクションを追加します

プライマリメニューバーが非表示になったら、宣伝文メニューの追加を開始できます。 そのために、ページの下部に新しい通常のセクションを追加します。

宣伝文メニュー

背景色

セクション設定を開き、わずかに透明な白い背景色を追加します。

  • 背景色：rgba（255,255,255,0.98）

宣伝文メニュー

間隔

[デザイン]タブに移動し、セクションのデフォルトの上部と下部のパディングをすべて削除します。

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

宣伝文メニュー

デフォルトのボックスシャドウ

次のセクションにボックスシャドウを追加します。

  • ボックスシャドウブラー強度：18px
  • 影の色：＃383838

宣伝文メニュー

ホバーボックスシャドウ

そして、ホバー時にボックスの影のぼかしの強さを変更します。

  • ボックスシャドウブラー強度：1000px

宣伝文メニュー

セクションオーバーフローを非表示にしてZインデックスを増やす

この手法を機能させるためにセクションサイズ設定を使用しますが、セクションコンテナを超えるものがないことを確認するには、オーバーフローを非表示にする必要があります。 また、セクションがページの残りの部分の上にとどまるように、Zインデックスを増やしています。

  • 水平オーバーフロー：非表示
  • 垂直オーバーフロー：非表示
  • Zインデックス：9999

宣伝文メニュー

3.すべてのセクションメニューコンテンツがVwを使用して作成され、すべての画面サイズで100ビューポートの高さに収まるようにします

行＃1を追加

カラム構造

基本的なセクション設定が完了したら、メニューに表示するすべてのコンテンツを追加します。 Diviのデザイン要素と組み込みオプションを使用して任意のデザインを作成できますが、すべての画面サイズですべてが「100vh」の高さに収まるようにする必要があります。 これを実現するために、構築プロセス全体でビューポート幅の単位を使用し、さまざまな画面サイズで値を微調整します。 次の列構造を使用して、セクションに新しい行を追加することから始めます。

宣伝文メニュー

サイジング

モジュールをまだ追加せずに、行設定を開き、セクションの幅全体を占めることを確認します。

  • カスタムガター幅を使用：はい
  • 側溝幅：1
  • 幅：100％
  • 最大幅：100％

宣伝文メニュー

間隔

間隔設定に移動し、デフォルトの上下のパディングをすべて削除します。

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

宣伝文メニュー

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

シンボルを追加

行の列にテキストモジュールを追加して続行します。 コンテンツボックスに「=」記号を追加するか、他の任意の記号を自由に使用してください。

宣伝文メニュー

背景色

次に、モジュールの背景色を変更します。

  • 背景色：＃000000

宣伝文メニュー

テキスト設定

[デザイン]タブに移動し、テキスト設定も変更します。

  • テキストフォント：Open Sans
  • テキストの配置：中央
  • テキストの色：#ffffff
  • テキストサイズ：3vw（デスクトップ）、5vw（タブレット）、7vw（電話）
  • テキスト行の高さ：1em

宣伝文メニュー

間隔

また、次のカスタムパディング値を使用して、モジュールの上部と下部にスペースを追加しています。

  • トップパディング：2.5vw（デスクトップ）、3.5vw（タブレット）、5vw（電話）
  • ボトムパディング：2.5vw（デスクトップ）、3.5vw（タブレット）、5vw（電話）

宣伝文メニュー

行＃2を追加

カラム構造

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

宣伝文メニュー

サイジング

モジュールをまだ追加せずに、行の設定を開き、行が画面の幅全体を占めるようにします。

  • カスタムガター幅を使用：はい
  • 側溝幅：1
  • 幅：100％
  • 最大幅：100％

宣伝文メニュー

間隔

間隔の設定に移動し、次にカスタムの上下のパディングを追加します。

  • トップパディング：2vw（デスクトップ）、4vw（タブレット）、6vw（電話）
  • 下部のパディング：2vw（デスクトップ）、4vw（タブレット）、6vw（電話）

宣伝文メニュー

画面

小さい画面サイズで両方の列が隣り合っていることを確認するために、CSSコードの1行を行のメイン要素に追加します。 

display: flex;

宣伝文メニュー

列1に宣伝文モジュールを追加する

コンテンツを追加する

メニュー項目の追加を開始する時が来ました！ 行の最初の列に新しい宣伝文モジュールを追加し、選択したコンテンツを入力します。

宣伝文メニュー

アイコンを選択

次にアイコンを選択します。

宣伝文メニュー

リンクを追加

そして、メニュー項目に一致するページリンクを入力します。

  • タイトルリンクURL：＃

宣伝文メニュー

アイコン設定

[デザイン]タブに移動し、それに応じてアイコン設定を変更します。

  • アイコンの色：＃ff3314
  • アイコンの配置：上
  • アイコンのフォントサイズを使用：はい
  • アイコンのフォントサイズ：2vw（デスクトップ）、3vw（タブレット）、4vw（電話）

宣伝文メニュー

タイトルテキスト設定

タイトルテキストの設定も変更します。

  • タイトルフォント：PT Serif
  • タイトルフォントスタイル：下線
  • タイトルの下線の色：＃ff3314
  • タイトルテキストの配置：中央
  • タイトルテキストサイズ：1.8vw（デスクトップ）、2.3vw（タブレット）、3.3vw（電話）

宣伝文メニュー

本文の設定

次に、本文の設定を変更します。

  • ボディフォント：ラト
  • 本文の配置：中央
  • 本文の色：＃c6c6c6
  • 本文のサイズ：0.9vw（デスクトップ）、1.7vw（タブレット）、2.1vw（電話）
  • ボディラインの高さ：1.8em

宣伝文メニュー

サイジング

また、次の値を使用して、さまざまな画面サイズでモジュールの幅を変更します。

  • 幅：60％（デスクトップ）、65％（タブレット）、80％（電話）

宣伝文メニュー

アニメーション

アニメーション設定のアイコンアニメーションも削除します。

  • アイコンアニメーション：アニメーションなし

宣伝文メニュー

宣伝文句モジュールのクローンを作成し、列2に複製を配置します

宣伝文モジュールが完成したら、それを複製して、行の2番目の列に複製を配置できます。

宣伝文メニュー

コピーの変更

必ずコピーを変更してください。

宣伝文メニュー

アイコンの変更

アイコンと一緒に。

宣伝文メニュー

リンクを変更

そして、新しいメニュー項目に一致するページリンク。

宣伝文メニュー

行を2回クローンする

行の両方の宣伝文句を完了すると、行全体を2回複製できます。

宣伝文メニュー

個別に複製する各宣伝文のコピー、アイコン、リンクを変更する

宣伝文のメニュー項目ごとに、コピー、アイコン、リンクを個別に変更してください。

宣伝文メニュー

4.セクションをスティッキーにする

ディフォルト

セクションに表示するすべての要素を追加したら、セクションのメイン要素に次の2行のCSSコードを追加することで、セクションをページの左上に固定できます。 

position: fixed;
top: 0;

宣伝文メニュー

ホバー（重要！）

セクションのメイン要素でホバーオプションを有効にし、この状態でもセクションがスティッキーのままであることを確認します。 

position: fixed;

宣伝文メニュー

5.方法を選択します：A）ホバー時のメニューまたはB）クリック時のメニュー

A）ホバーのメニュー

デフォルトのセクションサイズ

チュートリアルの次の部分では、優先する方法を選択する必要があります。 ホバーまたはクリックのメニュー。 ホバーメニューは、小さいデバイスではクリックメニューのように動作します。 ホバーオプションを選択する場合は、セクション設定を再度開き、サイズ設定に移動して、それに応じてメニューの幅と高さを変更します。

  • 幅：8vw（デスクトップ）、12vw（タブレット）、20vw（電話）
  • 高さ：7.4vw（デスクトップ）、12vw（タブレット）、16vw（電話）

宣伝文メニュー

ホバーセクションのサイズ設定

ホバーの値を変更して、展開メニューを作成します。

  • 幅：80％
  • 高さ：100vh

宣伝文メニュー

B）クリック時のメニュー

CSSクラスをテキストモジュールに追加する

クリックのみで開くメニューが必要な場合は、メニュー記号を含むテキストモジュールを開く必要があります。 [詳細設定]タブに移動し、カスタムCSSクラスを追加します。

  • CSSクラス：全幅オープン

宣伝文メニュー

セクションにCSSクラスを追加する

次にセクション設定を開き、別のCSSクラスを追加します。

  • CSSクラス：smooth-transform

宣伝文メニュー

セクションのサイズ設定

次に、セクションの幅と高さを変更します。

  • 幅：8vw（デスクトップ）、12vw（タブレット）、20vw（電話）
  • 高さ：7.4vw（デスクトップ）、12vw（タブレット）、16vw（電話）

宣伝文メニュー

ページにコードを追加

セクションの下部に新しい行を追加

ここで、切り替え効果を作成するには、JQueryとCSSのコードが少し必要になります。 セクションの下部にある新しい行にコードモジュールを追加することから始めます。

宣伝文メニュー

セクションにコードモジュールを追加し、JQueryトグルコードを挿入します

JQueryコードの次の行をコピーして、コードボックスに貼り付けます。 

<script>
jQuery(function($){
$(".fullwidth-open").click(function() {
 $('.smooth-transform').toggleClass('smooth-transform-active');
});

});
</script>

宣伝文メニュー

ページ設定にカスタムCSSコードを追加する

最後になりましたが、次にページ設定を開き、CSSコードの次の行を追加します。 

.smooth-transform-active {
height: 100vh;
width: 80%;
}

.smooth-transform {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

宣伝文メニュー

プレビュー

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

ホバーモード

デスクトップ

宣伝文メニュー

モバイル

宣伝文メニュー

Modusをクリックします

デスクトップ

宣伝文メニュー

モバイル

宣伝文メニュー

最終的な考え

この投稿では、クリック/ホバーで展開する美しい宣伝文モジュールを作成する方法を紹介しました（好みに応じて）。 これは、すべての画面サイズで応答性の高い結果を維持しながら、メニューにインタラクティブ性を追加するための優れた方法です。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。