WordPress Diviテーマヘッダのスタイルを変更する

エレガント ThemesのDiviでは、ヘッダを左右のサイドに配置したり、通常の場合のように上部に配置することができるオプションを提供しています。 そして、いくつかの追加のオプションを提供し、様々なヘッダーを構成することができます。

[この記事は、2022年5月16日に最後に更新されました。 ]

WordPress Diviテーマヘッダスタイルを変更する方法

ヘッダスタイルを変更するには、 WordPress 管理者ページで Divi > Theme Customizer(テーマカスタマイザー) > Header & Navigation(ヘッダーとナビゲーション) > Header Format(ヘッダーフォーム)に移動するようにします。

WordPress Diviテーマ

その後、次のようなオプションを設定することができます。

ヘッダスタイル:

  • 기본
  • 中央揃え
  • 中央一列のロゴ
  • スライドの
  • フルスクリーン

加えて、 Enable Vertical Navigation(垂直ナビゲーションを有効に)を選択すると、ヘッダーがサイドに配置され、配置される位置を左右のいずれかから選択できます。

そして Hide Navigation Until Scroll(スクロール時までナビを隠す)オプションもあります。

WordPress Diviテーマヘッダのスタイルを変更

個人的には WordPress 人気のテーマの一つである BEテーマをあまり好まないが、BEのテーマは、現在290以上のデモを提供しています。 様々なデモを見ながらのヒントをもらったりします。

BeThemeのデモ中 マリーナの場合は、以下の図のようにロゴが中央に配置されており、すぐ下にメニューが表示されます。

WordPress BeTheme テーマ

そしてスクロールすると、メニューが通常のメニュースタイルのようにロゴが左に行き、メニューが右に配置されます。

WordPress 人気のテーマヘッダのスタイル

Diviで同様にメニューを構成するには、まず、 Divi>テーマ・カスタマイザー>ヘッダーとナビゲーション>ヘッダフォームから ヘッダスタイルを「中央揃え」に設定します。

WordPress ディビテーマヘッダのスタイルを変更

その後、次のCSSコードを Divi>テーマオプション>一般的なに移動し、 ユーザーカスタムCSS 部分に追加します。

.et-fixed-header .logo_container { float: left; }
.et-fixed-header #et-top-navigation {float: right;width: 50% !important; margin-top: 20px;}

その後、サイトをロードすると、ロゴが中央に配置されてすぐ下にメニューが表示されます。 そして、マウスをスクロールすると、ロゴは左に、メニューは右に移動して配置されます。

他にもDiviメニューに関連して、以下の記事を参考にみることができます。

メモ:


コメントを残す

*メールアドレスは公開されません。