04_LP専用テーマで作成

LP専用テーマ「Colorful」で作成開始

LP専用テーマ、Colorfull購入については、こちらのページをご参照ください。

サブドメインを設定、WordPressをインストール、諸設定を終え、購入したColorfulをインストール&有効化、必要なプラグインもインストール&有効化し、準備が整ったところでLP作成開始です♪

ここでは、ColorfulのLP構成用の部品を説明します。
※この順番に作っていくわけではありません。

LP作成その1、固定ページ編集画面

LP作成用のほとんどのツールは、本文欄の上にあるツールリストの左角下にある「カスタムボタン」をクリックして、下に表示されるメニュー(プルダウンメニュー)の中からツールボタンを選択・クリックして、ページに配置していきます。

LP作成その2、ヘッダー(ヘッド)作成

ページのヘッダー、つまり一番上のエリアをヘッダーとかヘッドと呼びます。
Colorfulでは、「ヘッド」で明記されてます。

  1. 「カスタムボタン」をクリックすると表示されるヘッドの白字か黒字をクリックして本文欄に挿入。
    ※デフォルトではこんな感じで挿入されます。
  2. ヘッドの文字を入力部分にカーソルをもっていき、キャッチコピーに変更。
  3. その下の補足説明のところも変更します。
  4. 縦幅をもっと広げたい場合は、ヘッドの下の部分にマウスカーソルをもっていくと、マウスカーソルが上下に伸縮できるマークになるので、そのまま下に引き下げると縦幅が広がり、上にもっていくと狭まります。

ヘッドの背景画像の変更方法

  1. (1)左サイドメニュー「メディア」をクリックして「メディアライブラリ」画面に入り、
    「新規追加」ボタンをクリックして、新規変更したい画像をアップロードする
    (2)メディアライブラリのリストに表示されているアップロードした画像のサムネイル(縮小画像)をクリックして、画像詳細ページに入り、画像のURLをコピーする
    ※下の画像の場合は「リンクをコピー」と書いてあるURLが画像のURLです。
    ※WordPressのバージョンにより、「画像URL」と右上に記載されている場合もあります。
  2. ヘッド部分のどこでもいいのでクリック
  3. 本文欄上部にある編集アイコンの「テーブル(表)アイコン」の横の▼をクリック
  4. 表示されたメニューから「票のプロパティ」をクリック
  5. 別窓で表示された表のプロバティの「高度な設定」タブをクリック
  6. 表示された画面右下の背景画像のURLの欄に記入してある画像URLを下記の感じに変更する
    最初の表記:url(‘httpsかhttpではじまるデフォルトの画像URL/headback_moutain.jpg’)
    url(’ここの部分にメディアライブラリにアップロードした背景画像のURLを入れる’)
    ※半角スペースが残っていてもエラーになって表示されませんので気を付けてください。
    ※何度でも修正、変更はできます。
  7. 背景画像が変わりました。

    ※このヘッドは縦幅が広げてあります。
    ※今回は、表のプロパティで高さを数値で変更して縦幅を増やしました。
    白文字のヘッドを選択したので、この背景だと文字が目立たないですね。
  8. 文字色は、普通に記事を書く時のテキストの色(文字色)変更の方法とおなじで、変更したい文字をドラッグし、投稿アイコンリストの中の下線の引いてあるAボタンをクリックして、変更します。
    ※下の写真は、改行してキャッチコピーと補足説明部分の文字との間を開けました。
  9. 注意:ただし、文字色の変更は、上の大きい文字(キャッチコピー)のみにした方がいいようです。
    下の「補足説明」の色を変更すると、上のキャッチコピーと同じ大きさになってしまいました。
    またこれは販売者さんに質問してみようと思います。もしかしたらWordPressのバージョンのせいかもしれませんけど・・・r^^;;;

LP作成その3、テキストを入れる

「構成を考える」より簡略バージョンで説明してますので、ここにあなたの思いとかテキストを入れます。

普通に書いていってください。

プロフィールを入れたりしてもいいと思います。

LP作成その4、サブヘッドを入れる

「見出し」です。
これも「カスタムボタン」をクリックして「サブヘッド」の白字か黒字を選択して配置します。

ヘッドの背景色の変更は、これも「表のプロパティ」で変更できます。
また、画像にすることもできます。(▼背景画像にURLを入れればOKです)

LP作成その5、枠ブレットを入れる

これも「カスタムボタン」をクリックして、好きなスタイルの枠ブレッドを挿入してください。

チェック項目が不必要な時は、普通に削除。
追加するときは、「ブレッド追加」をクリックしてください。

文字も装飾すると目立ちますね。

 

LP作成その5、アクションを設定する

  • 体験会や商品/サービス購入ページ、お問い合わせフォームに飛ばす場合のボタン例
    「カスタムボタン」をクリックして、ボタンを選択して記事内に挿入、ボタンに該当ページのリンクを張る
    ※ボタンは動くボタンが目を引きやすいです
    ※ボタンの色を変えるには、「テキストモード」でソースを見て指定してある色名を変更すれば、変わります。
  • メルマガに登録してもらう場合
    フォームが複数用意されているので好きなスタイルを選択して設置して、メルマガの購読申込フォームにリンクしてください。
    ※ステップメールの設定はメルマガスタンドにより異なります。

LP作成その6、お客様の声を設定する

  • 「カスタムボタン」をクリックして、枠を設置してからその中に書いていってもいいですし、写真入りの画像で表示させていってもOKです。(写真+テキストでももちろんOK)

LP作成その7、お客様の不安を解消するQ&A欄を設定する

  • 「カスタムボタン」をクリックして、「Q&A枠」を設置、その下にある「Q&a_1セット」をクリックしてQ&A」を追加してコーナーを作成する。

※カスタムボタンから選択できる部品の画像を他のものにしたい場合は、Colorfulの説明サイトの【装飾・画像素材集】をご覧ください。

Colorfulで作成したLPサンプル

※途中までですので、ボタンやメールアドレス登録欄はありませんが、こんな感じで作れます。

▼サンプルサイトはこちらです。
https://kokoro.hokkoricafe.com/mind1/

※動画セミナープレゼントボタン先やメルマガ登録先にはリンクはまだ貼ってありません。

前の記事

05_トップ画像作成方法

次の記事

03_LPの構成を考える