Eine Gruppe ist ein Kasten, der andere Blöcke enthält und anordnet. Damit stellst du Dinge nebeneinander, baust Spalten oder gibst einem Teil eines Abschnitts einen eigenen Hintergrund und Rand.
Wo du Gruppen nutzen kannst
Viele Abschnitte nehmen einen Gruppen-Block an: die Fußzeile, der Newsletter, der Hero, die Folien der Diashow, FAQ, Vorher und Nachher, Bewertungen, Kontakt, 404, Bestellbestätigung, aufklappbare Zeilen und der Textbereich von Produktlisten wie empfohlenen Produkten und Kollektionen. Jeder Abschnitt legt fest, welche Blöcke in seine Gruppen dürfen und wie viele Gruppen er aufnimmt.
Um eine Gruppe im Builder hinzuzufügen, wähle den Abschnitt aus, klicke auf Neuen Block hinzufügen und wähle Gruppe. Ziehe dann andere Blöcke hinein. In manchen Abschnitten (Fußzeile, Newsletter, Bewertungen) kannst du auch eine Gruppe in eine Gruppe setzen.
Layout
- Breite: Füllen nimmt den freien Platz ein und teilt ihn gleichmäßig mit anderen Füllen-Gruppen daneben. Anpassen ist nur so breit wie der Inhalt. Benutzerdefiniert legt eine Benutzerdefinierte Breite in Prozent fest.
- Richtung: Vertikal stapelt die Blöcke, Horizontal stellt sie nebeneinander. Nebeneinander stehende Blöcke rutschen in eine neue Zeile, wenn nicht genug Platz ist.
- Auf Mobilgeräten vertikal stapeln (nur bei Horizontal): Auf Handys werden die Blöcke stattdessen gestapelt.
- Position: setzt die Blöcke nach oben oder unten (Oben, Mitte, Unten).
- Ausrichtung: setzt die Blöcke von links nach rechts (Links, Mitte, Rechts).
- Abstand dazwischen: verteilt die Blöcke mit gleichem Abstand zueinander. Die Option gibt es in der Richtung, in der die Blöcke fließen: unter Position bei einer vertikalen Gruppe, unter Ausrichtung bei einer horizontalen Gruppe.
Aussehen
- Übergeordnetes Farbschema verwenden: standardmäßig an, damit die Gruppe die Farben des Abschnitts nutzt. Schalte es aus und wähle ein Farbschema, um der Gruppe eigene Hintergrund- und Textfarben zu geben.
- Rand: Keine oder Gefüllt. Gefüllt fügt Rahmenstärke (1 bis 20 Pixel) und Rahmen-Deckkraft hinzu. Die Farbe ist die Randfarbe des Schemas.
- Eckenradius: rundet die Ecken ab, von 0 bis 100 Pixel.
- Hintergrund-Overlay: legt eine Farbschicht über den Hintergrund. Stelle die Overlay-Farbe und den Overlay-Stil ein: Gefüllt oder Farbverlauf, der ins Transparente ausläuft, mit der FarbverlaufsrichtungHoch oder Runter. Praktisch, damit Text über einem Hero-Bild gut lesbar ist.
Abstände
Abstand ist der Platz zwischen den Blöcken in der Gruppe (0 bis 100 Pixel). Innenabstand ist der Platz zwischen dem Rand der Gruppe und ihren Blöcken, auf jeder Seite.
Rezepte
- Zwei Schaltflächen nebeneinander in einem Hero: Setze beide in eine horizontale Gruppe mit kleinem Abstand.
- Drei Spalten in der Fußzeile: eine horizontale Gruppe mit drei Füllen-Elementen darin und eingeschaltetem Auf Mobilgeräten vertikal stapeln.
- Eine Karte: eine vertikale Gruppe mit eigenem Farbschema, einem gefüllten Rand, einem Eckenradius und Innenabstand.
- Text links, Schaltfläche rechts: eine horizontale Gruppe mit der Ausrichtung Abstand dazwischen.
Gut zu wissen
- Eine Spalte ist breiter als gewünscht: Zwei Füllen-Gruppen teilen sich den Platz gleichmäßig. Stelle eine auf Benutzerdefiniert und gib ihr einen Prozentwert.
- Die Gruppe wird nicht angezeigt: Eine Gruppe ohne Blöcke oder nur mit ausgeblendeten Blöcken erscheint nicht in deinem Shop.
- Gruppe fehlt in der Blockliste: Dieser Abschnitt nimmt keine Gruppen an, oder sein Gruppenlimit ist erreicht.
- Die Einstellungen für Text, Schaltfläche und Trennlinie findest du unter Blöcke Gruppe, Text, Schaltfläche und Trennlinie: Wie funktionieren die Einstellungen der Layout-Komponenten?.