Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress

Fangen wir mit Visual Composer an

by
Difficulty:BeginnerLength:LongLanguages:

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

WordPress ist das weltweit beliebteste CMS aufgrund seiner einfachen Benutzeroberfläche, hochgradig anpassbaren Themen und einer endlosen Vielfalt an leistungsstarken Plugins. Es hat die Entwicklung und Verwaltung von Websites selbst für die meisten Amateurbenutzer vereinfacht.

Es gibt jedoch immer noch Zeiten, in denen Sie ein bestimmtes Website-Design sehen, das sofort ins Auge fällt, und Sie möchten Ihre eigene Website so ändern, dass sie gleich aussieht. Wenn Sie ein absoluter Amateur sind, können Sie leider auch mit WordPress nicht viel anfangen, da Themenänderungen ein gewisses Maß an Fachwissen in HTML, CSS, PHP und verschiedenen anderen Fähigkeiten erfordern, abhängig von der Art Ihres Themas. Aber wenn Sie ein erfahrener Programmierer sind, kann es einige Stunden dauern, bis Sie die gewünschten Änderungen vorgenommen haben.

Zum Glück kann das WordPress Visual Composer-Plugin uns helfen. Mit diesem fantastischen Plugin können selbst die grundlegendsten WordPress-Benutzer Themendesigns ändern und ein völlig einzigartiges Erscheinungsbild für ihre Website erstellen. Für WordPress-Experten ist das eine große Zeitersparnis und kann ihnen helfen, die Seiten in nur wenigen Minuten zu ändern. Insgesamt war das Plugin ein so großer Erfolg, dass es bereits in vielen der neuesten WordPress-Themes enthalten ist.

Lassen Sie mich nun einige der Hauptfunktionen von Visual Composer erläutern, wie er für Ihre WordPress-Website eingerichtet werden kann.

Haupteigenschaften

Visual Composer wurde von den Jungs von WP Bakery entworfen. Es ist ein kostenpflichtiges Plugin, das im WordPress-Plugin-Verzeichnis nicht offen verfügbar ist. Sie können es nur von CodeCanyon herunterladen.

Es wurde von mehr als 70.000 Benutzern heruntergeladen und scheint nur auf mehr Erfolg ausgerichtet zu sein! Visual Composer hat viele nützliche Funktionen, mit denen das Erstellen von Seiten in WordPress zu einem äußerst unterhaltsamen Erlebnis wird. Hier ist ein kurzer Blick auf einige von ihnen.

Frontend- und Backend-Seiten

Die leistungsstärkste Funktion von Visual Composer ist, dass Sie einen einfachen Drag & Drop-Seitenersteller erhalten, der über den Standardbereich für die Bearbeitung von WordPress-Seiten/Posts oder direkt über das Frontend verwendet werden kann.

Allgemeine Themenkompatibilität

Visual Composer ist nicht themenspezifisch. Das bedeutet, dass Sie es mit jedem WordPress-Design verwenden können, ohne den vorhandenen Code anpassen zu müssen.

Hochgradig anpassbares Layout

Die Drag & Drop-Elemente des Visual Composer haben ein Standardlayout und -design. Sie können es entsprechend dem Farbschema und dem Aussehen Ihrer Website ändern.

Mehr als 40 gebrauchsfertige Designelemente

Die Drag & Drop-Oberfläche des Visual Composer verfügt über mehr als 40 gebrauchsfertige Drag & Drop-Elemente, mit denen Sie innerhalb von Minuten eindeutige Layouts für Ihre Website erstellen können.

Vollständig ansprechende Elemente

Die mit Visual Composer erstellten Design- und Seitenelemente sind vollständig reaktionsschnell und mobil.

Entwicklerfreundlich

Der Visual Composer ist voll von vielseitigen Drag & Drop-Elementen. Wenn Sie weitere hinzufügen möchten, können Sie das dank der Entwicklerfreundlichkeit problemlos tun.

Installation und Konfiguration des Plugins

Wie bereits erwähnt, ist Visual Composer ein kostenpflichtiges Plugin. Sie müssen es also zuerst kaufen und dann auf Ihre WordPress-Site hochladen.

Schritt 1

Der Installationsvorgang ist so gleich, wie bei jedem anderen WordPress-Plugin. Nach der Aktivierung wird das Plugin in der Option Einstellungen im linken Menü des Haupt-WordPress-Dashboards angezeigt.

Schritt 2

Hier können Sie einige der grundlegenden Plugin-Einstellungen anpassen.


Schritt 3

Sie können den Visual Composer für Seiten und für Beiträge oder für einen beliebigen von ihnen aktivieren. Sie können auch bestimmte Zugriffsrechte für einzelne Benutzertypen festlegen. Für jeden Benutzertyp können Sie auswählen, ob er im Nachbearbeitungsbereich als auch der Standard-WordPress-Editor angezeigt werden sollen, oder Sie können nur den Visual Composer anzeigen. Sie können auch einzelne Visual Composer-Elemente für verschiedene Benutzer aktivieren oder deaktivieren.

Schritt 4

Auf der Registerkarte Designoptionen können Sie das Erscheinungsbild der Visual Composer-Elemente entsprechend dem Thema Ihrer Website ändern. Auf der Registerkarte Benutzerdefiniertes CSS können Sie das CSS ändern, ohne eine andere Datei zu ändern. Auf der Registerkarte Produktlizenz können Sie Ihr Envato-Konto integrieren, um Support und automatische Updates zu ermöglichen. Auf der Registerkarte Meine Shortcodes können Sie der vorhandenen Liste der Shortcodes im Visual Composer zusätzliche manuell entwickelte Shortcodes hinzufügen.

Kommen wir nun zur eigentlichen Verwendung des Plugins!

Verwenden von VC für Seiten und Beiträge

Wie oben erwähnt, können Sie den Visual Composer für Beiträge, Seiten oder einen von ihnen aktivieren. Nach dem Aktivieren des Plugins werden die Registerkarten des visuellen Editors über Ihrem Standard-WordPress-Texteditor angezeigt.

Die beiden Registerkarten, die über dem Texteditor angezeigt werden, sind der Backend-Editor und der Frontend-Editor. Das sind die Optionen, die die Verwendung dieses Plugins so angenehm machen. Von hier aus können Sie eine beliebige Seitenstruktur erstellen. Beginnen wir mit dem Backend-Editor.

Backend-Editor

Schritt 1

Wenn Sie auf die Registerkarte Backend-Editor klicken, ändert sich Ihr Texteditorbereich in ein Drag & Drop-Feld, in dem Sie Elemente hinzufügen können, indem Sie sie einfach aus der Liste auswählen. Aber zuerst müssen Sie eine Zeile hinzufügen. Von hier aus ist das einzige, was Ihr Design einschränkt, Ihre Vorstellungskraft.

Schritt 2

Sie können der Zeile verschiedene Elemente hinzufügen und für jede Zeile unterschiedliche Spaltenlayouts auswählen, indem Sie den Mauszeiger auf die Schaltfläche über dem Inhaltseditor bewegen. Auf der Registerkarte Element hinzufügen können Sie verschiedene Elemente hinzufügen, um Ihre Seite zu gestalten. Das Feld Elemente hinzufügen hat alles, was Sie zum Entwerfen einer Website brauchen.

Die Elemente sind in Kategorien wie Inhalt, Soziales, Site-Struktur, Neue Elemente und WordPress-Widgets unterteilt. Sie können sie jedoch auch alle zusammen anzeigen. Welche Option Sie auch benötigen, klicken Sie einfach darauf und ziehen Sie sie in Ihr Inhaltsfeld. Ihre Seite ist grundsätzlich in verschiedene Zeilen unterteilt. Sie können in diesen Zeilen weiterhin neue Zeilen und neue Elemente hinzufügen.

Schritt 3

Verwenden Sie zum Bearbeiten, Löschen oder Duplizieren einer bestimmten Zeile einfach die Symbole oben in jedem Zeilenfeld.

Schritt 4

Sie können eine bestimmte Inhaltsanordnung als gebrauchsfertige Vorlage speichern, die jederzeit aus der Liste geladen werden kann.

Schritt 5

Mit dem Visual Composer können Sie auch benutzerdefiniertes CSS für einzelne Seiten und Beiträge hinzufügen. Die Auswirkungen dieses benutzerdefinierten CSS sind nur auf diese bestimmte Seite oder diesen Beitrag beschränkt.

Visual Composer unterstützt auch mehrere bekannte WordPress-Plugins wie Contact Form 7, Layer Slider, Revolution Slider und Gravity Forms. Wenn Sie eines dieser Plugins installiert haben, werden diese automatisch zum Feld Element hinzufügen hinzugefügt. Wenn Sie eines davon aus der Liste der Elemente auswählen, wird es direkt in Ihre Seite eingefügt, ohne dass Shortcodes hinzugefügt werden müssen. Der Backend-Editor bietet Ihnen so viel Flexibilität und Optionen, dass Sie jede Art von Design erstellen können, selbst wenn Sie ein Amateurbenutzer sind.

Frontend-Editor

Mit dem Frontend-Editor können Sie Seitenelemente in der Live-Seitenansicht ziehen und ablegen. Es macht es einfacher, die Auswirkungen Ihrer Änderungen sofort zu erkennen, während Sie alle Optionen des Backend-Editors haben.

Schritt 1

Von links beginnend können Sie neue Elemente hinzufügen, indem Sie auf das + Zeichen klicken und das Spaltenlayout mit der Spaltenschaltfläche daneben bearbeiten.

Schritt 2

Sie können auch neue Zeilen oder Spalten über das + -Zeichen im Seiteninhalt hinzufügen.

Schritt 3

Alle Elemente des Visual Composer sind vollständig reaktionsschnell und mobil. Sie können die Live-Vorschau für verschiedene Geräte im Frontend-Editor über die folgenden Symbole abrufen.

Schritt 4

Trotz dieser Funktionen und der Vielzahl von Elementen können Sie mit Visual Composer auch Ihre eigenen Shortcodes und Designelemente hinzufügen. Sie können die Elemente selbst erstellen oder von einem Drittanbieter-Service importieren.

Abschluss

WordPress war schon immer eine flexible Plattform mit den verschiedenen Funktionen, die es durch seine Plugins unterstützen kann. Mit dem Visual Composer Page Builder-Plugin kann sogar der Designaspekt von WordPress, der früher nur fortgeschrittenen Benutzern vorbehalten war, in kürzester Zeit bearbeitet werden.

Für mich persönlich hat der Visual Composer die Zeit, die ich für das Design und die Bearbeitung von Client-Websites aufgewendet habe, von mehreren Stunden auf einige Minuten erheblich verkürzt. Und mit der steigenden Popularität dieses Plugins kann ich nur sehen, dass sich in den kommenden Tagen immer mehr WordPress-Benutzer darauf verlassen.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.