Diviで見事なイベントカスタム投稿タイプテンプレートを作成する

毎週、次のプロジェクトに使用できる新しい無料のDiviレイアウトパックを提供します。 レイアウトパックの1つとして、Webサイトを次のレベルに引き上げるのに役立つユースケースも共有しています。

今週は、進行中のDiviデザインイニシアチブの一環として、無料のMeetup LayoutPackを使用してDiviで素晴らしいイベントカスタム投稿タイプテンプレートを作成する方法を紹介します。 このユースケースチュートリアルは、Diviの最近の更新の1つであるDiviBuilderカスタム投稿タイプサポート機能によって可能になりました。 Meetupレイアウトパックに一致するテンプレートを作成します。 このテンプレートを作成すると、Webサイトで共有するすべてのイベントに再利用できるようになります。

それを手に入れよう！

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの最終結果を見てみましょう。

イベントカレンダープラグインをインストールする

プラグインに移動して新しいプラグインを追加する

イベントのカスタム投稿タイプをWebサイトに追加するには、イベントカレンダープラグインを使用します。 これは無料のプラグインで、 WordPressダッシュボード>プラグイン>新規追加>イベントカレンダープラグインの検索に移動して見つけることができます。

プラグインをアクティブ化する

プラグインをインストールしたら、すぐにアクティブ化して、使用を開始できるようにしてください。

テーマカスタマイザ設定の変更

タイポグラフィを変更する

イベントを作成する前に、まずWebサイトの基本を正しく理解することから始めましょう。 WordPressダッシュボード>外観>カスタマイズに移動して、テーマカスタマイザーを開きます。 次に[一般設定]> [タイポグラフィ]に移動して、Webサイトのタイポグラフィに移動します。 そこに着いたら、次の設定を適用します。

• 本文サイズ：16
• ボディラインの高さ：1,9
• ヘッダーフォント：Roboto

イベントカレンダーの設定

イベントカレンダープラグインには、テーマカスタマイザーにも独自の設定がいくつかあります。 テーマカスタマイザーのメインメニュー>イベントカレンダー>一般テーマ>に戻り、次の色を使用します。

• アクセントカラー：＃06c8ff
• 注目のハイライトカラー：＃06c8ff

[イベントカレンダー]> [一般的なテーマ]の設定に戻り、そこにあるすべてのオプションに同じ「＃06c8ff」の色を使用します。

新しいイベントを追加する

新しいイベントを追加する

これで、新しいイベントを作成する準備が整いました。 これを行うには、 WordPressダッシュボード>イベント>新規追加に移動します。 新しいイベントを追加したら、必ずタイトルも付けてください。

イベントの詳細を追加

イベントの詳細を入力して続行します。 これも：

• 時間と日付
• 位置
• 主催者
• イベントのウェブサイト
• イベント費用

注目の画像を追加

注目の画像もイベントに追加します。 この投稿の後半で、これをフロントエンドから削除しますが、ソーシャル共有には引き続き必要です。

Diviページ設定の変更

イベントの右隅に、Diviページ設定が表示されます。 そこで、ページレイアウトで[サイドバーなし]を選択してサイドバーを削除します。

イベントの公開

これで、フロントエンドでの作業を開始する準備が整いました。 さあ、イベントを公開してください。

これは、VisualBuilderを有効にしていないデフォルトのページデザインです。

Meetupのランディングページを開いてデザイン要素を保存する

行を見つけてDiviライブラリに保存

効率的に働くことは、一生懸命働くことよりも重要です。 そのため、Meetup Layout Packの要素を再利用することで、時間と労力を節約します。 Diviのビジュアルビルダーを使用してランディングページを開くことから始めます。 次に、ページで次の行を見つけて、Diviライブラリに保存します。

セクションを見つけてDiviライブラリに保存

次のセクションも必要になるので、これも保存してください。

イベントカスタムタイプテンプレートの作成を開始します

Meetupレイアウトパックに一致するカスタムCSSコード行を追加する

Visual Builderはイベントページに使用できますが、残念ながらどこでも使用できるわけではありません。 すべてがMeetupLayout Packに準拠していることを確認するために、事前にいくつかのCSSコード行を追加します。

#tribe-events {
margin: 5%;
}
.tribe-events-single-event-title {
font-weight: 300;
font-size: 60px !important;
}
#tribe-events-content a {
font-family: Roboto !important;
font-weight: 300 !important;
}
.tribe-events-event-image{
display: none;
}

VisualBuilderに切り替えます

これで、イベントでVisualBuilderを使用するように切り替えることができます。

新しいセクションを追加する

背景画像

ページにすでにセクションが存在することがわかります。 それは私たちが変更できるページ上の場所です。 セクション設定を開くことから始めて、「 bg-4.png 」背景画像を追加します。 この画像は、Meetup Layout Packを既にWebサイトにアップロードしている場合は、メディアライブラリにあります。 背景画像とともに、次の設定を使用します。

• 背景画像サイズ：実際のサイズ
• 背景画像の位置：右下

間隔

次にセクションの間隔設定を開き、上部マージンに「100px」を追加します。

国境

また、テンプレート用にこの種のタイムライン効果を作成しています。 境界線設定に移動し、次の左側の境界線を追加します。

• 左ボーダー幅：7px
• 左ボーダーの色：＃8301e9

新しい行を追加する

カラム構造

セクション設定の変更が完了したので、行の追加を開始できます。 次の列構造で新しい行を追加します。

サイジング

行の設定を開き、サイズ設定で[この行を完全にする]オプションを有効にします。 これは、このレイアウト内の各行に対して実行することです。

行にテキストモジュールを追加

サイジング

次に、イベントの説明を含むテキストモジュールを追加し、サイズ設定に移動して、次の幅を使用します。

• デスクトップ：47％
• タブレットと電話：100％

保存した行をインポートする

追加した行のすぐ下で、保存した行をDiviライブラリにインポートします。

サイジング

サイズ設定から始めて、この行についていくつか変更する必要があります。 「この行を全幅にする」オプションを有効にします。

本文テキストモジュールとボタンモジュールを削除する

次に、最初の列のテキストモジュールとボタンモジュールの段落を削除します。

テキストモジュールのクローンを作成し、サイズを削除する

先に進み、テキストモジュールを最初の行に複製して、新しい行の最初の列に配置します。 次にサイズ設定を開き、デスクトップ用にカスタマイズした幅を削除します。

保存したセクションをインポートする

最初のセクションの変更が完了しました。 次に保存したセクションをインポートします。

境界線を追加

このセクションにも左の境界線を追加します。

• 左ボーダー幅：7px
• 左ボーダーの色：＃06c8ff

各行のサイズを変更する

インポートしたセクション内にいくつかの行があります。 これらの各行に対して[この行を全幅にする]オプションを有効にします。

ボタンの配置を変更する

最後に、ボタンの配置も左に変更します。

テンプレートをDiviライブラリに保存

ライブラリに追加

レイアウトテンプレートが完成しました！ これで、Diviライブラリに保存して、他のイベントにも再利用できます。

プレビュー

さまざまな手順をすべて実行したので、さまざまな画面サイズでの結果を最後に見てみましょう。

最終的な考え

このユースケースのブログ投稿では、見事なイベントのカスタム投稿タイプテンプレートを作成する方法を紹介しました。 作成したテンプレートは、Meetup LayoutPackのスタイルと一致します。 このテンプレートを作成した後、Diviライブラリにも保存して、他のイベントにも再利用できるようにしました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！