ベストセラー人気 WordPress テーマTop 30 詳細

Elegant ThemesのDiviでメガメニューの作成

Last Updated:2020年11月14日| 1のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

Diviでメガメニュー(Mega Menu)作成

Avada, Enfold, Newspaper などいくつかの有料テーマにメガメニュー機能が内蔵されており、メニュー項目をクリックしたときにメニューが表示されるように作成されたメガメニューを実装することができます。 Elegant ThemesのDiviでも簡単にメガメニューを作成することができます。

Diviでメニューメニューを作成するプロセスを簡単にまとめてみると次のとおりです:

  1. テーマのデザイン>メニューに移動します。 (WordPress バージョンに応じて、「テーマのデザイン "の代わりに"外見 "という用語が使用されることがあります。)
  2. 右上部にある 「画面のオプション」(Screen Options)をクリックして、 詳細設定]メニューのプロパティを表示 下の "CSSクラス」をチェックします。
    WordPress 画面のオプション
  3. メガメニュー形式で表示最上位のメニュー項目から「CSSクラス"に"メガメニュー"を追加します。
    Diviテーマメガメニュー
  4. これで、メニュー項目がメガメニューで動作します。
    Diviにメガメニューを追加する

実際の動作は、 ここで確認することができます。 上記のプロセスは、次の動画で説明されているので参照してください:

ちなみに、メニュー項目にアイコンを追加する方法は、次の機会に説明します。

メガメニューをサポートしていないテーマの場合、プラグインを使用してメガメニュー機能を実装することができます。

Enfold テーマでメガメニューを使用する

人気のテーマである Enfold テーマでも簡単にメガメニューを構成することができます。 Enfoldは ルックス>メニューで、メニュー項目の 「Use as Mega Menu」(メガメニューに使用) オプションをクリックします。

Enfold メガメニューを使用する

これにより、次のようにMega Menuが動作します。

Enfold Mega Menuを使用する

次の動画を参照してみてください。 (Enfold メガメニュー項目にイメージを追加する方法も説明しています。)

Avada テーマでメガメニューを使用する

WordPress 有料テーマの中で最も多く販売されているベストセラーのテーマである Avada(Avada)もメガメニュー機能はデフォルトで組み込まれています。 Avadaテーマオプションでメガメニュー設定を構成することができます。

Avada メガメニュー

そして、実際のメニューにメガメニュー機能を追加するには、外観>メニューから目的のメニューの1次のメニュー項目に表示される "Avada Options "をクリックします。

Avada メガメニューオプション

Avada Optoinsをクリックすると、メニューオプションが表示されます。 下部の Fusion Mega Menuのオプションを "On"に設定すると、追加で 「Full Width Mega Menu」(全幅メガメニュー)、メガメニューカラム数、Mega Menu Thumbnail(メガメニューサムネイル)という隠されたオプションが表示されます。

Avada メニューオプション

メガメニューオプションは、1次のメニュー項目(最上位のメニュー項目)のみの構成が可能です。

メモ:



1のコメント

コメント

  1. Diviテーマのメガメニューにハンバーガーのアイコンを追加する方法についての次の記事で確認することができます。

    https://www.thewordcracker.com/basic/divi-%ED%85%8C%EB%A7%88%EC%9D%98-%EB%A9%94%EA%B0%80-%EB%A9%94%EB%89%B4%EC%97%90-%ED%96%84%EB%B2%84%EA%B1%B0-%EC%95%84%EC%9D%B4%EC%BD%98-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0/

    応答