要素を固定するにはどうすればいいですか?

要素を固定する理由

スティッキー要素はユーザーエクスペリエンスを向上させることができます。 ユーザーがページをスクロールしても重要なコンテンツが表示されるようにする. 

例えば、広告記事をデザインするときに、CTAボックスや重要なメッセージを表示したい場合があります。 ユーザーがスクロールしても表示される常にアクセスできるようにします。

ページの右側にある固定された CTA ボックスのデザインを見てください。メイン コンテンツが左側でスクロールしている間、このボックスは固定されたままです。

このアプローチにより、読者は中断されることなく重要な CTA に関与できるようになり、コンバージョン率と全体的なユーザー インタラクションが向上します。

GemPages では、スティッキー要素を追加するのは簡単で、コーディングの知識は必要ありません。

GemPagesで要素を固定する方法

ステップ1：要素を選択する

スクロール中に表示させたい要素を選択します。ボタンやバナーなどが考えられます。

ステップ2: 高度な位置設定にアクセスする

• GemPagesエディタの左側のサイドバーで、 設定.
• に移動します 高機能 タブには何も表示されないことに注意してください。

ステップ3：位置を固定に設定する

• 見つける 役職 詳細設定のオプション
• 位置をデフォルトから変更 スティッキーこの変更により、ユーザーが要素をスクロールしても、要素はビューポートに対する相対的な位置に「固定」されるようになります。

一般的なスティッキー要素の使用例

スティッキーポジショニングは、ページレイアウトやコンバージョン目標に応じて、さまざまな要素に適用できます。以下は、訪問者がスクロールしても重要なコンテンツが見えるようにするために、GemPagesでマーチャントがスティッキー要素を使用する一般的な方法の一部です。

スティッキーCTAボタンを作成する方法

ユーザーがスクロールしている間もCTAボタンを表示したままにしたい場合は、 役職 設定。

次の手順に従います。

ステップ1： まず ボタン要素 スティッキーにしたい。

ステップ2： に行きます 高機能 左側のサイドバーのタブ。

ステップ3： 下にスクロールして 役職 のセクションから無料でダウンロードできます。

ステップ4： をセットする 役職 オプション スティッキー.

有効にすると、訪問者がページをスクロールしても CTA ボタンが表示され続けるため、いつでも簡単にアクションを実行できるようになります。

モバイル端末のみに固定CTAを追加する方法

GemPagesでは、ボタンを設定すると スティッキー デスクトップでは、モバイルでも固定されたままになります。これは、GemPagesが 応答設計つまり、位置設定はデフォルトで全てのデバイスに適用されるということです。

ただし、CTAボタンを固定表示にしたい場合は モバイルのみボタンのモバイル版を別途作成し、そのバージョンのみに固定位置を適用することができます。

次の手順に従います。

ステップ1： モバイル端末でのみ固定表示にしたいボタンを複製してください。

ステップ2： まず オリジナルボタン更新する ディスプレイの設定 表示する デスクトップのみ そしてそれを隠して モバイル.

ステップ3： まず 複製されたボタン更新する ディスプレイの設定 表示する モバイル （必要に応じてデスクトップ上で非表示にすることもできます。）

ステップ4： 複製されたボタンを選択した状態で、 高機能 タブ。スクロールして 役職 セクションを設定します 役職 オプション スティッキー.

設定が完了すると、この固定表示機能はボタンのモバイル版にのみ適用され、デスクトップ版は変更されません。

魅力的な商品説明を作成する方法

固定製品説明は、顧客が製品の画像や長い説明をスクロールしている間、重要な情報（製品の詳細、価格、カートに追加ボタンなど）を表示し続けるために、製品ページでよく使用されます。

次の手順に従います。

ステップ1： まず 製品説明要素.

ステップ2： に行きます 高機能 左側のサイドバーのタブ。

ステップ3： 下にスクロールして 役職 のセクションから無料でダウンロードできます。

ステップ4： をセットする 役職 オプション スティッキー.