Mixed Layout (Boxed + Fullwidth zusammen) mit Elementor erstellen

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

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

YouTube immer entsperren

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!