Dynamischer Dreispalter
Einführung
Bei dem Block Dynamischer Dreispalter handelt es sich um ein Block Element der Kategorie Struktur. Schau dir daher bitte vorab die Seite Struktur Blöcke » Allgemeine Informationen zu Struktur Blöcken an.
Dieses Strukturelement dient zur Aufteilung der Inhalte auf drei Spalten. Hierbei können die Breiten der ersten beiden Spalten in Prozent über die Konfiguration definiert werden. Die Breite der letzten Spalte ergibt sich somit automatisch aus der Differenz zu 100 Prozent.
Konfiguration
Für diesen Block stehen die unten stehenden Optionen zur Verfügung. Wie du die Konfiguration des Blocks öffnest, erfährst du unter Struktur Blöcke bearbeiten.
Breite der 1. Spalte in Prozent
An dieser Stelle kannst du die Breite der ersten Spalte in Prozent definieren.
Breite der 2. Spalte in Prozent
An dieser Stelle kannst du die Breite der zweiten Spalte in Prozent definieren. Die Breite der letzten Spalte ergibt sich aus der Differenz zu 100 Prozent.
Mindestbreite der Spalten (in Pixel) vor Umbruch
Die hier definierte Pixelbreite muss für jede Spalte mindestens verfügbar sein. Ist dies aufgrund einer zu geringen Auflösung nicht der Fall (bspw. auf Tablet oder Handy), so bricht das Layout um und die Spalten werden untereinander statt nebeneinander dargestellt.
Konfigurationsbeispiel
Als Breite der 1.Spalte sowie der 2. Spalte wurden je 25% Prozent definiert. Hieraus ergibt sich eine Restbreite von 50% für die letzte Spalte. Gehen wir nun von einer Maximalbreite von 1000 Pixel bei einem Tablet aus, so entspricht dies 250px für die ersten beiden Spalten sowie 500px für die letzte Spalte. Haben wir als Mindestbreite der Spalten 150px eingestellt, so werden die Spalten nebeneinander dargestellt, da genügend Platz vorhanden ist. Wird die Seite nun jedoch auf einem Handy mit einer Maximalbreite von 400px dargestellt, so ergeben sich für die ersten beiden Spalten eine Breite von 100px und für die Letzte eine Breite von 200px. Da für die ersten beiden Spalten somit die Mindestbreite von 150px nicht mehr eingehalten werden kann, werden die drei Spalten untereinander dargestellt.
Gesamtbreite über 100 Prozent
Wie im Bereich Konfiguration beschrieben, werden die Breiten der Spalten in Prozent definiert und die Letzte ergibt sich aus der Differenz zu 100 Prozent. Nun ist es aber auch möglich, die Werte so zu hinterlegen, dass sich extra mehr als 100 Prozent ergeben.
Bespiel 1
Hinterlegen wir für die erste Spalte 40 und für die Zweite 60 Prozent, so haben wir bereits 100 Prozent erreicht. Die Folge ist nun, dass Shopware CMS Professioal eine weitere Zeile hinzufügt. Daraus resultierend nimmt die dritte Spalte 100 Prozent der 2. Zeile ein.
Bespiel 2
In diesem Beispiel haben wir für die erste Spalte 40 und für die zweite Spalten 70 Prozent definiert. Da sich die Summe beider Spalten auf 110 Prozent beläuft, wird die erste Spalte automatisch auf 100 Prozent gestreckt und die zweite Spalte findet mit einer Breite von 70 Prozent in der 2. Zeile Platz. Die dritte Spalte wird mit 30 Prozent dargestellt (Differenz zu den 70 Prozent der zweiten Spalte).
dl dt {
font-weight: bolder;
margin-top: 1rem;
}
dl dd {
padding-left: 2rem;
}
h2 code {
font-size: 32px;
}
.category--description ul {
padding-left: 2rem;
}
dt code,
li...
mehr erfahren »
Fenster schließen
Dynamischer Dreispalter
Einführung
Bei dem Block Dynamischer Dreispalter handelt es sich um ein Block Element der Kategorie Struktur. Schau dir daher bitte vorab die Seite Struktur Blöcke » Allgemeine Informationen zu Struktur Blöcken an.
Dieses Strukturelement dient zur Aufteilung der Inhalte auf drei Spalten. Hierbei können die Breiten der ersten beiden Spalten in Prozent über die Konfiguration definiert werden. Die Breite der letzten Spalte ergibt sich somit automatisch aus der Differenz zu 100 Prozent.
Konfiguration
Für diesen Block stehen die unten stehenden Optionen zur Verfügung. Wie du die Konfiguration des Blocks öffnest, erfährst du unter Struktur Blöcke bearbeiten.
Breite der 1. Spalte in Prozent
An dieser Stelle kannst du die Breite der ersten Spalte in Prozent definieren.
Breite der 2. Spalte in Prozent
An dieser Stelle kannst du die Breite der zweiten Spalte in Prozent definieren. Die Breite der letzten Spalte ergibt sich aus der Differenz zu 100 Prozent.
Mindestbreite der Spalten (in Pixel) vor Umbruch
Die hier definierte Pixelbreite muss für jede Spalte mindestens verfügbar sein. Ist dies aufgrund einer zu geringen Auflösung nicht der Fall (bspw. auf Tablet oder Handy), so bricht das Layout um und die Spalten werden untereinander statt nebeneinander dargestellt.
Konfigurationsbeispiel
Als Breite der 1.Spalte sowie der 2. Spalte wurden je 25% Prozent definiert. Hieraus ergibt sich eine Restbreite von 50% für die letzte Spalte. Gehen wir nun von einer Maximalbreite von 1000 Pixel bei einem Tablet aus, so entspricht dies 250px für die ersten beiden Spalten sowie 500px für die letzte Spalte. Haben wir als Mindestbreite der Spalten 150px eingestellt, so werden die Spalten nebeneinander dargestellt, da genügend Platz vorhanden ist. Wird die Seite nun jedoch auf einem Handy mit einer Maximalbreite von 400px dargestellt, so ergeben sich für die ersten beiden Spalten eine Breite von 100px und für die Letzte eine Breite von 200px. Da für die ersten beiden Spalten somit die Mindestbreite von 150px nicht mehr eingehalten werden kann, werden die drei Spalten untereinander dargestellt.
Gesamtbreite über 100 Prozent
Wie im Bereich Konfiguration beschrieben, werden die Breiten der Spalten in Prozent definiert und die Letzte ergibt sich aus der Differenz zu 100 Prozent. Nun ist es aber auch möglich, die Werte so zu hinterlegen, dass sich extra mehr als 100 Prozent ergeben.
Bespiel 1
Hinterlegen wir für die erste Spalte 40 und für die Zweite 60 Prozent, so haben wir bereits 100 Prozent erreicht. Die Folge ist nun, dass Shopware CMS Professioal eine weitere Zeile hinzufügt. Daraus resultierend nimmt die dritte Spalte 100 Prozent der 2. Zeile ein.
Bespiel 2
In diesem Beispiel haben wir für die erste Spalte 40 und für die zweite Spalten 70 Prozent definiert. Da sich die Summe beider Spalten auf 110 Prozent beläuft, wird die erste Spalte automatisch auf 100 Prozent gestreckt und die zweite Spalte findet mit einer Breite von 70 Prozent in der 2. Zeile Platz. Die dritte Spalte wird mit 30 Prozent dargestellt (Differenz zu den 70 Prozent der zweiten Spalte).
