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

Elementor Proのカウンドダウンウィジェットは、プロダクトローンチ方式またはエバーグリーン方式でカウントダウンを表示することができるウィジェットです。

【限定】Elementor Proの使い方を動画で網羅的に学びませんか?こちらから無料でコースを受講できます。

コンテンツのCountdown設定

Elementor Pro カウントダウンウィジェット Evergreen Timer

Type

カウントダウンのタイプを選択します。「Due Date」は、具体的な日付を期限にするという設定です。例えば、1月1日という期限にしたりですね。「Evergreen Timer」は、記事にランディングしてから設定した時間で、カウントダウンが開始されます。例えば、1時間という設定にしたら、記事にランディングしたのを起点に1時間のカウントダウンが始まります。

Due Date

「Due Date」を選択したら、この項目が表示されます。カウントダウンが終了する期日を入力します。

Hours

「Evergreen」を選んだら、表示されます。時間を入力します。

Minutes

ここも「Evergreen」を選んだら表示されます。分を入力します。

表示

  • Block
  • Inline

カウントダウンの表記のタイプを上記の2種類から選択できます。

Days

「Days」の項目を「SHOW-表示」か「HIDE-非表示」に設定できます。

Hours

「Hours」の項目を「SHOW-表示」か「HIDE-非表示」に設定できます。

Minutes

「Minutes」の項目を「SHOW-表示」か「HIDE-非表示」に設定できます。

Seconds

「Seconds」の項目を「SHOW-表示」か「HIDE-非表示」に設定できます。

Show Labels

ラベル(DaysやHours、Minutes、Secondsの表記)を「を「SHOW-表示」か「HIDE-非表示」に設定できます。「HIDE」にすると、数字だけの表示になります。

Custom Labels

  • Days:日
  • Hours:時間
  • Minutes:分
  • Seconds:秒

カウントダウンタイマーのラベルの表記を変更できます。デフォルトだと英語になっているので、上記のように日本語に変更すると良いかもしれません。

Actions After Expire

  • Redirect
  • Hide
  • Show Message

期限が切れた後のアクションを上記の3つから選択します。

Elementor Pro カウントダウンウィジェット Redirect

「Redirect」なら「Redirect URL」に入力したURL先のページにリダイレクトされます。

Elementor Pro カウントダウンウィジェット 非表示

「Hide」ならカウントダウンが非表示になります。

Elementor Pro カウントダウンウィジェット Show Message

「Show Message」なら、「Message」に入力したメッセージが表示されます。

スタイルのBoxes設定

Elementor Pro カウントダウンウィジェット スタイル

ここからは、「スタイル」の「Boxes」設定を確認していきます。

Container Width

ウィジェットの幅を調整します。

背景色

カウントダウンタイマーのボックスの背景色を設定します。

ボーダータイプ

  • なし
  • 直線
  • 2本線
  • 点線
  • 破線

ボーダーのタイプを上記の6種類から選択します。

ボーダーの幅を調整します。

ボーダーの色を設定します。

ボーダー丸み

ボーダーの丸みを調節します。数値を上げていくと、ボーダーが丸くなっていきます。

スペースの間隔

それぞれのボックス間のスペースを調節します。

パディング

ボックス内の数字・レベルとボックスの外枠とのスペースを調節します。

スタイルのコンテンツ設定

Elementor Pro カウントダウンウィジェット スタイル コンテンツ

ここからは、「スタイル」の「コンテンツ」の設定項目を確認していきます。

Digitの色

数字の色を設定します。

Digitの書体

数字の書体を設定します。

Labelの色

ラベルの色を設定します。

Labelの書体

ラベルの書体を設定します。

スタイルのMessage設定

Elementor Pro カウントダウンウィジェット スタイル Message

コンテンツの「Actions After Expire」で「Show Message」を選択した場合、ここの項目が表示されますので、設定していきましょう。

配置

メッセージの位置を「Left-左寄せ」、「Center-中央寄せ」、「Right-右寄せ」に設定できます。

文字色

表示するメッセージの色を設定します。

書体

メッセージの書体を設定します。

パディング

メッセージの本文とウィジェットのスペースを調節します。

コメントを残す

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