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

FacebookさえずりredditPinterestのLinkedInのmail

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

ワードプレスDiviテーマヘッダスタイルを変更する方法

ヘッダスタイルを変更するには、ワードプレスの管理ページで、 Divi>テーマ・カスタマイザー>ヘッダーとナビゲーション>ヘッダフォームに移動するようにします。

ワードプレスDiviテーマ

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

ヘッダスタイル:

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

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

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

ワードプレスDiviテーマヘッダのスタイルを変更

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

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

ワードプレスBeThemeテーマ

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

ワードプレスの人気のテーマのヘッダーのスタイル

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

ワードプレスディビテーマヘッダのスタイルを変更

その後、次の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メニューに関連して、以下の記事を参考にみることができます。

注:



コメントを残す