Karussell-Element

Über das Karussell-Element

Die Karussell-Element bezieht sich auf eine bestimmte Funktion oder ein Widget, mit dem Benutzer ein Karussell mit Produkten, Bildern oder Werbeinhalten auf ihrer Website erstellen und anzeigen können. Hier sind einige wichtige Funktionen und Vorteile des Karussell-Elements:

• Product Showcase: E-Commerce-Karussells präsentieren häufig Produkte aus dem Lagerbestand eines Geschäfts. Jede Folie kann ein anderes Produkt mit Titel, Bild, Preis und möglicherweise einer kurzen Beschreibung anzeigen.
• Werbebanner: Das Karussell-Element kann auch Werbebanner oder Anzeigen für Verkäufe, Rabatte oder Neuankömmlinge anzeigen.
• Anpassbares Layout: Benutzer können normalerweise das Layout des Karussells individuell anpassen und Aspekte wie die Anzahl der sichtbaren Elemente pro Folie, die Übergangseffekte zwischen den Folien und den allgemeinen Stil an die Ästhetik ihrer Marke anpassen.
• Navigationssteuerung: Hierzu gehören normalerweise Navigationssteuerelemente wie Pfeile oder Punkte, mit denen Benutzer manuell durch die Karussellfolien navigieren können.
• Responsive Design für mobile Endgeräte: Wie andere Elemente im modernen Webdesign sind Karussellelemente in E-Commerce-Seitenerstellern so konzipiert, dass sie reaktionsfähig sind und so sicherstellen, dass sie auf verschiedenen Geräten und Bildschirmgrößen korrekt angezeigt werden.

Fügen Sie das Karussell-Element in GemPages v7 hinzu

Schritt 1:: In dem GemPages Dashboard, wählen Sie die Seite aus, auf der Sie das Karussell-Element hinzufügen möchten. 

Schritt 2:: Suche nach Karussell-Element, Wählen Sie den gewünschten Typ aus und ziehen Sie ihn an die gewünschte Position auf der Seite.

Schritt 3:: DZiehen Sie beliebige GemPages-Elemente (Text, Bild, Schaltfläche, Produkt usw.) per Drag & Drop, um Ihr Layout frei zu gestalten.

Um auf das Einstellungsfenster des Karussells zuzugreifen, klicken Sie einfach auf das Element.

In der linken Seitenleiste wird dann Folgendes angezeigt: Einstellungen und Erweitert Registerkarten, mit denen Sie das Verhalten und Erscheinungsbild anpassen können.

Konfigurieren der Registerkarte „Einstellungen“

Elemente pro Folie

Diese Einstellung steuert, wie viele Elemente in jeder Karussellfolie angezeigt werden. Sie können aus den voreingestellten Layoutoptionen wählen oder eine benutzerdefinierte Anzahl festlegen, die Ihren Designanforderungen entspricht.

• Voreingestellte Layouts: Wählen Sie mithilfe der verfügbaren Rasteroptionen schnell 1 bis 5 Elemente pro Folie aus.
• Benutzerdefinierten Wert: Wenn Sie anzeigen möchten mehr als 5 Artikel, drücke den ⚙️ Einstellungssymbol und geben Sie die gewünschte Zahl ein. Dies ist besonders nützlich für Produktkarussells, die mehrere Artikel in einer Ansicht präsentieren.

Präsentation

In diesem Abschnitt können Sie die Anzeige der Elemente in den einzelnen Karussellfolien anpassen, um das ideale Layout und den idealen Abstand für Ihr Design zu erreichen.

• Max. Anzahl Artikel: Definieren Sie die maximale Anzahl von Elementen, die in Ihrem Karussell angezeigt werden können. Sie können bis zu 12 Artikel pro Folie.
• Abstand: Kontrollieren Sie den Abstand zwischen den einzelnen Elementen. Ein größerer Abstand sorgt für ein luftigeres Layout, während ein kleinerer Abstand dazu beiträgt, mehr Inhalt in kompaktere Designs zu integrieren.
• Vorgeschmack: Aktivieren Sie diese Option, um einen kleinen Teil der nächsten oder vorherigen Folie anzuzeigen. Dieser visuelle Hinweis zeigt an, dass Ihr Karussell weitere Elemente enthält, die Benutzer erkunden können.

Artikelverwaltung

In diesem Abschnitt können Sie Ihre Elemente im Karussell verwalten, einschließlich des Hinzufügens/Entfernens von Folien und der Neuanordnung ihrer Reihenfolge nach Ihren Wünschen:

• Wenn Sie mit der Maus über ein Element fahren, können Sie umbenennen, Duplikat den Gegenstand oder löschen es.

• Um weitere Elemente hinzuzufügen, klicken Sie auf „+ Artikel hinzufügen“ .

Artikelabstand

Sie können den Abstand zwischen den Elementen (Lücken) in Ihrem Karussell anpassen. Standardmäßig ist der Abstand auf 100 % eingestellt. 16 px.

Artikelstil

In diesem Abschnitt können Sie die Darstellung der einzelnen Elemente (oder Folien) in Ihrem Karussell anpassen.

Diese Einstellungen helfen Ihnen, die visuelle Konsistenz aufrechtzuerhalten und die allgemeine Attraktivität Ihres Karussells zu verbessern.

• Polsterung: Passen Sie den Innenabstand jedes Karussellelements an. Sie können unterschiedliche Werte für oben, unten, links und rechts festlegen, um sicherzustellen, dass Ihr Inhalt die Elementränder nicht berührt.

• Hintergrund: Definieren Sie den Hintergrund für jedes Element in Ihrem Karussell. Sie können:
  • Wählen Sie ein einfarbig (mithilfe der Farbauswahl oder durch Eingabe eines HEX-Codes).
  • Hochladen Bildhintergrund wenn Sie möchten, dass jedes Element ein einzigartiges visuelles Design hat.
• Rand: Fügen Sie Rahmen für Ihre Karussellelemente hinzu oder passen Sie diese an. Sie können die Rahmenbreite, -farbe und den Stil (durchgehend, gestrichelt usw.) an den Stil Ihrer Marke anpassen.
• CORNER: Runden Sie die Ecken jedes Karussellelements ab, um ein weicheres Erscheinungsbild zu erzielen. Der Wert (in px) bestimmt, wie abgerundet die Ecken erscheinen.
• Shadow: Wenden Sie einen Schlagschatten auf Ihre Karussellelemente an, um sie vom Hintergrund abzuheben. Passen Sie Schattengröße, Unschärfe, Farbe und Deckkraft an, um den gewünschten Tiefeneffekt zu erzielen.

Menü

In diesem Abschnitt können Sie anpassen, wie sich Benutzer mithilfe von Navigationspfeilen durch Ihr Karussell bewegen.

Position: Wählen Sie, ob die Navigationsschaltflächen innerhalb oder außerhalb des Karussellbereichs platziert werden sollen.

Navigationssymbol: Wählen Sie den Symbolstil für Ihre Navigationsschaltflächen aus, einschließlich:

• Symbol: Die Standardoption ist der Pfeil, Sie können ihn jedoch durch andere Symbole ersetzen, die besser zu Ihrem Design passen.
• Symbolgröße: Passen Sie die Symbolgröße mit den Plus- oder Minus-Schaltflächen an oder geben Sie für eine präzise Steuerung einen genauen Wert ein.
• Symbolfarbe: Wählen Sie eine Farbe für die Navigationssymbole, um sicherzustellen, dass sie sich vom Karussellhintergrund abheben.

Navigationsschaltfläche: Passen Sie die Navigationsschaltflächen (die Pfeile nach links und rechts) an Ihren Seitenstil an und verbessern Sie die Sichtbarkeit.

• Schaltflächengröße: Klicken Sie auf „Bearbeiten“, um alle Einstellungen zu erweitern und die Breite und Höhe der Navigationsschaltfläche anzupassen. Eine Vergrößerung kann die Zugänglichkeit auf Mobilgeräten verbessern.
• Hintergrund: Fügen Sie der Schaltfläche eine Hintergrundfarbe hinzu, um einen besseren Kontrast zum Karussellinhalt zu erzielen.
• Rahmen: Fügen Sie einen Rahmen hinzu, um die Schaltfläche hervorzuheben. Sie können Stil, Breite und Farbe anpassen.
• Ecke: Runden Sie die Ecken Ihrer Navigationsschaltflächen ab, um einen weicheren oder pillenförmigen Stil zu erzielen.
• Abstand zum Rand: Steuern Sie den Abstand zwischen der Navigationsschaltfläche und dem Rand des Karussells.
• Beim Hovern anzeigen: Wählen Sie, ob die Navigationsschaltflächen immer sichtbar sind (Nein) oder nur angezeigt werden, wenn Kunden mit der Maus über das Karussell fahren (Ja).

Dots

Die Dots Im Abschnitt „Navigationspunkte“ können Sie die Navigationspunkte anpassen, die unten in Ihrem Karussell angezeigt werden, sodass Besucher leichter erkennen können, welche Folie sie gerade ansehen.

• Position: Wählen Sie, wo die Punkte relativ zum Karussell erscheinen. Sie können sie platzieren innerhalb or aussen die Folien, abhängig von Ihrem Design-Layout.
• Aktive Farbe: Wählen Sie die Farbe für den Punkt, der das aktuell (sichtbar) rutschen.
• Inaktive Farbe: Wählen Sie eine andere Farbe für die Punkte, die versteckt Folien.
• Punktgröße: Passen Sie die Größe der Punkte mit den Plus-/Minus-Schaltflächen an oder geben Sie einen genauen Wert für die Pixelpräzision ein.
• Abstand zur Kante: Definieren Sie den Abstand zwischen den Punkten und dem Karussellrand. Durch Erhöhen dieses Werts können Sie die Sichtbarkeit verbessern oder den Abstand auf verschiedenen Bildschirmgrößen ausgleichen.

Interaktion

Passen Sie die Interaktion im Karussellelement an:

• Autoplay: Aktivieren Sie diesen Schalter, um die Folien automatisch weiterzuschalten. Für optimale Funktionalität kombinieren Sie Autoplay mit der Loop-Funktion. Wenn beide Funktionen aktiviert sind, werden die Folien automatisch weitergeschaltet und kehren zur ersten Folie zurück.
• Verzögern: Legen Sie die Dauer (in ms) vor dem Wechseln der Folien fest.
• Pause beim Hovern: Stoppen Sie die automatische Wiedergabe, wenn Benutzer mit der Maus über das Karussell fahren.
• Gleitrichtung: Wählen Sie die Gleitbewegung nach links oder rechts.
• Endlosschleife: Aktivieren Sie diesen Schalter, damit das Karussell nach Erreichen der letzten Folie von Anfang an wiederholt wird. 
• Ziehen/wischen: Aktivieren Sie diese Option, damit Kunden mit der Maus zum nächsten Bild wechseln können. 
• Gleitgeschwindigkeit: Bearbeiten Sie die Geschwindigkeit für die Folien im Karussell
• Animation: Wählen Sie den Animationseffekt, z. B. „Einlaufen“, „Auslaufen“ oder „Ein- und Auslaufen“. Sie können eine Vorschau des Animationseffekts anzeigen, wenn Sie ihn im Karussellelement anwenden.

Größe 

Passen Sie die Breite und Höhe des Karussellelements Ihren Wünschen an. So richten Sie das Karussell in voller Breite ein:

• Stelle den Länge zu 100% or Volle Breite.
• Gehe zu Einstellungen > Ausrichten und wählen Sie Center or Stretch.

Stellen Sie sicher, dass der Abschnitt oder die Zeile des Karussellcontainers in Ihrer Layoutstruktur ebenfalls auf die volle Breite eingestellt ist.

Hintergrund

Passen Sie den Hintergrund Ihres Karussells an das Design Ihres Shops an. Sie können entweder Wählen Sie eine Vollton-/Farbverlaufsfarbe or Lade ein Bild hoch zur Verwendung als Hintergrund des Karussells.

Weitere Informationen zum Anpassen des Hintergrunds finden Sie unter Dieser Artikel.

Shape 

In diesem Abschnitt können Sie das Gesamtbild Ihres Karussells optimieren, indem Sie es anpassen Grenze, Eckenradiusund Schatteneffekt. Diese Einstellungen tragen dazu bei, dass sich Ihr Karussell nahtlos in das Layout Ihres Shops einfügt oder als hervorgehobener Abschnitt hervorsticht.

• Grenze: Fügen Sie den Rahmen um das Karussell hinzu oder ändern Sie ihn. Sie können seine Dicke, Stil (durchgezogen, gestrichelt, gepunktet) und Farbe passend zu Ihrem Markenstil.
• CORNER: Verstelle die Eckenradius , um die Kanten des Karussells abgerundet oder scharf zu gestalten. Größere Werte erzeugen beispielsweise ein weicheres, moderneres Aussehen.
• Shadow: Bewerben a Schlagschatten um Ihrem Karussell Tiefe und eine optische Trennung vom Seitenhintergrund zu verleihen. Sie können den Schatten Offset, verwischenund Farbe für subtile oder dramatische Effekte.

Beziehen auf Dieser Artikel für eine vollständige Anleitung zum Ändern der Form mit Rahmen-, Ecken- und Schatteneinstellungen.

Ausrichten

In diesem Abschnitt können Sie aus drei Optionen wählen: linksbündig, zentriertden rechtsbündig.

Konfigurieren der Registerkarte „Erweitert“

Für erweiterte Anpassungen navigieren Sie bitte zur Registerkarte „Erweitert“ und folgen Sie den Anweisungen in fehlen uns die Worte. Artikel.

Das Karussell-Element ist ein vielseitiges Werkzeug, um Ihrem Shopify-Shop dynamische, interaktive Grafiken hinzuzufügen. Mit GemPages v7 haben Sie die volle Kontrolle über Stil, Animation und Layout jedes einzelnen Elements. So erstellen Sie mühelos ansprechende Produktpräsentationen oder Markenstorys, die Besucher auf allen Geräten begeistern.

Zum Beispiel, um ein Übergangseffekt für Ihr Karussell, in der Erweiterte Einstellungen des Karussell-Elements können Sie von der Standardeinstellung umschalten. Schlitten Übergang zu a Überblendeffekt für eine harmonischere, elegantere Optik.

Um es anzuwenden, gehen Sie zu Erweitert Suchen Sie die Registerkarte Animation Abschnitt, und wählen Sie Verblassen aus dem Dropdown-Menü für den Übergangstyp.

Der Überblendeffekt funktioniert nahtlos mit Autoplay und LoopDadurch werden die einzelnen Folien automatisch ein- und ausgeblendet.

Häufig gestellte Fragen zum Karussell-Element

1. Warum wird mein Karussell nicht in voller Breite angezeigt?

Um ein Karussell in voller Breite auf Ihrer Seite anzuzeigen, versuchen Sie Folgendes:

• Überprüfen Sie, dass die Breite eingestellt ist 100% Einstellungen > Größe.
• Stellen Sie sicher, dass das Karussell in einem Abschnitt oder einer Reihe platziert wird, erstreckt sich auch über die gesamte Breite.
• Stelle den Ausrichten = Zentrieren oder Strecken in Einstellungen > Ausrichten.
• Vermeiden Sie es, das Karussell in schmalen Spalten oder verschachtelten Abschnitten zu platzieren.

2. Warum wird mein Karussell nicht automatisch abgespielt?

Um die automatische Wiedergabe Ihres Karussells einzustellen, gehen Sie folgendermaßen vor:

• Gehe zu Einstellungen > Interaktion und stellen Sie sicher Autoplay ist umgeschaltet.
• Um die Schleife aufrechtzuerhalten, aktivieren Sie auch Endlosschleife.

3. Kann ich Produkte dynamisch im Karussell anzeigen?

In GemPages ruft das Karussell keine Produktdaten automatisch von Shopify ab, wie das Produktlistenelement. DaherDu musst Produktmodule manuell ziehen in das Karussell zur benutzerdefinierten Steuerung.

4. Warum sehen Bilder abgeschnitten oder falsch ausgerichtet aus?

Falls Ihre Bilder im Karussell abgeschnitten aussehen:

• Prüfen Sie die Bildverhältnis, Polsterungden Folienbreite zu üben.
• Arbeiten jederzeit weiterbearbeiten können. Jede Präsentation und jeder KI-Avatar, den Sie von Grund auf neu erstellen oder hochladen, Bild anpassen statt Bild füllen wenn die Beibehaltung des Seitenverhältnisses Priorität hat.

5. Unterstützt GemPages Carousel einen Fade-Übergangseffekt?

Ja. In GemPages v7 enthält das Carousel-Element ein Überblendeffekt für Erweiterte Einstellungen > Animation. Aktivieren Autoplay und Endlosschleife für kontinuierliche, sanfte Übergänge zwischen den Folien.

6. Wie kann ich die Gleitzeit des Karussells ändern?

Gehe zu Einstellungen > Interaktion.

• Anpassung Verzögerung um zu steuern, wie lange jede Folie sichtbar bleibt.
• Anpassung Gleitgeschwindigkeit um zu steuern, wie schnell der Folienübergang erfolgt.

7. Kann ich Elemente per Drag & Drop in ein Karussell einfügen?

8. Warum werden meine Karussellbilder nicht angezeigt?

Falls Ihre Karussellbilder nicht angezeigt werden, überprüfen Sie Folgendes:

• Stellen Sie sicher, dass Sie in jedem Karussell-Element ein Bildelement hinzugefügt haben.
• Überprüfen Sie, ob das Bild ordnungsgemäß hochgeladen wurde und nicht beschädigt ist oder fehlt.
• Überprüfen Sie die Sichtbarkeitseinstellungen, um sicherzustellen, dass das Bild auf bestimmten Geräten nicht ausgeblendet wird.
• Stellen Sie sicher, dass der Karussell-Eintrag nicht leer ist oder versehentlich gelöscht wurde.
• Klicken Sie auf Gespeichert und Veröffentlichen um die neuesten Änderungen anzuwenden.

Sollte das Problem weiterhin bestehen, versuchen Sie, das Bild erneut hochzuladen oder den Editor neu zu starten.

9. Wie kann ich ein Video im Karussell ersetzen?

Um ein Video im Karussell zu ersetzen, öffnen Sie den GemPages-Editor und wählen Sie das Karussell-Element aus, das das Video enthält. Klicken Sie auf das Video-Element und laden Sie anschließend ein neues Video hoch oder aktualisieren Sie die Video-URL im Einstellungsbereich.