1. このは屋
  2. WordPressのブロックエディタ..
2024-08-08 38:33

WordPressのブロックエディタでリード獲得ページを作成する方法

spotify apple_podcasts youtube

スモールビジネス特化の学び舎 このは屋です。

無料で、ネット集客に必要なテンプレートを手に入れられます。

 

▼無料でテンプレート、あげます。

【無料】ネット集客テンプレート全13種

https://konohaya.com/cast

 

エピソードページは、以下よりご確認頂けます。

 

▼エピソードページ

WordPressのブロックエディタでリード獲得ページを作成する方法

https://konohaya.com/87587

 

▼ホームページ

このは屋

https://konohaya.com

 

#このは屋 #スモールビジネス特化の学び舎 #鼻歌まじりの商売

00:00
今回は、CTA上級編リード獲得ページ作成ということで、こちらのパートの目的と進め方についてお伝えしていきます。
では始めていきます。 まず本パートのゴールをお伝えします。
それは何かというと、見込み客を集めるためのリード獲得ページを作ると。 これが今回のゴールになります。
ここをめがけて進めていきますよということは、まずね、理解しておいてください。 なんで今回このパートを行うのかっていう理由なんですけども、大きく2つあります。
まず一つ目が、これはオンラインのマーケティング、商売をやる上で最も大切な見込み客リストですね。 これゆくゆくはメルマガ読者って形になるんですけども、
コンタクトの取れる見込み客リストを集めていくためになります。 そして無料オファーに登録してもらうためのページを用意する必要があるため。
無料オファー、無料プレゼントってものを用意するわけなんですが、作っただけでは登録する仕組みってできませんよね。
登録してちゃんとリストになっていく仕組みというのはできませんので、しっかりこのリード獲得ページというのを作っていって、無料オファーから集客につなげていくという仕組みを作っていきます。
これが本パートを行う理由になります。 本パートの進め方ということで、まず概要からお伝えしていきます。
概要の後詳細という流れでいきます。 概要はリード獲得ページをそのものですよね。これを作っていく。
そしてサンクスページというものを作っていく。 こんな流れになっています。
まずは大枠を押さえておいてください。そして一個一個詳細なんですけども、まずリード獲得ページの作業は何をやるかというと、リード獲得ページテンプレートというのをご用意していますので、こちらの使い方、編集方法というのを習得していただきます。
そしてリード獲得ヘッダー画像テンプレートこちらも用意していますので、基本的に入れ替えるだけとか文字を変えるだけって形でテンプレートを使っていただければと思います。
ヘッダー画像というのは見込み客リストを集めるためのフックとなるポイントになってきますので、しっかり作っていきましょう。
その他リード獲得ページの周辺に関する作業というのを行っていきます。 主にリード獲得ページはこういった中身の作業をやっていきます。
続いてサンクスページの作成という概要の2つ目でしたけども、こちら何をやるかというとサンクスページテンプレートというのをこちらご用意していますので、これを編集していく。
無料オファーのダウンロードボタンというのがないと無料オファーを相手に届けることができませんから、ダウンロードボタンの設置
その他サンクスページおよび無料オファーの細かい設定関連する作業を行っていきます。 今回の作業をこちらでお伝えするとリード獲得ページというのを作ってこれがゴールになります。
ここに登録するわけですね。この流れを押さえておいてほしいんですが、このリード獲得ページから登録しますと。
そうするとご登録ありがとうございましたというふうにページが推移するんですね。すぐに入れ替わってサンクスページというのが現れます。
ここで無料オファーをダウンロードできる。これさっきのボタンみたいな話なんですけども、こういった一連の流れを作っていくというイメージで今回の作業を進めていってください。
はい、それでは今回はこちらのリード獲得ページの作成方法を開発します。
03:02
今映っているような感じで作成を進めていきたいとおもいます。 簡単に中身を解説しますとヘッダー画像があって、ボタンですね。
ホームに移動するボタンになります。 あとは見出し、無料オファーで手に入るもの。
その内容ですね。 この無料オファーではこういうものが
手に入りますよ。 そんな内容になります。ここは上書きですね。ビストになります。
見出しで、見出し2に対して見出し3で、下書きで内容ですね。
それがずらーっとあるという形になります。 あとはプロフィールですね。左に画像があって右にテキスト。空物を使ってこういうレイアウトを組みます。
で、見出し。
これですね、本来フォームが入るんですけど、フォームに関してはベンチマークEメールの
領域というか設定になりますので、 ここは省略します。
はい、で、ここですね。
最後、注意喚起があるといった形になります。 では、実際に作成を進めていきたいと思います。
まずですね、新規追加をクリックしますので、固定ページの新規追加ですね。こっちでもOKです。
はい、で、ここからタイトルをまず入力していきます。 僕の場合はですね、
おこしべで言ってしまいますけど、本来ここですね。 リード獲得ページっていう風にしてますけど、
無料派の名前にしてください。 このように見えてしまうとこなんで、
ユーザーの方に。 なので無料派のタイトルですね。そのまま入力してください。
URLスタックですね。これ後でもいいんですけど、 僕の場合はすぐつけてしまいます。
こちらにその無料派に関連性のある、
なんかアルファベットとかですね、ローマ字入力でもいいんで、 反格で入力してください。
今回はリードとしますが、
例えば何とかPDFだったら、 PDFみたいな、LPのなんか、
例えばLPのPDFでしたら、こうなりますね。 ってな感じで、ここはですね、入力していってください。
内容によるので、
今回ダミーということでリードにします。 次ですね、ヘッダー画像です。ヘッダー画像は、
ブロックを追加をクリックして、画像を選択してください。 こういうダミーの画像を使っていきますが、みなさんはヘッダー画像を
06:08
作成してください。 ファイルをアップロードからファイルを選択で、
パソコン内からアップロードができます。 選択ですね。
ヘッダー画像の作り方はまた別の動画で解説します。
幅広ですね。
下書きほどは公明にやっておいてください。
次ですね、ボタン。
ボタンはですね、ブロックの追加ボタン。
一応、SLの絵馬の方にあるんですけど、 こっちのデフォルトのボタンですね。
2のボタンって書いてある方を使ってください。 無料で手に入れると。
そうしましたら、これを中央に配置したいんですが、
その前にですね、
構造というか仕組みを解説します。
今、中央にしたい、中央の設定項目がないんですけど、
これというのは今、ボタン自体が選択されているからですね。
どういうことかというと、ここを選択してもらうと、 このエリア全体が指定されました。
この状態で、中央にする項目、 中央通りの項目が出てくるという感じなんですけど、
この、親の要素があって、子供の要素があるみたいな、
ちょっと階層状になっているので注意してください。
今、ボタン自体の要素にいる。
このエリアのところにいるっていう、 そんな感じになります。
このエリアの中にボタンの要素があるみたいな、 そういう構造を理解しないと、
項目がないから中央通りにできない、 みたいなことになるので、注意しておいてください。
結構ブロケーターはこの構造が多いです。
幅の設定は50で、OKです。
次ですね、飛ばすやり方は後でお伝えします。
こういうことですね。
Muniofaで手に入るものですね。これをコピーして、
皆さんの場合は入力していってください。
09:02
入力というか、この内容に関するものが ページ内にあると思うので、
それをですね、参考にというか原稿を書いてから コピーして作成してください。
これは、段落はですね、常にエンターを押すと、 標準、デフォルトで出てきますので、
特に一時呼び出す、場合によるんですけど、 呼び出すのはあまりないかなといった感じですね。
なかったら当然ここから追加していってください。
リストなんですけど、これはこのリストですね。
リストと打ち込んでいただければ、OKです。
この様子があるのでそれを使ってください。
次は、内容はとにかくどこでどの要素を使うのか というのを確認してください。
このMuniofaの名前の内容目次ですね。
Muniofaってコンテンツを作成するときって、 アウトラインを作ってから作成すると思うんですけど、
そのアウトラインをそのままコピペするだけでOKです。
はい、というような感じですね。
これは複製してもらって、見出したにしてもらって、 これは見出しとします。
あとはリストですね。テキスト。
こんな感じで配置します。
このブロックをどんどん下に配置するという感じなので、
グループ化してどんどん複製していけばいいですね。
次はプロフィールなので、これも複製して、
ブロックのこの追加から配置してもいいんですけど、 複製もあるのでそれも使うと便利かなといった感じでお見せしています。
この下は左に画像、右にテキストなのでカラムを使います。
12:08
50×50で配置していただいて、こっちに画像ですね。
アップしていただくかすでに画像があるのであれば、 このようにお写真ですね、配置していただいて、
ちょっと大きいのであれば、このようにブラックするとサイズが変わります。
こっちは段落ですね。
こういう時は段落を読み出すという感じで、
こういう内容でこういうテキストを配置します。
最後にフォームがあるという感じになります。
無料ダウンロードはこちらですね。
埋め込みコードですね。
ベンチマーク側で埋め込みコードがありますので、 詳しくはベンチマークの動画を見てほしいんですけど、
埋め込みコードをこちらに配置する、 コピー&フェストするというだけです。
フォームの設定箇所のところで、 最終的には埋め込みコードが出力されますので、
それをこちらに配置するという形になります。
この注意書きを配置。
これはiCloudとか携帯、キャリアのアドレスはメールが届かないので、
Gmailの方が絶対いいんですけど、 推奨しますという方にしています。
こんな感じで作成をしてください。
あとはこれ。
もしこの動画と同じようにダミーというか、 箱だけの方は下書きでOKです。
これですね、ボタン。
ボタンは黒になってしまっているので、 これを背景色、メインカラーにするか、
もしくは好きな色にしておいてください。
ここなんですけど、飛ばす方法ですね。
この見出しの箇所にカーソルを置いていただいて、 高度な設定ですね。
このhtmlアンカーですね。
ここにフォームと打ち込んでください。
フォームをコピーしていただいて、 こちらにリンクですね。
15:07
シャープとやって、こんな感じで真似して、 シャープフォームにしてください。
必ず左側にシャープを入れると。
一旦下書き保存して確認してみます。
こんな感じで移動できるといった形になります。
こっちの方が簡単なんですけど、余談ですが、
このページのですね、これどっちでもいいんで、 参考までになるんですが、
これでも移動できるという感じになります。
これでも移動されるという。
簡単なのはこっちなんで。
仕組みはともかく2パターンありますよということで、 紹介しました。
こんな感じで、比較的内容もシンプルなので、 簡単に作れるかなといった感じです。
ここですね、ベンチマークの方から、 登録フォームの埋め込みフォードを配置するという形になります。
あとはですね、一応カスタマイズのところでですね、 サイト全体設定、日本デザインですね。
ここのですね、背景を白にする、 ここを設定してもらったと思うんですけど、
スウェルのカスタマイズのところで、 ここがもしこうなっていた場合ですね、
投稿ページ固定ページの場合、 こうなりますね。
今ちょっと薄いんですけど、線が、 背景とコンテンツのエリアの境目ができてますね。
これでもいいかなという感じはします。
これお好みに合わせて設定してください。 投稿ページのみにすれば大きくなるといった形になりますね。
どちらがいいかはお好みに合わせて設定してみてください。 一応ここも切り替えられるようにですね。
本当はこっちにしたいんだけど、 現状こうなっちゃってます。
という場合ですね、修正の仕方としては、 この外観カスタマイズ、サイト全体設定、
ここの部分が投稿固定ページ、両方になってしまったので、 投稿ページにすると同じようになりますよということですね。
当然これでも、今映っているレイアウトでもOKです。
18:08
切り替えができるようにしてくださいねっていう話です。 わからないかできないとかではなくてですね。
という感じでリード獲得ページの作成方法は以上になります。
それでは今回はこちらに表示されています登録完了ページ、 サンクスページの作成方法を解説していきます。
お礼と無料版のダウンロードリンク、ボタン、 あとメールの届いているかの確認ですね。
こういう文言を配置。 最後フロントエンド商品の案内ということで、
お試し型の少ない金額の商品を配置といった形になります。 その商品の簡単な紹介ですね。
これはフロントエンド商品のランニングページですね。 その抜粋分、一部を聞い取ったものでOKで、
あとは実際に飛ばすボタンといったシンプルな構造になっています。
使う要素自体もですね、あらかじめお伝えすると、 見出し、暖楽ですね。ボタン、見出し暖楽、見出し暖楽ボタンですね。
3つしか使わないので非常に簡単に作成ができます。 ということで作成をしていきたいと思います。
新規で作成する場合、固定ページ、新規追加ですね。 もしくはこっちでもOKです。
この無料派名、サンクスページですね。
JAMICの文言はですね、ページ内に配置しておきますので、 そちらを
この内容と書き換えてですね、もちろんこういう解説とか、
その上で配置してください。 ということで、無料派の名前ですね。
はい、どんどん作成を進めていきます。 ご登録いただきありがとうございますということで、お礼ですね。
ここは手打ちでも全然いけるかなといった感じです。
はい、ここからまとまった文章になりますね。 お礼と
メールが行きますよということと、
ここからダウンロードできますよという、 そういう文言になります。
はい。 一応念のためですね、この括弧の箇所を
埋めるわけなので、時々いるんですけど、 みたいな感じにして、この括弧を残している
人がいるんですね。 このままだとなんとなくこう
21:04
これじゃダメな感じがすると思うので、 括弧にするのであれば、
こんな感じにしてください。 こうではなく、
これは残さずですね、この括弧ってあくまで ここに記入してくださいねというもので、
配置したままにしておくと違和感がありますので、 ここですね。
はい、という、 ちょっと補足です。
あとこの部分を埋めるっていう感じですね。 実際はなんかこう
直書きというよりか、ワードとかそういうもので 書いてからにしてください。
次、ボタンですね。 ボタンはダウンロードとします。
はい、で次ですね。 次は、このボタンの幅を
変えたいので 50にします。
あと中央に押したいね、ここ。 ボタンの選択をクリックしてエリア全体を指定します。
オフトインページ、リード獲得ページですね。 その方でも解説したんですけど、ここですね。
今ボタン自体の要素にいて、ここをクリックすると エリア全体にいるっていう感じで、これにしないと中央通りにできません。
あとメールが届いているから確認ですね。 エンターにすれば段落が出てくるっていう感じになります。
簡単に内容を解説しますと、 メールが
行くので確認してくださいねっていうことと、 配信サービスって絶対すぐに行くっていう保証は
確約はできないのでタイムラグがあったりします。 なので30分から1時間以内に届きますよ
というそんな内容になっています。 1時間以上ですね、
ずっと待っても来ないっていう場合は迷惑メールフォルダに入っているか、 もしくはアドレス自体が間違っていますよっていう感じの
そういう内容です。 間違っている場合はですね、再度
アドレスを登録してくださいね。 あと迷惑メールに入らないように
よろしくお願いしますっていうそういう内容ですね。 一応こういう内容を配置しておかないと
なかなか来ないんですけどみたいな感じになったりとかですね。 一応アドレス自体も疑ってみてくださいね、そういう内容になります。
来ない場合はですね、フロントエンド商品の案内ですね。 ここはその
24:08
皆さんの商品とか設計によって違ってくると思うので、 それに合わせて入力していってください。
最後にボタンですね。 最後にボタン、コピーできてなかったので
コピーができないので、ボタンから最後ですね。 詳しく見る。
幅は50パーですね。
こんな感じで作成をしてみてください。 ボタンの色ですね。これは色ですね。
背景色、メインカラー、もしくは好きな色ですね。 このダウンロードのところにですね
PDFのリンクを設定しておいてください。
やり方なんですけど、このメディアのところにですね PDFのファイルを
新規追加のドラッグアウトドロップで、 もしくはファイルを選択でパソコン内から選択して
完成した無料版のPDFですね。 それを
アップしてください、メディアに。 するとですね、例えばこれがPDFだったとして
これが実際は画像なんですけどPDFだと思ってください。 メディアにアップロードすると、この
URLをクリープボードにコピーして、 コピーできるんですね。
この状態で
リンクを挿入して、貼り付けると。 そうすると、実際は画像なんですが
クリックするとPDFが表示されて、この辺から ダウンロードできるという感じになります。
すると登録者に、絶対このページは登録されないと来ないので、
相手はコンテンツを受け取れるといった形になります。
あとここはですね、この詳しく見るフロントエンド商品の案内というのは、 そのランニングページになりますので
そっちのページに飛ばしてください。 やり方は先ほどお見せした通り、ボタン自体をクリックしてリンクですね。
URLをコピペ。 あとこれですね、ファーマリンクなんですけど
27:07
これはですね、サンクスと入力してください。 ただですね、この
サンクスでしてしまうと、 例えば他に無料オファーを作ってその
これ無料オファーAだと思っていただいて、 無料オファーAのサンクスページですね。
無料オファーBのサンクスページを作るという場合は、 これが使えないですね。
例えば、 Bは01とかになってしまうって感じになるので、
なので、これAサンクスとか、 Bサンクスとか、ちなみにこの
Aの部分っていうのは、 無料オファーに関連するようなものですね。
それをつけておいてください。 LPに関するPDFでしたら、
LP、PDF、サンクスとか、そんな感じでやっていただけると、 あと間の配布ですね。
あとこれ全部、半額に絶対してください。 そんな感じにしていただくと、このサンクスだけだとどうしても
被りやすいので、次回目以降は01とかになってしまう。 そんな関係でやってもらっています。
それではこのサンクスページの作成方法は以上になります。
それでは今回は、キャンプでヘッダー画像の作成方法を解説します。
今回このテンプレートを用意していますので、 それの使い方に沿って解説を進めていきたいと思います。
このテンプレートはですね、ページ内に配置していますので、 このページにアクセス、
ここ自体にアクセスしていただいて使用してください。
必ずCanvaのアカウントを登録しているの前提として、 このテンプレートの使用をクリックしてください。
こんなデザインになっています。 非常にシンプルなデザインとなっています。
まずテキストの編集方法を解説します。
このテキストですね、ガイドのテキストをクリックして、 もう1回クリックすると編集ができます。
なのでここにターゲットですね。ターゲットを入力してください。 ヘッドラインも同様ですね。もう1回クリックすると編集ができます。
改良もできます。 場合によってはですね、この
長くなってしまって、はみ出てしまう場合はですね、改良してください。
それと色ですね、フォントの色も変更できます。 カラーコードでも指定ができます。
カラーコードは、今切れてるんですが、カラージュラーですね。使っていただいて、 サイトからですね、カラーコードを抜き取って指定する。
そんな感じでやってみてください。 サイト以外でもこの中から選択するでも ok です。
30:07
それと背景の四角形ですね。
こうなっている場合、指定ができないので、テキストエリアですね。
ずらしていただくか、ずらした方がやりやすいですね。
ずらして背景のテキストを選択。これも同様に色の変更ができます。 このテキストエリアはですね、内容に応じて微調整してください。
四角形はこのように縦と横に微調整することもできます。 これも内容に応じて微調整してみてください。
背面のイメージ画像ですね。
背景に画像を入れてくださいというものでして、このアップロードですね。アップロードからメディアをアップロード。
自分のパソコン内の画面が出てきますので、画像を選択してアップロードしてください。
画像はですね、こういうPixabayですね。Pixabayというサイトとか、あとUnflushとかですね。
商用利用可能なサイトからですね、持ってくるようにしてください。 Pixabayが一番使用頻度が高いのでご紹介しています。
こういう画像がダウンロードできますので、一応こちらだけ確認しておいてください。 商用利用無料記憶表示は必要ありません。ここだけ確認をしておいてください。
画像をアップしますとこのように出てきますので、安全な画像であれば特に問題なく使えます。
これをドラッグアンドロップで移動ですね。
はい、すると背面に画像が設置できます。この四角形ですね、透明度を下げた四角形を
覆いかぶせるようにします。 この不透明度、まあ透明度ですね。透明度はこのように微調整できますので
暗くもできますし、この極端にある場合は消してしまってもいいんですけど、こんな感じで調整ができますので
背面の画像の明るさによって微調整してください。これ必須ですね。 微調整必須なので
操作方法はそこまで難しくないと思うんですが、そんな感じですね。温めるだけというよりかはちょっと調整はお願いします。
あと開業ですね。開業するっていうのは必要になってくると思うので、 配置についてはいろんなパターンあるんですが
中央に配置するか、あとは左側に寄せるかっていう感じですね。 右側に寄せるパターンもあるんですが
それよりかは左の方がしっくりくるかなっていう感じです。 デザイン的なことを言うと
33:04
左の方がしっくりきます。空いたところに画像ですね。 こういう画像を配置するといいですね。
こういう画像は背景が透明化されていると思うんですが、リムVGですね。 このように検索すると出てきますので、これで人物の背景の削除ができます。
その上でまたアップロードしていただくといいかなといった感じです。 顔出しですね。それはあったほうが信頼になるんですけど
自分の場合は出したくないという場合はなくてもいいかなといった感じです。 これガイダンスのテキストなので
画像を配置したら消してください。 仕組み的なことを言うと背面に画像があってその上に
透明度を下げた四角形があってその上にテキストとかこういう四角形があるといった感じです。 そのイメージを持っていただくとさらに編集がしやすくなります。
削除ですね。 あとは基本的にこのホントはノトサンズブラック
ノトサンズ系のものを使っていただければと思います。 ゴシック体の方がパッと見わかりやすい
視認性が良かったりしますのでそのようにしてください。 あと他にもいろいろあるんですけど今回使うものといえば
行の間隔ですね。こういうところも極端じゃなければいいんですけど
例えばこれは極端なのでもうちょっと開けるとかですね。 開けすぎも良くなくてこんな離れてると良くないんで
適度な位置に調整をお願いします。
といった感じです。基本この1ページ目とあと2ページ目以降同じような感じですね。
この場合はここに画像を配置する形になりましてこれもドラッグ&ドロップで
ポンと移動していただければ配置ができます。 丸く切り抜きが自然にしてくれるっていうものですね。
あとこういう帯の色ですね。こういうのも調整、あとは色の変更をお願いします。
これも同じですね。 ここに
画像を配置という事なので
これはシンプルに例えば
この画像を配置するとして、この場合は
シンプルに配置するだけになるんですけど、これイメージ画像を配置してくださいねという事ですね。
最後これですね。もしこういう四角形とかいらない場合は消してしまってもいいんですけど、動かして微調整することができます。
ここの十字キーで動かすことができます。
36:00
色も変更できますので自由に変更してしまってください。 基本的にこう
選択してここに編集項目が現れるので色の指定とかそういうことを
するといった感じになります。
あとここに画像を配置という事です。
パソコンの中にドラッグ&ドロップで配置することができます。
といった感じですね。編集法は非常に簡単だと思いますので、あとは微調整ですね。
必ずしてください。はめるだけというよりかは微調整必須なので。
こんな感じでよろしくお願いします。微調整の中にはいろいろ含まれるんですけど、この開業だとか色の変更だとかですね。
あとこの四角形の幅とか、その他のものが含まれます。
あとCanvaの方にもテンプレートがあるので、もし気になったら、これが絶対的正解というわけではないので、
もし気になったらこういうのも無料のものですね。無料となっているものを使用してみてください。
王冠のマークが付いているというか、有料のものも含まれていますので、
そういうのは使えないので気をつけてください。おそらく王冠のマークだったと思います。
またこういうアップロードですね。これは非常にシンプルなので簡単だと思うので、
Canva上に自分のパソコンから画像をアップして使うといった感じです。
あと、テンプレートを使う際の注意点として、
Canva上のテキストがグループ化されているので気をつけてください。
グループ化とは一緒にすることでして、こういうふうに解除することもできるので、そのようにしてください。
といった感じです。最後このダウンロードをクリックして、その上で
ピンですね。ダウンロード。JPEGはロゴ画像とか背景を透明化させた画像、先ほど透明化した人物画像がありましたけど、
ああいうもの以外は使用しないでください。このダウンロードした画像をヘッダー画像として使用してください。
それでは今回のこの動画は以上になります。
38:33

コメント

スクロール