Durch das Hinzufügen eines Hintergrunds zu einer Spalte erhöhen Sie Ihre Gestaltungsflexibilität und können optisch unterschiedliche Abschnitte erstellen, die zum Branding Ihres Shops passen. Dies hilft dabei, Inhalte effektiv zu trennen, die Lesbarkeit zu verbessern und wichtige Elemente hervorzuheben.
Wie lege ich den Hintergrund für eine Spalte innerhalb einer Zeile fest?
GemPages unterstützt bereits das Einstellen von Hintergrundfarben für die Zeilenelement einfach.
Sie können diese Funktion nutzen, um Hintergründe für Spalten innerhalb von Zeilen festzulegen, indem Sie die folgenden einfachen Methoden befolgen.
Option 1: Festlegen von Hintergründen durch Verschachteln von Zeilen in Spalten
Schritt 1: Ziehen Sie im Editor ein Zeilenelement aus der linken Seitenleiste per Drag & Drop. Erstellen Sie beispielsweise eine Zeile mit drei Spalten.
Schritt 2: Verschachteln Sie in jeder Spalte eine neue Zeile. Fügen Sie jeder Spalte nach Bedarf Inhalt hinzu.
Schritt 3: Klicken Sie auf jede verschachtelte Zeile, die Sie in Schritt 2 erstellt haben, um deren Einstellungen zu öffnen. Scrollen Sie nach unten zum Hintergrund Abschnitt und klicken Sie auf das Kästchen neben Farbe, zur Konfiguration der Hintergrundfarbe.
Hinweis: Diese Methode eignet sich am besten, wenn die verschachtelten Zeilen die gleiche Höhe haben. Wenn der Inhalt innerhalb der einzelnen Spalten unterschiedlich groß ist, kann dies zu ungleichmäßigen Hintergründen führen.
Option 2: Festlegen von Hintergründen für Spalten mithilfe von benutzerdefiniertem Code
Bei dieser Methode wird benutzerdefinierter Code hinzugefügt, um die Hintergrundfarbe für jede Spalte einzeln festzulegen.
Folge diesen Schritten:
Schritt 1: Fügen Sie in jeder Spalte eine verschachtelte Zeile hinzu. Fügen Sie jeder verschachtelten Zeile nach Bedarf Inhalt hinzu.
Schritt 2: Klicken Sie mit der rechten Maustaste auf die Beschriftung des Hauptzeilenelements und wählen Sie Benutzerdefinierter Code.
Schritt 3: Suchen Sie im Dialogfeld des Code-Editors nach CSS und fügen Sie den folgenden benutzerdefinierten Code hinzu:
[data-component-tag="Col"] {
background-color: #yourdesiredcolor;
}
Ersetzen #yourdesiredcolor mit Ihrem gewünschten Farbcode. Verwenden Sie beispielsweise diesen Farbcode #FFBAAD und drücken Sie die Gespeichert .
Schritt 4: Überprüfen Sie das Ergebnis, speichern und veröffentlichen Sie es, um Ihre Konfigurationen live zu schalten.
Vielen Dank für Ihre Kommentare