Seitenaufbau in Rekordzeit per Drag & Drop: Der Visual Composer von wpbakery

Ihr kennt das Problem: Ihr wollt auf einer WordPress-Site unkompliziert und ansehnlich Content unterbringen. Möglichst flexibel noch dazu, da jede Page doch ein wenig anders aussehen soll. Auch das beste WordPress-Template hilft hier nur bedingt. Wenn jetzt noch unerfahrene User mit dem Content umgehen können sollen, wird es richtig haarig (Bildgrößen, Responsivität usw.). Hierfür gibt es eine Lösung, die auch wir gerne einsetzen: Der Visual Composer von wpbakery.

Von Anfängern und Profis bedienbar

Der Visual Composer macht es möglich, mit wenigen Klicks und nach kurzer Einarbeitung komplexe Layouts umzusetzen. Grundelement der Gestaltung sind sog. „rows“, also Spalten. Darin lassen sich dann per Drag&Drop verschiedene Elemente unterbringen. Dabei kann der Nutzer zwischen Back-End und Front-End-Ansicht wählen. Das Back-End zeigt dabei besser die Struktur der Page, während man im Front-End schneller das Endergebnis sieht. Wer sich die fertige Seite in einem zweiten Tab anzeigen lässt und regelmäßig aktualisiert, kann die Vorteile des Back-Ends mit dem direkten Ergebnis-Check kombinieren.

Im Grundpaket sind mehr als 40 Content-Elemente vorprogrammiert. Wer möchte, kann sich aber auch eigene Elemente bauen. Diese sind dann ebenso verwendbar wie die ursprünglichen Elemente. Die Textfelder öffnen sich im bekannten Text-Editor. Auch hier gibt es wieder die Profi-Variante: Im HTML-Modus können auch Textfelder ganz gezielt bearbeitet werden.

[envato item=“242431″ style=“big“/]

[sam_ad id=“1″ codes=“true“]

Einfaches Grundgerüst – einfach erweiterbar

Ein enormer Vorteil beim Gestalten der rows ist ihre relative Breite: Ob man ein Textfeld, einen Slider oder ein Bild in ein Element legt – es ist niemals größer als das Element in der Gesamtkomposition. Ist die Seitenbreite einmal im CSS definiert, lassen sich rows problemlos in relative Anteile aufteilen. Aufteilungen wie etwa 1/2 + 1/2, 1/4 + 3/4 oder 1/6 + 4/6 + 1/6 sind problemlos möglich. Der Abstand zwischen den Elementen ist im CSS leicht variierbar. Wer seinen Elementen zusätzlich Effekte gönnen will, kann CSS-Klassen definieren und sie Element für Element anwenden lassen.

Die einzelnen Elemente in den rows schrumpfen bei abnehmender Bildschirmgröße mit und brechen schließlich sauber um. Die Seite ein zweites Mal „zu bauen“ oder zumindest umständlich am CSS herumzuschrauben, kann man sich mit dem Visual Composer also sparen.

Als Beispiel haben wir für euch mal die Seite der Biermarke GUDE ausgesucht. Auf der inzwischen mehrfach ausgezeichneten Site sind viele der Pages komplett mit dem Visual Composer gestaltet. Auf der Seite des Visual Composer findet Ihr neben weiteren Screenshots auch ein gut gemachtes Vorstellungsvideo.

Sie haben ein Wordpress-Problem und brauchen schnelle Hilfe?