Sticky Back to Top とは何ですか?
その スティッキートップに戻る 要素は、ウェブサイトのナビゲーションエクスペリエンスを向上させるために設計されたフローティングボタンです。訪問者がページの下部までスクロールすると、このボタンによって 〜へ トップに戻る ワンクリックで瞬時に.
この要素は、ユーザーの労力を軽減し、全体的なエンゲージメントを向上させるため、コンテンツが豊富な長いページで特に役立ちます。
先頭に戻る固定要素を追加するにはどうすればいいですか?
GemPages Editor v7 を使用して、ページに上部に固定された要素をドラッグ アンド ドロップするには、以下の手順に従います。
- あなたにログインする Shopify管理者 > GemPages ビルダー アプリ> ページ.
- 上部に固定要素を追加するページをクリックして、エディターに入ります。
- 左側のサイドバーからこの要素を検索し、ページ上の目的の位置にドラッグ アンド ドロップします。
- 要素を見つけて設定を開き、さらにカスタマイズします。
設定タブを構成する
下 設定 タブでは、アイコンの表示を好みに応じて設定できます。
サイズ
幅（Width） の三脚と 高さ: ボタンのサイズを定義して、目立つけれども邪魔にならないようにします。
パディング: テキストやアイコンの位置合わせを改善するために、ボタン内の内部間隔を調整します。
例えば、幅を100%（フル）、高さを自動に設定します。固定の「トップに戻る」ボタンが全画面表示されます。
経歴
背景として単色/グラデーションカラーまたは画像を設定します。
- 色： カラーコードを入力するか、「最近使用した色」/「おすすめ」リストから選択するか、カラーピッカーを使用して背景色を設定します。
- イメージ： 新しい画像をアップロードするか、ライブラリから選択して背景として設定します。
形状
以下を使用して形状をカスタマイズします。
- 境界： 境界線のスタイル (線/破線/点線) を選択し、ブランド デザインに合わせて境界線の色と太さを変更します。
- コーナー： 視認性を高めるために角の半径を調整します。
- 影： 深みを出すために影の効果を適用します。
アイコン
アイコンの表示/非表示を切り替えます。テキストのみを使用する場合はオフにしてください。
オンの場合:
- アイコンを選択: サイトのテーマに一致するアイコンをライブラリから選択するか、カスタム アイコン (SVG ファイルのみ) をアップロードします。
- 役職: ボタンが 左 or 右 画面の側面。
- 間隔: ボタンと画面の端の間の距離を調整して、正確な配置を実現します。
テキスト
ボタンにテキストを含める場合は、ブランドに合わせてスタイルを設定できます。
- スタイル: 目立つように見出しのスタイルを選択します。
- フォント: ストアのタイポグラフィに一致するフォント ファミリを選択します。
- サイズ: 視認性を高めるためにテキストのサイズを調整します。
- 太字/斜体/下線: これらのテキスト スタイルに強調を追加します。
- フォントの太さ: テキストの太さを制御します。
- 行の高さ: 複数行テキストの行間の間隔を微調整します。
- 文字間隔: 読みやすくするために、文字間のスペースを調整します。
- 最適化の適用: テキストの書式設定 大文字, 小文字または 資本化する 各単語。
効果
ホバー状態のボタンの外観をカスタマイズします。
- 背景色: 視覚的なフィードバックを向上させるために、各状態に異なる色を選択します。
- イメージ： ボタンにマウスをホバーすると、ボタンの背景が画像に変わります。
- テキストの色: 背景を引き立てる読みやすいテキスト色を設定します。
- ボーダー: ボタンの輪郭を描く境界線の幅、スタイル、色を定義します。
- コーナー: ボタンの角の丸みを調整して、モダンまたはクラシックな外観にします。
- Shadow: 影の効果を追加して深みを作り、ボタンを目立たせます。
リンク
これはトップに戻るボタンなので、クリック後のアクションは次のように設定されています。 にスクロールします Top デフォルトでは、この設定は無視して構いません。 リンク のセクションから無料でダウンロードできます。
整列
ボタンの幅 = コンテンツに合わせる (自動) の場合、ボタンの配置方法を選択します。
- 左派: ボタンを左端に揃えます。
- センター: ボタンをボタン内の中央に配置します。
- 右派: ボタンを右端に揃えます。
詳細タブを設定する
より高度なカスタマイズについては、「詳細設定」タブに移動し、 この記事.
コメントしてくださってありがとうございます