Diviプラグインのハイライト：Diviイベントカレンダーモジュール

イベントカレンダーは、WordPressのゴールドスタンダードのイベントカレンダーです。 Diviでうまく機能しますが、Diviレイアウトに追加するには、ショートコードを使用する必要があります。 スタイリングは、WordPressダッシュボードの[設定]タブから行います。 これにより、スタイリングをDiviレイアウトと統合することが困難になります。 Divi Events Calendar Moduleと呼ばれるサードパーティのプラグインは、Events CalendarをDiviモジュールとして表示することにより、この問題を解決します。 この記事では、Diviイベントカレンダーモジュールを見て、何ができるかを見ていきます。

Diviイベントカレンダーモジュールのインストール

まず、イベントカレンダープラグインをインストールします。 このプラグインがインストールされていない場合は、インストールする必要があることを通知し、プラグインのWordPressページへのリンクを提供するエラーメッセージが表示されます（私が知っている方法を推測します）。 イベントカレンダーの詳細については、ETブログの記事「イベントカレンダー：無料版の詳細な概要」を参照してください。

次に、Divi Events Calendar Moduleプラグインをアップロードしてアクティブ化し、アクティブ化します。

私の例では、DiviとWordPressの一連のイベントを、さまざまなカテゴリ、主催者、会場、日付で作成しました。

Diviイベントカレンダーモジュール

2つの新しいモジュールがDiviBuilderに追加されました。 1つ目は、Diviイベントカレンダーと呼ばれ、ブログ投稿のようにリストにイベントをカードとして表示します。 2つ目はDiviイベントカレンダービューと呼ばれ、カレンダーにイベントを表示します。 カレンダービューモジュールはまだベータ版です。 現在、機能が制限されています。 両方のモジュールを見ていきます。

1つ目は、MeetupスケジュールページのMeetupレイアウトパックを使用しています。 そのページのイベントをDiviイベントカレンダーモジュールに置き換えました。

[コンテンツ]タブ

モジュールは自動的にイベントを表示します。 標準のDiviタブが含まれています。 [コンテンツ]タブは、コンテンツと要素を追加します。 デフォルトで青い背景を追加します。

コンテンツ

[コンテンツ]セクションでは、表示するイベントの数、含めるカテゴリ、日付の形式、抜粋の長さ、およびオフセット番号を入力できます。 この例では、Diviイベントカテゴリのイベントを2つに制限しています。 オフセットを1に設定しました。

要素

要素を使用すると、表示する要素を選択できます。 これには、注目の画像、ショーオーガナイザー、WebサイトのURL、日付、時刻、場所、場所、抜粋、カテゴリ、詳細情報ボタン、および過去のイベント（モジュールが過去のイベントのみを表示するように制限されます）が含まれます。 注目の画像とショーの主催者を非表示にするように設定しました。

[デザイン]タブ

[デザイン]タブには、レイアウト、サムネイル、タイトルテキスト、詳細テキスト、抜粋テキスト、その他のボタンのオプションが追加されています。 テキストは通常​​のテキストモジュールと同じように機能します。 レイアウト、サムネイル、その他のボタンを詳しく見ていきます。 ボーダーとボックスの影は、個々のカードで機能します。 これは私が多くのDiviモジュールで見たかったものです。

レイアウト

レイアウトでは、列数（1〜4）、画像の配置（左または上）、背景色、余白、およびパディングを選択できます。 画像を上に設定し、背景を白に変更しました。 青はまだイベントカードの間に表示されます。

この例では、列を2に設定し、余白とパディングを追加して、カードが青い背景に収まるようにし、境界線を作成しました。

これは3列の例です。 URLテキストを適切に調整できます。 3列では、画像の配置はオプションではありません。

これは2つの列があり、左側に画像があります。

サムネイル

サムネイルの設定には、余白、パディング、幅、コーナー、境界線のスタイル、境界線の幅、境界線の色、境界線のスタイルが含まれます。 この例では、画像をカードの中央に配置し、幅を100にするために、パディングを75に設定しました。

この例では、コーナーを36pxに設定し、境界線の幅を9pxにしました。 ボーダーの色をスタイリングし、はめ込みスタイルにしました。

文章

レイアウトに合わせてタイトルテキストを調整しました。Robotoは軽量でオールキャップスです。 抜粋と詳細のテキストはデフォルトのままにしておきます。

もっと見るボタン

この例では、ボタンのレイアウトのスタイルを使用しました。 サイズを14pxに設定し、背景色を調整し、境界線の幅と半径を変更し、すべて大文字でRoboto太字を選択しました。 一番上のボタンに表示されているように、ボタンのサイズを大きくするホバー効果をデフォルトのままにしました。 また、デフォルトでテキストを残しました。これはVIEWと表示されます。

この例では、前の例のほとんどの設定を使用しましたが、いくつか変更を加えました。 青い背景を削除し、境界線の半径を変更して、境界線を削除しました。 また、Diviイベント（私が作成した2つのサンプルカテゴリの1つ）のみを表示するようにカテゴリを制限しました。 制限は2イベントに設定されています。

この例では、3列を表示するようにレイアウトを設定しました。 ボタンの境界線を削除し、ボタンの配置を中央に配置しました。 また、URLを削除し、詳細テキストの色を変更し、ボタンテキストを変更し、カードに影を付けて背景から目立つようにしました。

Diviイベントカレンダービューモジュール

2番目のモジュールを見てみましょう。 それはあなたのイベントのカレンダービューを提供します。 カレンダーには月、年、ナビゲーションが含まれ、今日の日付が強調表示されます。 これは、アートギャラリーレイアウトパックのイベントページです。 イベントにカーソルを合わせると、情報を含むポップアップが表示されます。 これがデフォルトのビューです。

[デザイン]タブは、モジュールテキストの設定を追加します。 最終的には、タイトル、月などの設定が含まれます。この例では、テキストの太さ、色、サイズを調整しました。 これにより、カレンダーの日付が調整されます。

この例では、フォントファミリをRobotoに変更し、色、サイズ、文字間隔、および行の高さを調整しました。 また、テキストを目立たせるために影を付けました。 「今日」ボタンを除くすべてのテキストは、サイズ、間隔、および高さの影響を受けます。

境界線、背景、ボックスの影などを調整することもできます。この例では、モジュールのテキストをすべて大文字に設定しました。 これには、月と日のテキストが含まれます。 また、背景を調整し、モジュールに境界線を付け（二重境界線スタイルを使用）、ボックスシャドウを付けました。 境界線はテキストと同じ色です。

これには、レイアウトの色とボックスシャドウの設定を含めました。 レイアウトのデザインとどのように連携するかが気に入っています。 調整の量が限られている場合でも、カレンダービューモジュールはDiviレイアウトで使用する価値があります。

価格とドキュメント

イベントカレンダーモジュールは、開発者のWebサイトから35ドルで入手できます。 これには、無制限のWebサイトの使用、生涯サポートと更新、および30日間の返金保証が含まれます。

ドキュメントは、インストールを順を追って説明するビデオと短い記事、およびそれを使用する方法と更新を実行する方法を示すいくつかの短い記事で処理されます。 ドキュメントを参照する必要がなかったのは幸運でした（モジュールは非常に直感的です）が、必要なときに利用できることを嬉しく思います。

終わりの考え

これが、Divi用のDiviイベントカレンダーモジュールプラグインの外観です。 モジュールは他のDiviモジュールと同じように機能するため、Diviレイアウトで機能するようにイベントのスタイルを簡単に設定できます。 メインカレンダーモジュールには、モジュール内の個々の要素のパディング、マージン、および境界線の調整も含まれています。 これにより、それらを個別のカードとしてスタイル設定することができます。

より細かく制御したい場合は、表示するカテゴリを入力できます。 これは、ドロップダウンリストからオプションを選択できる他のモジュールとは異なる動作をする1つのことです。 私はドロップダウンリストオプションを好みます。 これは私が将来変更してほしいものです。 また、会場やイベント主催者などに基づいてイベントを選択できるようにしたいと思います。

イベントカレンダー自体は、あらゆるWebサイトにとって優れたツールです。 写真撮影、コンサート、製品ショー、トレードイベント、交流会などに役立ちます。 Divi Webサイトでイベントカレンダープラグインを使用する場合は、Diviイベントカレンダーモジュールプラグインを一見の価値があります。

我々はあなたから聞きたい。 Diviイベントカレンダーモジュールを試しましたか？ 以下のコメントであなたがそれについてどう思うか教えてください。

VectorKnight /shutterstock.com経由の注目の画像