DiviとDiviタイムラインモジュールプラグインを使用して結婚式のスケジュールのタイムラインを作成する方法

公開: 2017-05-22

この投稿は、ミニシリーズ「Diviでエレガントなウェディングウェブサイトを作成する方法」のパート5です。 このシリーズでは、あなた自身またはDiviのクライアントのために結婚式のウェブサイトを作成する上で最も重要な部分を紹介します。

ミニシリーズの最初の4つのパートでは、次の作成方法を示しました。

エレガントな結婚式の発表ページ
ギャラリーページ
ギフトリストページ
結婚式のウェブサイトで自動Diviの声プラグインを使用する方法。

私たちが作成したレイアウトは、スタイルが一貫していて、簡単に作成できました。

ミニシリーズのこの最後のパートでは、ElegantMarketplaceのDiviTimelineModuleプラグインを使用して結婚式のWebサイトのタイムラインを作成する方法を紹介します。結婚式のゲストが結婚式のカップルの大事な日に何が起こるかについて最新の状態に保つ、見栄えの良い垂直タイムラインを作成する方法の例を紹介します。

垂直タイムラインの例

作成するレイアウトは、次の例のようになります。タイムラインで自分の道を見つけるのに役立つ最も重要な手順について説明します。この投稿を読んだ後、あなたはすぐに始めて、あなた自身のものを作成して、あなたの結婚式のウェブサイトにその余分なタッチを与えることができます。

プラグインの購入

Divi Timeline Moduleプラグインをまだ所有していない場合は、ElegantMarketplaceのWebサイトで購入する必要があります。プラグインの価格は11ドルです。彼らのウェブサイトでプラグインを購入した後、あなたはあなたがあなたのウェブサイトに追加するであろう新しいモジュールを含むZIPファイルを受け取ります。

プラグインのインストール

WordPress Webサイトにログインし、プラグインセクションの[新規追加]に移動します。

購入時に受け取ったZIPファイルをアップロードします。

プラグインをアクティブ化すれば、準備は完了です。プラグインは、タイムラインモジュールをDiviビルダーに自動的に追加します。

WebサイトでDiviタイムラインモジュールを使用する2つの異なる方法

結婚式のスケジュールを表示する

あなたの結婚式のウェブサイトのタイムラインは本当にあなたのウェブサイトにその追加の付加価値を与えることができます。タイムラインを使用して、結婚式の日がどのようになるかを紹介できます。このオンラインの透明性は、ゲストが結婚式の忙しいスケジュールを通り抜けるのに役立ちます。

あなたはあなたの結婚式のウェブサイトへのリンクをあなたのゲストと前もって共有することを忘れないでください。そうすれば、いつでもどこでも情報にアクセスできるようになります。

タイムライン用に別のページを作成することも、他のページの1つに含めることもできます。タイムラインは画面上で多くの場所を占めるため、まったく新しいページをタイムライン専用にすることをお勧めします。

結婚式のカップルの関係のタイムラインを表示する

プラグインを使用して結婚式のスケジュールを作成するだけでなく、タイムラインモジュールを使用して、結婚式のカップルの関係のタイムラインを紹介することもできます。カップルが出会った方法と彼らが彼らの関係で経験したさまざまな段階を含めることによって、あなたはゲストともう少し関わり、そこに物語を出すことができます。

さまざまな種類の紹介文モジュール

プラグインをダウンロードすると、モジュールのリストに4つの追加モジュールが表示されます。それらはすべてタイムラインですが、焦点が異なります。

投稿、コンテンツ、注目の画像、投稿のタイトル用に1つと、通常の縦向きのものがあります。この投稿で作成するタイムラインの例では、タイムライン–垂直のもののみを使用します。このモジュールを使用すると、投稿などのWebサイト上の他の情報にリンクすることなく、コンテンツボックスに情報をすぐに書き留めることができます。

はじめに

次のタイムラインを作成する方法を段階的に説明します。

モジュールは応答性が高く、デスクトップだけでなく、携帯電話やタブレットでも見栄えがします。始めましょう！

タイムラインとタイムラインアイテムを追加します

タイムラインモジュールはサードパーティのプラグインであるため、VisualBuilderを使用して視覚的な変更を加えることはできません。そのため、必要な変更を加えるためにWebサイトのバックエンド部分にとどまります。

タイムライン専用の新しいページを追加することから始めます。もちろん、そのページ内にはヒーローセクションが必要です。ただし、それとは別に、タイムラインに必要な標準セクションは1つだけです。全幅の行を持つ新しい標準セクションをページに追加します。次に、タイムライン–垂直モジュールをその全幅の行に配置します。

これで、タイムライン-垂直モジュールの設定内で、作成しているタイムラインにさまざまなタイムラインアイテムを追加できるようになります。

通常、結婚式の際に従う標準的な流れがあります。次の各イベントについて、新しいタイムラインアイテムを作成します。

花嫁の髪とメイク
結婚式の撮影
プレセレモニー
式
カクテルアワー
夕食の始まり
乾杯
ファーストダンス
踊る時間
デザート
最後のありがとうの言葉

もちろん、これはすべてあなたがあなたの結婚式の日をどのように計画したかに依存します。タイムラインアイテムはいくつでも追加できます。

タイムラインモジュールの変更

ただし、タイムラインアイテムを追加する前に、タイムライン–垂直モジュールを介してすべてのタイムラインアイテムに適用する必要がある変更を加えましょう。タイムライン-垂直モジュールの[コンテンツ]タブに移動し、[背景]サブカテゴリで[中心線の色]を[＃fae4de]に変更します。この色は、タイムラインモジュール内のすべてのラインに適用され、さまざまなタイムラインアイテムが相互に作用します。

次に、[デザイン]タブに移動します。まず、テキストサブカテゴリを開き、次の変更を加えます。

テキストフォント：Raleway Light
テキストフォントスタイル：太字
テキストフォントサイズ：14px
テキストの色：＃9b857b
テキスト行の高さ：1em

同じタブを下にスクロールして、アイテムラベルテキストサブカテゴリに次の変更を加えます。

アイテムラベルフォント：Raleway Light
アイテムラベルフォントスタイル：太字
アイテムラベルフォントサイズ：39px
アイテムラベルテキストの色：＃9b857b
アイテムラベルラインの高さ：1.5em

さらに、見出しテキストのサブカテゴリに次の変更を加えます。

見出しフォント：タンジェリン
見出しフォントサイズ：70px（デスクトップとタブレット）、60px（タブレット）
見出しのテキストの色：＃9b857b
見出し線の高さ：1.5em

上記のすべての変更は、各タイムラインアイテムに適用されます。 [保存して終了]をクリックします。

タイムラインアイテムの変更

これまでの結果を見ると、全体像に変更が加えられていることがわかります。次に、タイムラインアイテムに個別の変更を加える必要があります。タイムラインアイテムを1つだけ追加することから始めます。次に、そのタイムラインアイテムの[コンテンツ]タブに移動します。 [背景]サブカテゴリのタイムラインアイテムにタイトルを追加して続行します。

次に、コンテンツボックスに表示するコンテンツ（斜体の時刻を含む）を追加し、[タイムラインラベル]フィールドに時刻を入力します。必要に応じて、同じフィールドに場所を追加することもできます。

タイムラインアイテムの内容

フィールドに書き留められたコンテンツは、誰かがデスクトップでWebサイトにアクセスすると、タイムラインの反対側に表示されます。このラベルは、誰かが自分の電話であなたのタイムラインを見たときに表示されません。そのため、共有したい実用的な情報をコンテンツボックスのアイテムラベルにも配置することをお勧めします。そうすれば、電話でウェブサイトにアクセスした人も情報を見ることができます。

同じタブを下にスクロールして、アイテムアイコンのリストでハートのアイコンを探し、アイコンの色を「＃9b857b」に、アイコンの背景色を「＃fae4de」に変更します。

[保存]をクリックすると、タイムラインアイテムがタイムラインに追加されます。作成した例では、すべてのタイムラインアイテムに同じ設定を使用しました。したがって、最初のタイムラインアイテムのクローンを作成し、それに応じてさらに調整することをお勧めする理由。

結婚式のゲストのために結婚式のスケジュールをできるだけ明確にするために、必要な数のタイムラインアイテムを作成します。新しいタイムラインアイテムを追加するたびに、手動で調整しなくても、前のタイムラインアイテムの反対側に自動的に配置されます。

まとめ

これは、ミニシリーズ「Diviでエレガントなウェディングウェブサイトを作成する方法」の最後の部分でした。これがあなた自身またはあなたのクライアントのためにエレガントで見事な結婚式のウェブサイトを作成するのに役立つ貴重な一連の投稿であったことを願っています。このチュートリアルに関して質問がある場合、または将来のチュートリアル/ミニシリーズのリクエストがある場合。このブログ投稿のコメントセクションにコメントを残してください。そうすれば、回答を返すことができます。

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。