


フキダシで会話形式にするWordPressプラグイン「LIQUID SPEECH BALLOON」

Gutenberg対応!おしゃれなランディングページが作れるWordPressテーマ

前回紹介しましたランディングページ(LP)向けWordPressテーマ「LIQUID LP」。
Gutenberg対応!おしゃれなランディングページが作れるWordPressテーマ
このWordPressテーマ「LIQUID LP」では簡単にランディングページ(LP)が作れます。htmlなどの知識がなくてもランディングページ(LP)を簡単に作れるように3つのサンプルページが搭載されています。
※但し、WordPressのエディター「Gutenberg」の使い方はある程度知っておく必要があります。
さて、ではどんなランディングページ(LP)のサンプルページがあるのか。また、どんなときに便利なのかなどご紹介させていただきます。
WordPressテーマ「LIQUID LP」のサンプルページでは、
WordPressテーマ内にランディングマニュアルもあります。
それぞれの目的に合わせて構成されたページになりますが、例えばWordPressテーマ「LIQUID LP」のサンプルページ「プロダクト」に問い合わせを追加したい場合でも他ページ同様に追加もできますし、組み合わせはどのページでも可能になっています。
このサンプルページ「プロダクト」は、商品の紹介に適したレイアウト。最後にお知らせを表示されています。
こちらは広告宣伝に対する消費者の心理プロセスを示したAIDMAで構成されています。
サンプルページ「リード」は見込み顧客獲得に適したレイアウト。角丸オプションを使用しています。またプラグインを使うことで最後にフォームを表示することもできます。
こちらは商品販売ページやセールスレータのフレームワークPASONAの法則で構成されています。
サンプルページ「サービス」は、名の通りでサービス紹介に適したレイアウト。シャドウオプションを使用しています。こちらもリードのと同様、最後にフォームを追加することができます。
サンプルページの配色デザインを変えただけでも雰囲気が異なります。試しに女性やかわいい向きに「ピンク」とクールで落ち着いたサイト向きに「ブラック」を作ってみました。そのままのサンプルページと3つを比較したものです。
配色を変えるだけで雰囲気が異なっているのがよくわかります。
テーマのカスタマイズの色を変えるだけで全体の配色を変更してくれるので簡単です。
念の為、サンプルページをインポートし下書きから公開し変更したところは下記の通りです。
まずは、ランディングページ用WordPressテーマ「LIQUID LP」のZipファイル「liquid-lp.zip」と一緒にサンプルページ用Zipファイル「liquid-lp-sample.zip」をダウンロードをしておきます。
そしてWordPressテーマ「LIQUID LP」を有効化します。
サンプルページ「liquid-lp-sample.xml」は下記の通り、インポートを行います。
すると、管理画面の固定ページに3種類の下書きがインポートされているのを確認し、編集を行っていきます。
こちらでは全体的なデザインを作成していきます。ここではカスタマイズのメニューをピックアップして紹介していきたいと思います。
レイアウトでは2カラムか1カラム(サイドバーなし)の選択になります。
※LPテンプレートは1カラム(サイドバーなし)となります。
ヘッダーボタン①に「ランディングページ制作にお悩みはありませんか?」の下の「詳しくはこちら」と記載のボタンを表示されるかの有無となります。
※上記「」内の文言は変更可能です。
ヘッダーメニュー自動表示投稿ページや固定ページ(属性「LP」以外の場合、②のメニューは管理画面>外観>メニュー 「Global Menu」が表示されます。)
※固定ページの属性については下記の「固定ページの属性」内に記載しています。
ヘッダータイトルのリンク先ヘッダータイトルとはLOGOなどを設置する左上のリンクになります。
③をクリックした場合にそのWordPressをインストールしたTOPのページを表示するのか、個別に作った固定ページのLPを表示するのか設定できます。
④は投稿ページや固定ページの属性「LP」以外の場合、ページ内に表示するのか設定できます。
固定ページの属性「LP」の場合はページ内に既に表示されているので、表示はされません。
※固定ページの属性については下記の「固定ページの属性」内に記載しています。
⑤は右の新着記事の一覧表示された場合、タイトル横にアイキャッチ画像を表示するか選択できます。
固定表示するページのタイトル右側のプレビューが固定されたトップページに指定しない場合の表示になります。
右側のプレビューのタイトルの「サービス一覧」と記載されているタイトルを⑥で変更ができるようになります。
固定表示するページのタグ右側のプレビューの3つ表示されているサービス一覧はこちらで指定したタグが表示されます。
設定時には⑦は空欄になっていますので、こちらにタグを記載していないと表示されていません。
新着記事表示⑧で右側のプレビューのように新着記事の表示の有無をこちらで設定できます。
Topページを設定します。こちらで「最新の投稿」を選択していると上記アイキャッチ画像に記載しているイメージがTopページになります。作成したLPをTopページにする場合、ホームページの表示:固定ページ>ホームページで選択したページがTopページになります。(※公開されたページのみ選択が可能です。)
また、前提としてサンプルページはブロックで作られていますので、ブロックの位置の上下などの移動や削除はGutenbergの機能と同じです。
こちらも基本的なGutenberg(グーテンベルク)の使い方は下記をご覧ください。
WordPressエディタ「Gutenberg」の使い方!誰でも直感的なデザインに!
固定ページの編集画面のメニューにある固定ページの属性を指定できます。
固定ページの属性>テンプレートでLPを選択するとサイドバーの内サンプルページの表示になります。
色設定ではテーマのカスタマイズで指定した色がそれぞれの左上に表示され、自動で全体の配色を変更してくれます。もし個別に色を変更する場合には、固定ページのそれぞれのセクションで色を指定すると変更されます。
高度な設定(HTMLアンカー・オプション)設定ボタンや見出しなどを選択すると右側のメニュー内①のように高度の設定>HTMLアンカーが表示され、文字列を入れるとページ内リンクとして設定可能です。
また高度な設定>「追加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 | 角丸にします。 |
※共通のオプションは、ブロックやその内容によって対応できない場合があります。
今回実際使ってみて感じたのは
ただ、今までと違って、
Gutenbergの使い方でも記載しましたが、やっぱり慣れですね。
ただGutenbergによって幅広いユーザーが使えてカスタマイズできるようになっているなあと実感しました。