So blenden Sie Karussellpfeile mithilfe von benutzerdefiniertem Code aus

Die Pfeile in einem Karussell erleichtern Besuchern die Navigation zwischen den Folien. In manchen Fällen kann es jedoch sinnvoll sein, den linken oder rechten Pfeil bzw. beide auszublenden, um ein übersichtlicheres Design zu erzielen.

Dieser Artikel zeigt Ihnen, wie Sie die Karussell-Pfeile in GemPages mithilfe von einfachem benutzerdefiniertem CSS-Code ausblenden können. Programmierkenntnisse sind nicht erforderlich.

Wann sollte man die Karussellpfeile ausblenden?

Hier sind einige gängige Anwendungsfälle, in denen das Ausblenden der Karussellpfeile das Design Ihres Shops und die Benutzererfahrung verbessern kann:

1. Ein übersichtlicheres mobiles Layout erstellen

Auf kleineren Bildschirmen können Pfeile zu viel Platz einnehmen oder den Inhalt überlappen. Durch Ausblenden der Pfeile wirkt das Karussell übersichtlicher und besser sichtbar.

2. Verwenden Sie die automatische Wiedergabe anstelle der manuellen Navigation.

Wenn Ihr Karussell automatisch zwischen den Elementen wechselt, benötigen Besucher möglicherweise keine manuellen Navigationspfeile.

3. Ein minimalistisches Design erstellen

Manche Marken bevorzugen ein klares und modernes Design ohne sichtbare Navigationselemente.

4. Manuelles Verschieben verhindern

In einigen Werbeabschnitten oder Ankündigungs-Slidern möchten Sie möglicherweise, dass die Benutzer die Inhalte in einer festgelegten Reihenfolge ansehen, ohne auf Pfeile klicken zu müssen.

5. Alternative Navigationsmethoden verwenden

Möglicherweise verwenden Sie bereits:

• Punktnavigation
• Wischgesten auf dem Handy
• Auto-Scroll-Funktion

In diesen Fällen können Pfeile überflüssig werden.

Wie man Karussellpfeile in GemPages ausblendet

Schritt 1: Karussell-Element auswählen

Klicken Sie im GemPages-Editor auf das Carousel-Element, das den Pfeil enthält, den Sie ausblenden möchten.

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 Maßgeschneidert.

Das Bedienfeld „Benutzerdefinierter Code“ wird angezeigt.

Schritt 3: Fügen Sie den benutzerdefinierten CSS-Code hinzu.

1. Linken Pfeil ausblenden

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

.gTgcgeWuMC .gem-slider-previous{

 Deckkraft: 0 !Wichtig;

 Sichtbarkeit: versteckt !wichtig;

}

2. Den Pfeil nach rechts ausblenden

Fügen Sie diesen Code hinzu, um den Pfeil nach rechts auszublenden:

.gTgcgeWuMC .gem-slider-after{

 Deckkraft: 0 !Wichtig;

 Sichtbarkeit: versteckt !wichtig;

}

Hinweis:

Ersetzen .gTgcgeWuMC mit Ihrer tatsächlichen Carousel-Element-ID.

Die Element-ID finden Sie oben im Bereich „Benutzerdefinierter Code“.