Visual Composer: Eine Anleitung zum Erstellen von Drag & Drop-Seiten

WordPress ist großartig und die Möglichkeit, Ihre von WordPress ausgeführte Website anzupassen, ist nur das i-Tüpfelchen. Allerdings codieren nicht alle von uns Gurus. Einige WordPress-Liebhaber wissen nichts über HTML oder CSS. Dies sollte Sie jedoch nicht daran hindern, Ihr WordPress-Design anzupassen. Hier kommen die Seitenersteller ins Spiel.


Drag & Drop-Seitenersteller sind als Plugins weit verbreitet und in viele beliebte Themen integriert. Sie ermöglichen Benutzern aller Ebenen das Ändern des allgemeinen Layouts eines Themas und das Hinzufügen zusätzlicher Schnörkel (Symbole, Skill-Bars, Preistabellen usw.). Insbesondere möchten wir Ihnen unser neues WordPress-Plugin zum Erstellen von Lieblingsseiten vorstellen – den Visual Composer.

Holen Sie sich Visual Composer kostenlos! Das Visual Composer-Plugin ist beim Kauf unseres Total WordPress Theme kostenlos enthalten und enthält einige großartige Erweiterungen für das Plugin zur Verwendung mit dem Theme.

Was ist der Visual Composer?

Visual Composer ist ein fantastisches Plugin, das von WP Bakery entwickelt wurde und Ihrem WordPress-Theme einen Drag & Drop-Seitenersteller hinzufügt. Wir haben es in unser Total Multipurpose WordPress Theme aufgenommen, aber Sie können es auch in fast jedem neuen Top-Seller auf Themeforest sehen. Sie erhalten die Tools, die Sie benötigen, um komplexe Seitenlayouts zu erstellen, ohne eine einzige Codezeile berühren zu müssen.

Wie Visual Composer funktioniert und was es kann

Es ist ein Plugin. Installieren und aktivieren Sie es einfach, um alle wunderbaren Funktionen zu nutzen. Nach der Aktivierung können Sie mit Visual Composer das Layout Ihrer Seiten steuern. Fügen Sie einfach eine neue Seite hinzu und Sie sehen neue Schaltflächen, mit denen Sie zwischen dem klassischen Modus und dem Builder-Modus wechseln können, sowie eine Schaltfläche, mit der Sie zum Live-Front-End-Editor gelangen.

Visual-Composer-Button

Von hier aus sind die Möglichkeiten nur durch Ihre (oder die Ihrer Kunden) Vorstellungskraft begrenzt. Mit allen Optionen von Visual Composer können Sie Zeilen, Spalten, Schaltflächen, Text, Bilder und vieles mehr hinzufügen. Außerdem besteht die Möglichkeit, Ihre Layouts als Vorlagen zu speichern, die immer wieder verwendet werden können.

Reihen

Im Builder sind Elemente zum Erstellen von Seiten enthalten. Sie können diese Elemente als wörtliche Bausteine ​​für Ihre Seite verwenden. Zuerst Fügen Sie eine Zeile hinzu. Zeilen ermöglichen das Hinzufügen von Spalten mit einem Klick. Bewegen Sie den Mauszeiger über die gelbe Absatzregisterkarte in der oberen linken Ecke Ihrer Zeile und wählen Sie ein Layout aus. Die Zeile wird entsprechend dem von Ihnen gewählten Layout automatisch in Spalten unterteilt.

total-add-row

Seitenelemente

total-add-elements

Der nächste Schritt besteht darin, mit dem Hinzufügen Ihrer Seitenfunktionen zu beginnen. Klicken Sie einfach auf Element hinzufügen Schaltfläche, um ein Popup-Menü zu öffnen. Es gibt viele Optionen zum Hinzufügen von Textfeldern, Überschriften, Social Sharing, Bildern und Galerien, Umschaltern oder Registerkarten, Akkordeons, aktuellen Posts (die neben den Blog-Posts auch mit den benutzerdefinierten Post-Typen Ihres Themas funktionieren), Schaltflächen und sogar Seitenleisten-Widgets.

Abhängig vom WordPress-Design und den kompatiblen Plugins, die Sie mit dem Visual Composer verwenden, werden mehr oder weniger Seitenelemente angezeigt. Das obige Beispiel stammt aus unserem WordPress-Theme “Total Drag & Drop”. Es gibt also weitere 30 Seitenerstellungselemente, die wir exklusiv für Total erstellt und gestaltet haben. Dies umfasst benutzerdefinierte Trennwände, Symbolfelder, Meilensteine, Karussells und mehr.

Klicken Sie auf ein Element, um die Optionen für dieses Element zu öffnen. Unten finden Sie ein Beispiel für die „Optionen“ für unser Icon Box-Modul im Thema „Gesamt“. Wie Sie sehen können, kann jedes Modul viele Einstellungen und sogar mehrere Registerkarten mit Einstellungen haben.

Icon-Box-Einstellungen

Der Builder unterstützt außerdem vier fantastische Plugins von Drittanbietern: Layer Slider, Revolution Slider, Gravity Forms und Contact Form 7. Wenn Sie eines dieser Plugins installiert haben, wird automatisch ein Seitenelement für das Thema angezeigt. Wenn Sie ein Seitenelement für eines dieser Plugins einfügen, zeigt Visual Composer ein Dropdown-Menü der jeweiligen von Ihnen erstellten Schieberegler / Formulare an oder ein Eingabefeld, in das Sie Ihre Schieberegler-ID einfügen können. Kein Kopieren und Einfügen von Shortcodes mehr!

Ziehen und loslassen

Visual-Composer-Editor

Zu jedem Zeitpunkt im Entwurfsprozess können Sie ein beliebiges Zeilen- oder Seitenelement ziehen und ablegen, um sie neu anzuordnen. Sie können auch jede Zeile oder jedes Element duplizieren, wodurch das Hinzufügen sich wiederholender Inhalte schnell und einfach erfolgt (ideal für ähnliche Spalten, häufig gestellte Fragen, Umschaltfunktionen usw.)..

Sobald Sie ein Design erstellt haben, das Sie lieben, können Sie es als Vorlage speichern. Dies ist praktisch, wenn Sie ein benutzerdefiniertes Seitenlayout oder eine Seitenleiste erstellen, die Sie wiederverwenden möchten. Klicken Sie einfach auf die Vorlagen Klicken Sie auf die Schaltfläche, geben Sie Ihrem Layout einen Namen und klicken Sie auf Speichern. Wenn Sie Ihre Vorlage verwenden, wird Ihre Seite automatisch mit dem Layout und den Elementen gefüllt, die Sie gespeichert haben.

Zeilenoptionen: Zeilen formatieren, klonen und löschen

In der linken Ecke jeder Zeile wurden drei zusätzliche Funktionen hinzugefügt, mit denen Sie eine ganze Zeile und ihren gesamten Inhalt klonen oder duplizieren, neue Module hinzufügen, die Spalten bearbeiten usw. Bewegen Sie den Mauszeiger einfach über eine Zeile, die Sie bearbeiten müssen So greifen Sie auf diese Einstellungen zu:

total-visual-composer-row-settings

Abhängig von dem Thema, das Sie mit dem Visual Composer verwenden, können die verfügbaren Formatierungsoptionen unterschiedlich sein. Während einige Theme-Entwickler den Visual Composer unverändert lassen, passen viele das Plugin an die Anforderungen oder den Stil ihres Themas an.

Frontend-Editor

Der leistungsstarke Visual Composer enthält jetzt einen Frontend-Editor, mit dem Sie einfacher als je zuvor mit dem Erstellen eigener Seiten und Layouts beginnen können. Die einzige Einschränkung ist, dass noch nicht alle Themen den Front-End-Editor unterstützen. Überprüfen Sie die Funktionsliste eines Themas oder wenden Sie sich direkt an den Theme-Entwickler, um festzustellen, ob der Visual Composer-Frontend-Editor mit Ihrem WordPress-Theme kompatibel ist. Unsere Das gesamte WordPress-Theme ist zu 100% mit dem Front-End-Editor kompatibel Wenn Ihr aktuelles Thema nicht vorhanden ist, sollten Sie ein Upgrade auf unser Thema in Betracht ziehen.

Erweiterungen

Die letzte Funktion, die ich ansprechen möchte, ist die Erweiterbarkeit von Visual Composer. Wenn Sie ein fortgeschrittener Programmierer oder Theme-Entwickler sind, können Sie Ihre eigenen Shortcodes in das Plugin integrieren. Tatsächlich haben wir unseren eigenen Symple Shortcodes Premium hinzugefügt, um Total-Benutzern zusätzliche Elemente zum Erstellen von Seiten zu bieten. Dies gibt Benutzern noch mehr Optionen beim Erstellen von Seiten!

Wenn Sie kein Programmierer sind, checken Sie CodeCanyon aus und suchen Sie schnell nach dem Visual Composer-Add-on. Es gibt viele großartige Premium-Plugins, die dem Visual Composer zusätzliche Funktionen hinzufügen, und sogar einige gute kostenlose Plugins wie unser Symple Shortcodes-Plugin.

Visual Composer-Einstellungsoptionen

Ich beziehe mich immer wieder auf den Visual Composer als Seitenersteller, aber er funktioniert auch hervorragend mit Posts und benutzerdefinierten Post-Typen. Sie müssen lediglich die Option aktivieren. Navigieren Sie zu Einstellungen> Visual Composer. Sie sollten einen ähnlichen Bildschirm sehen:

Visual Composer-Einstellungen

Das Plugin zeigt automatisch die verschiedenen Inhaltstypen an, die in Ihrem WordPress-Theme enthalten sind. Wählen Sie einfach aus, welche Sie mit dem Visual Composer-Seitenersteller verwenden möchten. Das obige Beispiel stammt aus unserem Total-Thema. Aus diesem Grund gibt es zusätzliche Optionen für Portfolio, Mitarbeiter und Testimonials (alle benutzerdefinierten Beitragstypen) sowie Foren, Themen, Antworten und Produkte (in Bezug auf die von Total unterstützten Plugins bbPress und WooCommerce)..

Sie können auch alle Shortcode-Plugins dem Visual Composer zuordnen, den Sie bereits auf Ihrer WordPress-Site installiert haben. Klicken Sie auf der Einstellungsseite oben auf die Registerkarte Meine Shortcodes und dann auf die Schaltfläche zum Zuordnen des Shortcodes. Dadurch sollten Sie Ihren Komponistenelementen Shortcodes von Drittanbietern hinzufügen. Einfach!

Sehen Sie es in Aktion

Wie gesagt, wir lieben Visual Composer so sehr, dass wir es in unser meistverkauftes Total WordPress-Theme integriert haben (im Lieferumfang enthalten). Schauen Sie sich die verschiedenen Seiten auf einer unserer Live-Demos für das Total Theme an. Die meisten Seiten, die Sie in unseren Live-Demos sehen, wurden mit dem Visual Composer erstellt! Hinzufügen von Hintergründen, Überschriften, Texten, Bildern, Symbolen usw. Es ist alles ein “Kinderspiel”.

Total-Demos

Vollständiges Handbuch zur Verwendung von Visual Composer

Wenn Sie das Plugin bereits besitzen und nach einer Anleitung zur Verwendung suchen, lesen Sie unsere vollständige Visual Composer-Bedienungsanleitung, die Sie Schritt für Schritt durch die Verwendung des Plugins führt.

Wo Sie es bekommen können

Visual Composer ist auf CodeCanyon verfügbar, wenn Sie es selbst erhalten möchten. Es wurde auch vollständig in unser Premium-WordPress-Theme Total integriert (zusammen mit zwei anderen Premium-Plugins für einen Gesamtwert von 67 US-Dollar – mehr als Sie für das Theme bezahlen!).

Get Total Get Visual Composer

Teilen Sie uns Ihre Meinung zum folgenden Plugin mit. Wir sind wirklich beeindruckt von Visual Composer und würden gerne Ihre Meinung dazu hören!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map