Elementor Pro 『カウントダウン』ウィジェットの使い方

『カウントダウン』ウィジェットは文字どおり期限をカウントし、サイトに表示させる機能です。
こちらはカウントが終わり次第ページを表示させない様にする機能や、物販などで視覚的に購買意欲を持たせるのにとても役立つ機能です。
この記事では、Elementor Proのみに搭載されたウィジェット『カウントダウン』の使い方について詳しく説明していきます。

カウントダウンウィジェットの挿入

カウントダウンウィジェットの挿入

カラムに『カウントダウン』ウィジェットを挿入します。

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

こちらはウィジェット挿入後の表示画面です。
ウィジェットを挿入した段階から、画面上で既にカウントダウンは始まります。

コンテンツタブ

コンテンツタブの編集

タイプ

タイプの選択

『タイプ』はカウントダウンのタイプを以下より選択します。

  • Due Date:カウントダウンの期日設定
  • Evergreen Timer:サイトにアクセスしてからカウントダウンが始まる

Due Date

タイプ/Due Dateの期日設定

『Due Date』はカウントダウンがあらかじめカレンダーで設定をした『何年/何月/何日/何時』までの期日に合わせてカウントダウン終了する仕組みです。

デフォルトでは『30日間』で設定されており、上記サンプルではウィジェットの挿入を2021年6月1日に行ったので、その30日後の2021年7月1日にカウントが終了する様に設定されています。

カウントダウン期日設定の説明

編集タブの『Due Date』でカレンダーを開くと自分が期日を終了させたい年月日と詳細な時間を設定することができます。

Evergereen Timer

タイプ/Evergreen Timerの説明

『Evergreen Timer』は、サイトにロードすると設定したカウントがスタートします。
また、サイトをリロードしてもカウント時間がリセットされることはありません。
※シークレットモードでの閲覧の場合はリセットされます。

デフォルトはあらかじめ

  • Hours : 47
  • Minutes : 59

に設定されており、従ってカウントダウンの表示は『01 Days / 23 Hours / 59 Minutes / 00 Seconds』でカウントがスタートします。

Hours/Minutesのせ設定

上記は

  • Hours : 24
  • Minutes : 00

に設定した時の表示画面です。
サンプル画像を撮るまでに2秒すでに経過してしまっていますが、きっちり『00 Days / 24 Hours / 00 Minutes / 00 Seconds』でカウントがスタートします。

表示

『表示』はカウントダウンボードの見た目を以下より選択します。

  • Block(デフォルト)
  • インライン

Block

表示の選択・Block

デフォルトですでに『Block』に設定がされています。

インライン

表示・インライン

『インライン』を選択すると上記の様な表示になります。

Day / Hours / Minutes / Seconds

Days/Hours/Minutes/Secondsの表示設定
  • Days
  • Hours
  • Minutes
  • Seconds

の各ブロックの表示、または非表示を選択することができます。

表示設定をHours/Minutesのみにした時の表示画面

こちらは『Days』と『Seconds』を非表示にした時の表示画面です。

Show Label

Show Labelの説明

『Show Label』の『Label』とは数字の下に表示されている『Days / Hours / Minutes / Seconds』のことです。
『Show Label』ではそれらのLabelを表示させるかさせないかの選択になります。
デフォルトは『表示』に設定されています。

Show Labelを非表示にした時の表示画面

上記画像は『Show Label』を非表示にした時の表示画面です。

Custom Label

Custom Labelの説明

『Custom Label』は『Show Label』を『表示』に設定している時のオプション設定です。
デフォルトでは『Custom Label』は『非表示』に設定されています。

Custom Labelを『はい』にした時の編集タブの表示

Custom Labelを『はい』に設定すると、編集タブに

  • Days : Days
  • Hours : Hours
  • Minutes : MInutes
  • Seconds : Seconds

と表示されます。

ここではかくLabelの表記変更を自由に行うことができます。

 Custom Labelの各表示の変更後の表示画面

こちらはLabelの表記を変更した後の表示画面です。

Actions After Expire

Action After Expireの説明

『Actions After Expire』は、カウントダウンが終了した時に起こるアクションを設定することができます。

Redirect

 Redirectの説明

『Redirect』は、カウントダウンが終了すると自動的に設定をしたURLにジャンプする仕組みです。

設定方法は、『Redirect URL』にジャンプさせたいサイトのURLを入力します。

非表示

非表示の説明

『非表示』に設定すると、カウントダウン終了と共にページが閲覧できなくなります。

Show Message

Show Messageの説明

『Show Message』はカウントダウンが終了するとサイトの画面にメッセージが表示される仕組みです。

編集タブの『Message』に書いたメッセージがサイト画面にそのまま反映します。

Message設定後のプレビュー画面

こちらはカウントが終了し、Messageが表示された時の表示画面です。

スタイルタブ・Boxes

スタイルタブ・Boxes

Container Width

Container Widthの説明

『Container Width』は数字とLabelを囲むボックスの幅の調整ができます。
上記画面はContainer Widthの値を『60』にした時の表示画面です。
※デフォルトの値は『100』に設定されています。

背景色

背景色の説明

『背景色』は、数字とLabelの背景色をカラーピッカーより自由に変更することができます。

ボーダー(枠線の編集)

ボーダー全般の編集について
  • ボーダータイプ
  • ボーダー丸み

の編集については【Elementorの『画像』ウィジェットの使い方】の記事のスタイルタブの編集のセクションにて詳しく説明をしていますのでそちらをご覧ください。

スペースの間隔

スペースの間隔の説明

『スペースの間隔』はボックスとボックスの間の間隔をカーソルをスライドさせることにより、拡張または縮小することができます。
上記画像はスペースの間隔の値を『80』に設定した時の表示画面です。
※デフォルトの値は『6』に設定されています。

パディング

パディングの説明

『パディング』はボックス内の文字とボーダーの間の間隔を変更することができます。
パディングはマイナス値での変更は特に反映されません。
※デフォルトの値は『0』に設定されています。

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

スタイルタブ・コンテンツ
Digits/Labelの文字色・書体の変更

『コンテンツ』ではボックス内の文字色・書体が変更できます。

  • Digits : 数字
  • Label : Days / Hours / Minutes / Seconds

『Diglts』と『Label』で文字色・書体の編集タブは分かれます。

文字色はカラーピッカーより自由に色味の変更が可能です。
書体の変更の仕方は【Elementorの『テキストエディター』ウィジェットの使い方】の記事で詳しく説明をしていますのでそちらを参考にしてください。

スタイルタブ・Message

スタイルタブ・Message

『Message』はコンテンツタブの『Action After Expire』で『Show Message』の設定をしている時のみ編集タブに表示されます。

配置

配置の説明

『配置』はMessageの配置を以下から選択することが可能です。

  • 中央(デフォルト)

残念ながら編集画面では『Message』は表示されませんので編集するにあたりMessageを確認するには都度プレビューで確認する必要があります。

文字色 / 書体

文字色・書体についての説明は割愛いたします。

パディング

パディングの説明

『パディング』は、ボックスとMessageの間のパディングの調整できます。
Messageにを付ける場合は、編集画面での確認が不可能な為。プレビュー画面を都度確認しながらの作業になります。


『カウントダウン』ウィジェットは閲覧者にわかりやすく期限を記したり、また物販を行なっているサイトであれば閲覧者の購買意欲を掻き立てるのにも役立つウィジェットです。
また、カウントダウンはElementor Proのみに搭載されています。
昨日的なサイト制作に是非、カウントダウンウィジェットを活用してみてはいかがでしょうか!

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

目次

コメントを残す

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

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

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