WordPress ist ein weltweit weit verbreitetes CMS aufgrund seiner einfachen Benutzeroberfläche, hochgradig anpassbaren Themen und einer unendlichen Vielfalt Plugins mächtig. Es hat die Erstellung, Entwicklung und Verwaltung von Websites vereinfacht, auch für die meisten Amateurbenutzer.

Heute und dank WordPress benötigen Sie keine spezifischen Kenntnisse mehr, um attraktive Webseiten zu erstellen. Wie auch immer, du bist es peut être bin bereits auf eine Website gestoßen, die ein wirklich unglaubliches Design bietet, und Sie haben sich wahrscheinlich gefragt: Wie war es getan?

Wenn Sie Anfänger oder Amateur sind, können Sie leider auch mit nicht viel anfangen WordPressDa Sie zum Ändern Ihres Themas ein gewisses Maß an Fachwissen in HTML, CSS, PHP und verschiedenen anderen Fähigkeiten benötigen, abhängig von der Art Ihres Themas, aber auch von Ihrem Projekt oder Ziel.

Selbst wenn Sie ein erfahrener Programmierer sind, benötigen Sie auf jeden Fall ein Tool, mit dem Sie Zeit und Qualität beim Endergebnis sparen können.

Heureusement, le Plugin WordPress « WPBakery Page Builder Früher bekannt als " Visual Composer » bietet eine Lösung für dieses Problem. Bei letzterem sogar die meisten Anfänger Blogger können Seiten mit einem völlig einzigartigen Aussehen für ihre Website erstellen.

Mit diesem Plugin können Sie erstellen:

  • Attraktive Landing Pages (Zielseite)
  • Von Verkaufsseiten bis professionelles Aussehen
  • "Showcase" -Seiten für Ihr Unternehmen
  • Module Seiten für Ihre Ausbildung
  • kurze Zeit

Es ist meiner Meinung nach das beste Formatierungs- (oder Layout-) Tool im Internet. Speziell für WordPress-Benutzer.

In diesem Tutorial zeige ich Ihnen daher, wie Sie Ihrer Website ein einzigartiges Aussehen verleihen können (Oder Blog) mit der Plugin Visual Composer.

So ...

Wie installieren und konfigurieren WPBakery Page Builder Plugin

WPBakery Page Builder vorhandenen Wirkstoffe zu einem Plugin Prämie, die Sie kaufen können Codecanyon : Die beste Vertriebsplattform auf der Internet-Plugins.

IN ORDNUNG. Nachdem Sie dieses Layout-Plugin in WordPress gekauft und heruntergeladen haben, müssen Sie es nur noch installieren und aktivieren.

Anschließend nehmen wir einige grundlegende Anpassungen vor. Navigieren Sie dazu zum Standort "Einstellungen >> Visual Composer » auf dem Armaturenbrett.

allgemeine Einstellungen

Allgemeine Einstellungen Visual ComposerDie erste Registerkarte (allgemeine Einstellungen), Können Sie ändern:

  • Der Inhalt, auf dem visuell komponieren wird verfügbar sein. Sie können die Artikel überprüfen (Post) und / oder Seiten (Seite)
  • Die verschiedenen Regeln vonZugriff verschiedene Rollen. Mit dieser Option können Sie bestimmen das ändert, was. Die verschiedenen verfügbaren Rollen werden angezeigt. Sie müssen auf jedes Element klicken, um die Elemente zu überprüfen, auf die es verweist (die Rolle) Zugang haben. Sie haben die Möglichkeit, die Verwendung von " visuell Komponist “an Benutzer einer bestimmten Rolle.
    Aktivieren Sie den Editor im WPbakery Page Builder
  • Elemente aktivieren oder deaktivieren ansprechbar
  • Definieren Sie Teilmengen für Google-Schriftarten

Auswahl der wpbakery-RolleDesignoptionen

Bei den Gestaltungsoptionen haben Sie die Möglichkeit, das standardmäßige visuelle Erscheinungsbild der verschiedenen Elemente des " visuell Komponist ". Stellen Sie vor der Verwendung sicher, dass Sie die Option aktiviert haben « Verwenden Sie benutzerdefinierte Designoptionen ».

CSS-Einstellungen

Mit diesen Optionen können Sie die Farbe definieren, die für alle Elemente gilt. 

  • Das " Benutzerdefiniertes CSS Bietet Ihnen die Möglichkeit, jedes Element weiter anzupassen. Nur Entwickler können wissen, um was es sich handelt.
  • Der Reiter « Produktlizenz »Ermöglicht die Aktivierung Ihres Plugin um automatische Updates zu erhalten.
  • Der Reiter « Kurzwahlnummern Aktiva Geht es im Wesentlichen um Entwickler.

Okay, jetzt erstellen wir eine benutzerdefinierte Webseite mit Visueller Komponist.

So erstellen Sie eine benutzerdefinierte Seite mit visuell Komponist

Um auf einfache Weise personalisierte Webseiten zu erstellen, haben Sie die Wahl zwischen dem Editor des " Back-Office "Das heißt, Sie ändern die Site von Ihrem WordPress-Dashboard aus, wo die von" Front-office ".

Editor-the-Front-End-the-Editor-Backend

Wenn Sie Gutenberg verwenden, sehen Sie in der oberen Taskleiste eine Schaltfläche "Seiteneditor".

visueller Editor Dashboard Editor Gutenberg

Der Vorteil mit dem Herausgeber von Front Office Das heißt, Sie können Ihre Seiten live bearbeiten und sehen, wie die verschiedenen Elemente in Ihrem Thema angezeigt werden.

Mit dem Backoffice-Editor

Zugriff auf den Editor des " Back-Office »Ich lade Sie ein, auf« zu klicken Herausgeber BACK-OFFICE ". Sie können jederzeit zum visuellen Editor von WordPress zurückkehren, indem Sie auf " Classic-Modus “. Ich denke jedoch, dass dies nicht erforderlich sein wird, sodass die Formatierung der Plug-in-Webseite abgeschlossen ist.

Im Backoffice-Editor können Sie ein globales Layout auswählen, das auf die Seite angewendet wird.

Die Aktualisierungen Seite variieren je nachdem, was Sie mit der Seite vorhaben. So können Sie wählen « Landung Seite » um eine Homepage zu erstellen, "Liste der Dienstleistungen" für eine Seite, auf der Dienste usw. angezeigt werden. Mit Erfahrung schaffen Sie es sogar, Wetten zu erstellen en Seiten Sonderanfertigungen sehr pro.

Wie auch immer die Wahl Ihrer Einstellung ist SeiteDie Darstellung der Elemente ist bei allen letzteren ähnlich. Sie können ein neues hinzufügen Element en cliquant sur "+" ganz oben auf der Ziel box « Visueller Editor », Oder fügen Sie ein Modell hinzu, indem Sie auf das Symbol klicken "Modell".

In jeder Zeile können Sie (von links nach rechts) :

  • Bewegen Sie die Linie
  • Spalten in der Zeile verwalten
  • Fügen Sie eine neue Spalte

wpbakery page builder SchnittstelleWeitere Optionen stehen rechts neben dem Feld zur Verfügung. Mit diesen Optionen können Sie (von links nach rechts) Nach:

  • Linie reduzieren
  • eine Zeile bearbeiten
  • duplizieren Sie eine Zeile
  • Eine Zeile löschen

wpbackery layoutIn der Mitte jeder Spalte können Sie zuvor ein Element hinzufügen, eine Spalte bearbeiten oder löschen.

Optionen für den wpbackery-AbschnittOptionen für den wpbackery-Abschnitt

Empfohlene Ressourcen

Hier sind einige Erweiterungen visueller Komponist, den wir sehr empfehlen:

1 - Verwalten von Spalten

Auf der Registerkarte Spaltenverwaltung können Sie die Anzahl der Spalten auswählen, die Sie der Zeile hinzufügen möchten. Um die verschiedenen Spaltenmodelle zu verstehen, müssen Sie wissen, dass jeder Bruch der Breite entspricht, die die Spalte einnehmen wird. So oft eine Vorlage Brüche enthält, so oft enthält die Seite Spalten.

Natürlich gibt es verschiedene 11-Spaltenvorlagen. Sie können jedoch beliebig viele erstellen, indem Sie auf den Link klicken "Personalisiert" direkt unter der Liste der Spalten.

Um beispielsweise einen Abschnitt der Seite mit 2-Spalten in gleicher Breite anzuzeigen, müssen Sie auswählen (Oder fügen) "1 / 2 + 1 / 2". 

Die Spalten werden in Ihrem Blog angezeigt und ihre Breite wird proportional zu den Abmessungen des Themas verteilt. Eine Spalte kann so viele Elemente wie möglich enthalten, daher gibt es für diese Ebene keine Begrenzung.

wpbakery Abschnitt Layout

Die verschiedenen Elemente können in beliebige Spalten verschoben werden.

Bewegen von WordPress wpbakery TextfeldWenn Sie den Mauszeiger über ein Element halten, können Sie auf dessen Optionen zugreifen, insbesondere auf die Schaltfläche, die Folgendes ermöglicht:

  • Umzug Element
  • Modifikator Element
  • dupliquer Element
  • supprimer Element

Optionen-the-Elemente

2 - Wie man Elemente hinzufügt

Sie haben die Möglichkeit, jede Spalte mit den von " visuell Komponieren ". Um einen Artikel hinzuzufügen, klicken Sie auf die Schaltfläche "+" auf eine bestimmte Spalte oder auf die Schaltfläche "+" Hauptmenü-Plugin.

wpbakery-Element hinzufügen
Wenn eine Spalte leer ist (ne enthält kein Inhalt)Sie hat einen Knopf "+" Innerhalb.
 Um beispielsweise ein Video hinzuzufügen, klicken Sie auf diese Schaltfläche und wählen Sie das Videoelement aus.

Add-a-Video

Ein Klick darauf öffnet ein neues Fenster. In diesem Fenster müssen Sie den Titel, den Link zum Video und eine zusätzliche Klasse angeben (das ist nicht obligatorisch). Vergessen Sie nicht, Ihre Änderungen zu speichern, wenn Sie die verschiedenen Informationen zu Ihrem Video eingegeben haben.

wpbakery VideoanpassungDein Video wird im Backoffice-Editor verfügbar sein. Speichern Sie Ihre Änderungen noch einmal. Sie können es jetzt anzeigen, indem Sie einfach auf klicken "Vorschau".

Video hinzufügen wpbakery WordPressDer Vorgang zum Hinzufügen eines Elements ist bis auf wenige Ausnahmen für alle anderen gleich. Die auszufüllenden Informationen können je nach den Elementen variieren. 

Wenn Sie beispielsweise das Textelement auswählen, finden Sie einen klassischen visuellen Editor (derjenige, der verfügbar ist, wenn Artikel oder Seiten geschrieben werden), aber auch eine Option, mit der Sie während der Anzeige des Elements eine Animation hinzufügen können. Letzteres kann daher abhängig von Ihren Einstellungen von einer Position zur anderen verblassen.

TextblockeinstellungenAm interessantesten dabei Plugin, ist, dass Sie erstellen können Sidebars Wenn Ihr Thema dies nicht tut, zum Beispiel. Klicken Sie dazu auf die Schaltfläche Hinzufügen (" + ")und wählen Sie das Element " WP Kommentare récents "," Facebook Gefällt mir Und zum Schluss « Wp-Kategorien ".

Erstellen Sie nun diese benutzerdefinierte Spaltenvorlage 1 / 3 + 2 / 3 »Oder irgendein anderes und füge das Element hinzu Seitenleiste in der linken Spalte oder in der rechten. Es spielt keine Rolle, da alles davon abhängt, wie breit Sie Ihre unter dieser Layouterweiterung erstellte Seitenleiste als in Visual Composer erstellen möchten.

wpbakery Spaltenkonfiguration

Sie werden eine neue leere Spalte auf der rechten Seite bemerken. Fügen Sie ein neues Element Ihrer Wahl hinzu (Ich empfehle Ihnen, einen einfachen Text hinzuzufügen). Speichern Sie nun die Seite und gehen Sie zur Vorschau, um das Ergebnis dieser Übung zu sehen.

3 - Speichern und Wiederverwenden einer Seitenvorlage

Es ist möglich, die Vorlage Ihrer Seite zu speichern und später zu verwenden. Ich liebe diese Option, weil Sie dadurch Stunden damit verbringen müssen, eine Vorlage von einer Seite zu kopieren. Hier ist alles mit einem Klick erledigt. Ja, Sie haben richtig gehört, IN EINEM KLICK… oder in zwei 🙂

Um eine Vorlage zu speichern, klicken Sie auf das Vorlagensymbol. Geben Sie im angezeigten Fenster den Namen Ihres Modells in das Feld " Speichern Sie das aktuelle Layout als Vorlage »Dann klicke auf« Vorlage speichern ".

Wichtig: Sie müssen dies auf der Seite tun, die Sie als Vorlage speichern möchten, und nicht auf einer leeren Seite.

Registrieren Sie ein wpbakery-Modell

Auf die gleiche Weise finden Sie die verschiedenen Modelle, die Sie gespeichert haben, weiter unten im selben Fenster im Abschnitt "Laden Sie ein Modell".

meine wpbakery ModelleIn diesem Fall müssen Sie lediglich eine neue Seite erstellen. Gehen Sie dann zu den Vorlagen und wählen Sie die aus, die Sie Ihrer Seite geben möchten.

Mit dem Front-Office-Editor

Der Front-Office-Editor hat den Vorteil de Mit dieser Option können Sie Ihre Seite in Echtzeit bearbeiten. Mit anderen Worten, Sie können sehen, wie jede Änderung, die Sie an Ihrer Site vornehmen, mit Visual Composer aussehen wird. Der Vorteil dieses Ansatzes besteht darin, dass Sie nicht blind arbeiten müssen, wie Sie es mit dem Back-Office-Seiteneditor tun.

Sie können jederzeit von einer Option zur anderen wechseln (Büro oder Kante Büro zurück).

Der Front-Office-Editor unterscheidet sich nicht wesentlich vom Back-Office-Editor, da es eine Leiste gibt utilisateur identisch, aber auch alle Optionen im Backoffice-Editor sind die gleichen wie im Frontoffice-Editor.

wpbakery SymbolleisteEs wurden jedoch fünf neue Schaltflächen hinzugefügt, darunter:

  • Aktivierung oder Deaktivierung von Führungen
  • Der Emulator, mit dem Sie sehen können, wie Ihr Blog auf verschiedenen Geräten aussehen wird
  • Die Zurück-Taste auf dem Back-Office
  • Die Schaltfläche Änderungen speichern
  • Die Exit-Taste visuell Komponist

wpbakery OptionenJedes Element einer Seite kann geändert werden. Sie können die verfügbaren Optionen anzeigen, indem Sie den Mauszeiger über jedes Element bewegen. Der Knopf hat eine Form "ABSPIELEN"Mit können Sie weitere Optionen für ein Element anzeigen.

Optionen-die-Elemente-of-the-Front-Office

Ihre ersten Schritte mögen schwierig sein, aber mit Übung erreichen Sie eine Homepage wie diese.  Wenn Sie möchten, bevor Sie die Plugin, Sie können Testen Sie es kostenlos (Login, Benutzer: demo, Passwort: demo).

Folgendes konnte ich in 1 Minute zu Hause erreichen. Mit etwas Übung können Sie sehr zufriedenstellende Ergebnisse erzielen. Und wenn Sie Hilfe beim Aufbau Ihrer WordPress-Website mit diesem leistungsstarken Plugin benötigen, zögern Sie nicht Wenden Sie sich an das BlogPasCher-TeamWer wird gerne Ihre Projekte realisieren.

Ich hoffe, dass dieses Tutorial vollständig auf Französisch Ihnen hilft, Ihre ersten Schritte mit dem zu machen Plugin « Visual Composer ". Wenn Sie ein Problem haben, wir (oder Unterstützung) hilft Ihnen gerne weiter. Vergessen Sie nicht: eine schöne Webseite wandelt neugierige Kunden.

Empfohlene Erweiterungen

Hier sind einige Erweiterungen visueller Komponist, den wir sehr empfehlen:

Entdecke mehr Plugins auf Codecanyon

Teile dieses Tutorial mit den Bedürftigen.