Countdown builderで、カウントダウンを作成

イベントページなどで、カウントダウンがあると、イベントが待ち遠しくなりますね。今回は、Countdown builderで、カウントダウンを作成する方法を紹介します。

 出典 : Countdown builder

今回のDEMOは、Jazz Concertのカウントダウンです。

開催日時までのカウントダウンを表示しています。

設定

プラグインをインストール、有効化します。サイドメニューのCountdown & ClockCountdown Typesをクリックします。テンプレート一覧が表示されます。今回は、Simple Countdownをクリックします。設定画面が表示されます。

Countdown & ClockCountdown Typesをクリック

Simple Countdownをクリック

設定画面が表示

まず、タイトルを追加に、任意のタイトルを入力します。

General OptionsDue Dateテキストボックスをクリックします。カレンダーからカウントダウン日時を設定します。

タイトルを追加に、任意のタイトルを入力

Due Dateカレンダーからカウントダウン日時を設定

After ExperieHide Countdownにチェックを入れます。これで、カウントダウン終了後タイマーが非表示になります。

右サイドバーの公開ボタンをクリックして、保存します。

After ExperieHide Countdownにチェック

公開ボタンをクリック

設置

Countdown & ClockAll Countdown & Clockをクリックします。カウントダウン一覧が表示されるので、設置したいカウントダウンShortcodeをコピーします。

Countdown & ClockCountdown Typesをクリック

Countdown & ClockCountdown Typesをクリック

設置したいページの編集画面を表示して、設置したい場所にショートコードブロックを設置し、ショートコードペーストします。

プレビューを確認します。カウントダウン終了後非表示になります。

設置したい場所にショートコードブロックを設置し、ショートコードペースト

プレビューを確認

カウントダウン終了後非表示

公開終了後も高さは維持

今回、設定でAfter ExperieのHide Countdownにして、公開終了後、非表示の設定にしました。カウントダウン終了後非表示になりますが、カウントダウンのタイマーの高さは維持されます。

以上で今回の説明は終了です。カウントダウンは、イベントまでの日時がわかるので、便利な機能です。設定も簡単なので、導入しやすいですね。

RECOMMEND

CONTACT

Webサイト作成は、是非
CXG DESIGNへご検討ください。