【制作編⑥】今スグ作れるホームページ！～「CTAボタン」の作成～

▶初回から受講する

▶この講座の画像を見る

前回の講座では「施術メニュー」を作りました。
今回はこちらの「CTAボタン」の部分を作っていきます！

1．構成の確認

今回は、

・グループ
・カラム
・ボタン

上記のブロックを使用します。

ブロックで区分けすると、このようになります。

2．「CTAボタン」の作成

2-1．CTAってどういう意味？

今回作る部分は「CTAボタン」と呼ばれるものですが、
あまり聞きなれない言葉だと思います。

CTAとは、Call To Action（コールトゥアクション）の略で、
「お客様に何かしらの行動を起こしてもらうための呼びかけ」です。

今回では「お客様に予約または電話をしてもらう」目的で設置します。

2-2．CTAブロックの作成

今までと同じくグループの余白設定を済ませて先に進んでください。

🔶手順🔶

①「カラム」を追加（50 / 50）
②「ボタン」を追加
※2種類ありますが画像と同じ方を選んでください。
③テキストを入力 ▶ 以下のように設定

ボタンサイズ：標準
ボタンの位置：幅広
ボタンスタイル：べた塗り
ボタンエフェクト：光る
背景色：カスタムカラー1（オレンジ）
④「アイコンを選択」
⑤URLを入力 ▶「リンクを別ウィンドウで開く」にチェック ▶「送信」
※例としてHot Pepper Beautyのサイトを指定しています。
⑥ボタンを右カラムにコピペ
⑦テキストを電話番号に変更 ▶ ボタンスタイルを「背景なし」に
⑧アイコンを変更
⑨リンクを以下に変更 ▶「リンクを別ウィンドウで開く」のチェックはずす
　▶「送信」

リンク：「tel:090-0123-4567」
💡Point
電話番号のリンクをこのように指定することで、
スマホ操作でタップして発信できるようになります！

⑩「更新」
これでCTAボタンの部分は完成です！

キラッと光るボタンもこんなに簡単に作れちゃいます💡
今回は機能の紹介という意味で適用しましたが、
お好みに応じて外してしまっても大丈夫です！

2-3．パターン化

今回作ったCTAはページの最下部でも出てきますし、
実際にHPとして運用する際は、電話番号や予約サイトのURLが
後々変更になる可能性もあるでしょう。

ホームページのいたるところに設置されている1つ1つのCTAを
手作業で更新するのは大変ですし、作業が増えると操作ミスも増えます。

そこで便利なのがWordPressのパターン機能です。

パターン化しておくと、
1つのCTAに加えた編集が、サイト内すべてのCTAに自動反映されるようになります！

🔶手順🔶

⑪グループを選択
⑫「パターンを作成」
⑬任意の名前を付ける ▶「同期」がオンになっていることを確認
　▶「生成」
⑭「更新」
これでパターン化ができました！
パターンは「オリジナルを編集」から編集することで、
サイト内のすべてのCTAに自動反映されます💡

まとめ

お疲れさまでした！
制作編も残すところ3セクションとなりました。
もうひとがんばりです✨

次回は「患者様の声」のセクションを作っていきます。
何だか難しそうですが、Lightningなら簡単に作れますので
次回もがんばりましょう！

◀前の記事へ　　　　　次の記事へ▶