Diviプラグインのハイライト–Diviタイムラインモジュール

公開: 2017-04-30

時系列情報を表示する最も興味深い方法の1つは、タイムラインを使用することです。ステップバイステップの説明、履歴書の経験のリスト、ポートフォリオのプロジェクトのリスト、またはブログの投稿でさえ、タイムラインは情報を視覚的に魅力的にすることができます。 Divi Timeline Moduleと呼ばれるプラグインを使用して、DiviBuilder内で独自のタイムラインを作成できます。

TortoiseITがElegantMarketplaceを介してサードパーティのプラグインであるDiviTimeline Moduleは、Divi Builderにいくつかの新しいモジュール（メインモジュールと3つのコンパニオンモジュール）を追加して、2つの異なるタイプのレスポンシブタイムラインを作成します。

タイムライン上の各ポイントのコンテンツを作成する場所。タイムラインの各アイテムには、独自のコンテンツ、リンク、色、フォント、アイコンなどを含めることができます。
ページ、投稿、メディア、またはプロジェクトのいずれかからの既存のコンテンツを使用するもの。

この概要では、両方のタイプのタイムラインを作成する手順を実行してから、ブログページを作成する例を示します。この概要では、Unsplash.comの無料の画像を使用しています。始めましょう。

Diviタイムラインモジュールプラグインのインストール

インストールは簡単です。プラグインをアップロードして、他のプラグインと同じようにアクティブ化するだけです。他の設定は必要ありません。

タイムラインの作成

4つのモジュールがあります:(投稿）–垂直、コンテンツ、注目の画像、および垂直。複数列のレイアウトで機能しますが、単一列のレイアウトが最適です。 タイムライン–垂直またはタイムライン（投稿）–垂直はページ内で使用されます。残りはレイアウトの作成に使用されます。

タイムライン垂直

タイムライン–垂直モジュールを単一列の行に追加します。

[一般設定]で、新しいタイムラインアイテムを追加したり、タイムラインのタイトルを指定したり、タイムラインの色を選択したりできます。 [新しいタイムラインアイテムの追加]をクリックして、各タイムライン要素を作成します。

[新しいタイムラインアイテムの追加]をクリックすると、テキスト、メディア、ラベル、その他のボタン、アイコン、アイコンの色、背景色、画像/アイコンのアニメーションを備えたコンテンツエディターが開きます。また、すべての標準の詳細設計設定とカスタムCSSも含まれています。

必要な数のタイムライン要素を追加します。ここで、5つの要素を追加し、中心線の色を緑に変更したことがわかります。タイムライン要素内で、各要素のアイコンと色を選択しました。

タイムラインの垂直方向の結果

これが私が作成した簡単なタイムラインです。 5つのアイテムがあり、それぞれに独自のコンテンツとアイコンがあります。線に選択した色もコンテンツウィンドウの下部に追加されました。モジュールを保持するセクションに背景画像を追加しました。

もちろん、高度なデザイン設定を使用することで、モジュールをページに合わせてスタイル設定できるため、背景を白にしたり、これらのフォントを使用したりする必要はありません。

これは、指示、履歴書、製品リスト、ポートフォリオなどの番号付きのステップに最適です。

ポストタイムライン

コンテンツからタイムラインを作成することもできます。これには、投稿、ページ、メディア、またはプロジェクトが含まれます。仕組みは少し複雑になる可能性がありますが、簡単に作成できます。

次の2つのことを行う必要があります。

レイアウトを作成する
ページを作成し、そのレイアウトを選択します

レイアウトとページの作成に必要なすべてのモジュールが含まれています。サンプルのブログ投稿を使用して例を作成しましょう。

レイアウトを作成する

まず、レイアウトを作成します。ダッシュボードでは、ディビ、ディビ図書館に行き、新規の追加]を選択します。レイアウトにわかりやすい名前を付けます（私はポストタイムラインレイアウトを選択しました）。 テンプレートタイプとして[レイアウト]を選択します。 [グローバル]をオフのままにします。 [送信]をクリックします。

作成したレイアウトには、投稿（または選択した投稿タイプ）が表示されます。これを独自のブログモジュールを作成することと考えてください。投稿のレイアウトを設計できるのはあなただけです。そうではありませんが、その例は私がそれを簡単に理解するのに役立ちました。まあ、それは一種ですが、実際にはそうではありません。先に進みます。

このレイアウトは、プラグインに含まれているタイムラインコンテンツ、注目の画像、投稿タイトルのモジュールを使用して作成されています。

レイアウトを作成するには、2列のレイアウトを選択し、右側にタイムライン–注目の画像モジュールを配置し、左側にタイムライン–投稿タイトルとタイムライン–コンテンツモジュールを配置します。もちろん、画像やタイトルのみを使用したり、さまざまな構成で配置したりするなど、レイアウトを少し試してみることもできますが、最初に通常のレイアウトを作成しましょう。

注–これらのモジュールは、ほとんどのDiviBuilderモジュールのようにページ内では使用されません。これらは、タイムライン（投稿）–垂直モジュールによって呼び出されるレイアウト内で使用することを目的としています。

これは、DiviBuilderで表示されるレイアウトです。予想どおり、これらの各モジュールには、 [一般設定] 、 [詳細設計設定] 、 [カスタムCSS ]などの独自のオプションがあります。

1 / 3、2 / 3レイアウトを使用していますが、1 / 2、1 / 2も機能します。これは、使用する注目画像のサイズ、表示するコンテンツの量、およびフォントサイズなどの他の設定に部分的に依存します。

モジュールを配置してすべての設定を選択したら、[公開]の下の右側にある[更新]を選択します。

各モジュールを詳しく見ていきましょう。

注目の画像モジュール

注目の画像モジュールは、期待どおりの動作をします。投稿の注目の画像を表示します。画像サイズを選択できるドロップダウンボックスが含まれています。また、代替テキスト、タイトル、ライトボックスで開く、リンクURL、同じウィンドウまたは新しいタブで開く、アニメーション、画像の下のスペースの削除、配置、デバイスの無効化、および管理ラベルも含まれます。

中程度の画像サイズを選択し、アニメーションをオフにしています。

タイトル投稿モジュール

投稿タイトルモジュールを使用すると、コンテンツにリンクし、管理ラベルを変更し、CSS設定を設定できます。 [コンテンツへのリンク]設定を[はい]に設定したままにしておくことをお勧めします。残りはデフォルトに設定したままにしました。

コンテンツモジュール

コンテンツモジュールでは、専門家またはコンテンツを表示することを選択し、[続きを読む]ボタンを表示できます。抜粋と続きを読むボタンを表示するように設定しました。

ページを作成する

Divi Builderを使用して新しいページを作成し、タイムライン（投稿）–垂直モジュールを単一の列レイアウトにドロップします。

タイムライン（投稿）垂直モジュール設定

このモジュールは、作成したレイアウトを呼び出します。ここには、タイトル、レイアウト、中心線の色、タイムライン上のアイテムのアイコン、表示番号またはアイコン、アイコン/番号の色と背景色、アニメーション、ページネーション、投稿の種類、表示する投稿の数など、多くのオプションがあります。投稿オフセット（最初に投稿する）、分類、および管理ラベル。

作成したレイアウトを呼び出すには、ループレイアウトと呼ばれるドロップダウンリストからレイアウトを選択します。下にスクロールして、ブログ投稿を表示するために投稿タイプとして[投稿]を選択します。

すべての選択を行ったら、ページを公開します。

タイムライン結果の投稿

結果は、タイムライン上の私の最新の投稿を含むブログページです。背景画像の上にタイムラインを配置しました（画像はセクションに追加されます）。このモジュールでは、アイコンはグローバルです。タイムラインを青に設定し、背景は黄褐色のアイコンと青いアイコンを使用しました。投稿モジュールは、詳細デザイン設定を使用して、ページに一致するようにさらにスタイルを設定できます。

ブログの例

タイムラインは他のレイアウト内で使用できます。いくつかの投稿を上部に表示し、残りをタイムライン内に表示するブログレイアウトを作成したかったのです。

画像を上、コンテンツを中央、タイトルを下にして、1列にレイアウトを作成しました。

次に、ブログモジュールとタイムライン（投稿）–垂直モジュールを使用してページを作成しました。グリッドに3つの投稿を表示するようにブログモジュールを設定しました。 タイムラインモジュールのオフセットを3に設定して、ブログモジュールが表示する投稿を無視し、投稿番号4から開始するようにしました。ブログの下のコンテンツを訪問者に警告するメッセージを含むテキストモジュールをそれらの間に配置しました。投稿はまだブログの一部です。

ブログページの結果

こちらがブログページです。その結果、読者がコンテンツをガイドするすっきりとしたレイアウトになります。もちろん、これは単なるブログページである必要はありません。これは、ポートフォリオページ、アートワーク、サービスなどのプロジェクトを表示するためにも使用できます。

最終的な考え

タイムラインは、時系列または数値データを表示するための優れた設計要素です。 Divi TimelineModuleはこの機能をDiviBuilderに追加し、カスタムタイムラインを作成したり、ページ、投稿、メディア、プロジェクトなどのコンテンツを使用して時系列のタイムラインを作成し、レイアウト内に表示する簡単な方法を提供します。

プラグインは使いやすく、Diviモジュールに期待するすべてのデザイン設定がここにあります。習得するのにそれほど時間はかからず、レイアウトとページの作成はDiviBuilderを使用するのと同じくらい速くて簡単です。 Webサイトにタイムラインを追加する場合は、Diviタイムラインモジュールが最適です。

ご意見をお聞かせください。 Diviタイムラインモジュールを使用しましたか？ コメントであなたの経験について教えてください。

Ollie The Designer /shutterstock.comによる注目の画像