このタイムライン セクションを使用すると、ユーザーはプロジェクトのマイルストーンとタスクを時系列で表示できます。
これは、プロジェクトの進行状況を強調したり、申請プロセスを説明したり、賞などの成果を紹介したり、その他のカスタマイズ可能なオプションを提供したりする場合に特に有益です。
情報をタイムライン形式で表示する構造化された視覚的に魅力的な方法を提供し、ユーザー エクスペリエンスとエンゲージメントを強化します。
ここで扱われる内容：
ページにセクションを追加
- ページにセクションを追加できます。 既存のページにセクションを追加することも、 新しいページを作成する あなたのウェブサイト内。
- あなたのページで、をクリックしてください 青+アイコン 追加する 新しいセクション あなたのページに。
- 今すぐ セクションカテゴリ 左側にあります。
- 以下を行うには、 タイムライン タブ (1) から選択できます さまざまなレイアウト タイムライン (2) セクションの。
- セクションがページに追加されます。クリック Save (3) ボタンをクリックして変更を保存します。
リスト アイテムの追加と編集
リストアイテムを追加
セクションを追加したら:
- 以下を行うには、 タイムラインを編集 (1) ボタンをクリックして、リスト項目パネルを開きます。
- 以下を行うには、 アイテムを追加 (2) ボタンをクリックして、新しいリスト アイテムを追加します。
- あなたは 複製または削除 (3) リスト項目。
- 指定します 見出し (4) タイムラインセクション。
リスト アイテムの編集
編集するリスト項目をクリックします。 特定のリスト項目の編集オプションが開きます。
ここから次のことができます。
- プライマリイメージとセカンダリイメージのアップロード/削除 (1)
あなたはアップロードすることができます 二次画像 と一緒に プライマリ画像 各リスト項目に設定されます。ユーザーが項目の上にマウスを移動すると、プライマリ画像の代わりにセカンダリ画像が表示されます。さらに、 画像のアクセントカラー画像の上にマウスを移動すると表示されます。 - 加える Title (2)、字幕 (3)、および説明 (4) リスト項目の。
- 選択したレイアウトによっては、特定のリスト項目にサブタイトルと説明のオプションが見つからない場合があります。
説明を追加する前に確認してください この 記事。
5. クリック時のアクション – タイトルと画像
個々のアイテムのクリック動作をカスタマイズできます。 タイムライン セクション。利用可能なオプションは次のとおりです。
- リンクへ移動
このオプションを選択すると、 リンクビルダーを使用すると、このアイテムにハイパーリンクを追加できます。このリンクにより、ユーザーを Web サイト内の別のページまたは外部 URL に誘導できます。 もっと知る 自己紹介 リンクビルダー. - ライトボックスで開く
このオプションではアイテムを拡大して表示します ライトボックス クリックすると表示されます。このモードでは、 サブタイトル and 詳細説明 アイテムに関連付けられた情報はグリッド ビューには表示されませんが、ライトボックス モードでは表示されます。 - 何もしません
このオプションを選択すると、アイテムをクリックできなくなります。選択すると、アイテムをクリックしてもアクションはトリガーされません。
6. 新しいウィンドウでリンクを開く: で開くようにリンクを設定します 新しいタブまたは同じタブで。 これは次の場合にのみ表示されます リンクへ移動 オプションが選択されている場合は、 クリック時のアクション メニュー。
7. ボタンとリンク: 任意のタイプを追加します リンク リスト項目にボタン/画像リンク/ソーシャルアイコン/テキストリンクを追加できます。 さらに詳しく.
8. カードスタイルのオーバーライド
セクションのカードスタイル設定を上書きすることができます。 スタイル設定 タイムラインセクションで各アイテムのカードを個別にカスタマイズできます。これにより、リストアイテムごとに異なるスタイルを適用し、より細かくカスタマイズできます。
さらに詳しく ダイナミックセクションのカードオプションについて。
9. シェイプスタイルのオーバーライド
オーバーライド オプションを使用すると、タイムライン セクション内の各画像に個別に異なる形状を割り当てることができ、各アイテムの視覚スタイルをより細かく制御できます。 さらに詳しく シェイプマスクについて。
10. 保存: カスタマイズを行った後、変更を保存します。
配列表項目
タイムラインセクションの要素を管理する
タイムラインセクションには、 要素タブ セクション内のさまざまな要素の表示を簡単に管理できます。シンプルなトグル スイッチを使用すると、要素自体を削除したり変更したりすることなく、特定の要素を有効または無効にすることができます。
- 以下を行うには、 タイムラインを編集 （1）ボタン。
- 選択する 要素 (2) タブ。
- 変更を加えたら、 Save （3）ボタン。
セクションのオプション
- 見出しを表示: タイムライン セクションの見出しの表示を有効または無効にします。
- ボタンを表示: セクション レベルでボタンを表示するかどうかを制御します。
アイテムオプション
- 画像を表示: 画像の表示/非表示を切り替えます。
- ショーのタイトル: タイトルを表示するかどうかを制御します。
- 字幕を表示: 字幕を有効または無効にします。
- 説明を表示: アイテムの説明の表示を管理します。
- ボタンを表示: 個々の項目のボタンを表示するかどうかを決定します。
セクションのレイアウトを変更する
- クリックしてください タイムラインを編集 ボタンをクリックしてセクション編集パネルを開きます。
- 選択する レイアウト タブには何も表示されないことに注意してください。
- ここから、ページにセクションを追加した後でも、セクションのレイアウトを簡単に変更できます。
レイアウトを変更している間、セクション関連のレイアウトが上部に表示されます。
これら以外にも、以下のセクションからレイアウトを選択することもできます。 その他のレイアウト 見出し。
スタイルオプション
- ソフトウェアの制限をクリック 画像リストの編集
- 選択する スタイル（1） タブには何も表示されないことに注意してください。
- セクション要素のスタイルを変更し、 保存 (2) あなたの変更。
セクションには複数のスタイル オプションがあります。
- 表示オプション
- アラインメント
- 文字サイズ
- 間隔
- セクションの見出し
- タイムラインスタイルオプション
- 画像オプション
- シェイプマスク
- 画像ホバーオプション
- イメージボーダー
- カードオプション
- 影のオプション
- ボタンとリンク
表示オプション
- 特定します 行間のスペース リスト項目の。
アラインメント
- 整列 テキストを水平に セクション内で、左揃え、右揃え、中央揃えに設定できます。
- 整列 コンテンツを縦方向に表示 セクション内で、上揃え、中央揃え、下揃えに設定できます。
- 選択する コンテンツの順序 つまり、最初に表示されるリスト項目の画像または関連するテキストです。
文字サイズ
- 以下を行うには、 文字スタイルの変更 にアクセスするためのボタン 設計 セクションと フォントのサイズとスタイルを管理します。
- をセットする Title セクションのリスト項目のフォント スタイル。
- をセットする サブタイトル セクションのリスト項目のフォント スタイル。
- デフォルトを設定する 詳細説明 セクションのリスト項目のフォント スタイル。
- このオプションを有効にすると 数字をアニメーション化する に存在する Title and サブタイトル フィールド。オンにすると、数値が動的なカウントアニメーションとともに表示され、視覚的に魅力的なものになります。
間隔
- 特定します 画像の幅 リストアイテム用。
- 特定します セクション見出しの下のスペース ピクセルで。
- 特定します スペースアバウト画像 リスト項目の (%)。
- 特定します 仕切りの周りのスペース リスト項目の水平方向の割合（％）。
- 特定します タイトルの下のスペース リスト項目の (%)。
- 特定します 字幕の下のスペース リスト項目の (%)。
セクションの見出し
- 水平に揃える セクションの見出しテキスト。左、中央、右に設定できます。
- 有効/無効にする 分配器 セクションの見出しとセクションのコンテンツの間。
- をセットする 仕切りの厚さ (ピクセル単位)。
- 特定します 仕切りの色 カラーピッカーから。
- 選択する ディバイダースタイル をドロップダウンから選択します。
- をセットする 見出しの幅 セクション タイトルの表示幅を定義します。最小値は 50% です。
タイムラインスタイルオプション
- セクション内の 2 つおきの項目を 代替の （反対側。
- まず リーダーシップ アイテムの。
- 特定します 区切り線の幅 セクション用。
- 特定します ベースライン (背景) ディバイダーの色。
- 特定します アクティブライン (強調表示) ディバイダーの色。
画像
- 選択する Iメイジクロップ リスト項目の場合。 画像を正方形、円形、横長、縦長、オリジナルに設定できます。
- リスト項目の各辺に共通の角半径または異なる角半径を選択し、数値 (px) を設定します。 Cまたは半径 リスト項目の画像。 もっと知る.
シェイプマスク
- シェイプマスク: このトグルを有効にすると、タイムラインセクションの画像にシェイプマスクが適用されます。有効にすると、選択したシェイプが画像に視覚的にクリップされ、その形状に収まります。
- 形状を選択: 画像に適用するさまざまな定義済み形状から選択します。これにより、丸型、ダイヤモンド型、ドロップ型などのユニークな形で画像を表示して、コンテンツをクリエイティブにスタイル設定できます。
- シェイプマスクオプションはレイアウトに依存します – タイトルやサブタイトルなどのテキストが画像の上に表示されるレイアウトでは表示されない場合があります。
- ストレッチ設定は複数の要因に依存します – スタイル タブで定義された画像サイズ、配置、切り抜きの設定が含まれます。
- 画像の切り抜きがオリジナルに設定されている場合画像の実際の寸法によって、垂直方向に引き伸ばされるか、水平方向に引き伸ばされるかが決まります。
画像ホバー
- 選択する 画像ホバーの色 の アクセントの色 または 指定の。 を選択した場合 アクセントの色、次に指定します 不透明度各アイテムのアクセントカラーを以下から指定できます。 アイテムを編集 パネル。
- を選択した場合 色を指定 オプションを設定してから オーバーレイの色と不透明度.
- に選択します。 リスト項目の画像をアニメーション化する はいをクリックしてホバーします。 ライブページでこの機能を確認してください.
- 選ぶ アニメーションスタイル 画像の上にカーソルを置いたときに表示されます。
- 許可する場合は選択してください 画像の遷移 ホバーしているかどうか。
- ドロップダウンリストから トランジションスタイル ホバー遷移用。使用可能なオプションはフェードと反転です。
イメージボーダー
- 境界線の有効化/無効化 トグルを切り替えて画像の周りを囲みます。
- を選択してください 共通の境界線 画像のすべての面、または指定することもできます 別々に境界線を付ける それぞれの側に。
- 特定します 幅 国境の。 0 に設定すると、境界線は表示されません。画像の各辺の境界線の幅を個別に設定するオプションもあります。
- まず 境界線の色 カラーピッカーから。
- 優先するものを選択してください ボーダースタイル をドロップダウンから選択します。
- を決定する モバイルの境界線の幅 デスクトップ用に選択された幅に合わせて配置します。
カード
- 方法を参照してください カードの管理に。
Shadow
- ディスプレイ – リスト項目の背後にある影を常に表示するか、ホバー時にのみ表示するかを選択します。
- 形式 – 既存のプリセットから選択するか、カスタム シャドウを作成します。
カスタムオプションを選択した場合は、これにアクセスしてください ボックスシャドウジェネレータ カスタム シャドウを作成します。 最後に、コピーして貼り付けます ボックス シャドウ CSS. - プリセットオプションを選択した場合は、 影のスタイルを選択 をドロップダウンから選択します。
ボタンとリンク
- 方法を参照してください のスタイリングを管理する ボタンとリンク。
