の Sticky Content module of ElementsKit lets you make any section of the page or post sticky to a selected position.
ビデオガイドを見る:
Steps to Use ElementsKit Sticky Content:
- に行く ElementsKit → モジュール → Enable スティッキーなコンテンツ → Save.
- Open page in エレメンター.
- Select section/column/widget → Advanced → ElementsKit Sticky.
- Choose Sticky Type (Top / Bottom / Scroll Up / Column).
- Set Offset, Sticky Until (CSS ID), Background if needed.
- Update and test on devices.
Follow the module’s detail functions:
スティッキーコンテンツモジュールを有効にする #
To start using the Sticky Content module, the first thing you should do is to enable this from the list of ElementsKit modules. Go to ElementsKit from your dashboard and follow the steps:
- ElementsKit 下 ElementsKit プラグイン
- Go to MODULES
- Toggle the Sticky Content module の上
- クリック 変更内容を保存
Steps 2: Sticky on Top #
この機能は、ページの上部に任意のセクションを貼り付けるのに役立ちます。
ビデオガイドをご覧ください:
または、次の手順に従ってください。
- 案内する ElementsKit→ ヘッダー フッター→ クリック エレメンターで編集します。
- 新しいページを作成します -> をクリックします エレメントキットのアイコン 既製のテンプレートから準備ができたページを挿入します。
- クリックしてください 内部セクションのアイコン.
- に行く 高度な
- ElementsKit Sticky を展開します.
- スティッキーオプションを選択➔ 上 ドロップダウンから
- 今すぐあなたのページに行きます-> ヘッダーが上部にベタベタしているのがわかります.
上の付箋の背景色の変更 #
You can change the background color whenever you need. Under the Sticky Until feature, you can find the option to change the background color of the sticky section.
- スティッキーな背景色を選択します。 Blue.
- 「更新」をクリックします
上までベタベタ #
セクションを複数のセクションに固定し、特定のセクションの後で固定を停止する場合は、ここでそのセクション ID を設定できます。 About Usセクションまで粘ってみましょう。
- クリック Elementorで編集する.
- クリックしてください Our School Goals 2019 inner section icon
- 詳細へ進む
- Find Layout
をセットする CSS ID and Copy it.
- に行く ヘッダ➔高度な➔エレメントキットスティッキー➔までスティッキー.
- ここで私たちについてのセクションを貼り付けます CSSID に までスティッキー 分野.
- ヘッダーが次であることがわかります。 Sticky Until the Our School Goals 2019 Section.
クラス追加機能 #
ElementsKit provides you another option and that is a class adding feature. If you scroll down for example 50px, a new class will be added and that is “ekit-sticky-effects”. Using this class you can make any CSS you want. Let’s see how you can do it.
- カスタマイザに移動-> 追加のCSS.
- クラスを使用します。 「キット-スティッキー-エフェクト」 そして背景色を作ります グレー。
- ヘッダーに移動 -> を削除 背景色.
- オフセットを追加します。 例: 50ピクセル.
- 背景色が 透明。ただし、50px までスクロールすると背景色が追加されます。
上部のスティッキーオフセット #
- コンテンツや画像を上部に貼り付ける間に残すスペースの量を決定できます。他のスティッキーポジションでも同じことができます。 スティッキー オフセットを 100px として指定します。ヘッダーが 100px 以降に表示されていることがわかります。
- スティッキーを表示するには、次の 3 つのデバイス選択オプションがあります。 すべてのデバイス、デスクトップのみ、デスクトップとタブレット。オプションを選択して、どのデバイスでコンテンツをスティッキーとして表示するかを正確に決定します。
上スクロール時にスティッキーを表示 #
この機能は、上にスクロールするときにページの任意のセクションを貼り付けるのに役立ちます。
ビデオガイドをご覧ください:
または、次の手順に従ってください。
- Go back to ElementsKit スティッキー オプション。
- スティッキーオプションを選択➔ 上にスクロールすると表示 ドロップダウンから。
[更新] -> [ページに移動] -> [更新] -> [上にスクロール] をクリックします。
上にスクロールすると、ヘッダーがベタベタしているのがわかります。
上にスクロールするまで固定 #
Let’s make it sticky until the Care About Us Section.
- Click on the sticky Care About Us 内部セクションのアイコン.
- Now, going to the Layout settings from Advanced tab、 をセットする CSS ID をコピーしてください.
- スティッキーナビゲーションヘッダーをクリックします 内部セクションのアイコン.
- に行く 高度な
- 探す エレメントキットスティッキー and paste that sticky header section’s CSSID に までスティッキー 分野.
- [更新] -> [ホームページに移動] -> [更新] -> [上にスクロール] をクリックします。
- これで、ヘッダーがスティッキーであることがわかります。ヘッダー セクションがスティッキーになるまでは、ヘッダーはスティッキーであり、ビデオ セクションが来るとヘッダーはスティッキーでなくなります。
底に粘着性がある #
この機能は、ページの下部に任意のセクションを貼り付けるのに役立ちます。
ビデオガイドをご覧ください:
または、次の手順に従ってください。
- クリックしてください エレメントキットのアイコン 事前に作成されたテンプレートからフッターを挿入します。
に行く 要素 ➔ 以下のウィジェットをドラッグし、選択した領域にドロップします。
- 見出し.
- クライアントのロゴ.
- ビデオ.
- 見出し.
- クリックしてください フッター内部セクションのアイコン.
- に行く 高度な-> ElementsKit Sticky を展開します.
- スティッキーオプションを選択➔ 底 ドロップダウンから。
- [更新] -> [ページに移動] -> [更新] -> [上にスクロール] をクリックします。
- 上にスクロールすると、フッターがベタベタしているのがわかります。
底までベタベタ #
一番下の粘着部分まで粘着させてみましょう。
- クリックしてください 底部粘着性 内部セクションのアイコン.
- 次に、詳細設定に移動して、 CSS ID をコピーしてください.
- フッターをクリックします 内部セクションのアイコン.
- に行く 高度な➔ エレメントキットスティッキー➔ までスティッキー.
- 次に、その下部の粘着セクションを貼り付けます CSSID に までスティッキー 分野.
- [更新] -> [ホームページに移動] -> [更新] -> [上にスクロール] をクリックします。
- これで、下部のスティッキー セクションまでヘッダーがスティッキーであり、クライアント ロゴ セクションが来るとフッターがスティッキーでなくなることがわかります。
列に粘着 #
この機能は、列上の任意のセクションを貼り付けるのに役立ちます。
ビデオガイドをご覧ください:
または、次の手順に従ってください。
- 選択したエリアから構造を選択します。ここでは 3 列を取り上げます。
に行く 要素 ➔ 以下のウィジェットをドラッグし、選択した領域にドロップします。
- 見出し.
- 画像.
- アイコンボックス.
見出しと画像部分をベタベタにしてみましょう。
- クリックしてください 見出し内部セクションのアイコン.
- に行く 高度な-> ElementsKit Sticky を展開します.
- スティッキーオプションを選択します➔ カラム ドロップダウンから。
- クリックしてください 画像内部セクションのアイコン.
- に行く 高度な-> ElementsKit Sticky を展開します.
- スティッキーオプションを選択します➔ カラム ドロップダウンから。
- [更新] -> [ページに移動] -> [更新] -> [下にスクロール] をクリックします。
- 見出しと画像が固定されており、アイコン ボックスのコンテンツの右側がまだ動いていることがわかります。
