WoodMartテーマ設定スティッキーヘッダー＆透明メニューチュートリアル

ウッドマートのテーマを使うウェブサイトの構築スクロール時にメニューを一番上に表示させ、ページ上部に透明な視覚効果を表示させたいと考える人は多い。このデザインはより高度に見え、また全体的な視覚的階層を強化します。本記事では、スティッキーヘッダーの作り方をステップバイステップでご紹介します。透明メニュー初心者でもコードを書かずに簡単に設定できる。

I. スティッキーヘッダーと透明メニューとは何ですか？

タッキネスフッター(付箋ヘッダー)ユーザがページをスクロールダウンしても、ナビゲーションバーは常に画面上部に固定され、素早くナビゲーションを行うことができます。
透明メニューメニューバー自体は背景色を持っていない、背景は直接ページや他のコンテンツのトップ画像に表示され、通常、ホームページの大きな画像シーンに使用され、視覚効果は、より近代的です。

II.準備作業

最新バージョンを使用していることを確認するウッドマートのテーマビルトインのヘッダービルダーが有効になりました。この機能はスティッキーと透明効果を含むカスタムヘッダーレイアウトをサポートします。

バックエンドのパスを入力します：

WordPressバックエンド > WoodMart > ヘッダービルダー

III.スティッキーヘッダーの有効化

ヘッダービルダーを開くエディタ.
構造ビューで、現在使用しているヘッダーレイアウトを選択します。
トップエリア（Top / Main）に対応する設定エリアを探し、クリックして設定パネルを開きます。

Sticky "オプションで、"Stick on scroll "または "Slide after scrolled down "を選択します。常に張り付くか、スクロールダウン後にのみ表示されるかを選択します)。
保存をクリックし、ページを更新してプレビューする。

第四に、透明メニュー効果を設定する

透明メニューは通常、シーンの上部に大きな画像を持つホームページに適用され、メニューバーが透明でない場合、それは背景画像をカバーし、美しさに影響を与えます。設定方法は以下の通りです：

ヘッダービルダーで、現在のメインナビゲーションエリアを選択する。

背景設定を開き、「透明」を選択するか、背景色の透明度を0にする。

次に、ページエディターで（例えばエレメンタもしかしたら WPベーカリー)、ホームページの最初の画面に全幅の背景画像を追加し、コンテンツレイヤーの下に設定していることを確認してください。

トップページに透明メニューが必要な場合、ヘッダービルダーの「条件付き表示」を使って、トップページのみ透明メニューを有効にし、他のページはデフォルトスタイルを維持することができます。
デザインの準備ができたら出版表示条件の設定がポップアップ表示されます。表示条件の設定がポップアップ表示されます：

V. ナビゲーションのテキストとロゴカラーの最適化

背景が透明だからだ。ナビゲーターメニューのテキストやロゴが暗い色の場合、明るい背景では見えないことがあります。解決策は以下の通りです：

ホームページに次のようなCSSクラスを追加する。 透明ヘッダー.;
このクラスでは、ナビゲーションのテキストとロゴの色（白など）を定義します；
Sticky」状態でロゴ画像を切り替えられるので、スクロール前後のスタイルが統一される。

CSSの例：

.transparent-header .site-logo img { { {.transparent-header .site-logo img
  content: url('path/logo-white.png')；
}

.transparent-header .main-nav > li > a { <
  color: #fff; }.
}

VI. よくある問題のトラブルシューティング

ナビゲーションの粘りが効かない？ スティッキー機能がモバイルで無効になっていないか、特定のプラグインと競合していないか確認してください。
透明効果が働かない？ ナビゲーションバーがあるエリアの背景が透明に設定されていないか、他のレイヤースタイルで覆われていないか確認する。

まとめ

WoodMartは強力なカスタムヘッダー機能性、粘着性と透明ナビゲーションの視覚効果は、サードパーティのプラグインなしで簡単に実現することができます。合理的なレイアウトは、ホームページの大きな画像とスクロールスイッチの詳細な設計と一緒に、専門的で高度なウェブサイトの経験を作成することができます。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み