• Mit Avada nested columns erstellen

Mit Avada nested columns erstellen

Avada nested columns – verschachtelte Spaltenlayouts 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.

Was sind nested columns?

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.

Eines Beispielskizze für nested columns

Nested columns erstellen – Schritt für Schritt

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.

Basis-Container-1drittel-2drittel Aufteilung

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.

Nested Columns Element im Fusion Builder

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.

Layoutfenster nested columns im Fusion Builder

Das Ergebnis

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

Beispiellayout für nested columns im Avada Theme

Fazit

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.

By | 2017-06-16T23:06:05+00:00 Juni 16th, 2017|Categories: Tutorials|Tags: , , |0 Kommentare

About the Author:

Als freiberuflicher Web- und Mediendesigner biete ich Konzeption, Webdesign & Entwicklung von Firmen Webseiten auf der Basis des Open Source CMS WordPress.

Hinterlassen Sie einen Kommentar