Sticky Zurück zum Anfang-Element

Was ist Sticky Back to Top?

Die Zurück zum Anfang Element ist eine schwebende Schaltfläche, die das Navigationserlebnis auf Ihrer Website verbessern soll. Wenn Besucher zum Ende der Seite scrollen, können sie mit dieser Schaltfläche zu zurück zum Anfang mit einem einzigen Klick sofort.

Dieses Element ist besonders nützlich für lange Seiten mit umfangreichem Inhalt, da es den Benutzeraufwand reduziert und das allgemeine Engagement verbessert.

Wie füge ich das Sticky-Back-to-Top-Element hinzu?

Befolgen Sie die folgenden Schritte, um ein „Zurück nach oben“-Element per Drag & Drop in Ihre Seite mit dem GemPages Editor v7 einzufügen:

• Einloggen, um Shopify-Administrator > GemPages-Ersteller app> Seiten.
• Klicken Sie auf die Seite, auf der Sie das „Zurück nach oben“-Element hinzufügen möchten, um in den Editor zu gelangen.
• Suchen Sie in der linken Seitenleiste nach diesem Element und ziehen Sie es per Drag & Drop an die gewünschte Position auf Ihrer Seite.

• Suchen Sie das Element, um seine Einstellungen für weitere Anpassungen zu öffnen.

Konfigurieren der Registerkarte „Einstellungen“

Unter dem Einstellungen Auf der Registerkarte „Symbole“ können Sie die Sichtbarkeit des Symbols nach Wunsch konfigurieren:

Größe

Länge und Höhe: Definieren Sie die Abmessungen der Schaltfläche, um sicherzustellen, dass sie auffällt, jedoch nicht aufdringlich ist.

Polsterung: Passen Sie den Innenabstand innerhalb der Schaltfläche an, um Text oder Symbole besser auszurichten.

Zum Beispiel, wir setzen die Breite auf 100 % (Voll) und die Höhe auf Auto. Die Sticky-Back-to-Top-Schaltfläche wird im Vollbildmodus angezeigt. 

Hintergrund

Legen Sie eine Vollton-/Farbverlaufsfarbe oder ein Bild als Hintergrund fest.

• Farbe: Geben Sie den Farbcode ein, wählen Sie aus der Liste „Letzte Farben“/„Für Sie vorgeschlagen“ oder verwenden Sie die Farbauswahl, um die Hintergrundfarbe festzulegen.

• Bild: Laden Sie ein neues Bild hoch oder wählen Sie eines aus der Bibliothek als Hintergrund aus.

Shape

Passen Sie die Form an, indem Sie:

• Rand: Wählen Sie die Rahmenstile (Linie/Strich/Punkt) aus und ändern Sie die Rahmenfarbe und -stärke, um sie an Ihr Markendesign anzupassen.

• Ecke: Passen Sie den Eckenradius für eine bessere Sichtbarkeit an.

• Schatten: Wenden Sie Schatteneffekte für Tiefe an.

Icon

Schalten Sie die Symbolsichtbarkeit um. Sie können sie deaktivieren, um nur Text anzuzeigen.

Wenn Ein:

• Symbol auswählen: Wählen Sie aus der Bibliothek ein Symbol aus, das zum Design Ihrer Site passt, oder laden Sie ein benutzerdefiniertes Symbol hoch (nur SVG-Datei).
• Position: Legen Sie fest, ob die Schaltfläche auf dem links or Recht Seite des Bildschirms.
• Abstand: Passen Sie den Abstand zwischen der Schaltfläche und den Bildschirmrändern für eine präzise Platzierung an.

Text

Wenn Sie Text in die Schaltfläche einfügen, können Sie ihn an Ihr Branding anpassen:

• Stile: Wählen Sie zur Hervorhebung Überschriftenstile aus.
• Schriftart: Wählen Sie eine Schriftfamilie, die zur Typografie Ihres Shops passt.
• Größe: Passen Sie die Textgröße an die Sichtbarkeit an.
• Fett/Kursiv/Unterstrichen: Betonen Sie diese Textstile.
• Font Gewicht: Steuern Sie die Textdicke.
• Linienhöhe: Optimieren Sie den Zeilenabstand für mehrzeiligen Text.
• Buchstaben-Abstand: Passen Sie den Abstand zwischen einzelnen Zeichen zur besseren Lesbarkeit an.
• Transformieren: Text formatieren auf Groß, Kleinden profitieren jedes Wort.

Ergebnisse

Passen Sie das Erscheinungsbild der Schaltfläche im Hover-Zustand an:

• Hintergrundfarbe: Wählen Sie für jeden Status eine eindeutige Farbe, um die visuelle Rückmeldung zu verbessern.
• Bild: Der Hintergrund der Schaltfläche ändert sich beim Schweben in ein Bild.
• Textfarbe: Legen Sie eine lesbare Textfarbe fest, die den Hintergrund ergänzt.
• Grenze: Definieren Sie Rahmenbreite, Stil und Farbe für die Umrandung der Schaltfläche.
• CORNER: Passen Sie die Rundung der Schaltflächenecken für einen modernen oder klassischen Look an.
• Shadow: Fügen Sie einen Schatteneffekt hinzu, um Tiefe zu erzeugen und die Schaltfläche hervorzuheben.

verbindung

Da es sich um eine Schaltfläche zum Zurück-nach-oben-Klicken handelt, ist die Aktion nach dem Klick auf Blättern Sie zu Bustier standardmäßig. Daher können Sie dies ignorieren verbindung .

Ausrichten

Wenn die Breite der Schaltfläche = „Inhalt anpassen (Auto)“ ist, wählen Sie aus, wie die Schaltfläche ausgerichtet werden soll:

• Links: Richten Sie die Schaltfläche am linken Rand aus.
• Center: Zentrieren Sie die Schaltfläche innerhalb der Schaltfläche.
• Rechts: Richten Sie die Schaltfläche am rechten Rand aus.

Konfigurieren der Registerkarte „Erweitert“

Für erweiterte Anpassungen navigieren Sie bitte zur Registerkarte „Erweitert“ und folgen Sie den Anweisungen in Dieser Artikel.