Es ist ratsam, sich auf eine privaten Testseite mit der Funktion des Visual Composer vertraut zu machen.
Durch den schieren Umfang des Plugins kann die Bedienung eigentlich nur in der Praxis gelernt werden. Erstellen Sie dazu eine Seite und setzten sie deren Sichtbarkeit auf "Privat".
An dieser Stelle lernen Sie, wie Sie ein einfaches Layout erstellen und mit Inhalten füllen.
Aktivieren sie zunächst den Visual Composer mit einem Klick auf den blauen BACKEND-EDITOR-Button.
Als erster Schritt sollte eine Zeile erstellt werden.
Eine Zeile kann erstellt werden, in dem der schwarze +-Button oder Add Element angeklickt werden.
Im folgenden Auswahlfeld klicken Sie Zeile an.
Die Zahl und Größe der Spalten für diese Zeile kann dann in der jeweiligen Zeile ausgewählt werden. Wird keine Unterteilung ausgewählt, existiert nur eine Spalte. Wir wählen ein zweispaltiges Layout mit gleicher Breite.
Durch einen Klick auf das + in der jeweiligen Spalte können Sie ein Element hinzufügen.
Hier wählen Sie einen Textbereich aus.
Es öffnet sich automatisch ein Texteditor, in dem sie Text schreiben, editieren und formatieren können. Ein Klick auf Änderungen Speichern schließt den Editor und speichert die Veränderungen.
Wenn sie den Textbereich später editieren wollen, müssen sie nur den Mauszeiger über das Textfeld bewegen und im grünen Feld den Stift anklicken. Die beiden Buttons rechts neben dem Stift duplizieren oder löschen das jeweilige Element.
Um ein weiteres Element - zum Beispiel einen weiteren Textblock - über oder unter dem Textblock einzufügen, können Sie die +-Zeichen der jeweiligen Spalte anklicken.
Erstellen Sie testweise einen zweiten Textblock.
Die Reihenfolge und Position von Elementen kann per Drag and Drop geändert werden. Dazu klicken und halten Sie einfach das drag-and-drop-Symbol des jeweiligen Elements und ziehen es
- über oder unter ein anderes Element
- In eine andere Spalte
- In eine andere Zeile.
Ziehen sie den zweiten Textblock testweise in die linke (im Moment noch leere) Spalte.
Jetzt erstellen wir eine zweite Zeile. Dazu klicken wir auf das große +-Symbol unter der schon erstellten Zeile. Im Auswahlbildschirm wählen sie wieder Zeile aus.
Diesmal teilen wir die Zeile nicht in zwei Spalten und lassen sie unverändert. In diese eine Spalte fügen wir ein Textfeld ein.
Löschen sie diesmal den Fülltext, schreiben sie eine Überschrift und zentrieren sie diese. Wählen sie außerdem als Formatierung Überschrift 1 aus (Text markieren → Überschrift 1 im Dropdown-Menü auswählen). Speichern sie dann die Änderungen.
Diesmal teilen wir die Zeile nicht in zwei Spalten und lassen sie unverändert. In diese eine Spalte fügen wir ein Textfeld ein.
Löschen sie diesmal den Fülltext, schreiben sie eine Überschrift und zentrieren sie diese. Wählen sie außerdem als Formatierung “Überschrift 1” aus (Text markieren → Überschrift 1 im Dropdown-Menü auswählen). Speichern sie dann die Änderungen.
Auch die Anordnung von Zeilen kann per Drag-And-Drop verändert werden.
Klicken und halten sie dafür das drag-and-drop-Symbol der Zeile und bewegen sie diese über die Zeile, die wir zuerst erstellt hatten.
Jetzt fügen wir eine Trennlinie unter der Überschrift ein. Klicken Sie dazu auf eines der kleinen Plus-Symbole der Spalte, in der sich die Überschrift befindet. Im Auswahlfenster wählen Sie die Trennlinie aus.
Es öffnet sich ein Fenster mit Einstellungsmöglichkeiten. Bei Top Margin und Bottom Margin tragen Sie jeweils 20 ein. Das heißt, dass über und unter der Trennlinie 20 Pixel Abstand zum nächstgelegenen Element sind. Speichern Sie die Änderungen.
Das Layout müsste jetzt ungefähr wie folgt aussehen.
Erstellen sie jetzt eine dritte Zeile und teilen sie diese in 3 gleich große Spalten.
Erstellen sie in der ersten der 3 Spalten das Element Einzelbild. Im Settings-Fenster, das sich geöffnet hat, können Sie ein Bild aus der Mediathek auswählen, die Bildgröße eintragen, eine Verlinkung hinzufügen und die Ausrichtung des Bildes ändern.
Wählen Sie ein Bild aus der Mediathek, setzen sie die Bildgröße auf “large” und richten sie das Bild zentriert aus (center). Speichern Sie die Änderungen.
Duplizieren sie das Einzelbild zwei mal und ziehen sie es jeweils in die beiden leeren Spalten.
Editieren sie die Bildern in Spalte zwei und drei (mit dem weißen Stift im grünen Feld). Wechseln sie das Bild durch ein anderes aus, in dem sie das grüne + anklicken. Speichern sie die Änderungen.
Fügen sie in der mittleren Spalte unter dem Bild einen kleinen Beschreibungstext ein.
Herzlichen Glückwunsch! Sie haben ein einfaches Layout erstellt.
Speichern sie alle Änderungen auf der Seite mit einem Klick auf Aktualisieren.
Klicken sie auf Vorschau, um die Seite zu begutachten.
Auf der Vorschau-Seite ist bereits erkennbar, wie der Editor und das tatsächliche Aussehen der Seite in Zusammenhang stehen.
Wie sie die Abstände zwischen den Zeilen und Elementen ansprechender gestalten, können sie im Bereich Abstände nachlesen.