Divi：メガメニューに画像を追加する方法

を説明する画像付きの Divi Mega Menu をご希望ですか? コンテンツメニューから? Mega Menu に画像を追加する方法に関するチュートリアルに従ってください?

オンラインで画像を操作するのが大好きです。それを念頭に置いて、あなたに画像を追加することは理にかなっていますサイトのWeb いつでも可能なとき。

さらに、メガメニューに画像を追加することは、ユーザーに必要なインタラクションを提供するもうXNUMXつの絶好の機会です。

画像はまた、ナビゲーションプロセスをさらに簡素化するために注意を引くことにより、メニューを強化します。

概要

このチュートリアルに入る前に、達成したい結果を見てみましょう。

メガメニューの作成

開始するには、最初にメニューを作成する必要があります。

この例では、というメインの親メニュー項目を作成します 「メガメニュー」 以下にXNUMXつのサブメニュー項目があります。 XNUMXつのサブメニュー項目のそれぞれにXNUMXつのサブサブメニュー項目があります。

WordPressダッシュボードに移動し、をクリックします 外観>メニュー

上をクリックします 「新しいメニューを作る」、名前を付けてをクリックします 「メニューの作成」.

タブをクリックして、CSSクラスメニュープロパティを必ず有効にしてください オプション メニュー画面右上の画面と確認 CSSクラス.

これで、作成した新しいメニューにメニュー項目を追加できます。

まず、他のすべてのメニュー項目の親となるメニュー項目を作成しましょう。これは、ホバー時にメガメニューを表示するリンクです。

このメニュー項目を作成するには、次のパラメーターを使用してカスタムリンクを作成します。

URL：http：//＃
ナビゲーションタイトル：メガメニュー
CSSクラス：メガメニュー

次に、XNUMXつのメニュー項目（それぞれに独自のXNUMXつのサブ項目がある）を配置/ドラッグして、メインの親メガメニューリンクのサブ項目にします。

リンクがメニューに追加されたら、下にスクロールして'レグラージュデュメニューメニュー画面の下部にある'を選択し、 'メインメニュー' 展示場所について。最後に、 「メニューを保存」

これまでのメガメニューは次のようになります。

メガメニューに画像を追加する

メニューの準備ができたので、画像を追加します。

また読みます： DIVIでブログ投稿をフロートするにはどうすればよいですか？

画像を取得する

XNUMXつの画像を取得することから始めます。これらの画像は、XNUMXつのサブメニュー項目に関連している必要があります（について、サービスの提供、私たちの仕事とお問い合わせ).

フォトエディタを使用して、各画像を幅500ピクセル、高さ300ピクセルに縮小およびトリミングします。

これらの画像をWordPressライブラリに追加します。クリック メディア>追加.

画像をページにドラッグして追加するか、[]をクリックしますファイルを選択'

メガメニューに画像を挿入する

WordPressダッシュボードのメニューページに戻ります。

この例では、最初の列の上部にあるリンクは次のとおりです。 " 約 ".

アイテムの右側にある矢印をクリックします " 約 "。 [ナビゲーションラベル]ボックスで、htmlタグを使用して目的の画像を追加します img テキストの直前 " 約 "。画像タグは次のようになります。

<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” />

画像のURLを見つけるには、 メディア>メディアライブラリ、追加する画像をクリックします。

ポップアップ画面で 添付ファイルの詳細、右側のセクションでURLを見つけて、をクリックします 「URLをクリップボードにコピー」

次に、メニュー項目の構成に戻ります " 約 " メニューページでテキストを置き換えます 「画像のURLを挿入」 を使用して画像のURLを貼り付ける Ctrl + V.

メニュー項目の構成オプションを終了する前 " 約 "、[CSSクラス]テキストボックスを見つけて、クラス「メガリンク」を入力します。

これにより、後でカスタムスタイルを追加できるようになります。

このプロセスを繰り返して、「メガリンク」クラスの各サブメニュー項目に次のXNUMXつの画像を追加します。（この例では、残りのXNUMXつの要素は 「サービス提供」、「私たちの仕事」 et " お問い合わせ ".)

結果

あなたのにアクセスするウェブサイトメガメニューリンクにカーソルを合わせます。これで、メガメニューは次のようになります。

各画像にカーソルを合わせると、すぐ下のサブメニュー項目で画像がフェードインすることに注意してください。これは、画像がそのリンクの一部であるためです。画像をクリックすると、関連付けられたURLに移動します。

最後の仕上げ

この最後のステップでは、カスタムcssをメニューに追加して、テキストフォントを大きく中央に配置します。また、画像の周囲に境界線の半径を指定して、画像がすっきりと見えるようにします。

WordPressダッシュボードで、 Divi>テーマオプション .

[カスタムCSS]ボックスまで下にスクロールし、下にCSSを入力して、[ '変更内容を保存' :

.mega-link > a {
    text-align: center;
    font-size: 20px !important;
    text-transform: uppercase;
    font-weight: 400 !important;
    letter-spacing: 3px;
}
 
.mega-link > a img {
    margin-bottom: 8px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
 
}

最終結果

終了しました！

このチュートリアルのすべての手順を実行した場合、次のような結果が得られます。

今すぐDIVIをダウンロード!!!

まとめ

プラグインを使用しなくても、画像付きの Divi メガメニューがあります。このタイプのメニューは、特に Web サイトに適しています。 eコマースたくさん持っている人コンテンツそして製品画像が必要です。このチュートリアルがあなたの次の Divi プロジェクトに役立つことを願っています。

ウェブサイト作成プロジェクトを完了するためにさらに要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.

懸念や提案がある場合は、 コメントセクション それを議論する。

しかしその間, さまざまなソーシャルネットワークでこの記事を共有する.

...

Divi：メガメニューに画像を追加する方法