挨拶が始まりました #

ElementsKit の Sticky Content モジュールを使用すると、ページまたは投稿の任意のセクションを選択した位置に固定させることができます。このチュートリアルでは、Sticky Content モジュールのさまざまな機能と、それらを活用してコンテンツを目立たせる方法について説明します。

ビデオガイドをご覧ください:

または、次の手順に従ってください。

スティッキーコンテンツモジュールを有効にする #

Sticky Content モジュールの使用を開始するには、まず ElementsKit モジュールのリストからこれを有効にする必要があります。このモジュールを有効にしないと、Elementor で使用できません。スティッキー コンテンツ モジュールを有効にする方法は次のとおりです。

• に行く ElementsKit ➔ モジュール。ここで、スティッキーコンテンツモジュールを切り替えます の上 そしてクリックしてください 変更内容を保存.

上にスティッキー #

この機能は、ページの上部に任意のセクションを貼り付けるのに役立ちます。

ビデオガイドをご覧ください:

または、次の手順に従ってください。

• 案内する ElementsKit→ ヘッダー フッター→ クリック エレメンターで編集します。

• クリックしてください 内部セクションのアイコン.
• に行く 高度な-> ElementsKit Sticky を展開します.
• スティッキーオプションを選択➔ 上 ドロップダウンから。

• 新しいページを作成します -> をクリックします エレメントキットのアイコン 既製のテンプレートから準備ができたページを挿入します。

• 今すぐあなたのページに行きます-> ヘッダーが上部にベタベタしているのがわかります.

上の付箋の背景色の変更 #

ヘッダー部分がベタベタしているのに透明になっているという問題がわかります。したがって、背景色を変更する必要があります。 Sticky until 機能の下に、スティッキーセクションの背景色を変更するオプションがあります。

• スティッキーな背景色を選択します。 白.
• 「更新」をクリックします

• [ホームページ] -> [更新] -> [下にスクロール] に移動します。
• ヘッダーの背景色が白になっていることがわかります。

上までベタベタ #

セクションを複数のセクションに固定し、特定のセクションの後で固定を停止する場合は、ここでそのセクション ID を設定できます。 About Usセクションまで粘ってみましょう。

• クリック Elementorで編集する.

• 私たちについてをクリックしてください 内部セクションのアイコン.
• 次に、詳細設定に移動して、 CSS ID をコピーしてください.

• に行く ヘッダ➔ 高度な➔ エレメントキットスティッキー➔ までスティッキー.
• ここで私たちについてのセクションを貼り付けます CSSID に までスティッキー 分野.

• ヘッダーが次であることがわかります。 「会社概要」セクションまで粘ってください。

クラス追加機能 #

透明なヘッダーを使用している場合、背景色で問題が発生する可能性があります。下にスクロールすると、背景色が必要になる場合があります。ここで、ElementsKit は別のオプション、つまりクラス追加機能を提供します。たとえば 50 ピクセル下にスクロールすると、新しいクラスが追加されます。それが「ekit-sticky-Effects」です。このクラスを使用すると、任意の CSS を作成できます。どうすればできるか見てみましょう。

• カスタマイザに移動-> 追加のCSS.
• クラスを使用します。 「キット-スティッキー-エフェクト」 そして背景色を作ります グレー。

• ヘッダーに移動 -> を削除 背景色.
• オフセットを追加します。 例: 50ピクセル.

• 背景色が 透明。ただし、50px までスクロールすると背景色が追加されます。

上部のスティッキーオフセット #

• コンテンツや画像を上部に貼り付ける間に残すスペースの量を決定できます。他のスティッキーポジションでも同じことができます。 スティッキー オフセットを 100px として指定します。ヘッダーが 100px 以降に表示されていることがわかります。

• スティッキーを表示するには、次の 3 つのデバイス選択オプションがあります。 すべてのデバイス、デスクトップのみ、デスクトップとタブレット。オプションを選択して、どのデバイスでコンテンツをスティッキーとして表示するかを正確に決定します。

上スクロール時にスティッキーを表示 #

この機能は、上にスクロールするときにページの任意のセクションを貼り付けるのに役立ちます。

ビデオガイドをご覧ください:

または、次の手順に従ってください。

• クリックしてください エレメントキットのアイコン 事前に作成されたテンプレートからヘッダーを挿入します。

• クリックしてください 内部セクションのアイコン.
• に行く 高度な-> ElementsKit Sticky を展開します.
• スティッキーオプションを選択➔ 上にスクロールすると表示 ドロップダウンから。

に行く 要素 ➔ 以下のウィジェットをドラッグし、選択した領域にドロップします。

• 見出し。
• クリエイティブボタン.
• 画像.
• 見出し.
• ビデオ.

• [更新] -> [ページに移動] -> [更新] -> [上にスクロール] をクリックします。
• 上にスクロールすると、ヘッダーがベタベタしているのがわかります。

上にスクロールするまで固定 #

Sticky Headerセクションまでスティッキーにしてみましょう。

• スティッキーヘッダーをクリックします 内部セクションのアイコン.
• 次に、詳細設定に移動して、 CSS ID をコピーしてください.

• スティッキーナビゲーションヘッダーをクリックします 内部セクションのアイコン.
• に行く 高度な➔ エレメントキットスティッキー➔ までスティッキー.
• 次に、そのスティッキーヘッダーセクションを貼り付けます CSSID に までスティッキー 分野.

• [更新] -> [ホームページに移動] -> [更新] -> [上にスクロール] をクリックします。
• これで、ヘッダーがスティッキーであることがわかります。ヘッダー セクションがスティッキーになるまでは、ヘッダーはスティッキーであり、ビデオ セクションが来るとヘッダーはスティッキーでなくなります。

底に粘着性がある #

この機能は、ページの下部に任意のセクションを貼り付けるのに役立ちます。

ビデオガイドをご覧ください:

または、次の手順に従ってください。

• クリックしてください エレメントキットのアイコン 事前に作成されたテンプレートからフッターを挿入します。

に行く 要素 ➔ 以下のウィジェットをドラッグし、選択した領域にドロップします。

• 見出し.
• クライアントのロゴ.
• ビデオ.
• 見出し.

• クリックしてください フッター内部セクションのアイコン.
• に行く 高度な-> ElementsKit Sticky を展開します.
• スティッキーオプションを選択➔ 底 ドロップダウンから。

• [更新] -> [ページに移動] -> [更新] -> [上にスクロール] をクリックします。
• 上にスクロールすると、フッターがベタベタしているのがわかります。

底までベタベタ #

一番下の粘着部分まで粘着させてみましょう。

• クリックしてください 底部粘着性 内部セクションのアイコン.
• 次に、詳細設定に移動して、 CSS ID をコピーしてください.

• フッターをクリックします 内部セクションのアイコン.
• に行く 高度な➔ エレメントキットスティッキー➔ までスティッキー.
• 次に、その下部の粘着セクションを貼り付けます CSSID に までスティッキー 分野.

• [更新] -> [ホームページに移動] -> [更新] -> [上にスクロール] をクリックします。
• これで、下部のスティッキー セクションまでヘッダーがスティッキーであり、クライアント ロゴ セクションが来るとフッターがスティッキーでなくなることがわかります。

列に粘着 #

この機能は、列上の任意のセクションを貼り付けるのに役立ちます。

ビデオガイドをご覧ください:

または、次の手順に従ってください。

• 選択したエリアから構造を選択します。ここでは 3 列を取り上げます。

に行く 要素 ➔ 以下のウィジェットをドラッグし、選択した領域にドロップします。

• 見出し.
• 画像.
• アイコンボックス.

見出しと画像部分をベタベタにしてみましょう。

• クリックしてください 見出し内部セクションのアイコン.
• に行く 高度な-> ElementsKit Sticky を展開します.
• スティッキーオプションを選択します➔ カラム ドロップダウンから。

• クリックしてください 画像内部セクションのアイコン.
• に行く 高度な-> ElementsKit Sticky を展開します.
• スティッキーオプションを選択します➔ カラム ドロップダウンから。

• [更新] -> [ページに移動] -> [更新] -> [下にスクロール] をクリックします。
• 見出しと画像が固定されており、アイコン ボックスのコンテンツの右側がまだ動いていることがわかります。