アバダ・テーマ・チュートリアル：ホームページにカスタムタイムラインを作成し、時間軸に基づいたブランドストーリーを深く紹介する方法

会社の歴史、プロジェクトの進捗状況やマイルストーンを紹介する場合、"タイムライン"は、非常に直感的でデザイン性の高い表現方法です。この記事では、以下の方法でデザインを表現する方法を紹介する。 アバダビルダー属コードなし、プラグイン依存なしを実装している、スクロール可能なスティッキー付きカスタム・タイムライン効果

なぜホームページにカスタムタイムラインを作る必要があるのですか？

トップページはウェブサイトの顔であり、訪問者がウェブサイトに対して抱く第一印象は、多くの場合トップページからもたらされる。置く "カスタム・タイムライン「参加する図頭いくつかの重要な役割を果たすことができる：

1.ブランドストーリーを明確に伝える

タイムラインは企業の成長を示す直線的アプローチ設立年、重要なマイルストーン、製品リリース、チーム拡大などの導入部は、平易な段落の導入部よりも読みやすく、構造化されている。訪問者にあなたの開発背景を簡単に説明する.

2.ビジュアル・アピールとプロ意識の向上

ホームページには、以下のようなタイムラインが追加されます。従来のレイアウトの単調さを打ち破る左右のカラム、画像コーディネート、スクロールアニメーション、スティッキーエレメント、その他のテクニックを駆使して、デザインコンシャスなページブロックを作成し、ブランドトーンと全体的な美観を高めます。

3.利用者の滞在時間の延長

タイムラインはまさにそのようなコンテンツである。ガイド書体これは、ユーザーの閲覧時間を延長し、直帰率を減らすのに役立ちます。SEOパフォーマンスの向上.

エフェクト表示の説明

には アバダ・インベストメント・テンプレートについて例えば、"会社沿革 "のセクションでは、次のような効果が見られる：

• スクロール中の左タイムスタンプ画面上部に貼り付け.;
• 期間の内容は右側に表示されている；
• 全体的なレスポンシブ・レイアウトは、モバイル・デバイス上で自動的にアダプティブ・タイポグラフィに変換される。

タイムライン作成の手順

ステップ1：新規コンテナの追加

• Avada Builderを開き、Timelineを追加したいページに移動します；
• クリック "+ コンテナ"で、新しいコンテナを作成する；
• コンテナに背景色や上下の余白を追加して、視覚的な分離を高めることができる。

ステップ2：コンテナ内に4列のカラムレイアウトを追加します。

コンテナに新しい行を追加し、以下の列幅の4列構造に設定する：

ステップ3：各列の内容とスタイルの設定

コラム1：縦のタイムライン（縦ボーダー）

• コンテンツは追加されない；
• デザインタブで左のボーダーを設定します：
  • 左ボーダー幅: 5px
  • ボーダーカラーカスタムカラー

• 小さな画面デバイス（モバイル）用のレスポンス設定で、この列を非表示にします。

コラム2：水平の接続線（水平ボーダー）

• ここでもコンテンツは追加されない；
• 上部のボーダーを設定する：
  • トップ・ボーダー幅: 5px
  • ボーダーカラー同上

コラム3：表示時間とタイトル

• テキストブロック」または「タイトル」モジュールの追加

スティッキーに設定する：

• Extrasタブを開き、Stickyを有効にする；

• トップオフセット値の設定（推奨） 50px)を使って、トップコンテンツが見えなくなるのを防いでいる；

• 小さな画面のデバイスでスティッキーを無効にする（応答オプションで設定）。

コラム4：詳細表示（グラフィックまたはリスト）

• 画像、段落、アイコンリストなど、任意のコンテンツモジュールを追加できます；

• カラムは、正常なスクロール表示を保証するためにスティッキー（粘着性）を設定しない；
• この構成は、時系列に従って繰り返すことで、内容の複数の段階を示すことができる。

概要

Avada Builderのマルチカラムレイアウトそしてボーダー設定とともに 付箋コラムの特徴Timelineモジュールは1行もコードを書く事なく、簡単にレスポンシブで分かりやすく構成されたTimelineモジュールにする事が出来ます。会社の歴史、ブランドの発展、プロジェクトのタイムライン、イベントの総括など、このTimelineレイアウトはよりデザインコンシャスなビジュアルエクスペリエンスを提供します。

WordPress関連のチュートリアルや情報については、以下のリンクを参照してください。光子ゆらぎネットワーク最も充実したWordPressチュートリアルと、最もアクティブなWordPress Exchange コミュニティ.