ランディングページを作るのはけっこうめんどう

一部のテーマを除き、WordPress の固定ページでランディングページを作るのはけっこうめんどくさいです。

その理由は、WordPress の固定ページにはランディングページに不要な以下の部分が表示されるからです。

• ヘッダー (ロゴ・ナビゲーション・バナー・ページタイトル・パンくずリスト など)
• サイドバー
• フッター

例えばこのサイトでは以下の部分が該当します。

このサイトで使用しているテーマ Lightning Pro は最近のバージョンになってかんたんにランディングページを作ることができるようになりましたので、そのやり方を紹介します。

ランディングページの作り方 (テーマ Lightning Pro)

以下のテーマ、プラグインを使用します。バージョンは2020年5月12日時点の最新のものです。

• テーマ Lightning Pro 4.6.0 (有料)
• プラグイン VK Blocks Pro 0.27.4 (Lightning Pro が必要)
• プラグイン VK All in One Expansion Unit 9.18.1.0

Lightning Pro

Landing Page テンプレートは使いません

BizVektor テーマの頃から Lightning の少し前のバージョンまでは、テンプレートとして Landing Page を指定していましたが、最新版の Ligntning では非推奨 (not recommended) になりましたので、このテンプレートは使いません。

VK All in one Expansion Unit 有効化設定

• CSSカスタマイズ を有効にしておきます。

文書の Lightning デザイン設定

作成するランディングページで、文書の Lightning デザイン設定を以下のようにします。

• レイアウト設定を 1カラム (サブセクション無し) にする。
• ページヘッダーとパンくずリスト の 表示しない にチェックをつける。
• 余白設定 の siteContentの上下余白を無しにする にチェックをつける。

VK All in One Expansion Unit の設定

作成するランディングページで、VK All in One Expansion Unit の設定を以下のようにします。

• ソーシャルボタンを表示している場合は、シェアボタンの非表示設定の ソーシャルボタンを表示しない にチェックをつける。
• カスタムCSS に以下のように入力する。
  header.siteHeader { display:none; }
  footer.siteFooter { display:none; }
  body.device-mobile .vk-mobile-nav-menu-btn { display:none; }
  .mobile-fix-nav { display:none; }

コンテンツの作り方について

ランディングページはインパクトが大きい派手なデザインにしたいところですが、VK Blocks Pro の ブロックテンプレート を使うとコンテンツ制作作業が捗ります。

ブロックテンプレート機能（Pro版のみ）

ランディングページの制作例

上記のやり方で作ったランディングページがこちらです。(上記の手順以外にもいろいろやってますが・・・)

Zoom オンラインレッスン 全国どこでも自宅がパソコン教室に

ホームページでお困りのこと、お気軽にご相談ください

効果が出るホームページを格安料金で制作いたします。リニューアル、スマホ対応、SNS連携、SEO対策、常時SSL化などもおまかせください。ホームページのちょっとしたデザイン変更や表示不具合の修正、更新作業のお手伝いもしています。

お困りのこと、なんでもお気軽にご相談ください。

ご相談・お問合せはこちら