Diviのテーマビルダーを使用した高度でエレガントなテーマのドロップダウンメニューの作成

公開: 2020-06-10

Diviのテーマビルダーが発表されて以来、Diviを使用してWebサイト全体でヘッダーとフッターをデザインする方法がこれまでになく簡単になりました。すべてをカスタマイズでき、直感的なDivi環境を離れることなく、思い描いたとおりのメニューを入手できます。さて、ある時点で、あなたは私たちのウェブサイトのエレガントなテーマのドロップダウンメニューに出くわしたかもしれません。このドロップダウンメニューは、アイコン、テキスト、CTAをクリエイティブに組み合わせたより高度なタイプのメガメニューです。これにより、訪問者は提供されているさまざまな製品を視覚的にナビゲートできます。また、小さい画面サイズで美しいネストされたメニューに変換されます。

このチュートリアルでは、Diviのテーマビルダー内でこの高度なエレガントなテーマのドロップダウンメニューを再作成する方法を紹介します。両方の長所を組み合わせます。組み込みのDivi要素を使用してドロップダウンの基盤を作成し、それをWordPressメニュー内にドロップダウンを配置するコードと組み合わせます。 JSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

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

デスクトップ

エレガントなテーマのドロップダウンメニュー

モバイル

エレガントなテーマのドロップダウンメニュー

高度なエレガントなテーマのドロップダウンメニューヘッダーレイアウトを無料でダウンロード

無料のヘッダーレイアウトを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

JSONファイルをアップロードする方法

上記でダウンロードできたzipフォルダーを解凍します。次に、WordPressWebサイト> Divi> Divi Libraryに移動し、JSONをアップロードします。

エレガントなテーマのドロップダウンメニュー

レイアウトがDiviライブラリに保存されたら、Diviテーマビルダーに移動し、[グローバルヘッダーの追加]または[カスタムヘッダーの追加]をクリックして[グローバル/カスタムヘッダーの作成]を選択することにより、保存したレイアウトをインポートできます。 Diviライブラリの[保存したレイアウト]タブに移動し、前の手順でアップロードしたレイアウトを選択して、Diviテーマビルダーの変更をすべて保存します。

エレガントなテーマのドロップダウンメニュー

すぐに機能するメニューを使用するには、以下のこのチュートリアルの最初の部分を実行する必要があります。個々のレベルのメニュー項目にCSSクラスを追加します。また、このチュートリアルのパート5に示すように、コードモジュール内のCSSクラスの1つを有効にする必要があります。

1.メニュー項目にCSSクラスを追加します

外観のメニューに移動

このチュートリアルの最初の部分では、適切なCSSクラスを使用してWordPressメニュー項目を設定することに焦点を当てています。これを行うには、WordPressダッシュボード>メニュー>新しいメニューを作成するか、既存のメニューを開きます。

エレガントなテーマのドロップダウンメニュー

CSSクラスオプションを有効にする

次に、画面の右上隅に「画面オプション」が表示されます。このオプションを切り替えて、詳細メニューのプロパティで「CSSクラス」を有効にします。これにより、CSSクラスを個々のレベルの特定のメニュー項目に追加できるようになります。

エレガントなテーマのドロップダウンメニュー

ドロップダウンが必要なメニュー項目に連続したCSSクラスを追加する

このチュートリアル全体を通して、3つの異なるドロップダウンを作成し、それぞれを特定のメニュー項目に割り当てます。そのプロセスを進めるには、ドロップダウンメニューを含める3つのメニュー項目に2つの異なるCSSクラスを割り当てる必要があります。

ドロップダウンを割り当てる最初のメニュー項目： first-level first-level-1
ドロップダウンを割り当てる2番目のメニュー項目：第1レベル第1レベル-2
ドロップダウンを割り当てる3番目のメニュー項目：第1レベル第1レベル-3

エレガントなテーマのドロップダウンメニュー

2.Diviのテーマビルダーを使用してカスタムヘッダーを作成します

Diviテーマビルダーに移動します

メニュー項目のCSSクラスが配置されたら、Diviに切り替えます。 Diviテーマビルダーに移動し、[グローバル/カスタムヘッダーの追加]を選択します。

エレガントなテーマのドロップダウンメニュー

グローバルヘッダーの作成を開始します

次に、[グローバルヘッダーの作成]を選択して、テンプレートエディターにリダイレクトします。

エレガントなテーマのドロップダウンメニュー

セクション設定

背景色

テンプレートの中に、セクションがあります。そのセクションを開き、背景色を変更します。

背景色：#ffffff

エレガントなテーマのドロップダウンメニュー

間隔

次に、デフォルトの上部と下部のセクションのパディングをすべて削除します。

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

エレガントなテーマのドロップダウンメニュー

ボックスシャドウ

また、微妙なボックスシャドウも含めます。

ボックスシャドウの垂直位置：0px
ボックスシャドウブラー強度：30px
影の色：rgba（103,151,255,0.17）

エレガントなテーマのドロップダウンメニュー

新しい行を追加

カラム構造

次の列構造を使用して、セクションに最初の行を追加して続行します。

エレガントなテーマのドロップダウンメニュー

サイジング

モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。

カスタムガター幅を使用：はい
側溝幅：1
最大幅：1440px

エレガントなテーマのドロップダウンメニュー

間隔

次に、間隔設定で上部と下部のパディング値を変更します。

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

エレガントなテーマのドロップダウンメニュー

メニューモジュールを行に追加

メニューを選択

次に、メニューモジュールを行の列に追加し、このチュートリアルの最初の部分で変更したWordPressメニューを選択します。

エレガントなテーマのドロップダウンメニュー

ロゴをアップロード

次にロゴをアップロードします。

エレガントなテーマのドロップダウンメニュー

メニューテキスト設定

デザインタブに移動し、それに応じてメニューテキスト設定を変更します。

メニューフォント：ラト
メニューフォントの太さ：太字
メニューのフォントスタイル：大文字
メニューテキストの色：rgba（32,41,47,0.62）
メニューテキストサイズ：13px
メニューの文字間隔：3px
テキストの配置：右

エレガントなテーマのドロップダウンメニュー

ドロップダウンメニューの設定

次に、ドロップダウンメニューの設定にいくつかの変更を加えます。

ドロップダウンメニューの背景色：#ffffff
ドロップダウンメニューの線の色：rgba（0,0,0,0）
ドロップダウンメニューのテキストの色：＃000000
モバイルメニューの背景色：＃f2f4f5
モバイルメニューのテキストの色：＃000000

エレガントなテーマのドロップダウンメニュー

アイコン設定

アイコンの設定だけでなく。

ショッピングカートのアイコンの色：＃000000
検索アイコンの色：＃000000
ハンバーガーメニューアイコンの色：＃ff4a9e

エレガントなテーマのドロップダウンメニュー

サイジング

そして、サイズ設定にロゴの最大高さを割り当てて、モジュール設定を完了します。

ロゴの最大高さ：64px

エレガントなテーマのドロップダウンメニュー

3.ドロップダウン要素を作成します

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

列の構造（必要なドロップダウンメニューの数に一致）

デフォルトのメニューを配置したら、ドロップダウンメニューを作成します。そのために、3つの同じサイズの列を含む新しい行を追加します。列の数は、作成するドロップダウンメニューの数と一致します。

エレガントなテーマのドロップダウンメニュー

サイジング

モジュールをまだ追加せずに、行設定を開き、それに応じてサイズ設定を変更します。

カスタムガター幅を使用：はい
側溝幅：1
幅：86％
最大幅：なし

エレガントなテーマのドロップダウンメニュー

間隔

次に、デフォルトの上下のパディングをすべて削除します。

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

エレガントなテーマのドロップダウンメニュー

CSSクラス

そして、CSSクラスを行に割り当てます。

CSSクラス：dropdown-menu-row

エレガントなテーマのドロップダウンメニュー

すべての列CSSクラス

一般的な行の設定が完了したら、各列を個別に開き、次のCSSクラスを割り当てます。

CSSクラス：dropdown-menu-column

エレガントなテーマのドロップダウンメニュー

宣伝文モジュール＃1を列1に追加します

コンテンツを追加する

モジュールを追加する時が来ました！最初の列に最初のドロップダウンメニューを作成することから始めます。さまざまな製品をすべて表示するには、Diviの宣伝文句モジュールを使用します。お好みのコンテンツを追加してください。

エレガントなテーマのドロップダウンメニュー

アイコンを選択

次に、一致するアイコンを選択します。

エレガントなテーマのドロップダウンメニュー

リンクを追加

モジュールへのリンクも追加します。

エレガントなテーマのドロップダウンメニュー

アイコン設定

[デザイン]タブに移動し、アイコン設定を次のようにスタイル設定します。

アイコンの色：＃8f42ec
画像/アイコンの配置：左
アイコンのフォントサイズを使用：はい
アイコンフォントサイズ：30px

エレガントなテーマのドロップダウンメニュー

タイトルテキスト設定

次に、タイトルテキストのスタイルを設定します。

タイトルフォント：ラト
タイトルフォントの太さ：太字
タイトルフォントスタイル：大文字
タイトルテキストの色：＃8f42ec
タイトルテキストサイズ：16px
タイトル文字の間隔：2px

エレガントなテーマのドロップダウンメニュー

本文の設定

本文と一緒に。

ボディフォント：ラト
本文の色：＃999999

エレガントなテーマのドロップダウンメニュー

サイジング

コンテンツの幅も「100％」であることを確認しています。

コンテンツの幅：100％

エレガントなテーマのドロップダウンメニュー

間隔

次に、間隔の設定に移動し、さまざまな画面サイズでいくつかの異なるパディング値を使用します。

トップパディング：15px
ボトムパディング：15px
左パディング：6％（デスクトップ）、2％（タブレット）、3％（電話）
右パディング：6％（デスクトップ）、2％（タブレット）、3％（電話）

ホバー：

トップパディング：15px
ボトムパディング：15px
左パディング：8％
右パディング：4％

エレガントなテーマのドロップダウンメニュー

アニメーション

次に、アニメーション設定でデフォルトのアイコンアニメーションを削除します。

画像/アイコンアニメーション：アニメーションなし

エレガントなテーマのドロップダウンメニュー

CSSクラス

次に、[詳細設定]タブに移動し、CSSクラスをモジュールに割り当てます。ドロップダウンメニューのすべてのモジュールには、ドロップダウンに含めるために割り当てられた同じCSSクラスが必要です。

CSSクラス：dropdown-menu-item

エレガントなテーマのドロップダウンメニュー

主な要素CSS

最後になりましたが、メイン要素で1行のCSSコードを使用してカーソルを変更することにより、モジュール設定を完了します。

cursor: pointer;

エレガントなテーマのドロップダウンメニュー

クローン宣伝文モジュールx3

最初の宣伝文句モジュールを完了したら、それを3回複製します。

エレガントなテーマのドロップダウンメニュー

コンテンツとアイコンを変更する

複製ごとにすべてのコンテンツとアイコンを変更します。

エレガントなテーマのドロップダウンメニュー

リンクの変更

リンクと一緒に。

エレガントなテーマのドロップダウンメニュー

最後の宣伝文句モジュールを1回複製する

列の最後の宣伝文句モジュールを1回複製して続行します。

エレガントなテーマのドロップダウンメニュー

背景色を追加する

複製した宣伝文モジュールの設定を開き、背景色を変更します。

背景色：＃f9f9f9

エレガントなテーマのドロップダウンメニュー

アイコン設定の変更

アイコンの設定も変更します。

アイコンの色：＃3b45eb
アイコンフォントサイズ：22px

エレガントなテーマのドロップダウンメニュー

タイトルテキスト設定の変更

タイトルテキストの設定とともに。

タイトルテキストの色：＃3b45eb
タイトルテキストサイズ：14px

エレガントなテーマのドロップダウンメニュー

コンテンツとリンクを変更する

そして、もちろん、コンテンツとリンク。

エレガントなテーマのドロップダウンメニュー

タブレットと電話で無効にする

このドロップダウンにある2番目のタイプの宣伝文句は、より大きな画面サイズでのみ表示されます。これにより、小さい画面サイズでドロップダウンメニューが圧倒されすぎないようにすることができます。小さい画面サイズでモジュールを非表示にするには、[詳細設定]タブに移動し、タブレットと電話でモジュールを無効にします。

エレガントなテーマのドロップダウンメニュー

クローン宣伝文モジュールx3

2番目のタイプの宣伝文句が完成したら、それを3回複製できます。

エレガントなテーマのドロップダウンメニュー

コンテンツとアイコンを変更する

複製ごとにコンテンツとアイコンを変更してください。

エレガントなテーマのドロップダウンメニュー

リンクの変更

リンクと一緒に。

エレガントなテーマのドロップダウンメニュー

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

コンテンツを追加する

ドロップダウンメニューに必要な最後のモジュールはテキストモジュールです。テキストモジュールはドロップダウン環境により簡単に適応するため、ボタンモジュールの代わりにテキストモジュールを使用しています。選択したコピーをいくつか追加します。

エレガントなテーマのドロップダウンメニュー

背景色

次に、背景色を変更します。

背景色：＃3776ff

エレガントなテーマのドロップダウンメニュー

テキスト設定

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

テキストフォント：Lato
テキストフォントの太さ：太字
テキストフォントスタイル：大文字
テキストの色：#ffffff
テキスト文字の間隔：3px
テキストの配置：中央

エレガントなテーマのドロップダウンメニュー

間隔

いくつかのカスタム間隔値も追加します。

トップマージン：20px
下マージン：20px
左マージン：4％
右マージン：4％
トップパディング：15px
ボトムパディング：15px

エレガントなテーマのドロップダウンメニュー

国境

次に、境界設定に丸い角を追加します。

すべてのコーナー：100px

エレガントなテーマのドロップダウンメニュー

ボックスシャドウ

微妙なボックスシャドウを有効にします。

ボックスシャドウの垂直位置：14px
影の色：rgba（0,0,0,0）（デフォルト）、rgba（0,0,0,0.09）（ホバー）

エレガントなテーマのドロップダウンメニュー

変換翻訳

ホバー時に、ボタンを少し上げます。その効果を追加するために、ホバー時にいくつかのカスタム変換変換設定を使用します。

右：-3px（ホバー）

エレガントなテーマのドロップダウンメニュー

CSSクラス

ドロップダウンの他のすべてのモジュールと同様に、このモジュールには次のCSSクラスが必要です。

CSSクラス：dropdown-menu-item

エレガントなテーマのドロップダウンメニュー

主な要素CSS

そして、メイン要素で1行のCSSコードを使用してカーソルを変更することにより、モジュール設定を完了します。

cursor: pointer;

エレガントなテーマのドロップダウンメニュー

列2と3を削除します

最初のドロップダウンメニュー列を完了したら、行設定を開いて、行の2つの空の列を削除できます。

エレガントなテーマのドロップダウンメニュー

最初の列を2回クローンする

最初の列を2回複製します。

エレガントなテーマのドロップダウンメニュー

アイテムをカスタマイズする

そして、他の2つのドロップダウンメニューのすべての項目を好きなようにカスタマイズします。

エレガントなテーマのドロップダウンメニュー

4.CSSとJQueryコードを追加します

行＃1列に新しいコードモジュールを追加

すべてのドロップダウンメニュー項目が配置されたので、それらをドロップダウンメニューに変換し、一致するメニュー項目内にドロップダウンメニューを配置します。メニューモジュールのすぐ下の最初の行にコードモジュールを追加します。

エレガントなテーマのドロップダウンメニュー

CSSコードを挿入

そして、次のCSSコードを挿入します。

<style>
  
/* Enable class below once you're done editing the menu */
  
/*
.dropdown-menu-row {
display: none;
}*/
  
</style>
<style>
  
.et_pb_menu__menu [class*="dropdown-menu-container"] {
position: absolute;
top: 75px;
left: -195px;
background-color: white;
width: 464px;
-webkit-box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
-moz-box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
border-radius: 20px;
padding-top: 20px;
padding-bottom: 5px;
visibility: hidden;
opacity: 0;
-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);     
}
  
.et_pb_menu__menu ul>li:hover [class*="dropdown-menu-container"] {
visibility: visible;
opacity: 1;
}
  
.et_pb_menu__menu [class*="dropdown-menu-container"]:before  {
position: absolute;
left: 195px;
top: -20px;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
}    
.et_mobile_menu [class*="dropdown-menu-container"] {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   
.et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
color: #FF4A9E;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.et_mobile_menu .first-level > .icon-switch:after{
content: '\21';
color: #c9c9c9;
}
  
.et_mobile_menu [class*="dropdown-menu-container"] {
display: none;
}
  
.et_mobile_menu [class*="dropdown-menu-container"].reveal-items {
display: block;
}
  
.et_mobile_menu {
width: 130%;
margin-left: -15% !important;
min-height: 100vh;
}
</style>

エレガントなテーマのドロップダウンメニュー

JQueryコードを挿入する

いくつかのJQueryコードも使用しています。以下の印刷画面に表示されているように、このコードをスクリプトタグの間に配置してください。

jQuery(function($){
$(document).ready(function(){
  
$('.dropdown-menu-column').each(function(i){
  
i = i + 1;
  
var $dropdownMenuItems = $(this).find('.dropdown-menu-item');
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdownMenuItems.wrapAll('<div class="dropdown-menu-container-' + i + '" />');
var $dropdownContainer = $('.dropdown-menu-container-' + i);
$dropdownContainer.insertAfter($mainMenuItem);
  
});
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu [class*="dropdown-menu-container"]');
$firstLevel.off('click').click(function() {
$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 
$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');
var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();
var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  
});    
    
$(".dropdown-menu-row").css('visibility','hidden');
     
$(window).load(function() {
$(".dropdown-menu-row").fadeIn(1000);
});
  
});
});

エレガントなテーマのドロップダウンメニュー

5.完了したらCSSクラスを有効にするメニューのカスタマイズ

すべてのドロップダウンアイテムのカスタマイズが完了したら、あと1つ、ドロップダウンメニューアイテムを含む行全体を非表示にする必要があります。これをコード内のロード関数と組み合わせると、ページのロード時にドロップダウンメニューが表示されなくなります。このCSSクラスを有効にすると、Visual Builder内に2番目の行は表示されなくなりますが、ワイヤーフレームモードでアクセスしたり、ドロップダウンメニューに変更を加えるときにCSSクラスを一時的に無効にしたりできます。クラスを有効にするには、CSSクラスの最初と最後にある「/ * * /」角かっこを削除します。

CSSクラス：dropdown-menu-row

エレガントなテーマのドロップダウンメニュー

6.3つ以上のドロップダウンメニューを作成する

外観のメニュー項目にCSSクラスを追加する

メニューに3つ以上のドロップダウンメニューを追加する方法を探している場合は、メニューに戻って、4番目のメニュー項目に連続するCSSクラスを追加する必要があります。

ドロップダウンを割り当てる4番目のメニュー項目：第1レベル第1レベル-4

エレガントなテーマのドロップダウンメニュー

行の終わりに列を複製する

次に、ヘッダーに戻り、最後の列のクローンを作成します。

エレガントなテーマのドロップダウンメニュー

列とモジュールのCSSクラスが適切に配置されていることを確認する

列とモジュールのCSSクラスが新しいドロップダウンメニューに配置されていることを確認してください。これで完了です。常に新しい列を新しいドロップダウンメニュー専用にし、行の列順序に従うことが重要です。これは、列1がドロップダウン1になり、列2がドロップダウン2になることを意味します。

列CSSクラス：dropdown-menu-column
モジュールCSSクラス：dropdown-menu-item

エレガントなテーマのドロップダウンメニュー

プレビュー

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

デスクトップ

エレガントなテーマのドロップダウンメニュー

モバイル

エレガントなテーマのドロップダウンメニュー

最終的な考え

このチュートリアルでは、Diviのテーマビルダーを使用して[エレガントなテーマ]ドロップダウンメニューを再作成する方法を示しました。両方の長所を組み合わせ、Diviの組み込み要素を使用してドロップダウンメニューのすべてのアイテムのスタイルを設定し、コードを使用してすべてのドロップダウンをWordPressメニュー内の一致するメニューアイテム内に配置しました。 JSONファイルも無料でダウンロードできました！ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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

Diviのテーマビルダーを使用した高度でエレガントなテーマのドロップダウンメニューの作成

プレビュー

デスクトップ

モバイル

高度なエレガントなテーマのドロップダウンメニューヘッダーレイアウトを無料でダウンロード

無料でダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

JSONファイルをアップロードする方法

1.メニュー項目にCSSクラスを追加します

外観のメニューに移動

CSSクラスオプションを有効にする

ドロップダウンが必要なメニュー項目に連続したCSSクラスを追加する

2.Diviのテーマビルダーを使用してカスタムヘッダーを作成します

Diviテーマビルダーに移動します

グローバルヘッダーの作成を開始します

セクション設定

背景色

間隔

ボックスシャドウ

新しい行を追加

カラム構造

サイジング

間隔

メニューモジュールを行に追加

メニューを選択

ロゴをアップロード

メニューテキスト設定

ドロップダウンメニューの設定

アイコン設定

サイジング

3.ドロップダウン要素を作成します

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

列の構造（必要なドロップダウンメニューの数に一致）

サイジング

間隔

CSSクラス

すべての列CSSクラス

宣伝文モジュール＃1を列1に追加します

コンテンツを追加する

アイコンを選択

リンクを追加

アイコン設定

タイトルテキスト設定

本文の設定

サイジング

間隔

アニメーション

CSSクラス

主な要素CSS

クローン宣伝文モジュールx3

コンテンツとアイコンを変更する

リンクの変更

最後の宣伝文句モジュールを1回複製する

背景色を追加する

アイコン設定の変更

タイトルテキスト設定の変更

コンテンツとリンクを変更する

タブレットと電話で無効にする

クローン宣伝文モジュールx3

コンテンツとアイコンを変更する

リンクの変更

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

コンテンツを追加する

背景色

テキスト設定

間隔

国境

ボックスシャドウ

変換翻訳

CSSクラス

主な要素CSS

列2と3を削除します

最初の列を2回クローンする

アイテムをカスタマイズする

4.CSSとJQueryコードを追加します

行＃1列に新しいコードモジュールを追加

CSSコードを挿入

JQueryコードを挿入する

5.完了したらCSSクラスを有効にするメニューのカスタマイズ

6.3つ以上のドロップダウンメニューを作成する

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。