Visual Composer Elemente und ihre Bedeutung

Visual Composer Elemente

Der Visual Composer ist ein Drag & Drop Builder, der sich über große Zufriedenheit unter uns Bloggern erfreut. Er erleichtert das Erstellen von Seiten um ein Vielfaches, vor allem, wenn man keine oder nur wenig Programmierkenntnisse besitzt.

Der Visual Composer* kann entweder separat, zusätzlich zu dem Theme gekauft werden, oder ist bei vielen Themes im Kauf enthalten. Er liefert viele Inhaltselmente mit, die auf der Seite eingebaut werden können.

Leider haben diese Elemente nicht alle aussagekräftige und selbsterklärende Namen. Je nachdem, in welchem Theme der Visual Composer enthalten ist, haben die Elemente deutsche oder englische Bezeichnungen.

Damit du genau weißt, wie die Elemente aussehen und welche Möglichkeiten sie bieten, habe ich diese Übersicht erstellt.

Accordion (Akkordion)

Ein Accordion Element kannst du dir vorstellen, wie das Instrument auch. Es kann aus- und zusammengeklappt werden. Ein Accordion kann beliebig viele Toggles (aufklappbare Überschriften) enthalten, in denen sich weitere Elemente befinden. Diese Elemente sind versteckt. Wenn ein Toggle angeklickt und dadurch ausgeklappt wird, werden die darin befindlichen Elemente angezeigt. Gleichzeitig wird das bisher aktive Toggle zugeklappt. Es kann so gut wie jedes beliebige Element innerhalb des Accordions untergebracht werden.

Beispiel:

Es können Texte untergebracht werden.

Es können auch Bilder untergebracht und in Spalten sortiert werden.

Du kannst jedes beliebige, andere Element des Visual Composers in dem Accordion unterbringen.

Button

Hier wird vermutlich keine lange Erklärung nötig sein. Mit einem Button setzt du ein anklickbares Element, das sich farbig von dem Rest der Seite abhebt und bei Interaktion eine grafische Rückmeldung gibt. In den Einstellungen kannst du die Farbe des Buttons anpassen, und den Link hinterlegen, der beim Klick des Buttons aufgerufen werden soll.

Beispiel:

Call to action

Mit dem call to action Element, kannst du eine auffällige Box erstellen. Wie der Name sagt, ist der Zweck dieses Elements, eine Handlungsaufforderung zu kreieren. Hiermit kann der Nutzer zu einer Handlung bewegt werden. Die Box besteht aus einer Überschrift, einem Subtitle, einem Text und natürlich dem Button. Es kann das Layout angepasst werden, sowie die Farben aller Elemente.

Beispiel:

Handlungsaufforderung

Und natürlich auch noch etwas mehr Text.

Zum Abschluss kannst du hier noch mehr Text eintragen, um deine Handlungsaufforderung zu erklären…

Custom Heading (Individuelle Überschrift)

Dieses Element vereinfacht die Erstellung von Überschriften, ohne dass HTML Kenntnisse benötigt werden. Es kann die Schriftart ausgewählt werden, die Schriftgröße, Farbe, Ausrichtung und hierarchische Ebene der Überschrift.

Beispiel:

Das ist eine individuelle Überschrift

Empty Space (Leerer Bereich)

Auch hier muss nicht viel Erklärt werden. Dieses Element gibt dir die Möglichkeit, einen leeren Raum einzufügen. Du kannst die höhe des Freiraums in Pixeln festlegen.

Beispiel (32 Pixel Höhe):

Facebook Like Button

Der Facebook Like Button ist genau das: ein kleiner Button um deinen Artikel oder deine Seite zu liken. Du kannst in den Einstellungen festlegen, ob der Button mit oder ohne die Anzeige der bisherigen Likes dargestellt werden soll und kannst wählen, ob er horizontal oder vertikal platziert wird.

Beispiel:

FAQ (Hilfebereich)

FAQ Elemente sind ähnlich wie die Accordions. Du kannst damit Toggles mit Inhaltselementen darin erstellen. Im Gegensatz zu den Accordions, können hier allerdings mehrere Toggles gleichzeitig geöffnet werden. In den Einstellungen kannst du den Stil der FAQs festlegen, die Größe, ob sie geschlossen oder geöffnet sein sollen beim Laden der Seite und einiges mehr.

Beispiel:

Du kannst beide Elemente gleichzeitig öffnen

Inhaltstext für das Aufklappelement kommt hier rein. Klicken Sie auf Bearbeiten um diesen Text zu ändern.

Es können auch beide Toggles gleichzeitig geschlossen sein

Inhaltstext für das Aufklappelement kommt hier rein. Klicken Sie auf Bearbeiten um diesen Text zu ändern.

Flickr Widget

Mit diesem Element kannst du die letzten Bilder aus deinem Flickr Profil anzeigen lassen. Dabei kann eingestellt werden, wie viele Bilder und in welcher Reihenfolge sie eingefügt werden.

Beispiel:

Google Maps (Google Maps Karte)

Dank dieses Elements wird das Einfügen von einer Karte von Google Maps zum Kinderspiel. Du kannst die Höhe der Karte manuell eingeben. Eingefügt wird die Karte durch die Nutzung eines iFrames.

Beispiel:

Google+ (Google+ Button)

Wie auch bei dem Facebook Like Button, wird hier ein einfacher Button dargestellt, mit dem ein +1 über Google Plus gegeben werden kann. In den Einstellungen kannst du die Größe des Buttons festlegen.

Beispiel:

Icon

Mit dem Icon Element hast du die Möglichkeit, eines von hunderten Icons einzufügen. Du kannst aus verschiedenen Icon-Bibliotheken wählen, die Farbe, Größe und den Hintergrund des Icons anpassen, und sogar einen Link hinterlegen.

Beispiel:

Image Gallery (Bildergalerie)

Du kannst mit der Image Gallery ganz einfach eine Bildergalerie erstellen. Du kannst zwischen einem Slider wählen, in dem die Bilder nacheinander angezeigt werden, und einer klassischen Galerie im Kachellayout. Außerdem kannst du wählen, was beim Anklicken eines Bildes passieren soll und natürlich in welcher Größe die Galerie angezeigt wird.

Beispiel:

Masonry Media Grid

Ähnlich der Bildergalerie, kannst du mit diesem Element Bilder in verschiedenen Layouts darstellen. Du hast hierbei eine riesige Auswahl an Darstellungsvarianten. Es kann außerdem festgelegt werden, in wie vielen Spalten die Bilder angeordnet sein sollen und ob alle auf einmal gezeigt werden, oder nur ein paar.

Beispiel:

Masonry Post Grid

Das Masonry Post Grid bietet genau die gleichen Möglichkeiten, wie das Masonry Media Grid. Der Unterschied liegt darin, dass hier Beiträge, Seiten oder anderes als Inhalt genommen werden. Du kannst also beispielsweise deine letzten 6 Artikel in einer Kachelanordnung anzeigen lassen. Es kann die Anzahl und Sortierung der angezeigten Elemente festgelegt werden, genau wie die Sortierung, Spaltenanzahl und vieles weitere.

Beispiel:

Message box (Nachrichtenfenster)

Dieses Element lässt dich eine Box erstellen, in der du eine wichtige Nachricht unterbringen kannst. Der Hintergrund kann in einer beliebigen Farbe angepasst werden, zudem kannst du ein Icon mit in die Box einbauen. Dadurch ist dieses Element super für Warnungen, Informationen, Zusammenfassungen oder ähnliches, das innerhalb einer Seite herausstechen soll.

Beispiel:

Hier kann eine wichtige Nachricht mit einem Icon dargestellt werden!

Pie Chart

Du kannst mit dem Pie Chart Element ein ganz einfaches Tortendiagramm darstellen. Im Prinzip nichts anderes als ein Kreis, dessen Kontur je nach deiner Eingabe gefüllt ist. Du kannst hierbei den Wert einstellen, die Einheit und die Farbe.

Beispiel:

Pinterest (Pinterest Button)

Ein sehr einfaches Element, um einen „Pin It“ Button einzubauen. Es kann nur einstellt werden, ob der Button horizontal, vertikal und ohne Zähler angezeigt werden soll. Die Größe kann leider nicht verändert werden, der Button wird sehr klein dargestellt.

Beispiel:

Posts slider (Beitragsslider)

Eine weitere Möglichkeit, deine Beiträge zu präsentieren: in einem Slider. Du kannst auswählen, wie viele deiner Artikel in dem Slider erscheinen sollen, und ob die einzelnen Slides auf die Artikel verlinken sollen. Die Artikel können entweder automatisch aus deinen letzten ausgewählt werden, oder du legst manuell fest, welche angezeigt werden sollen.

Beispiel:

Progress Bar (Fortschrittsbalken)

Ein echt tolles Element, mit dem du Fortschritte, Fähigkeiten oder auch anderes optisch darstellen kannst. In den Einstellungen können beliebig viele Balken hinzugefügt und die Farbe verändert werden, die Balken können sogar mit einer Animation versehen werden.

Beispiel:

Development
Design
Marketing

Raw HTML (Ungefiltertes HTML)

Wenn du selber HTML schreiben möchtest oder einen Codeschnipsel einbauen musst, dann ist dieses Element hilfreich. Das war es auch schon. Du kannst HTML Codes einfügen, die dann umgewandelt und angezeigt werden, mehr kann dieses Element nicht.

Raw JS (Ungefiltertes Javascript)

Genau wie bei dem Raw HTML Element, kann hier einfach nur Code eingefügt werden. JS steht für Javascript, welches in dieses Element gehört. Das Javascript wird dann gelesen und enstprechend angezeigt.

Row (Zeile)

Die Zeile ist eine der wichtigsten Elemente im Visual Composer. Sie umfasst andere Elemente und lässt dich die Anordnung in mehrere Spalten festlegen. Zudem kannst du damit Segmente erstellen, die eine gewisse Hintergrundfarbe besitzen und Elemente darin aufbauen. Mit dem Zeilen-Element legst du also sozusagen dein Layout fest und kannst zwischen verschiedensten Spaltenanordnungen wählen. Du kannst innerhalb einer Zeile zwei gleichgroße Spalten anlegen, oder auch jede andere Spaltenformation. Ein Parallax Effekt kann ebenso hinzugefügt werden, wie ein Video-Hintergrund. Zeilen bieten noch viele weitere Einstellungen, die sehr nützlich zur Gestaltung einer Seite sind.

Beispiel:

Dies ist eine Zeile mit einem dreispaltigen Layout. Aufgeteilt sind die drei Spalten in 1/4 + 1/2 + 1/4 der Seitenbreite.

Separator (Trennlinie)

Der Separator ist nichts anderes als eine Trennlinie, um verschiedene Elemente voneinander abzugrenzen. Du kannst die Farbe, Dicke und Breite der Trennlinie einstellen.

Beispiel:

Single image (Einzelbild)

Eigentlich scheint es, als könnte man mit diesem Element einfach nur ein Bild einfügen… Es kann allerdings noch deutlich mehr: Du kannst bestimmen, was bei dem Klick auf das Bild passieren soll (Link öffnen, Bild vergrößern…), ob das Bild einen gewissen Stil haben soll (im Beispiel „abgerundete Ecken“) und noch einiges mehr.

Beispiel:

Kennst du schon mein WP Ninjas Lexikon? Hier erkläre ich Begriffe rund um WordPress und die Blogging-Welt!

Tabs

Tabs kennst du ja sicherlich aus deinem Browser. Ähnlich funktioniert auch das Tab Element im Visual Composer. Du kannst Elemente innerhalb mehrerer Tabs unterbringen, die nur sichtbar sind, wenn der entsprechende Tab angeklickt und dadurch geöffnet ist. Die Tabs befinden sich oberhalb der Elementbox.
Du kannst auch hier den Stil der Tabs auswählen, die Farbe festlegen, und viele weitere Einstellungen treffen.

Beispiel:

Hier können Texte und Bilder eingefügt werden.

Und natürlich kann auch jedes andere Element eingebaut werden!

Beispielsweise eine Nachrichtenbox 🙂

Text Block (Textbereich)

Mit dem Text Block wird ein Element eingefügt, mit dem du den normalen WordPress Editor nutzen kannst. Diesen kannst du ganz normal bedienen, wie du es auch von der Erstellung von Beiträgen kennst.

Text Separator (Trennlinie mit Text)

Um Elemente und Text zu trennen, kennst du jetzt ja bereits den Separator. Nun gibt es noch ein weiteres Element zur Trennung, den Text Separator. Er ist nichts weiter als eine Trennlinie, die zentriert in der Mitte Text anzeigt. Auch hier kannst du die Breite, Dicke und Farbe der Trennlinie eingeben, und natürlich den Text, der in der Linie erscheinen soll.

Beispiel:

Hier kannst du Text eingeben

Tour Section

Die Tour Section ist prinzipiell genau das Gleiche wie das Tabs Element. Es können Elemente in verschiedene Tabs untergebracht werden, die auf der linken Seite erscheinen. Wenn ein Tab angeklickt wird, öffnet sich der Inhalt und die darin befindlichen Elemente kommen zum Vorschein. Du kannst den Stil der Tour anpassen, die Farbe und noch einiges mehr.

Beispiel:

Auch hier können sowohl Text, als auch Bilder eingefügt werden.

Tweetmeme (Tweetmeme Button)

Der Tweetmeme Button ist nichts anderes als ein Teilen-Button für Twitter. Du kannst deinen Twitternamen hinterlegen, damit er beim Teilen getweetet wird und noch ein paar andere Kleinigkeiten einstellen.

Beispiel:

Videoplayer

Das Einbinden von Videos ist dank diesem Element im Visual Composer super einfach. Du musst nur die Video-URL von Vimeo oder Youtube kopieren und einfügen. Zudem kannst du noch die Breite des Videos und ein paar andere Dinge einstellen.

Beispiel:

Widgetised Sidebar (Dynamische Seitenleiste)

Mit diesem Element kannst du an einer beliebigen Stelle eine Seitenleiste einfügen, um dort Widgets zu nutzen. Du kannst auswählen, welche Seitenleiste du anzeigen lassen möchtest.

Jonas Tietgen

Jonas ist leidenschaftlicher Blogger und Gründer von wp-ninjas.de. Wenn er nicht gerade an seinem eigenen Blog arbeitet oder anderen Bloggern hilft, echte WordPress Ninjas zu werden, verbringt er seine Zeit mit Basketball und Tennis - egal ob zuschauen oder selber spielen.

1 Kommentar

  1. Birgit Schultz   •  

    Wow, Jonas, das ist aber praktisch! Das Lesezeichen ist schon gesetzt!
    Vielen Dank und zauberhafte Grüße
    Birgit

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.