Wie man Karussellpunkte linksbündig ausrichtet

Standardmäßig sind die Karussellpunkte in GemPages unterhalb des Schiebereglers zentriert. Je nach Layout und Designstil kann es jedoch sinnvoll sein, die Punkte linksbündig auszurichten.

Dieser Artikel zeigt Ihnen, wie Sie die Punkte eines Karussells in GemPages mithilfe von einfachem, benutzerdefiniertem CSS-Code linksbündig ausrichten können. Programmierkenntnisse sind nicht erforderlich.

Warum linksbündig ausgerichtete Karussellpunkte?

Links ausgerichtete Karussellpunkte können in bestimmten Layouts sowohl die Designkonsistenz als auch die Benutzerfreundlichkeit verbessern.

Hier sind einige häufige Anwendungsfälle:

1. Linksbündige Inhaltslayouts anpassen

Wenn Ihre Überschriften, Texte und Schaltflächen linksbündig ausgerichtet sind, können zentrierte Punkte optisch uneinheitlich wirken. Durch die Linksausrichtung der Punkte erzielen Sie ein übersichtlicheres und ausgewogeneres Layout.

2. Ein modernes, minimalistisches Design erstellen

Viele moderne Webseiten verwenden linksbündige Navigationselemente, um ein professionelleres und redaktionelleres Erscheinungsbild zu erzielen.

3. Verbesserung der Abstände im mobilen Layout

Auf Mobilgeräten passen linksbündige Punkte möglicherweise besser zu gestapelten Inhalten und vermeiden unschöne Abstände.

Wie man Karussellpunkte linksbündig ausrichtet

Schritt 1: Karussell-Element auswählen

Klicken Sie im GemPages-Editor auf das Carousel-Element, an dem die Punkte linksbündig ausgerichtet werden sollen.

Schritt 2: Öffnen Sie das Bedienfeld für benutzerdefinierten Code.

Klicken Sie mit der rechten Maustaste auf das Karussell-Element und wählen Sie dann aus Benutzerdefinierter Code.

Das Bedienfeld „Benutzerdefinierter Code“ wird angezeigt.

Schritt 3: CSS-Code hinzufügen

Fügen Sie den folgenden CSS-Code in das Feld „Benutzerdefinierter Code“ ein:

.gL5w7OAVEa .gp-carousel-dot-container {

 justify-content: start !important;

}

Ejemplo:

.YOUR_ELEMENT_ID .gp-carousel-dot-container {

 justify-content: start !important;

}

Dadurch wird sichergestellt, dass das benutzerdefinierte Styling nur für das von Ihnen ausgewählte Karussell-Element gilt.