で全画面メニューを作成しますか? Elementor ? その場合は、この記事でその方法を説明します。 でフルスクリーン メニューを作成するために必要なアドオンはありません。 Elementor. あなたに必要なのは Elementorプロ.

のプロバージョンElementor が付属しています ポップアップビルダー これにより、美しいポップアップを作成できます。 この機能を使用して、Elementor でフルスクリーン メニューを作成できます。

今日話したいことがわからない場合は、このビデオをご覧ください。

Elementor でフルスクリーン メニューを作成する

Elementorでフルスクリーンメニューを作成するには?

始める前に、次のことを確認してください。 Elementorをプロバージョンにアップグレードしました. 準備ができたら、[テンプレート] -> [ポップアップ] に移動します。 [新規追加] ボタンをクリックして、新しいポップアップ テンプレートを作成します。

Elementor でフルスクリーン メニューを作成する

ポップアップ テンプレートに名前を付けて、ボタンをクリックします。 モデルの作成.

Elementor には、選択できる多数のポップアップ テンプレートが用意されています。 このチュートリアルでは、モデルをゼロから作成します。 したがって、テンプレート ライブラリを閉じるだけで、Elementor エディターが開きます。

ポップアップ テンプレートの作成を開始する前に、まずレイアウトを定義します。 これを行うには、左下隅にある歯車アイコンをクリックして、ポップアップ ウィンドウの設定を開きます。

ブロック内 レイアウト、タブの下 パラメータ、幅をに設定します VW 100台 上の高さ 画面にフィット. 入口と出口のアニメーション効果を設定することもできます。

Elementor でフルスクリーン メニューを作成する

レイアウトを定義したら、新しいセクションを追加してテンプレートの作成を開始します。 テンプレートには、必要な要素を追加できます。 メニュー項目を追加するには、ナビゲーション メニュー ウィジェットまたはアイコン リスト ウィジェットを使用できます。

参照してください: Elementorでモバイルメニューのカスタム位置を設定する方法

このガイドでは、アイコン リスト ウィジェットを使用します。

Elementor でフルスクリーン メニューを作成する

リスト内の各項目を編集します。 フィールドにメニュー項目のラベルを追加できます テキスト フィールドにリンクを追加します リンク.

Elementor でフルスクリーン メニューを作成する

タブに移動 形式 スタイルリストへ。 リスト ブロック内のリスト アイテムと配置の間のスペースを設定できます。 アイコンのサイズと色を設定するには (アイコンを使用する場合)、Icon ブロックを開くことができます。 リスト項目のタイポグラフィ (フォント サイズ、フォント ファミリ、フォント スタイル) とテキストの色を設定するには、テキスト ブロックを開きます。

必要に応じて、セクションの背景を変更できます。 ポップアップの閉じるボタンをカスタマイズするには、ポップアップ設定を再度開き、タブに移動します 形式. ブロックを開く 閉じるボタン 背景色、サイズ、位置など、閉じるボタンをカスタマイズするオプションがいくつか表示されます。

ポップアップ テンプレートの作成が完了したら、ボタンの横にある矢印アイコンをクリックします。 PUBLISH 選択 表示条件.

ボタンをクリックして、ポップアップを表示する場所を設定します 条件を追加 ボタンをクリックします トリガーを設定します。

Elementor でフルスクリーン メニューを作成する

オプションを有効にする クリック クリックします 保存して閉じる.

ポップアップ テンプレート呼び出し

ポップアップ テンプレートの準備ができたら、それを呼び出すことができます。 全画面メニューを作成したい場合は、Elementor でヘッダーを作成するか、既存のヘッダーを変更できます。

方法の詳細については、この投稿をお読みください。 Elementor でカスタム ヘッダーを作成する.

ボタン、アイコン、アイコン ボックス、テキスト、画像などのリンクを追加するオプションがある任意の Elementor ウィジェットで、作成したばかりのポップアップ テンプレートを呼び出すことができます。

このチュートリアルでは、アイコン ボックス ウィジェットを使用します。 ウィジェットを選択して編集モードに入ります。 タブの下 中身 左側のパネルで、リンクを追加するフィールドを見つけます。

リンクを動的として設定し、[ポップアップ] を選択します。

レンチ アイコンをクリックして、作成したばかりのポップアップ テンプレートを選択します。

Elementor でフルスクリーン メニューを作成する

ヘッダー テンプレートを公開/更新します。

ElementorProを今すぐ入手!!!

まとめ

ここに ! 方法を示すこの記事は以上です Elementor でフルスクリーン メニューを作成する. そこに着く方法について懸念がある場合は、以内にお知らせください commentaires.

ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi:史上最高のWordPressテーマ.

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

...