Avadaでインタラクティブなタイムラインページを作成しましょう。

アバダビルダー 豊富なモジュールとレイアウト機能を提供します。Timeline "ページを作る時、基本的な視覚効果を満たすだけでなく、探求する価値のある多くの機能を隠し、よりインタラクティブで、情報豊富で、柔軟なデザインのTimelineディスプレイを作るのに役立ちます！ウェブページ.

I. "条件付きロジック "を使ってダイナミックなタイムラインコンテンツを作る

Avadaはコンテナの可視性機能をサポートしており、ユーザーID、デバイスタイプ、ログイン状態、言語などに基づいてコンテンツの表示を制御することができます。これを設定するには、要素のGeneralタブで、Visibility → Add Display Conditionを有効にします。

Avadaスクロール・アニメーションによるインタラクションの強化

タイムラインの各ノードでは、アイコンやテキスト、プログレスバーにスクロールアニメーションを追加して、次のような効果が得られます。ウェブページ躍動感。

への切り替え エクストラ タブ

• 見つける アニメタイプ

アニメーションタイプの選択

• ドロップダウンメニューからアニメーションを選択します：フェード（フェードイン）

タイムディレイとレイヤー表現によるアニメーションは、「スクロールするタイムライン」の視覚効果を生み出す。

第三に、"Sticky Column "を組み合わせて、フローティング・タイムライン・ナビゲーションを作成する。

Avadaはカラムをスティッキーモードに設定することをサポートしています。

ポップアップ表示された設定ウィンドウで、一番上の エクストラ タブ

下にスクロールして、"Position Sticky "設定を見つける。

• スイッチオン（「オン」に設定）
• スティッキー・コンテナのトランジション・オフセットを設定する。 80px)

4つ目は、タイムラインノードの情報を拡大するための「モーダルポップアップ」の使用である。

各時点の省略情報をクリックでトリガー可能ポップアップウィンドウ(モーダルポップアップ）で、よりリッチなコンテンツ、画像、動画、フォームを表示できます。

モーダルポップアップモジュールの追加

打点 + エレメント

モジュールを検索して選択します：モーダル

セットアップ名の内容例は以下の通り：

ボタンを挿入し、リンク（http://modal2020）を入力して、ボタンのトリガーを次のように設定する。

V. 視覚的なパーソナライゼーションのためのカスタムアイコンと接続線

アバダのタイムラインは、より柔軟なビジュアル・スタイルを可能にする：

• デフォルトのアイコンをSVGアイコンまたはブランド固有のアイコンに置き換える（アイコンピッカーまたはSVGモジュールを使用）
• Dividerモジュールを使って、接続線をシミュレートし、線の色、太さ、点線のスタイルをカスタマイズできます。
• Flexboxコンテナによる手動レイアウトタイムライン段落を左右にずらして配置する

フォーム、アニメーション、カウンター、その他のモジュールにより、インタラクションの奥行きが深まる。

拡張可能なモジュールは以下の通り：

• カウンター(カウンタ): 売上、ユーザーなどの動的データを表示します。
• フォームビルダー: ユーザーはフィードバックの提出や予約の申し込みなどができます。
• Lottie Animation Module: タイムライン・ダイナミクスを強化する高品質SVGアニメーションの導入

VII. コンテンツブロック：タイムラインテンプレートの統一された構造を作る

Avadaのウェブサイト機能では、タイムラインの段落をテンプレートブロックとしてデザインすることができ、統一性と迅速な再利用が可能です。

アドバンテージ：

• すべてのノードスタイルに一貫性があり、メンテナンスが容易。
• モジュールを何度もドラッグ・アンド・ドロップする必要はなく、コンテンツを変更するだけでよい。
• 条件付きロジックで「ブロックレベルの動的表示」を実現できる。

Avada Live Editor：タイムライン体験をリアルタイムで構築

アバダ フロントエンドのビジュアルエディター（Live Editor）は、リアルタイムのドラッグ＆ドロップ＋プレビューをサポートし、タイムラインページを構築する際の効率を向上させ、微調整に適しています：

• アライメント
• アニメーション効果
• レスポンシブ表示の最適化（モバイルプレビュー）

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