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

コンテンツのCountdown設定

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つから選択します。

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

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

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

スタイルのBoxes設定

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

Container Width

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

背景色

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

ボーダータイプ

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

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

幅

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

色

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

ボーダー丸み

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

スペースの間隔

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

パディング

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

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

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

Digitの色

数字の色を設定します。

Digitの書体

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

Labelの色

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

Labelの書体

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

スタイルのMessage設定

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

配置

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

文字色

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

書体

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

パディング

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