So ersetzen Sie die Karussellpunkte durch Navigationsschaltflächen (Pfeile) mithilfe von benutzerdefiniertem Code

Standardmäßig Karussellnavigation in GemPages wird angezeigt als PunktindikatorenPunkte funktionieren zwar in vielen Fällen gut, manche Benutzer bevorzugen jedoch die Verwendung von Punkten. Pfeiltasten links und rechts für eine einfachere Navigation und ein moderneres Benutzererlebnis.

Mit einem einfachen, benutzerdefinierten CSS-Code-Snippet können Sie die Navigationspfeile neu positionieren und ein übersichtlicheres Layout erstellen, das die standardmäßige Punktnavigation ersetzt. Dieser Artikel führt Sie Schritt für Schritt durch die Ersetzen Sie die Karussellpunkte durch Navigationspfeile in GemPages. unter Verwendung von benutzerdefiniertem Code.

Schritt für Schritt: So ersetzen Sie die Karussellpunkte durch Navigationsschaltflächen

Befolgen Sie diese Schritte sorgfältig, um das Navigationspfeil-Layout anzuwenden.

Schritt 1: Klicken Sie mit der rechten Maustaste auf das Karussell-Element.

Öffnen Sie Ihre Seite im GemPages-Editor.

Dann:

• Suchen Sie den Karussell-Element
• Klicken Sie mit der rechten Maustaste direkt auf das Karussell.
• Auswählen Benutzerdefinierter Code

Dies öffnet den CSS-Benutzerdefinierter Code-Bereich.

Schritt 2: Kopieren Sie die Carousel-Klasse aus der ersten Zeile

Im Bereich „Benutzerdefinierter Code“:

• Schauen Sie sich die erste Zeile
• Du wirst das sehen Karussellklasse

Kopieren Sie diesen Klassennamen. Sie benötigen ihn im nächsten Schritt.

Schritt 3: Navigationsschaltflächen-Code einfügen

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

.carouselID .gem-slider-previous {

 unten: -40px !important;

 top: auto !important;

 left: calc(50% - 40px) !important;

}

.carouselID .gem-slider-next {

 unten: -40px !important;

 top: auto !important;

 right: calc(50% - 40px) !important;

}

Dann:

Ersetzen:

Karussell-ID

Mit:

Ihre eigentliche Carousel-Klasse, die Sie in Schritt 2 kopiert haben.

Danach:

• Klicken Sie auf Gespeichert
• Vorschau aktualisieren
• Überprüfen Sie das Navigationslayout.

Schritt 4: Klicken Sie auf Speichern, um die Änderungen anzuwenden.

Sobald Sie den Code eingefügt haben:

• Klicken Sie auf Gespeichert
• Aktualisieren Sie bei Bedarf die Seitenvorschau.

Ihre Karussellnavigation sollte nun Pfeiltasten unterhalb des Schiebereglers anzeigen, wodurch die Navigation übersichtlicher und einfacher wird.