Benutzerdefiniertes Codeelement

Informationen zum benutzerdefinierten Codeelement

Das Custom Code-Element im GemPages Editor V7 gibt Ihnen die Flexibilität, Ihre eigenen hinzuzufügen HTML, CSS, JavaScriptund Flüssigkeit Code direkt in Ihre Seite. Es ist ein leistungsstarkes Element, mit dem Sie:

• Einfache Anpassung: Fügen Sie einzigartige Designelemente oder interaktive Funktionen hinzu, die von regulären GemPages-Elementen nicht unterstützt werden.
• Pflege- Apps von Drittanbietern integrieren: Betten Sie externe Apps, Widgets, Tracking-Codes oder Skripte ohne komplizierte Codierung in Ihren Shopify-Shop ein.
• Boost-Store-Funktionen: Fügen Sie benutzerdefinierte Verhaltensweisen und Interaktionen hinzu, um das Erscheinungsbild und die Funktionsweise Ihres Shops für Ihre Kunden zu verbessern.

Fügen Sie Ihrer Seite ein benutzerdefiniertes Codeelement hinzu

Befolgen Sie diese einfachen Schritte, um das benutzerdefinierte Codeelement einzufügen:

Schritt 1: Besuchen Sie das GemPages Dashboard, und wählen Sie dann Ihre Zielseite aus, um den Editor zu öffnen.

Schritt 2:: Ziehen Sie die Benutzerdefinierter Code Element aus der linken Seitenleiste, unter dem Erweitert Abschnitt, in den gewünschten Bereich.

Klicken Sie auf das Element, um die Konfiguration anzuzeigen, einschließlich der Einstellungen Tab und Erweitert Tab. 

Konfigurieren der Registerkarte „Einstellungen“

Die Einstellungen Auf der Registerkarte „Benutzerdefinierter Code“ können Sie das Verhalten und die Anzeige Ihres benutzerdefinierten Codeelements auf der Seite konfigurieren. So funktioniert jeder Abschnitt:

Code

Fügen Sie Ihren eigenen benutzerdefinierten Code ein, indem Sie auf „+ Hinzufügen…”-Schaltfläche. Ein Code-Editor-Dialog wird angezeigt, in dem Sie eingeben können HTML/Liquid, CSSden JavaScript Snippet-Code.

Sobald Sie fertig sind, drücken Sie die Gespeichert .

Hinweis: Im Reiter HTML können Sie außerdem folgendes einfügen: Installationscode von Drittanbietern um Inhalte anzuzeigen.

Hintergrund

Im Hintergrund Im Abschnitt „Bild“ haben Sie die Möglichkeit, das visuelle Erscheinungsbild zu ändern, indem Sie eine Farbe aus der bereitgestellten Palette auswählen oder ein Hintergrundbild einfügen. 

Farbe,

Wählen Sie eine Vollton- oder Verlaufsfarbe als Hintergrund für das Element. Sie haben folgende Möglichkeiten:

• Geben Sie manuell einen HEX-Code ein (z. B. #E2E2E2)
• Wählen Sie aus aktuellen oder vorgeschlagenen Farben
• Passen Sie die Deckkraft mit dem Prozentregler an

Bild 

Verwenden Sie diese Option, um bei Bedarf ein Hintergrundbild hinzuzufügen.

Klicken Sie auf „+ Hinzufügen…“ im Abschnitt „Bild“, um ein Hintergrundbild hochzuladen oder auszuwählen.

Sobald ein Bild hinzugefügt wurde, stehen Ihnen erweiterte Konfigurationsoptionen zur Verfügung:

• Quelle: Zeigt die Bild-URL an oder ermöglicht Ihnen die Auswahl aus der Mediengalerie.
• Skalieren: Wählen Sie, wie das Bild innerhalb des Blocks skaliert wird (z. B. Cover, Contain, Auto).
• Position: Legen Sie den Brennpunkt fest (Mitte, oben links, unten rechts usw.).
• Wiederholen: Definieren Sie, ob und wie das Bild wiederholt wird (Keine Wiederholung, Wiederholung, Wiederholung-X/Y).
• Anhang: Bildlaufverhalten festlegen (Scrollen oder Fest).
• LCP (Largest Contentful Paint) optimierenRempfiehlt dem Browser, dieses Bild aus Leistungsgründen zu priorisieren, wählen Sie Vorspannung = Ja iwenn dieses Element über dem Falz geladen wird.

Name

Benennen Sie Ihr Element um, damit es im Editor leichter zu identifizieren ist. Dies ist besonders nützlich bei komplexen Layouts oder Seiten mit mehreren Abschnitten.

Ausrichten

Mit diesem Parameter können Sie bestimmen, wie das Element auf Ihrer Seite positioniert wird. Sie können zwischen drei Optionen wählen: linksbündig, zentriert und rechtsbündig.

Konfigurieren der Registerkarte „Erweitert“

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

Schritt 1: Suchen Sie das GemPages-Element, auf das Sie benutzerdefinierten Code anwenden möchten, klicken Sie dann mit der rechten Maustaste und wählen Sie „Benutzerdefinierter Code“.

Schritt 2: Suchen Sie die entsprechende Registerkarte für CSS und Skript, und fügen Sie den Codeausschnitt in den Dialog ein. Klicken Sie auf „Gespeichert“, wenn Sie fertig sind.

So entfernen Sie benutzerdefinierten Code oder benutzerdefinierte Flüssigkeit

Wenn Sie den hinzugefügten benutzerdefinierten Code nicht mehr benötigen, können Sie ihn auf zwei Arten entfernen:

1. Entfernen Sie ein benutzerdefiniertes Codeelement

Schritt 1: Klicken Sie im Editor auf das benutzerdefinierte Codeelement, das Sie löschen möchten.

Schritt 2: Drücken Sie das Papierkorbsymbol (Löschen) in der oberen Leiste oder klicken Sie mit der rechten Maustaste auf das Element und wählen Sie Löschen.

2. Entfernen Sie benutzerdefinierte Liquids/benutzerdefinierten Code innerhalb eines vorhandenen Elements

Schritt 1: Klicken Sie mit der rechten Maustaste auf das Element, in dem benutzerdefinierter Code hinzugefügt wurde → wählen Sie Benutzerdefinierter Code

Schritt 2: Löschen Sie den Code im CSS-Skriptfeld.

Schritt 3: Klicken Sie auf Gespeichert.