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

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

畫像[1]-Avadaでインタラクティブなタイムラインページを作成する。

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

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

畫像[2]-Avadaでインタラクティブなタイムラインページを作成する。

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

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

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

  • 見つける アニメタイプ

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

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

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

畫像[3]-Avadaでインタラクティブなタイムラインページを作成する。

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

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

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

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

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

畫像[4]-Avadaでインタラクティブなタイムラインページを作成する。

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

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

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

打點 + エレメント

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

畫像[5]-Avadaでインタラクティブなタイムラインページを作成する。

セットアップ名の內(nèi)容例は以下の通り:

畫像[6]-Avadaでインタラクティブなタイムラインページを作成する。

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

畫像[7]-Avadaでインタラクティブなタイムラインページを作成、これらの隠れた機能を正しく使っていますか?

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

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

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

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

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

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

VII. コンテンツブロック:タイムラインテンプレートの統(tǒng)一された構(gòu)造を作る

畫像[8]-Avadaでインタラクティブなタイムラインページを作成する。

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

アドバンテージ:

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

Avada Live Editor:タイムライン體験をリアルタイムで構(gòu)築

アバダ フロントエンドのビジュアルエディター(Live Editor)は、リアルタイムのドラッグ&ドロップ+プレビューをサポートし、タイムラインページを構(gòu)築する際の効率を向上させ、微調(diào)整に適しています:

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

お問い合わせ
チュートリアルが読めない?無料でお答えします!個人サイト、中小企業(yè)サイトのための無料ヘルプ!
カスタマーサービス WeChat
カスタマーサービス WeChat
電話:020-2206-9892
QQ咨詢:1025174874
Eメール:info@361sale.com
勤務(wù)時間: 月~金、9:30~18:30、祝日休み
? 複製に関する聲明
この記事はミリーが執(zhí)筆した。
終わり
好きなら応援してください。
クドス687 分かち合う
おすすめ
解説 ソファ購入

コメントを投稿するにはログインしてください

    コメントなし