Avadaタイムラインのカラースタイルをカスタマイズする方法

タイムラインモジュールブランドの歴史、プロジェクトの進捗状況、イベントのスケジュールなどを紹介するのに最適。アバダのテーマパワフルでフレキシブルなビルトインタイムラインエレメントにより、イベントをグラフィカルなフォーマットで表示したり、カラースキームやスタイルをカスタマイズして、ブランドのビジョンに沿ったインターフェース体験を作り出すことができます。

タイムラインをもっと人目を引くものにしたい？アバダ・デュアル・ロウ・レイアウトを今すぐ試すページの視覚的インパクトを高める！

I. なぜタイムラインの色をカスタマイズする必要があるのですか？

1.1 ブランドイメージの一致

一貫したビジュアル言語は、ブランド認知の向上に役立ちます。デフォルトのタイムラインこのスタイルは審美的に美しいですが、ブランドのカラースキームとの不一致は全体的なプロフェッショナル感を低下させます。カラーをカスタマイズする事で、タイムラインを全体のウェブスタイルにフィットさせる事ができます。

1.2 読みやすさと視覚的階層の改善

適切な配色は、重要な時点を強調し、情報を重ねる感覚を高めることができる。例えば、異なる色でマーキングすることで、訪問者がコンテンツを素早く理解できるようになります。

1.3 ページプレゼンテーションの充実

とおすカラーバリエーションは、よりインタラクティブで魅力的なページにするために、技術的なスタイルやオプションのクールな色など、さまざまなムードある雰囲気を作り出すことができる。

第二に、Avada Timelineモジュールはカスタムカラーをサポートしていますか？

2.1 タイムライン本線のコンテナラインカラー

すべての時点を結ぶ縦線の色をコントロールし、メインのブランドカラーに合わせることを推奨する。

2.2 ノードアイコンの背景色 (Icon Background Color)

各時点でアイコン背景色はカテゴリーごとに設定できます。

2.3 文字色

コンテンツエリアのフォントカラーもカスタマイズでき、異なる文脈でもテキストが読めるようにすることができる。

Avada Timelineのカラースタイルを変更するには？

3.1 モジュール内蔵のカラー設定を使う（ビジュアル編集）

ページ・エディター (ライブビルダー);
タイムラインモジュールの "鉛筆アイコン "をクリックして、設定インターフェイスに入ります；

スタイル設定オプションを展開すると、以下のフィールドが表示されます：

アイコンの色
アイコンの背景色
アイコンの背景色

3.2 グローバルスタイルを使用して一貫性を制御する

もしサイトに複数のTimelineモジュールがあり、スタイルを統一したい場合は、Avadaのグローバル設定にアクセスしてください：

オプション セレクト・エレメント → スタジオ 対応するテーマ・スタイルを挿入する；
デフォルトの配色を設定する、フレームスタイル、アイコンの色など；
これらの設定は全てのTimelineモジュールに適用され、サイト全体のビジュアルの統一性を保ちます。

3.3 カスタムCSSによるスタイリングの微調整

より個人的なニーズを持つユーザーのために、TimelineのスタイルはCSSを使って拡張したり、上書きすることができます。

/* メインタイムラインの色を変更する */
.fusion-timeline-line {
  background-colour: #0f8fac；
}

/* タイムラインアイコンの色を設定する */
.fusion-timeline-icon {
  background-colour: #f5a623; }.
  color: #ffffff.
}

/* テキストを含むコンテンツボックスの背景 */
.fusion-timeline-content {
  background-color: #ffff; } /* コンテンツボックスの背景（テキスト付き） */ .fusion-timeline-content {
  border-left: 3px solid #f5a623; } /* content-box-background-with-text
  border-left: 3px solid #f5a623；
}

第4に、実践的な事例：テクノロジー企業のブランドヒストリー・ページの配色

4.1 背景となるシナリオ

ある企業は、2018年から2025年にかけてのブランド開発ノードを、原色を青（#12d5ea）とし、ページのスタイルに技術的な感覚を実現したいと考えた。

4.2 カラースキームの推奨

原色カラー: #12d5ea (ブランド原色)
文字色：ダークグレー #333

4.3 効果のプレゼンテーション

統一された配色と合理的な配分によって。タイムラインショーケースの役割を果たすだけでなく、ブランドイメージの一部となり、ページ全体の質感を高める。

V. まとめ

アバダのタイムライン・モジュールパワフルで視覚的に美しく、柔軟なカラースキームを備えたこのコンポーネントは、ブランド開発、プロジェクト進捗、コーススケジュールなどのページ構築に理想的なコンポーネントです。モジュール設定、グローバルスタイル、カスタムCSSを通して、ブランドの特徴に基づいた独自のカラースキームを作成することができます。

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