WordPressランディングページの作成方法

LIQUID PRESS INFORMATION

ランディングページ(LP)の作り方、設定方法をご紹介します。
Gutenberg対応「LIQUID LP」WordPressテーマでは、本格的なLPを簡単に作成することができます。

対象テーマ

一般/SEO/SNS設定

ここではランディングページに特化した設定についてご紹介します。
サイト全般の一般的な設定については、テーマ設定マニュアルをご覧ください。

ランディングページマニュアル

管理画面>外観>テーマのサポート からランディングページマニュアルPDFをご覧頂けます。
PDFでは、LPの運営方法やPDCAのヒントが掲載されています。作成方法についてはこのページをご覧ください。

Gutenberg

ビジュアルエディターGutenbergによる記事作成、複製方法等について
詳しくはGutenbergの使い方をご覧ください。

レイアウト

管理画面>外観>カスタマイズ>レイアウト から設定します。

レイアウト


サイトのレイアウトについて2カラム/1カラムを選択できます。
※LPテンプレートは1カラムになります。

ヘッダーボタン

LPのヘッダーにボタンを自動表示する/しないを選択できます。
LP内の最初のボタンブロックと同じ内容がヘッダーに自動表示されます。

ヘッダーメニュー自動表示

LPのヘッダーにメニューを自動表示する/しないを選択できます。 自動表示する場合、LPで 高度な設定>HTML アンカー を設定した見出し2(H2)がページ内リンクとして表示されます。 HTML アンカーは半角英数字で指定します。見出し3以降は設定してもヘッダーメニューには表示されません。 自動表示しない場合、およびLPテンプレート以外のページでは、管理画面>外観>メニュー の内容が表示されます。
ヘッダーの背景やテキストカラーは色設定で変更できます。

ヘッダータイトルのリンク先

LPのヘッダータイトル(ロゴ)のリンク先について、サイトTOPかページTOPを選択できます。
ページTOPを選択した場合は、ページ内の最上部までスクロールします。

アイキャッチ画像

投稿/固定ページ内にアイキャッチ画像を表示する/しないを選択できます。
また、一覧ページにアイキャッチ画像を表示する/しないを選択できます。
※LPテンプレート内には表示されません。

固定表示するページのタイトル

TOPページの固定表示セクションのタイトルを指定できます。
※LPテンプレート内には表示されません。

固定表示するページのタグ

TOPページに固定表示する投稿or固定ページのタグのスラッグを指定します。
3件以上ある場合は改行して表示されます。表示順は日付の新しい順です。
投稿または固定ページに指定したタグを付けると自動的に表示されます。
タグの名前が「サービス」、タグのスラッグが「service」の場合、「service」を指定します。

新着記事表示

TOPページに新着記事の一覧を表示する/しないを選択できます。
※LPテンプレート内には表示されません。LPテンプレートでは、Gutenbergで「最新の記事」ブロックを作成できます。

LPテンプレート(固定ページ)

ランディングページは固定ページで作成/管理できます。
ランディングページを作成する場合は、固定ページの属性>テンプレート「LP」を選択します。
TOPページに設置する場合はこちらをご覧ください。

テンプレート:LP

  • デフォルトテンプレート:通常の固定ページ
  • LP:ランディングページ

サンプルページのインポート

LPのサンプルページをインポートして利用することができます。
サンプルファイル「liquid-lp-sample.zip」をダウンロードして、解凍します。

1. 管理画面>ツール>インポート>WordPress インポーターの実行 から解凍した「liquid-lp-sample.xml」を選択して「アップロードしてインポート」を押下します。
※「今すぐインストール」と表示される場合は、WordPressインポートツールをインストールします。 2. インポートする投稿者:既存のユーザーを選択し、「添付ファイルをダウンロードしてインポートする」にチェックして「実行」を押下します。
3. 管理画面>固定ページ に3種類の下書きがインポートされています。編集して公開してください。
写真は含まれていません。固定ページから設定してください。

ランディングページ(プロダクト)

ランディングページ(リード)

ランディングページ(サービス)

LPの作成方法

主なブロック

カバー(lp-cover)

LPのメインビジュアルを追加します。画像をアップロードまたはメディア一覧から画像を選択します。
様々なオプションがありますので、詳しくはオプション設定をご覧ください。

ボタン(lp-button)

ボタンとそのリンク先を追加します。ボタンの背景色と文字色はサイドバーから設定することができます。
カラム(lp-buttons)と組み合わせることで、複数のボタンを横に並べることができます。

電話番号は、下記のようにリンク先を設定することで発信リンクを付けることができます。 なお、ユーザーの端末の仕様や設定によっては発信できない場合があります。 tel:0000000000

カラム

段組みレイアウトを追加します。料金表、バナー、フロー、よくある質問等を作成することもできます。
様々なオプションがありますので、詳しくはオプション設定をご覧ください。

フォームの設定

お問い合せフォームの設定方法について詳しくはこちらをご覧ください。

オプション設定

高度な設定>「追加 CSS クラス」を追加することで様々なオプションを設定できます。
サンプルページではあらかじめ設定されています。

追加 CSS クラス

オプション一覧

ブロック CSS クラス オプション 効果
カバー lp-cover lp-skew 画像の下部が斜めになります。
lp-loop カバー内の太字テキストをカンマで区切ると、テキストが順に切り替わります。
lp-big 大きく表示されます。
lp-anime 画像の透明度がアニメーションします。
lp-head-static ヘッダー固定表示が解除されます。
ボタン lp-button 立体的なボタンになります。
カラム lp-buttons ボタンを横に並べる際に使用します。
lp-item LPに最適なデザインになります。
lp-plan 料金表のデザインになります。
lp-banner バナーを横に並べる際に使用します。
lp-step フローを示すデザインになります。
lp-faq よくある質問のデザインになります。
メディアと文章 lp-media LPに最適なデザインになります。
リスト lp-list LPに最適なデザインになります。
テーブル lp-table LPに最適なデザインになります。
段落 lp-circle-item 丸いアイテムになります。
icon-* アイコンフォントを表示します。
アイコンのみ表示する場合は本文に半角スペースを入力します。
共通 huwa スクロールでふわっと表示します。
shadow 影を付けます。
border ボーダーを付けます。
rounded 角丸にします。
※共通のオプションは、ブロックやその内容によって対応できない場合があります。

表示ユーティリティ

表示ユーティリティ(スマホでは非表示の要素など)も設定することができます。

Bootstrap 4

LIQUID PRESS テーマは、Bootstrap 4 のCSSクラスにも対応しております。
使用可能なCSSクラスについて詳しくは下記をご覧ください。
https://getbootstrap.com/docs/4.1/getting-started/introduction/

ホームページ設定

管理画面>設定>表示設定>ホームページの表示 から、TOPページにするLP(固定ページ)を選択できます。

  • ホームページ:選択したページがTOPページになります。
  • 投稿ページ:選択したページが新着記事一覧ページになります。

記事型LP

ブログ記事コンテンツのような、読み物型のランディングページを作成することもできます。
記事型LPは、通常の「固定ページ」または「投稿」で記事を作成します。
記事作成について詳しくはGutenbergの使い方をご覧ください。

吹き出しブロック

WordPress公式プラグイン「LIQUID SPEECH BALLOON」を利用して、会話型の吹き出しブロックを簡単に作成することができます。
ユーザーを引きつける共感型コンテンツとして効果的です。 詳しくは LIQUID SPEECH BALLOON をご覧ください。

Web接客ツール

WordPress公式プラグイン「LIQUID CONNECT」を利用して、ポップアップバナーやランダムバナー、A/Bテストを行うことができます。
ランディングページのコンバージョン向上に効果的です。 詳しくは LIQUID CONNECT をご覧ください。

LIQUID PRESS

» WordPressテーマ一覧

PageTop