Elementorでスティッキーフッターナビゲーションを作成する方法:完全な実裝とカスタマイズガイド

Elementorでスティッキーフッターナビゲーションを作成する方法:完全な実裝とカスタマイズガイド - Photon Fluctuation Network|WordPress 修理サービス、プロフェッショナル、ワールドワイド、迅速対応
Elementorでスティッキーフッターナビゲーションを作成する方法:完全な実裝とカスタマイズガイド
この記事は有料です。
9.88
今すぐ購(gòu)入
現(xiàn)在ログインしていません!ご注文を保存するにはログインすることをお?jiǎng)幛幛筏蓼埂?/div>
有料読み物
売約済み 756

Elementorに実裝 フッターナビゲーション(フッターメニュー)は、カスタムレイアウトといくつかの巧妙な設(shè)定で実現(xiàn)できます。これは、スティッキー効果とユーザーインターフェイスを組み合わせたソリューションです:

  • スティッキーフッター:ページがスクロールすると、ナビゲーションバーが上部ではなく下部に表示されます。
  • ブランディングはヘッダーにあります:ページ上部にはブランド名のみが表示されます。

がインストールされていることを確認(rèn)してください。無(wú)料版歌で応えるプロ版Elementor(カスタマイズ可能なCSS)私たちは、インストール手順を提供します。テーマオプション こんにちはエレメンタールもしかしたらアストラおよびその他のelementor互換テーマがあります。

実現(xiàn)ステップ:

畫(huà)像 [1] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル

1.粘著性のあるフッターナビゲーションの作成

1.1 フッターテンプレートの作成

変更したいページを選択するか、または テンプレート > テーマビルダー 新しいフッターテンプレートを作成します。

畫(huà)像[2] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル

新しいフッターテンプレートを作成すると、すべてのページで同じデザインが使用されます。こうすることで、他のページで変更を加えても、フッターのスタイルやコンテンツは影響を受けず、サイト全體で統(tǒng)一されたスタイルを保つことができます。フッターエリアは個(gè)別に管理できます。

畫(huà)像[3] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル

新しいフッターを作成し、既存のフッターと干渉するようなフッターブロックを挿入しないでください。

畫(huà)像[4] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル

1.2 フッターの作成

新しいコンテナを追加します:フッターテンプレートを挿入したい場(chǎng)所で、ページコンテンツエリアのプラス記號(hào)をクリックして、新しい コンテナ.

畫(huà)像[5] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル
畫(huà)像[6] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル

このセクションに必要なナビゲーション要素を追加します。メニューそして探すそしてホームページそしてブックマーク 歌で応える マイアカウント などの機(jī)能など。

  • ナビゲーション項(xiàng)目を追加しやすくするために、2列以上の構(gòu)造に設(shè)定します。
ユーザーエクスペリエンスの向上:Elementorでモバイルフレンドリーなスティッキーフッターナビゲーションを作成

代表例もしEコマースサイトのフッターナビゲーションをスティッキーにする方法左の列は、"ホームページ「アイコンの右列カート「アイコンをクリックすると、重要なページに簡(jiǎn)単にアクセスできます。

1.3 梱包調(diào)整

カラムが追加されましたが、ナビゲーションの美しさのために、各コンテナは同じサイズにする必要があります。

例えば、4つの列を追加します。

畫(huà)像[8] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル

つまり、大きなコンテナ1個(gè)に小さなコンテナが4個(gè)(1個(gè)を4分割)入っているので、大きなコンテナや小さなコンテナを設(shè)置することが可能です。

一般的に使用されているコンテナのサイズ変更ユニット px(ピクセル)、%(比率)、上図の各小容器が占める割合は以下の通り。25%.

大きなコンテナが選択され、左サイドバーにコンテナメニューが表示されます。

畫(huà)像[9] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル

コンテナメニューの理解

  • アドバンス
畫(huà)像[10] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル

レスポンシブ:デスクトップ、タブレット、モバイルで追加したものを非表示に設(shè)定できます。

コンテナメニューは主にレイアウト(Layout)、スタイル(Style)、アドバンス(Advanced)で構(gòu)成されています。

  • レイアウト
畫(huà)像[11] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル
  • スタイル
畫(huà)像[12] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル

小さなコンテナを個(gè)別にチェックすると集合の要素つまりウィジェットそういうことです。

次に構(gòu)造についてですが、構(gòu)造を明確に理解することで、異なるコンテンツを選択したときに異なる編集が表示されるようになります。

畫(huà)像[13] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル

今度こそは フッターナビゲーション想像してみてください。

畫(huà)像[14] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル
畫(huà)像[15] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル

お問(wèn)い合わせ
チュートリアルが読めない?無(wú)料でお答えします!個(gè)人サイト、中小企業(yè)サイトのための無(wú)料ヘルプ!
カスタマーサービス WeChat
カスタマーサービス WeChat
電話:020-2206-9892
QQ咨詢:1025174874
Eメール:info@361sale.com
勤務(wù)時(shí)間: 月~金、9:30~18:30、祝日休み
? 複製に関する聲明
この記事はハリーが執(zhí)筆しました。
終わり
好きなら応援してください。
クドス0 分かち合う
解説 ソファ購(gòu)入

コメントを投稿するにはログインしてください

    コメントなし