(↑Pinterestでシェアお願いします!)

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

執筆者 | 更新日 2020年02月10日 | Elementor Proの使い方 | コメント0件

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-右寄せ」に設定できます。

文字色

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

書体

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

パディング

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

Elementorの使い方を動画レクチャーで網羅的に学びませんか?
 

無料でオンラインコースを受講できます。

・Elementorのウィジェットの使い方

・ランディングページの作り方

・テンプレートの使い方

 

以下のボタンから、無料でオンラインコースに登録し、今すぐアクセスしてください。

0コメント

コメントを提出

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

Elementor Proの使い方

無料でElementor Proの使い方を

網羅的に学びませんか?
 

基本的なウィジェットの使い方から、ページを作成する方法までカバーしています。デザイン性の高いランディングページの作成を考えている方にオススメです。 下のボタンから無料で受講できます。

かっこいいLP作りたくないですか?