In diesem Artikel zeige ich dir, wie du mit Elementor ein zweispaltiges Layout erstellen kannst, welches das Fullwidth und das Boxed Layout zusammen kombiniert.
Ziel
Unser Ziel ist, ein zweispaltiges Layout zu erstellen, wo das Bild bis zum Bildschirmrand ragt und der Content (Text) im Boxed Layout bleibt.
Erster Versuch
Ich hatte genau für dieses Layout schon letztes Jahr ein Video gemacht, bei dem man ein 50/50 Verhältnis erstellen konnte: Zum alten Video
Die Breitenangabe für den Container aus dem Video: min(50% 1140px/2)
(Wobei hier das 1140px für die Breite deines eingestellten Boxed Layout Breite steht)
Das ganze funktioniert zwar weiterhin mit der Methode, jedoch nicht, wenn man unterschiedliche Breiten haben möchte.
Das Problem
Das funktioniert zwar sehr schön für ein 50/50 Verhältnis (also so dass das Bild bis zur Mitte der Seite reicht und der Container mit dem Text genau die halbe Breite des boxed Layouts hat), aber das funktioniert nicht mehr, wenn man den Content-Bereich breiter oder schmäler gestalten möchte. Als Beispiel: Der Text-Container soll 70% des Boxed Layouts einnehmen und nicht genau die Hälfte.
Die Lösung
Im Prinzip brauchst du nur etwas CSS am linken Container und eine Einstellung am rechten Container:
- Container mit dem Content (Text-Inhalt), der innerhalb des boxed Layouts sitzen soll:
Vergib eine Breite im Layout-Tab und setze die Einstellung im Erweitert-Tab bei Größe auf „Grow“. - Container, der das Hintergrundbild enthält, welches sich bis zum Bildschirmrand streckt:
füge unter custom css folgenden CSS Code ein:
selector{
width: 100vw;
margin-left: calc(-50vw + 50%);
}
Und schon sitzen die beiden Container an der korrekten Stelle.
Container Rechts/Links tauschen
Möchtest du den Container, der bis zum Rand geht auf der rechten statt auf der linken Seite darstellen, dann tausche einfach das margin-left gegen ein margin-right um:
selector{
width: 100vw;
margin-right: calc(-50vw + 50%);
}
Hat’s geklappt?
Hinterlasse gerne unten einen Kommentar!
