Elementorに実裝 フッターナビゲーション(フッターメニュー)は、カスタムレイアウトといくつかの巧妙な設(shè)定で実現(xiàn)できます。これは、スティッキー効果とユーザーインターフェイスを組み合わせたソリューションです:
- スティッキーフッター:ページがスクロールすると、ナビゲーションバーが上部ではなく下部に表示されます。
- ブランディングはヘッダーにあります:ページ上部にはブランド名のみが表示されます。
がインストールされていることを確認(rèn)してください。無(wú)料版歌で応えるプロ版Elementor(カスタマイズ可能なCSS)私たちは、インストール手順を提供します。テーマオプション こんにちはエレメンタールもしかしたらアストラおよびその他のelementor互換テーマがあります。
実現(xiàn)ステップ:
![畫(huà)像 [1] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル](http://gqxi.cn/wp-content/uploads/2024/10/20241029153214893-image.png)
1.粘著性のあるフッターナビゲーションの作成
1.1 フッターテンプレートの作成
変更したいページを選択するか、または テンプレート > テーマビルダー 新しいフッターテンプレートを作成します。
![畫(huà)像[2] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル](http://gqxi.cn/wp-content/uploads/2024/10/20241025153208953-image.png)
新しいフッターテンプレートを作成すると、すべてのページで同じデザインが使用されます。こうすることで、他のページで変更を加えても、フッターのスタイルやコンテンツは影響を受けず、サイト全體で統(tǒng)一されたスタイルを保つことができます。フッターエリアは個(gè)別に管理できます。
![畫(huà)像[3] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル](http://gqxi.cn/wp-content/uploads/2024/10/20241026104943710-image-1024x446.png)
新しいフッターを作成し、既存のフッターと干渉するようなフッターブロックを挿入しないでください。
![畫(huà)像[4] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル](http://gqxi.cn/wp-content/uploads/2024/10/20241026110001601-image-1024x539.png)
1.2 フッターの作成
新しいコンテナを追加します:フッターテンプレートを挿入したい場(chǎng)所で、ページコンテンツエリアのプラス記號(hào)をクリックして、新しい コンテナ.
![畫(huà)像[5] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル](http://gqxi.cn/wp-content/uploads/2024/10/20241026110227312-image-1024x405.png)
![畫(huà)像[6] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル](http://gqxi.cn/wp-content/uploads/2024/10/20241025162353655-image-1024x471.png)
このセクションに必要なナビゲーション要素を追加します。メニューそして探すそしてホームページそしてブックマーク 歌で応える マイアカウント などの機(jī)能など。
- ナビゲーション項(xiàng)目を追加しやすくするために、2列以上の構(gòu)造に設(shè)定します。

代表例もしEコマースサイトのフッターナビゲーションをスティッキーにする方法左の列は、"ホームページ「アイコンの右列カート「アイコンをクリックすると、重要なページに簡(jiǎn)単にアクセスできます。
1.3 梱包調(diào)整
カラムが追加されましたが、ナビゲーションの美しさのために、各コンテナは同じサイズにする必要があります。
例えば、4つの列を追加します。
![畫(huà)像[8] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル](http://gqxi.cn/wp-content/uploads/2024/10/20241026113053189-image-1024x435.png)
つまり、大きなコンテナ1個(gè)に小さなコンテナが4個(gè)(1個(gè)を4分割)入っているので、大きなコンテナや小さなコンテナを設(shè)置することが可能です。
一般的に使用されているコンテナのサイズ変更ユニット px(ピクセル)、%(比率)、上図の各小容器が占める割合は以下の通り。25%.
大きなコンテナが選択され、左サイドバーにコンテナメニューが表示されます。
![畫(huà)像[9] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル](http://gqxi.cn/wp-content/uploads/2024/10/20241026114237441-image-1024x474.png)
コンテナメニューの理解
- アドバンス
![畫(huà)像[10] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル](http://gqxi.cn/wp-content/uploads/2024/10/20241026142823199-image.png)
レスポンシブ:デスクトップ、タブレット、モバイルで追加したものを非表示に設(shè)定できます。
コンテナメニューは主にレイアウト(Layout)、スタイル(Style)、アドバンス(Advanced)で構(gòu)成されています。
- レイアウト
![畫(huà)像[11] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル](http://gqxi.cn/wp-content/uploads/2024/10/20241026120049702-image-1024x478.png)
- スタイル
![畫(huà)像[12] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル](http://gqxi.cn/wp-content/uploads/2024/10/20241026120558357-image-1024x377.png)
小さなコンテナを個(gè)別にチェックすると集合の要素つまりウィジェットそういうことです。
次に構(gòu)造についてですが、構(gòu)造を明確に理解することで、異なるコンテンツを選択したときに異なる編集が表示されるようになります。
![畫(huà)像[13] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル](http://gqxi.cn/wp-content/uploads/2024/10/20241026161047976-image-1024x435.png)
今度こそは フッターナビゲーション想像してみてください。
![畫(huà)像[14] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル](http://gqxi.cn/wp-content/uploads/2024/10/20241029112329647-image.png)
![畫(huà)像[15] - Elementorでスティッキーフッターナビゲーションを?qū)g裝する方法:カスタムレイアウトのヒントと詳細(xì)なチュートリアル](http://gqxi.cn/wp-content/uploads/2024/10/20241029112835225-image.png)
お問(wèn)い合わせ | |
---|---|
チュートリアルが読めない?無(wú)料でお答えします!個(gè)人サイト、中小企業(yè)サイトのための無(wú)料ヘルプ! |
![]() カスタマーサービス WeChat
|
① 電話:020-2206-9892 | |
② QQ咨詢:1025174874 | |
三 Eメール:info@361sale.com | |
④ 勤務(wù)時(shí)間: 月~金、9:30~18:30、祝日休み |
この記事へのリンクhttp://gqxi.cn/ja/2570この記事は著作権で保護(hù)されており、必ず帰屬表示を付けて複製してください。
コメントなし