會(huì)社の歴史、プロジェクトの進(jìn)捗狀況やマイルストーンを紹介する場合、"タイムライン"は、非常に直感的でデザイン性の高い表現(xiàn)方法です。この記事では、以下の方法でデザインを表現(xiàn)する方法を紹介する。 アバダビルダー屬コードなし、プラグイン依存なしを?qū)g裝している、スクロール可能なスティッキー付きカスタム?タイムライン効果

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

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

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

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

2.ビジュアル?アピールとプロ意識(shí)の向上

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

3.利用者の滯在時(shí)間の延長

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

エフェクト表示の説明

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

• スクロール中の左タイムスタンプ畫面上部に貼り付け.;
• 期間の內(nèi)容は右側(cè)に表示されている；
• 全體的なレスポンシブ?レイアウトは、モバイル?デバイス上で自動(dòng)的にアダプティブ?タイポグラフィに変換される。

タイムライン作成の手順

ステップ1：新規(guī)コンテナの追加

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

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

コンテナに新しい行を追加し、以下の列幅の4列構(gòu)造に設(shè)定する：

列番號(hào)	用途	推奨幅
コラム1	左縦線	2%
コラム2	ポイント?イン?タイム接続回線	8%
コラム3	時(shí)間＋タイトルテキスト	35%
コラム4	右側(cè)のコンテンツ表示	55%

ステップ3：各列の內(nèi)容とスタイルの設(shè)定

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

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

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

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

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

コラム3：表示時(shí)間とタイトル

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

スティッキーに設(shè)定する：

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

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

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

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

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

• カラムは、正常なスクロール表示を保証するためにスティッキー（粘著性）を設(shè)定しない；
• この構(gòu)成は、時(shí)系列に従って繰り返すことで、內(nèi)容の複數(shù)の段階を示すことができる。

概要

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

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

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