Elemetor Pro 『コールトゥアクション』ウィジェットの使い方

『コールトゥアクション』は時に『CTA』と呼ばれたりもします。
こちらのウィジェットは閲覧者にクリックさせたり、何かアクションを起こして欲しい時に使うウィジェットです。
また、Elementor Proにのみ搭載されたウィジェットです。
この記事では、『コールトゥアクション』ウィジェットについて詳しく説明をしていきます。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

コールトゥアクションウィジェットの挿入

コールトゥアクションウィジェットの挿入

ドラッグ&ドロップでウィジェットをカラムに挿入します。

ウィジェット挿入後の表示画面

すると、この様な表示画面になります。
ウィジェットにマウスオーバーすると、画像部分がズームインし、ウィジェットからポインターが外れるとズームアウトします。
その様子は以下の動画でご確認いただけます。

コンテンツタブ・画像

コンテンツタブ・画像

スキン / Classic

スキンの説明

『スキン』はウィジェットの表示タイプの選択です。
以下のオプションより選択します。

  • Classic(デフォルト)
  • Cover

位置

位置の説明

『位置』は『スキン』で『Classic』を選択した時のみ編集タブに表示されます。
『位置』では画像の位置を

  • 中央(デフォルト)

上記画面は位置を『左』にした時の表示画面です。

画像の選択・サイズ

画像の選択

『画像の選択』と『画像サイズ』については【Elementorの『画像』ウィジェットの使い方】の記事で詳しく説明をしていますのでそちらをご覧ください。

スキン / Cover

スキンをCoverにした時の表示画面

上記は『スキン』を『Cover』にした時の表示画面です。
Coverを選択すると、Classicに比べて『位置』の編集がなくなります。

ClassicとCoverの編集の仕方のほとんどが同じですがCoverのみに反映する機能として、『スタイルタブ・Hever Effects』内の『Sequenced Animation』があります。

コンテンツタブ・コンテンツ

コンテンツタブ・コンテンツ

Graphic Element

Graphic Elementの説明

『Graphic Element』はウィジェットのコンテンツ部分に要素を以下から追加することが可能です。

  • なし(デフォルト)
  • 画像
  • アイコン

画像

Graphic Element・画像

『画像』を選択するとコンテンツの上部に画像が配置されます。

アイコン

Graphic Element・アイコン

『アイコン』を選択するとコンテンツの上部にアイコンが表示されます。
アイコンの編集の仕方については【Elementor アイコンウィジェットの使い方】の記事で詳しく説明をしていますのでそちらをご覧ください。

タイトル

タイトルの変更

『タイトル』はタイトルのテキストを変更することができます。

説明

説明の変更

『説明』は、タイトルの下の説明文を編集することができます。

タイトルHTMLタグ

タイトルHTMLタグの説明

『タイトルHTMLタグ』はタイトルのタグを『H1〜H6 / div / span』のいずれかに選択ができます。

Button Text

Button Textの変更

『Button Text』はボタンの中のテキストの変更が可能です。

リンク

『リンク』はボタンをクリックした時のリンク先の設定になります。

コンテンツタブ・Ribbon

コンテンツタブ・リボン

『Ribbon』とは、コールトゥアクションのボックスの右上または左上にリボンをつけられるオプションです。

タイトル

リボンのタイトルを挿入

『タイトル』のテキストバーに入力した文章が『リボン』上に表示されます。

位置

リボンの位置の選択

『位置』はリボンの位置を『左 / 右』のいずれかで選択できます。
※デフォルトは『右』に設定されています。

スタイルタブ・Box

スタイルタブ・Box

高さ

高さの設定

『高さ』ではコールトゥコンテンツのボックスの縦幅をカーソルを右にスライドすることにより拡張することが可能です。
上記は高さの値を『500』に設定した時の表示画面です。
※デフォルトの高さは『100』(最小値)に設定されており、最大で『1000』の値まで設定が可能です。

配置

コンテンツの配置を右に設定した時の表示画面

『配置』はコンテンツの『タイトル/説明/ボタン』の配置を『右/中央/左』から選択が可能です。
※デフォルトは『中央』に設定されています。

Vertical Position

Vertical Positionを下に設定した時の表示画面

『Vertical Position』はコンテンツの配置を『上・中央・下』のいずれかから選択することができます。
※デフォルトは『中央』に選択されています。
また、『高さ』をデフォルトの『100』に設定している場合は『Vertical Position』をどれに設定しても変更しません。

パディング

パディング変更後の表示

『パディング』はコンテンツ部分とボーダー(枠線)の間のパディングの値です。
上記はパディングの値を『150』に設定した時の表示画面です。
※ご覧の通り、パディングの値が大きくなるとそれに比例してボックスの高さも自動的に拡張します。
尚、『高さ』の値はデフォルトの値『100』に設定されています。

画像 / 幅

画像・幅の変更

『幅』はカーソルをスライドスライドすることにより、画像の横幅を変更することが可能です。
上記は幅の値を『250』に設定した時の表示画面です。
※デフォルトの値は『500』(最大値)に設定されています。

画像 / 高さ

画像・高さの変更

『高さ』は画像の高さをカーソルをスライドすることにより拡張・縮小することができます。
上記は高さの値を『300』の値に設定されています。
※デフォルトの値は 『200』辺りに設定されており、またそれが画像の高さの最小値になりますので高さの値を200以下にしても画像のサイズはデフォルト以下になりません。

スタイルタブ・コンテンツ

スタイルタブ・コンテンツ

タイトル / 説明

タイトルと説明

こちらでは、コンテンツの文字(タイトル / 説明)の書体とスペースを変更することが可能です。
書体の変更の仕方については【Elementor『テキストエディター』ウィジェットの使い方】の記事で詳しく説明をしていますのでそちらをご覧ください。

スペース

タイトル・説明共にスペース幅変更後の表示画面

上記画像は『タイトル』と『説明』の各スペースがどこを指しているのかを表した画像です。

  • タイトルのスペース:タイトルと説明の間
  • 説明のスペース:説明とボタンの間

上記画面は各スペースの値を『100』(最大値)にした時の表示画面です。

カラー / 普通

カラーの説明

『カラー』では

  • 背景色
  • タイトル色
  • Description Color(説明文の色)
  • Button Color

の各色がカラピッカーより自由に変更が可能です。

カラー / ホバー

背景色の変更

カラーを『ホバー』に設定すると、ここで変更可能なカラーそれぞれをマウスオーバーした時の色味の変更が行えます。
上記は背景のホバー時の色を変更し、実際にマウスオーバーした時の表示画面です。

スタイルタブ・ボタン

スタイル・ボタン

サイズ

サイズの説明

『サイズ』ではボタンを以下のサイズより選択ができます。

  • 極小
  • 小(デフォルト)
  • 特大

書体

書体では『ボタン』の書体の変更が可能です。

文字色 / 背景色 / ボーダー色

ボタン色の変更と説明
  • 文字色
  • 背景色
  • ボーダー色

のボタンの各パーツの色の変更が可能です。
スタイルタブ・コンテンツのセクションにある『Bottun Color』でボタンの色の選択ができますが、こちらのセクションでの色の変更が優先され、反映します。

尚、『ホバー』を選択すればマウスオーバー時のボタンの各パーツの色も変更が可能です。

ボーダー幅 / ボーダー丸み

ボタンのボーダー幅・ボーダー丸みの説明

『ボーダー幅』と『ボーダー丸み』の各カーソルをスライドさせることにより、ボタンのスタイルを変更することが可能です。
上記はボーダー幅を太くし、ボーダーに丸みをつけた時のサンプル画像です。

スタイルタブ・Ribbon

スタイルタブ・Ribbon

背景色 / 文字色

 リボンの背景色・文字色の変更

こちらでは、

  • 背景色:リボンの色
  • 文字色:リボンの中の文字色

をカラーピッカーより自由に変更することができます。

Distance

Distanceの説明

『ディスタンス』は、カーソルをスライドさせることによりリボンのかかる位置を対角線上で移動することができます。
上記はDistanceの値を『50』(最大値)に設定した時の表示画面です。

書体

『書体』ではリボンの中のテキストの書体が変更できます。

ボックスシャドウ

ボックスシャドウの説明

『ボックスシャドウ』ではリボンに影をつけることができます。
ボックスシャドウの右側のペンマークをクリックすると、既にデフォルトのシャドウがつく状態になります。
上記は影の色みやぼかしの値を変更した後のサンプル画像です。

スタイルタブ・Hover Effects

スタイルタブ・Hover Effects

Squenced Animation

Sequenced Animationの説明

『Sequenced Animation』はコンテンツタブの『タイプ』を『Classic』に選択をしていると、こちらをオンにしても何も変化は起きません。
こちらはタイプを『Cover』にしている時のみ有効な設定です。

タイプをCoverにした時のHover Effectsの編集タブ

タイプを『Cover』に変更すると、Hover Effectsの編集タブも上記画面のように『コンテンツ』という編集項目が追加されます。

コンテンツ

こちらはコンテンツ部分(タイトル / 説明 / ボタン等)にアニメーションをつけることができます。
以下の動画でコンテンツ部分のアニメーションをご確認頂けます。

※アニメーションは『Slide In Left』を選択しています。

ホバー時のアニメーション

コンテンツのホバー時のアニメーション

 こちらのアニメーションについて、【Elementor Pro『Gallery』ウィジェットの使い方】の記事の『スタイルタブ・コンテンツ』のセクションの『ホバー時のアニメーション』にて『Entrance / Grow / Exit』についても詳しく説明をしていますのでそちらを参考にしてください。

アニメーション継続時間(ms)

アニメーション継続時間はコンテンツのホバーアニメーションがスタートしてからストップするまでの時間の設定です。
こちらも【Elementor Pro『Gallery』ウィジェットの使い方】で詳しく説明をしています。

背景

ここで言う『背景』と言うのは画像部分のアニメーションの編集になります。
コンテンツタブのタイプを『Classic』に設定をしていると編集タブには『背景』と言うワードが表示されませんが、Hover Effectsのタブに表示されているものはこれと同じと思ってください。

ホバー時のアニメーション

画像のホバー時のアニメーション

画像のホバー時のアニメーションの変更をすることができます。
※タイプがClassicの時はデフォルトで『Zoon In』が設定されていて、Coverの時は『None』に設定されています。

こちらの動画はホバー時のアニメーションを『Move Up』にした時のサンプル動画です。

その他の機能

  • Overlay Color
  • CSSフィルタ
  • ボタンモード

上記のものにつきましては、【Elementor Pro『Gallery』ウィジェットの使い方】の記事のスタイルタブの編集のセクションを参考にしてください。


『コールトゥアクション』はサイト上で何かを販売しする時など、閲覧者にわかりやすく商品の特徴を伝えたり、購入までの誘導を簡単に行うことができそうですね!
Elementor Pro特有のウィジェット『コールトゥアクション』をサイト制作にぜひ取り入れてみてはいかがでしょうか?

コード書かないウェブ制作を学べるサロン『TOFUラボ』

目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

そのElementorの質問
実際に使ってる人に聞いてみませんか?

TOFUラボはElementorを使う人が集まるサロンです。
メンバーは170人を超えます。