Schaltflächenelement

Die Schaltflächenelement ist ein interaktives Element, das Benutzer dazu auffordert, bestimmte Aktionen auf Ihrer Website auszuführen. Wenn Ihre gewünschte Aktion jedoch darin besteht, Artikel in den Warenkorb zu legen, empfehlen wir die Verwendung des Warenkorb-Schaltflächenelement stattdessen.

Informationen zum Button-Element

Die Schaltflächenelement ist ein interaktives Element, das Benutzer dazu auffordert, bestimmte Aktionen auf Ihrer Website auszuführen, z. B. zu einer anderen Seite zu navigieren, ein Popup zu öffnen oder Sie zu kontaktieren.

Wenn Sie Artikel in den Warenkorb legen möchten, empfehlen wir Ihnen die Verwendung des Warenkorb-Schaltflächenelement stattdessen.

Fügen Sie das Schaltflächenelement zu Ihrer Seite hinzu.

Schritt 1: Zugriff GemPages Dashboard > Seiten, und suchen Sie die Zielseite, um den Editor zu öffnen.

Schritt 2: Geben Sie in der linken Seitenleiste „Button“ in die Suchleiste ein, um das Button-Element zu finden. 

Sie können zwischen zwei Schaltflächenstilen wählen, einem mit und einem ohne Symbol, und ihn dann per Drag & Drop an die gewünschte Position ziehen.

Wenn das Element ausgewählt ist, finden Sie alle Konfigurationsoptionen in der linken Seitenleiste unter dem Einstellungen und Erweitert Tabs

Konfigurieren der Registerkarte „Einstellungen“

Die Einstellungen Mit der Registerkarte können Sie das Erscheinungsbild, das Layout und das Verhalten des Schaltflächenelements vollständig steuern, einschließlich:

Größe

Steuern Sie die Gesamtabmessungen der Schaltfläche mit flexiblen Breiten- und Höhenoptionen:

Länge: Wählen Sie, wie die Schaltfläche horizontal skaliert werden soll:

• Passender Inhalt: Die Schaltfläche passt sich der Größe ihres Inhalts (Text und Symbol) an.
• Auto: Größe basierend auf dem übergeordneten Container oder anderen Stilen übernehmen.
• Voll (100%): Die Schaltfläche wird erweitert, um die gesamte Breite ihres Containers auszufüllen.

Höhe: Stellen Sie die Höhe auf „Inhalt anpassen (Auto)“ oder einen festen Pixelwert ein.

Polsterung: Definieren Sie den internen Abstand innerhalb der Schaltfläche.

Hintergrund

Stellen Sie ein Vollton- oder Farbverlaufshintergrund für Ihren „In den Warenkorb“-Button. Sie können die Farbe wie folgt anpassen:

• Geben Sie den Farbcode ein
• Ziehen Sie die Farbfelder oder wählen Sie sie aus.
• Verwenden Sie die Farbauswahl, um eine beliebige Farbe auf Ihrer aktuellen Seite auszuwählen
• Wählen Sie eine der Aktuelle Farben  or Empfohlen für Sie Listen

Wenn Sie es vorziehen Bildhintergrund, laden Sie ein neues Bild hoch oder wählen Sie es aus Ihrer Galerie aus, um es als Hintergrund des Elements festzulegen, und konfigurieren Sie dann das Bild:

• Maßstab: Abdecken, Eindämmen oder Auto
• Position: Bildausrichtung festlegen (Mitte, oben links usw.)
• Wiederholen: Wiederholungseinstellungen umschalten
• Anhang: Wählen Sie zwischen Scrollen oder Fixieren
• SEO: Fügen Sie Alternativtext und Bildtitel für Barrierefreiheit und SEO hinzu
• Vorladen: Vorladen umschalten, um Largest Contentful Paint (LCP) zu verbessern

Shape

• Grenze: Sie können die Rahmenfarbe, -stärke und -kontur ändern.
• CORNER: Die Abschnittsecke kann quadratisch, rund oder pillenförmig sein. Sie können auch einen genauen Radius eingeben, um die Ecke des Elements nach Ihren Wünschen anzupassen.
• Shadow: Fügen Sie einen Schatten hinzu und passen Sie seine Anzeige an (Größe, Farbe, Unschärfe und Entfernung).

Icon

Aktivieren Sie diesen Schalter, um ein Symbol innerhalb der Schaltfläche anzuzeigen:

• Icon: Wählen Sie aus integrierten Symbolen oder laden Sie benutzerdefinierte SVG-Symbole hoch.
• Position: Platzieren Sie das Symbol auf der links or Recht des Textes.
• Lücke: Passen Sie den Abstand zwischen Symbol und Text mit dem Schieberegler oder der Zahleneingabe an.

Text

In diesem Abschnitt können Sie die Typografie und das Erscheinungsbild der Schaltflächenbeschriftung anpassen:

• Styles: Wählen Sie eine Textvorgabe wie „Absatz 1“, „Überschrift“ oder benutzerdefinierte Textstile.
• Schriftart: Wählen Sie aus verfügbaren Schriftfamilien (z. B. Ui-sans-serif) die passende Schrift für Ihr Shop-Branding.
• Größe Passen Sie die Textgröße mit den +/–-Reglern an.
• Formatierung: Wenden Sie nach Bedarf die Formatvorlagen Fett, Kursiv oder Unterstrichen an.
• Farbe: Stellen Sie die Schriftfarbe mit dem HEX-Code oder der Farbauswahl ein.
• Schriftstärke: Wählen Sie zwischen Normal, Mittel, Halbfett, Fett usw.
• Zeilenhöhe: Kontrollieren Sie den vertikalen Abstand zwischen den Textzeilen (z. B. 160 %).
• Buchstaben-Abstand: Passen Sie den Abstand zwischen den Buchstaben an (z. B. 0.6).
• Verwandeln: Wählen Sie aus, wie der Text angezeigt werden soll: 
  • AA: GROSSBUCHSTABEN
  • Aa: Jedes Wort großschreiben
  • aa: Kleinbuchstabe
• Schatten: Wenden Sie einen Textschatten für zusätzlichen Kontrast oder visuelle Tiefe an.

Hover-Effekt

Passen Sie an, wie die Schaltfläche reagiert, wenn Sie mit der Maus darüber fahren:

• Hintergrund: Hintergrundfarbe beim Hovern ändern.
• Bild: Fügen Sie ein Hintergrundbild für den Hover-Status hinzu.
• Textfarbe: Ändern Sie die Textfarbe beim Hovern.
• Grenze: Fügen Sie den Rahmenstil beim Schweben hinzu oder passen Sie ihn an (Farbe, Dicke, Strich).
• CORNER: Passen Sie den Eckradius beim Hovern an, um die Kanten runder oder eckiger zu gestalten.
• Shadow: Wenden Sie einen Schatteneffekt an, um der Schaltfläche beim Schweben mehr Tiefe zu verleihen.

verbindung

Machen Sie Ihre Schaltfläche zu einem anklickbaren Element, indem Sie das verbindung Umschalten. Nach der Aktivierung können Sie festlegen, was passiert, wenn Benutzer auf die Schaltfläche klicken:

Nach dem Klick: Wählen Sie die durch die Schaltfläche ausgelöste Aktion:

• Seite öffnen: Leitet den Benutzer auf eine bestimmte Seite oder URL um.
• Scrollen Sie zu: Scrollen Sie mithilfe einer Anker-ID (z. B. #features) reibungslos zu einem bestimmten Abschnitt auf derselben Seite.
• Popup öffnen: Lösen Sie ein mit GemPages erstelltes Popup-Fenster aus.
• E-Mail schicken: Öffnen Sie den E-Mail-Client des Benutzers mit einer voreingestellten Empfängeradresse.
• Telefonieren: Starten Sie einen Telefonanruf auf Mobilgeräten mit einem Telefon: Link.

Seite/Link: Klicken "+ Hinzufügen…" Schaltfläche zum Suchen oder Einfügen einer URL direkt in die Suchleiste

• Wählen Sie aus Ihren vorhandenen Shopify-Seiten 
• Verwenden Sie den Dropdown-Filter (z. B. „Landingpages“), um Ihre Ergebnisse einzugrenzen
• Klicken Sie auf „Anzeigen“, um vor der Bestätigung eine Vorschau der Seite anzuzeigen.

Ausrichten

Legen Sie die horizontale Ausrichtung der Schaltfläche innerhalb ihres Containers fest: Links, Centerden Rechts.

Konfigurieren der Registerkarte „Erweitert“

Für erweiterte Anpassungen navigieren Sie bitte zu Registerkarte Erweitert und befolgen Sie die Anweisungen in Dieser Artikel.

Häufig gestellte Fragen

1. Wie ändere ich die Schaltflächenfarbe?

Gehen Sie zur Registerkarte Einstellungen > Hintergrund > Farbe,. Verwenden Sie die Farbauswahl oder geben Sie einen HEX-Code ein, um die Hintergrundfarbe der Schaltfläche zu aktualisieren.

2. Warum ändert sich die Farbe meiner Schaltfläche beim Hovern nicht?

Prüfen Sie die Hover-Effekt Einstellungen. Stellen Sie sicher, dass die Hover-Hintergrund- oder Textfarbe auf einen anderen Wert als den Normalzustand eingestellt ist.

3. Kann ich der Schaltfläche anstelle einer Volltonfarbe einen Farbverlauf oder ein Hintergrundbild hinzufügen?

Ja. Unter dem Registerkarte „Einstellungen“ > „Hintergrund“können Sie ein Bild hochladen und Skalierung, Position und Wiederholungsoptionen anpassen. Für Farbverläufe können Sie benutzerdefiniertes CSS in der Registerkarte Erweitert.

4. Warum zeigt mein Button auf der Live-Seite nicht die neue Farbe an?

Stellen Sie sicher, dass Sie klicken Veröffentlichen nach der Bearbeitung. Wenn das Problem weiterhin besteht, leeren Sie den Browser-Cache oder deaktivieren Sie den widersprüchlichen benutzerdefinierten Code.

5. Wie verbinde ich meinen Button mit einer Produktkategorie (Kollektion) in Shopify?

Schritt 1: Hinzufügen Schaltflächenelement zu Ihrer Produktseite (oder einer beliebigen Seite, auf der die Kategorieschaltfläche angezeigt werden soll).

Schritt 2: Gehen Sie zur Einstellungen Registerkarte> verbindung > Nach dem Klick, Dann wählen Seite öffnen.

Schritt 3: Im Seite/Link Feld entweder:

• Wählen Sie Ihren Wunsch Sammlung (Kategorie) aus der Shopify-Seitenliste oder
• Fügen Sie den Sammlungslink ein, zu dem Sie weiterleiten möchten.

Schritt 4: Klicken Sie auf Gespeichert und Veröffentlichen Ihre Änderungen.