Mit Avada nested columns erstellen

Seit der Version 5 des WordPress Avada Themes ist eine neues Seitengestaltungselement im Fusion Builder hinzugekommen: nested columns.
Als Gestaltungselement eingesetzt, können nun komplexere Spalten-Layouts auf Seiten und Beiträgen realisiert werden – Beispielsweise zur Ergänzung bestimmter Merkmale zu einem Produkt plus einem Call-to-Action Button.

Bildlich übersetzt könnte man nested columns als „Kinder-Container in einem Eltern-Container“ oder auch als verschachtelte Spalten Layouts bezeichnen. Dazu rechts eine kleine Skizze.

1. Schritt

Als Beispiel erstelle ich als erstes einen neuen Container mit einer 1/3 – 2/3 Spaltenaufteilung. Verschachtelte Layouts lassen sich aber auch mit jeder anderen beliebigen Container Kombination erstellen.

2. Schritt

In der ersten Spalte (1/3) habe ich eine einfach Headline eingefügt, darunter eine Textbox mit Fließtext. In der zweiten Spalte (2/3) ebenfalls eine Headline mit Fließtext.

3. Schritt

In meinem Beispiel habe ich im Bearbeitungsfenster der nested columns ein Bild in der linken (1/3) Spalte eingefügt und in der rechten (2/3) Spalte ein Button Element. Beide Spalten können noch individuell mit Abständen zueinander und vor allem innerhalb mit Padding-Werten verbessert werden.

Allen Containern habe ich in meinem Beispiel zusätzlich einen Border-Wert von 1px in hellgrau gegeben um die Aufteilung besser zu veranschaulichen.

Das Ergebnis im Frontend zeigt nur ein Beispiel, wie flexibel nested columns im Fusion Builder eingesetzt werden können. Somit lassen sich mit verschachtelten Spaltenlayouts sehr ansprechende Designs realisieren, insbesondere wenn Farben und Hintergründe zum Einsatz kommen.