Container Anordnen
Ich hatte euch schon den Tipp gegeben, die Ausrichtung des Hauptcontainers nicht zu ändern. Mit Ausrichtung meine ich, wie die Elemente, die dem Container hinzugefügt werden angeordnet sind. Sie sollten immer von oben nach unten angeordnet sein.
Das liegt daran, dass eine Website in der Regel oben anfängt und unten endet.
Legt ihr bereits im Hauptcontainer eine horizontale Anordnung fest (also von links nach rechts), passiert es ziemlich sicher, dass ihr im weiteren Verlauf ziemliche Friemelarbeit leisten müsst. Erspart euch das.
Zieht stattdessen besser einen weiteren Container in den Hauptcontainer hinein.
Wie ihr seht, habe ich drei weitere Container in den Hauptcontainer geschoben. Diese drei sind untereinander angeordnet und befinden sich innerhalb des Hauptcontainers. Sie stellen also die 1. Unterebene dar.
Container verschachteln
Wenn das nun unser Design wäre, wäre es wohl ein bisschen langweilig. Daher gehen wir noch einen Schritt weiter. Wir verschachteln die Container weiter und arbeiten mit den Containern der 1. Unterebene weiter.
Um es übersichtlicher zu machen, habe ich die von den drei Containern der 1. Unterebene zwei gelöscht. Den verbliebenen Container der 1. Unterebene habe ich auf horizontale Ausrichtung gestellt.
Dadurch, dass der Container der 1. Unterebene auf horizontale Anordnung gestellt ist werden die zwei Container der 2. Unterebene nebeneinander angeordnet. Sie befinden sich innerhalb des Containers der 1. Unterebene.
Lasst uns noch eine 3. Ebene hinzufügen.
Wie ihr seht, lässt sich die Verschachtelung der Container beliebig oft weiterführen. Dennoch solltet ihr die Verschachtelung auf keinen Fall übertreiben, da die Seite dadurch immer schwerfälliger, langsamer und auch unübersichtlicher wird. Die Verschachtelungen müsst ihr immer im Kopf behalten. Ihr verliert andernfalls den Überblick. Mehr als drei Unterebenen würde ich nicht empfehlen.
Hoffentlich ergibt damit auch Sinn, den Hauptcontainer immer in der vertikalen Anordnung zu lassen. Alle weiteren Ausrichtungen lassen sich im nachhinein noch ändern und ersparen euch damit im besten Falle viel Zeit.
No Wrap & Wrap
No Wrap und Wrap ist ein weiteres wichtiges Mittel um ein schönes Design mit Elementor zu verwirklichen.
No Wrap
No Wrap bedeutet lediglich: kein Umbruch. Das bedeutet, wenn ihr ein horizontales Design erstellt und mehrere Elemente nebeneinander anordnet, werden diese Elemente auch immer nebeneinander stehen und sich nicht auf mehrere vertikale Reihen verteilen. Das gibt euch die Möglichkeit, Elemente die immer nebeneinander stehen sollen auch nebeneinander stehen zu lassen.
Diese Anordnung ist aber nicht starr. Ihr könnt auch hier eine Menge am Aussehen machen.
Wie im 2. Teil gelernt, könnt ihr jeden einzelnen Container auf Boxed oder volle Breite stellen. Ist der Container auf Boxed gestellt, könnt ihr die Inhaltsbreite ändern. Steht der Container auf volle Breite, lässt sich die Breite des gesamten Containers ändern. Daraus machen wir folgendes Design:
Container 1: Dieser Container ist Boxed und die Breite ist auf 50% gestellt. Das bedeutet, dass der Inhalt des Containers eine Breite von 50% aufweist. Links und rechts entsteht dadurch ein Rand von jeweils 25%. Der Container selbst hat allerdings eine Breite von 100%.
Container 2: Dieser Container steht auf volle Breite. Die Breite selbst ist auch hier auf 50% eingestellt. das bedeutet, dass der Inhalt des Containers zu 100% zur Verfügung steht. Der Container selbst ist 50% breit.
Container 3: wie Container 1
Container 4: wie Container 2
Exkurs: Wieso können 2 x 50% Breite und 2 x 100% Breite vorkommen? Das ergibt doch 300%.
Sind die Elemente ohne Umbruch (No Wrap) nebeneinander angeordnet, ist jedes Element 100% Breit. Egal, wie viele sich nebeneinander befinden. Wird nun eines der Elemente in seiner Gesamtbreite verändert, wandert die „überschüssige“ oder „fehlende“ Breite auf die anderen Elemente über.
Beispiel: 4 Elemente stehen nebeneinander. Alle 4 haben 100% (alle haben zum Beispiel 100px <- Pixel).
Wird ein Element um 50% (50px) verkleinert, werden die 50% nicht auf die anderen 3 Elemente Addiert, sondern neu berechnet.
Wenn vorher für jedes Element galt: 100% = 100px, dann gilt jetzt: 100% = 116,66px und 50% = 50px
Wrap
Wrap bedeutet Umbruch. Das heißt, dass einzelne Container unterschiedliche Gesamtbreiten haben können und nebeneinander und / oder untereinander angeordnet sein können. Das funktioniert über die Horizontale Anordnung. An dieser Stelle ist es wichtig, dass alle Container die sich im übergeordneten Container befinden auf volle Breite gestellt sind.
Alle 4 Container stehen am Anfang untereinander. Das ist auch richtig so. Denn alle 4 sind volle Breite und der beinhaltende Container steht auf Wrap. damit werden die 4 inneren Container nicht nebeneinander „gezwungen“, sondern stehen aufgrund ihrer Breite von 100% untereinander.
Lasst uns die Breite der Container ändern.
Das sieht doch schon cool aus. Auf diese Art und Weise lassen sich schöne Designs gestalten, die eurer Kreativität viel Raum geben, eure Vorstellungen umzusetzen.