デモサイト https://wsp-demo01.hp1.work/ で実物をご覧いただけます。

グローバルナビの仕様について

このページで説明されているサイトヘッダーをお使いになる場合、下記の範囲内でグローバルナビのメニューを作成していただくようお願いいたします。

  • メニューの数は最大4つまで
  • メニューの項目の文字数は最大6文字まで

この範囲を超えるとレイアウトがくずれる可能性があります。ご了承ください。

上記は最上位のメニューについての制約事項です。サブメニューにはこの制約はありません。

電話番号と問い合わせボタンにはプラグイン VK All in One Expansion Unit の連絡先情報に入力した内容が表示されます。

PC閲覧時にヘッダーに電話番号と問い合わせボタンを表示します。

ページ先頭を表示しているとき

ページ先頭を表示しているとき

お問い合わせボタンの色は キーカラー、電話番号の前のアイコンは カスタムカラー 1 になっています。

スクロール時

スクロール時に電話番号と問い合わせボタンがコンパクトに表示されます。

スクロール時

文言・ボタンの表記変更例

文言とボタンの表記を以下の例のように変更して使うこともできます。ボタンのアイコンは変更できません。

文言・ボタンの表記変更例

モバイルナビでも表示可能

モバイルナビ上部 または モバイルナビ下部 にも表示できます。(表示しない選択も可能です)

電話番号の下に受付時間を表示することができます。

モバイルナビでも表示可能

アイコンのカスタマイズ例

アイコンのカスタマイズ例

[カスタマイズ] → [追加 CSS] に以下のコードを追加するとアイコンを大きめにして、アイコンの色をキーカラーにすることができます。

@media (min-width: 992px) {
  .global-nav-list>li .global-nav-name {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .global-nav-list>li .global-nav-name i {
    color: var(--vk-color-primary);
    font-size: 1.25em;
  }
}

サイトヘッダーを透過にできます

以下のようにトップページのサイトヘッダーを透過にすることができます。

サイトヘッダーを透過にできます

ご相談・お問い合わせ

CONTACT US

WordPress サイト開設スターターパック
に関することならなんでもどうぞ

お電話のお問い合わせ

025-779-2843

メールのお問い合わせ