スティッキーコンテンツ

スティッキーコンテンツ

お知らせ:当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

Sticky Contentを使用すると、ページ上の特定のセクションや要素を固定し、スクロール時に一緒に動かすことができます。また、一部のセクションが固定されたまま、背景コンテンツが動いているような錯覚を演出することも可能です。

Stickyに設定できるのは、列や箱 商品内の要素のみです。

列要素のcontent stickinessを有効にする方法

  1. ページ上でスティッキー化したい要素をクリックします。

  1. ドロップダウンをクリックし、プロパティを選択します。

  1. その列の設定アイコンをクリックします。

  1. 有効にする Stickinessトグルをクリックします。

  1. 必要なtop spacingとstack値を選択します。

  • Top Spacing: ヘッダーから要素を固定したい位置までのスペースです。

  • Stack 値: この値は、スティッキー設定された要素のうち、どの要素が前面に表示されるかを決定します。stack値が大きい要素が、stack値が小さい他の要素より前面に表示されます。

スティッキー設定およびその階層は、公開後にのみサイト上で表示されます。



箱要素に対してcontent stickinessを有効にする方法

  1. content stickinessを有効にしたい地域で追加するElementをクリックします。

  1. 要素トレイ内の箱要素をクリックします。

  1. 追加するElementを箱要素内でクリックします。

  1. ページ上でstickyにしたい要素をクリックします。

  1. ドロップダウンをクリックし、プロパティを選択します。

  1. 該当する列の設定アイコンをクリックします。

  1. 有効にするStickinessトグルをクリックします。

  1. 必要なtop spacingおよびstack値を選択します。

  • Sticky効果はビルダー上では反映されません。Webサイトをプレビューすることで、この機能の表示を確認できます。

  • ページのバナーセクションにはコンテンツのスティッキー化を有効にできません。

Sticky ContentがWebサイトでどのように活用できるか、スニークプレビューをご覧ください。