入力補助を利用したCTAの作成イメージ

Diverには、収益化に重点を置いているWordPress有料テーマです。

そのため、随所に訴求ポイントを設置することができる工夫がされています。

その大きな特徴の一つとして挙げられるのが、CTAです。

このページでは、Diverで利用できる3種類のCTAについて紹介します。

このページで分かること
  • Diverで利用できる3種類のCTAについて
  • 設置できるCTAの場所、設置イメージ
  • CTAの機能や簡単な使い方

Diverで利用できるCTAの種類

Diverで利用できるCTAは3種類あります。

Diverで利用できるCTA
  • CTA
  • フッターCTA
  • アピールブロック
  • サイドバーウィジェット

まい
サイドバーウィジェットとアピールブロックは厳密にはCTAではないのですが、CTAを補助する機能なのでまとめました!
CTAフッターCTAアピールブロック
CTA表示イメージ

CTA表示イメージ
フッターCTA表示イメージ

フッターCTA表示イメージ
アピールブロック:最上部表示イメージ

アピールブロック:最上部表示イメージ

まい
アピールブロックは、ぶたの貯金箱の部分です!

 

これらのCTAは、簡単に作成することができます!

 

順番にご紹介します(*'ω'*)

CTAの作り方とプレビュー画像、設置できる場所

CTA表示イメージ
DiverのCTAは1か所に設置することができ、画像やボタンを簡単に作ることができます。

CTAを設置できる場所

DiverのCTAを設置できる場所は、以下の1か所です。

  • 記事下(関連記事一覧の下、前後記事表示の上)

まい
DiverのCTAは思わず目を奪われるCTAです!

 

でも、作り方は本当に簡単です!

CTAの作り方

CTAは、投稿ページや固定ページの編集ページと同じような形式のCTA作成ページで作成/編集することができます。

作成したCTAは、投稿記事や固定記事の作成ページ下部にて表示するCTAを選択することで表示できます。

編集ページでは、以下のような項目があります。

  • タイトル
  • テキスト
  • アイキャッチ画像
  • 画像位置設定
  • CTAカラー設定
  • ボタン設定

まい
CTAはDiverオプションで「デフォルトCTA」を設定することで、個別に設定しなくても表示させることができます!

 

入力イメージと、実際の作成プレビューを撮影しました!

CTAの入力イメージ

タイトルテキストアイキャッチ画像
CTA設定イメージ:タイトル

CTA設定イメージ:タイトル
CTA設定イメージ:テキスト

CTA設定イメージ:テキスト
CTA設定イメージ:アイキャッチ画像

CTA設定イメージ:アイキャッチ画像
画像位置設定CTAカラー設定ボタン設定
CTA設定イメージ:画像位置設定

CTA設定イメージ:画像位置設定
CTA設定イメージ:CTAカラー設定

CTA設定イメージ:CTAカラー設定
CTA設定イメージ:ボタン設定

CTA設定イメージ:ボタン設定

まい
ボタン設定のURLは、入力しないとボタンが表示されないので適当に入力してあります(´・ω・`)

 

実際に使用するときは、ちゃんとしたURLを入力してください!

CTAの作成プレビュー画像

画像位置:右画像位置:左画像位置:上
CTA作成補助:アイキャッチ画像右寄せ作成イメージ

CTA作成補助:アイキャッチ画像右寄せ作成イメージ
CTA作成補助:アイキャッチ画像左寄せ作成イメージ

CTA作成補助:アイキャッチ画像左寄せ作成イメージ
CTA作成補助:アイキャッチ画像中央揃え作成イメージ

CTA作成補助:アイキャッチ画像中央揃え作成イメージ

まい
CTAでは、入力補助を組み合わせることもできます。

 

CTAはごちゃごちゃしない方がいいと思うので、多用はお勧めしませんが…(´・ω・`)

 

入力補助を組み合わせると、こんな風にも作れます!

入力補助を利用したCTAの作成イメージ

入力補助を利用したCTAの作成イメージ

フッターCTAの作り方とプレビュー画像、設置できる場所

フッターCTA表示イメージ

フッターCTAは1か所に設置できるCTAです。入力フォームに沿うだけで簡単に設置できます。

フッターCTAを設置できる場所

フッターCTAは、PC版(タブレット含む)のみに表示されます。

DiverのフッターCTAを設置できる場所は、以下の1か所です。

  • 固定フッター(閲覧ユーザーが任意に表示/非表示操作可能)

まい
見た目は固定ヘッダーのフッター版という感じです!

 

入力フォームに沿うだけで簡単に作れちゃいます!

フッターCTAの作り方

フッターCTAは、「Diverオプション」にある「フッターCTA」という設定項目で作成/編集することができます。

CTAと違ってカスタマイズ性はそこまでありませんが、入力フォームに沿うだけの簡単仕様になっています。

編集ページでは、以下のような項目を設定できます。

  • タイトル
  • テキスト
  • 画像
  • 背景カラー
  • 背景透明度
  • テキストカラー
  • リンク先URL
  • リンク先オプション
  • 表示設定

背景透明度は、数値を小さくするほど透明になっていきます。

表示設定では、フッターCTAを表示させる場所を「トップページのみ」「投稿記事のみ」「すべてのページ」から選ぶことができます。

また、リンクは「別タブで開く」かどうかを選択することができます。

検索エンジンのクローラーにリンク先をたどらせたくない場合、「rel="nofollow"をつける」にチェックをいれるといいと思います。

まい
Diverレビューノートで実際に使っている設定を撮影しました!

フッターCTAの入力イメージ

フッターCTAの作成ページ

フッターCTAの作成ページ

フッターCTAの作成プレビュー画像

まい
背景透過度をいくつか変えて撮影しました!

 

閲覧ユーザーは、テキスト横の×マークをクリックすることで、非表示にすることができます!

 

非表示にすると、のようなボタンで再表示することができるようになります!

背景透過度0.2背景透過度0.5背景透過度0.8
フッターCTA:透過度0.2のプレビュー画像

フッターCTA:透過度0.2のプレビュー画像
フッターCTA:透過度0.5のプレビュー画像

フッターCTA:透過度0.5のプレビュー画像
フッターCTA表示イメージ

フッターCTA表示イメージ

アピールブロックの作り方とプレビュー画像、設置できる場所

アピールブロックは、投稿記事にのみ設置できる準CTAです。

アピールブロックの設置できる場所

設置できる場所は、1か所です。

  • 追従ボックス(ウィジェット)の下で追従する

まい
アピールブロックはウィジェットに表示されます!

 

サイドバーを非表示にすると、アピールブロックも非表示になるので注意です!

アピールブロックの作り方

アピールブロックの作成/編集ブロックは、投稿記事作成ページの下部にあります。

作成/編集ブロックでは、以下の項目を設定することができます。

  • タイトル
  • 画像
  • 説明文
  • ボタンのテキスト(未入力だとボタンが非表示)
  • ボタンのリンク先
  • アピールブロックのカラー

まい
作成感覚は、フッターCTAに近い感覚だと思います!

アピールブロックの入力イメージ

アピールブロックの設定ページ

アピールブロックの設定ページ

まい
ボタンのリンク先は未入力になっていますが、実際に使うときは入力してください!

アピールブロックの作成プレビュー画像

アピールブロックの作成プレビュー画像

アピールブロックの作成プレビュー画像

まい
タイトルの下にオレンジのラインがあるのは、ウィジェットデザインです!

サイドバーウィジェットの作り方とプレビュー画像、設置できる場所

サイドバーウィジェットプレビュー画像:最上部
サイドバーウィジェットは、投稿記事と固定記事に設置できる準CTAです。

サイドバーウィジェットの設置できる場所

4通りの設置場所から1か所を選択して設置することができます。

  • ウィジェット最上部
  • ウィジェット最下部(追従ボックスの上)
  • 追従最上部(追従ボックスの上で追従する)
  • 追従最下部(追従ボックスの下で追従する)

まい
アピールブロックのカスタマイズ性が高い版といった感じです!

 

ただ、ウィジェット扱いなので、タイトルや背景などの色を設定することはできません。

サイドバーウィジェットの作り方

サイドバーウィジェットの作成/編集ブロックは、投稿記事や固定記事を作成/編集するページの下部にあります。

作成/編集ブロックでは、以下の項目を設定することができます。

  • ウィジェットポジション
  • ウィジェットタイプ
  • タイトル(未記入で非表示)
  • テキスト

まい
タイトルは、未記入にすることで非表示にもできます!

 

テキストの中に画像やボタンを挿入したりできるので、カスタマイズ性は高めです(*'ω'*)

サイドバーウィジェットの入力イメージ

サイドバーウィジェット作成ページ

サイドバーウィジェット作成ページ

ウィジェットポジションは、サイドバーウィジェットの位置を設定できます。

ウィジェットタイプは、サイドバーウィジェットを追従するかしないかを設定できます。

まい
ウィジェットポジションとウィジェットタイプの組み合わせで、4通りの設置場所ができます!

 

実際に設置できるのは、4通りの設置場所から1つだけです。

サイドバーウィジェットの作成プレビュー画像

最上部&通常最下部&通常最上部&固定(追従)最下部&固定(追従)
サイドバーウィジェットプレビュー画像:最上部

サイドバーウィジェットプレビュー画像:最上部
サイドバーウィジェットプレビュー画像:最下部

サイドバーウィジェットプレビュー画像:最下部
サイドバーウィジェットプレビュー画像:最上部(追従タイプ)

サイドバーウィジェットプレビュー画像:最上部(追従タイプ)
サイドバーウィジェットプレビュー画像:最下部(追従タイプ)

サイドバーウィジェットプレビュー画像:最下部(追従タイプ)

まい
目次が追従ボックスなので、追従ボックスとの位置関係はそちらでご確認ください!

設置できるCTAの種類や機能 まとめ

Diverで設置できるCTAは現在4種類(準CTA含む)あります。

最初はCTAだけだったのですが、バージョンアップでフッターCTAやアピールブロック、サイドバーウィジェットが増えました。

CTAにたどり着くまでに離脱してしまうユーザーを取り込むことができるので、準CTAであるアピールブロックやサイドバーウィジェットはとても便利です。

まい
手軽に作れちゃうので、とても重宝しています!
あらゆるデザインがDiverで叶う。それも難しい操作無しで。
Diverロゴ
イメージ画像

「企業に納品してきたノウハウと技術をすべての人に利用可能なWordpressテーマ」がモットーの有料WordPressテーマ「Diver」。 “ユーザーの質問や意見に真摯に応える” 開発陣の想いは無制限のメールサポートに留まらず、アップデートにも反映されています。もはやそれは、初心者でもあらゆるデザインが作れてしまう程の性能。Diverの能力を知ってしまったら、もう他のテーマには心移りできなくなってしまうでしょう。

販売価格 : 17,980円 (税込)/当サイト限定購入特典あり
無期限・無制限メールサポート付き/無料バージョンアップ有り
おすすめの記事