ヘッダーに電話番号とボタンを追加したカスタマイズ例③

この記事はアフィリエイト広告を利用しています。

Lightning 無料版でヘッダーに電話番号とボタンを追加したカスタマイズ例の第3弾です。

パソコンでの表示

  • 電話番号とボタン
  • グローバルナビ (2行で表示)

横並びにレイアウトしてあり、画面幅に応じて電話番号とボタンのレイアウトが以下のように自動的に切り替わります。

画面幅に応じて電話番号とボタンのレイアウトが自動調整されます。

2023.3.29 スクロール時に電話番号とボタンを表示する仕様を追加しました。見た目のバランスを考えてボタンを先頭に配置してあります。(下図参照)

スクロール時に電話番号とボタンを表示する仕様を追加しました。

スマホでの表示

モバイルナビの先頭に表示されます。

スマホでの表示

メニューボタンのアイコンを飲食店をイメージしたデザインにしてあります。

お客様側でかんたんに変更できます

電話番号とボタンの部分はパソコン表示・スマホ表示で共通の固定ページで作ってありますので、ブロックエディターを使ってのビジュアル編集が可能です。

HTML/CSS を意識することなく、文言・書式の変更、ボタンの色やアイコン・リンク先の変更をお客様側でかんたんに行っていただけます。

例えば以下のように、キャンペーンを行う場合等にご活用いただけます。

お客様側でかんたんに変更できます

2023.3.25 追記 表示する固定ページを編集する画面

編集画面は以下のようになっています。

表示する固定ページの編集画面

表示するパターンを複数登録しておいて、どれを表示するかを選べますので、かんたん・瞬時に切り替えできます。

2023.4.14 デザインを手直し

Lightning のデザインスキン Origin III では現在表示されているページ(の祖先)のメニュー項目に下ボーダーが表示される仕様になっていますが、このカスタマイズ例のようにグローバルナビを2行で表示するとこの下ボーダーが表示されない方がよいので、そのようにデザインを手直ししました。

2023.4.14 デザインを見直し

関連記事

扉が開閉するような立体的な動きのハンバーガーメニュー(メガメニュー) | Lightning G3 無料版 / VK Blocks / WordPress のカスタマイズ【デモ館②】

メニュー部分をブロックエディターでビジュアル編集する仕様にしてありますので、柔軟にかんたんにお好みのデザイン・レイアウトにすることができます。

ヘッダーに電話番号とボタンを追加したカスタマイズ例 - Lightning 無料版

電話番号とボタンの部分は固定ページで作ってあり、文言の変更、ボタンの色やリンク先の変更をお客様側でかんたんに行っていただけます。

ヘッダーに電話番号とボタンを追加したカスタマイズ例②

電話番号とボタンの部分は固定ページで作ってあり、文言の変更、ボタンの色やリンク先の変更をお客様側でかんたんに行っていただけます。グローバルナビをページヘッダー…

ヘッダーに電話番号とボタンを追加したカスタマイズ例④

VK お問い合わせ セクション をウィジェットに配置してヘッダーに表示するやり方を採用しています。

弊社 (魚沼情報サービス) ではこのようなカスタマイズのお仕事をお引き受けしています。
デザイン・仕様について、お客様のご要望に合わせてカスタマイズいたします。
無料で費用見積りいたしますので、お気軽にお問い合わせください。

【参考】有料プラグイン Lightning G3 Pro Unit

有料のプラグイン Lightning G3 Pro Unit を使うと、難しいカスタマイズ(コーディング)をせずに、ヘッダーに電話番号とボタンをかんたんに追加できます。(下図参照)

Lightning G3 Pro ヘッダー設定

「カスタマイズの手間はかけたくない」または「カスタマイズが苦手」という方は、予算が許せば Lightning G3 Pro Unit が含まれるサブスクリプション製品「Vektor Passport」の購入を検討した方がいいかもしれません。

対馬

【補足】この記事のようにレイアウトすることは Lightning G3 Pro Unit の設定だけではできませんので、追加のカスタマイズ(コーディング)が必要です。

Lightning G3 Pro Unit の入手方法

Lightning G3 Pro Unit は有料の WordPress プラグインですが、単体では販売されていなくて、Vektor Passport というライセンス製品に含まれて販売されています。

Vektor Passport は、コピペで使える豊富なプロ品質プレミアムパターン、Lightning G3 Pro Unit、VK Blocks Pro を好きなだけ使える大変お得なライセンス製品です。ライセンス1つで自分が制作・管理する複数のサイトに使うことができます。ライセンス期間は 1年 / 3年 / 5年 から選べます。

Vektor Passport(ライセンス期間1年)
Vektor Passport(ライセンス期間3年)
Vektor Passport(ライセンス期間5年)

投稿者プロフィール

対馬 俊彦
対馬 俊彦魚沼情報サービス (新潟県南魚沼市)
WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

このサイトで行っているカスタマイズのやり方の多くもマンツーマンのオンラインレッスン形式などでわかりやすく説明させていただくことができますので、興味がある方はご連絡ください。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

また、制作業者様のサイト制作のお手伝いも数多く行っております。いま人手が足りない、ちょっとここだけコーディングを頼みたい、等々… お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り(無料)を提示させていただきますので、お気軽にお問い合わせください。

» ご相談・お問い合わせはこちらからどうぞ

WordPress / Lightning オンラインサポートのご案内

サイトをご覧いただき、ありがとうございます。このサイトを運営している、魚沼情報サービスの対馬です。

WordPress を使用したサイト制作・カスタマイズ・サポートを全国どこからでも承っています。ベクトルが開発している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン (VK Blocks Pro ・ VK Filter Search Pro) を使ったサイト制作・カスタマイズを最も得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを開設・運用する上で、うまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

* 近くに頼りになるところがない
* わからないところを教えてほしい
* 専門家にサイト制作を手伝ってもらいたい
という方はぜひお気軽にご相談ください。

ご要望をうかがった上で費用見積り(無料)を提示させていただきます。