Débuter avec Visual Composer

WordPress est le système de gestion de contenu préféré du monde en raison de son interface simple, de ses thèmes hautement personnalisables et de ses innombrables plugins puissants. Il simplifie le développement et la gestion de sites Web, même pour les utilisateurs les plus amateurs..

Cependant, il arrive encore que vous voyiez un certain design de site Web, qui attire immédiatement votre attention, et que vous souhaitiez modifier votre propre site Web pour qu'il apparaisse de la même manière. Malheureusement, si vous êtes un amateur complet, vous ne pourrez pas faire grand chose, même avec WordPress, car les modifications de thème nécessitent une certaine expertise en HTML, CSS, PHP et plusieurs autres compétences en fonction de la nature de votre thème. Mais même si vous êtes un codeur expert, il vous faudra peut-être encore quelques heures pour apporter les modifications souhaitées..

Heureusement, le plugin WordPress Visual Composer a simplifié ce problème. Avec ce plugin de création de page génial, même les utilisateurs les plus élémentaires de WordPress peuvent modifier les conceptions de thème et créer un look totalement unique pour leur site Web. Pour les experts WordPress, cela représente un gain de temps considérable et peut les aider à modifier des pages en quelques minutes seulement. Globalement, le plugin a été un tel succès qu'il est déjà inclus dans la plupart des derniers thèmes WordPress..

Dans ce contexte, laissez-moi vous présenter quelques-unes des principales fonctionnalités de Visual Composer et la manière dont il peut être configuré pour votre site Web WordPress..

Caractéristiques principales

Visual Composer est conçu par les gars de WP Bakery. C'est un plugin payant qui n'est pas ouvertement disponible sur le répertoire du plugin WordPress. Vous pouvez seulement le télécharger à partir de CodeCanyon.

Il a été téléchargé par plus de 70 000 utilisateurs et il semble que le succès soit au rendez-vous! Visual Composer a plusieurs fonctionnalités très utiles qui peuvent faire de la création de page une expérience extrêmement agréable dans WordPress. Voici un aperçu de certains d'entre eux.

Bâtiment de page frontend et backend

La caractéristique la plus puissante de Visual Composer est qu’il vous offre un générateur de page facile à utiliser qui peut être utilisé à partir de la zone de modification de page / publication standard de WordPress ou directement à partir de l’interface frontale..

Compatibilité Thème Universel

Visual Composer n'est pas spécifique à un thème. Cela signifie que vous pouvez l'utiliser avec n'importe quel thème WordPress sans avoir à modifier le code existant..

Mise en page hautement personnalisable

Les éléments glisser-déposer de Visual Composer ont une présentation et un thème par défaut. Cependant, vous pouvez le modifier en fonction des couleurs et de l'apparence de votre site Web..

Plus de 40 éléments de conception prêts à l'emploi

L’interface glisser-déposer de Visual Composer contient plus de 40 éléments de type glisser-déposer prêts à être utilisés, qui peuvent être utilisés pour créer des mises en page uniques pour votre site Web en quelques minutes..

Éléments complètement réactifs

Les éléments de conception et de page créés avec Visual Composer sont totalement réactifs et prêts à l'emploi..

Développeur Amical

Le compositeur visuel est plein d'éléments de glisser-déposer polyvalents. Si vous souhaitez en ajouter davantage, vous pouvez facilement le faire grâce à sa nature conviviale pour les développeurs..

Installation et configuration du plugin

Comme je l'ai mentionné précédemment, Visual Composer est un plugin payant. Donc, vous devrez d'abord l'acheter, puis le télécharger sur votre site WordPress.

Étape 1

Le processus d'installation est le même que n'importe quel autre plugin WordPress. Une fois activé, le plug-in apparaît dans l'option Paramètres du menu de gauche du tableau de bord principal de WordPress..

Étape 2

Ici, vous pouvez ajuster certains paramètres de base du plugin.


Étape 3

Vous pouvez activer le compositeur visuel à la fois pour les pages et les publications. Vous pouvez également définir des droits d'accès spécifiques pour des types d'utilisateurs individuels. Pour chaque type d'utilisateur, vous pouvez choisir d'afficher à la fois Visual Composer dans la zone de post-édition et l'éditeur WordPress standard, ou vous pouvez afficher uniquement Visual Composer. Vous pouvez également activer ou désactiver des éléments individuels Visual Composer pour différents utilisateurs..

Étape 4

dans le Options de conception onglet, vous pouvez modifier l'aspect des éléments de Visual Composer en fonction du thème de votre site Web. le CSS personnalisé Cet onglet vous permet de modifier le code CSS sans modifier aucun autre fichier, tandis que l'onglet Licence de produit vous permet d'intégrer votre compte Envato pour activer la prise en charge et les mises à jour automatiques. dans le Mes codes courts onglet, vous pouvez ajouter tout autre code court développé manuellement à la liste existante de codes courts dans Visual Composer..

Passons maintenant à l'utilisation réelle du plugin!

Utilisation de VC sur des pages et des publications

Comme je l'ai mentionné ci-dessus, vous pouvez activer Visual Composer pour les publications, les pages ou n'importe lequel d'entre eux. Après avoir activé le plugin, vous verrez les onglets Visual Editor au-dessus de votre éditeur de texte WordPress standard..

Les deux onglets qui apparaissent en haut de l’éditeur de texte sont Backend Editor et Editeur Frontend. Ce sont les options qui rendent ce plugin si agréable à utiliser. À partir de là, vous pouvez créer la structure de page de votre choix. Commençons par l'éditeur backend.

Backend Editor

Étape 1

Lorsque vous cliquez sur le Éditeur backend onglet, votre zone d’éditeur de texte se transformera en une zone de glisser-déposer dans laquelle vous pourrez ajouter des éléments en les sélectionnant simplement dans la liste. Mais d'abord, vous devez ajouter une ligne. De là, la seule chose qui limite votre conception sera votre imagination..

Étape 2

Vous pouvez ajouter différents éléments dans la ligne et également choisir différentes dispositions de colonne pour chaque ligne en plaçant le pointeur de la souris sur le bouton situé au-dessus de l'éditeur de contenu. Vous pouvez ajouter différents éléments pour concevoir votre page à partir du Ajouter un élément languette. le Ajouter des éléments la boîte contient tout ce dont vous avez besoin pour concevoir un site Web.

Les éléments sont divisés en catégories: contenu, réseaux sociaux, structure de site, nouveaux éléments et widgets WordPress, mais vous pouvez également les afficher tous ensemble. Quelle que soit l'option dont vous avez besoin, cliquez simplement dessus et faites-la glisser dans votre champ de contenu. Votre page est fondamentalement divisée en différentes lignes. Vous pouvez continuer à ajouter de nouvelles lignes et de nouveaux éléments dans ces lignes..

Étape 3

Pour modifier, supprimer ou dupliquer une ligne particulière, utilisez simplement les icônes situées en haut de chaque zone de ligne..

Étape 4

Vous pouvez enregistrer un arrangement de contenu particulier en tant que modèle prêt à l'emploi pouvant être chargé à partir de la liste à tout moment..

Étape 5

Visual Composer vous permet également d’ajouter du CSS personnalisé pour des pages et des publications individuelles. Les effets de ce CSS personnalisé seront limités à cette page ou à cette publication.

Visual Composer prend également en charge plusieurs plugins WordPress célèbres tels que Formulaire de contact 7, Curseur de couche, Curseur de la révolution et Formes de gravité. Si vous avez installé un de ces plugins, ils seront automatiquement ajoutés à la liste. Ajouter un élément boîte. Lorsque vous sélectionnez l'un de ces éléments dans la liste, il est directement inséré dans votre page sans qu'il soit nécessaire d'ajouter de code abrégé. L'éditeur de back-end vous donne tellement de flexibilité et d'options que vous pouvez créer tout type de design même si vous êtes un utilisateur amateur.

Editeur Frontend

L'éditeur frontend vous permet de glisser-déposer des éléments de page en mode d'affichage de page en direct. Il est plus facile de voir immédiatement l'impact de vos modifications tout en disposant de toutes les options de l'éditeur de backend.. 

Étape 1

A partir de la gauche, vous pouvez ajouter de nouveaux éléments en cliquant sur le bouton + signer et éditer la disposition de la colonne avec le bouton de colonne à côté.

Étape 2

Vous pouvez également ajouter de nouvelles lignes ou colonnes à partir du + signer dans le contenu de la page.

Étape 3

Tous les éléments de Visual Composer sont totalement réactifs et prêts pour la mobilité. Vous pouvez obtenir l'aperçu en direct de différents appareils dans l'éditeur de frontend à partir des icônes ci-dessous..

Étape 4

Malgré toutes ces fonctionnalités et le large éventail d'éléments, Visual Composer vous permet également d'ajouter vos propres codes abrégés et éléments de conception. Vous pouvez créer les éléments vous-même ou les importer à partir d'un service tiers..

En résumé

WordPress a toujours été une plate-forme flexible en termes de différentes fonctions qu'il peut prendre en charge via ses plugins. Mais avec le plugin générateur de page Visual Composer, même l’aspect design de WordPress, qui était autrefois réservé aux utilisateurs expérimentés, peut désormais être édité très rapidement.. 

Pour moi, Visual Composer a considérablement réduit le temps que je passais jadis à la conception et à la modification de sites Web de clients, de plusieurs heures à quelques minutes. Et avec la popularité croissante de ce plugin, je ne peux que constater que de plus en plus d'utilisateurs WordPress l'utilisent dans les prochains jours.