Avadaで2カラムのタイムラインレイアウトを構築する方法

ウェブサイトのデザインアバダ・タイムラインイベントの順序や開発プロセスを示すには理想的な方法である。また、2つのプロジェクトの進行状況を並行して表示したり、2つの部署の作業ノードを比較したり、複数のカテゴリーのタスクの進捗状況を表示したりするようなシーンでは、1つのタイムラインでは限界があります。この場合、"2段タイムライン"デザインはページの読みやすさと表現力を劇的に向上させる。

I. 2列のタイムラインとは？

2段組タイムラインの定義

2列Timelineは2つの時間プロセスを並べて表示するもので、通常左と右は異なるカテゴリー、プロジェクト、または部署を表しています。従来の1軸のTimelineに比べ、2列Timelineは以下の事が出来ます：

つの同期表示ごかんけいせいぼおん進歩への道
より明確なコントラストとパラレル・ナラティブを可能にする
情報の積み重ねを避け、より整理されたページにする。

代表的な使用例

社内2部門の勤務表を表示
製品設計と開発の同時進行の比較
教育・研修プログラムに関するオンラインとオフラインの取り決め

Avadaで2カラムのタイムラインを作成する方法

Avada Builderがサポートするアーキテクチャ・アプローチ

Avada Builderは直接 "2カラムTimeline "モジュールを提供しませんが、以下の方法で同様のレイアウトを実現することができます：

使う"コンテナ＋カラム「モジュール
モジュールの間隔とスタイルをコントロールし、2つの平行したタイムラインのように見せる。

ページ構成の推奨事項

ウェブページ一般的には次のような構成が使える：

トップタイトルエリア例えば、「マーケティング vs. 製品開発」というように。
2列のタイムライン左右各1本ずつコンテナ各列はカテゴリーに対応している。

III.実践事例："マーケティング進捗 vs. 製品開発進捗 "の実証

プロジェクトの背景

ある企業は、製品発売前にマーケティングと製品開発の進捗状況を並行して表示し、社内チームが両ラインの作業ペースを素早く理解できるようにしたいと考えている。

作業工程詳細

ステップ1：ページのコンテナ構造を構築する

ページをクリック 「コンテナの追加 ボタン
ポップアップ・ウィンドウで "1/2 - 1/2"(つまり、左と右の幅が半分ずつ）に最もフィットする。双線型ディスプレイの構成。

ステップ 2: タイムラインモジュールの追加

左カラムにTimelineモジュールを追加

左側の列エリアをクリックし "+要素"探すスタジオを追加する。 タイムラインモジュール

クリック "+ エレメント Title "モジュールを選択し、タイトルを "Marketing Progress "とする。

以下のノードを順番に追加する：

ブランド企画立ち上げ
マーケティング資料デザイン完成
プレローンチ広告

右カラムに別のタイムラインモジュールを追加

右のカラムエリアをクリックし、タイムラインモジュールも追加し、名前を「製品開発進捗」とし、以下のノードを設定する：

製品機能フリーズ
内部テスト版はオンライン
ライブ版のパッケージが完成

ステップ3：ノードのスタイルとアイコンを美しくする

アイコンのカラースタイルを個別に設定する
両者の違いを際立たせるために、左右で異なる背景色／ボーダー色を使用する。

ステップ4：結びの言葉を加える

2列のタイムラインの下にサマリーを追加し、目立つようにフォントカラーを調整可能。

励ましの言葉を添える（例：「2つの戦線が横並びで進んでいるので、発売日までお楽しみに！」）。

IV.最適化の提案とよくある質問

2列を高度に整列させるには？

各ノードの説明の長さは、グラフィック・コンテンツが蓄積されすぎないようにコントロールする。
アライメントは "Blank Spacing "モジュールを使って手動で調整できる。

モバイルではどのように表示されますか？

明確に区別したい場合は、各列の上部にカテゴリーを挿入することができます。キャプション(例：「マーケティング・タイムライン）
小さな画面でアイコンやテキストが圧縮されたり歪んだりしないようにする。

インタラクティブ効果やアニメーション効果を加えるには？

スクロールの使用アニメーション効果タイムラインをインクリメンタルにロードさせる
詳細を表示するには、ノード「ポップアップ・モーダル・ボックス」を設定します。

V. まとめ

あるアバダ 2列のTimelineを構築することは、ウェブページを表示するための実用的で美しい方法です。これはコンテナ対タイムラインの柔軟な使用によって可能になります。タイムラインモジュールを組み合わせることで、明確なコントラスト効果が得られる。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み