Visual Composer: Guide de création de pages par glisser-déposer

WordPress est génial, et être en mesure de personnaliser votre site Web WordPress n’est que la cerise sur le gâteau. Cependant, nous ne codons pas tous des gourous. Heck, certains amateurs de WordPress ne savent rien du HTML ou du CSS. Mais cela ne devrait pas vous empêcher de personnaliser votre thème WordPress. C’est là que les constructeurs de pages interviennent.


Les constructeurs de pages glisser-déposer sont largement disponibles en tant que plugins et sont intégrés dans de nombreux thèmes populaires. Ils permettent aux utilisateurs de tous niveaux d’apporter des modifications à la disposition générale d’un thème, et cela peut rendre l’ajout de fioritures supplémentaires (icônes, barres de compétences, tableaux de prix, etc.) super facile. Plus précisément, nous voulons vous présenter notre nouveau plugin WordPress de création de pages préférées – le compositeur visuel.

Obtenez Visual Composer gratuitement! Le plugin Visual Composer est inclus gratuitement avec l’achat de notre thème Total WordPress et il comprend de superbes extensions pour le plugin à utiliser avec le thème.

Qu’est-ce que le compositeur visuel

Visual Composer est un plugin fantastique développé par WP Bakery qui ajoute un générateur de page glisser-déposer à votre thème WordPress. Nous l’avons inséré dans notre thème WordPress polyvalent total, mais vous pouvez également le voir dans presque tous les nouveaux best-sellers sur Themeforest. Il vous donne les outils dont vous avez besoin pour créer des mises en page complexes sans avoir à toucher une seule ligne de code.

Comment fonctionne Visual Composer et ce qu’il peut faire

C’est un plugin, il vous suffit donc d’installer et d’activer pour profiter de toutes ses merveilleuses fonctionnalités. Une fois activé, Visual Composer vous permet de contrôler la mise en page de vos pages. Ajoutez simplement une nouvelle page et vous verrez de nouveaux boutons afin que vous puissiez basculer entre le mode classique et le mode constructeur, ainsi qu’un bouton pour vous amener à l’éditeur frontal en direct.

bouton-compositeur-visuel

De là, les possibilités ne sont limitées que par votre imagination (ou celle de vos clients). Vous pouvez ajouter des lignes, des colonnes, des boutons, du texte, des images et bien plus encore en utilisant toutes les options de Visual Composer. De plus, il existe une option pour enregistrer vos mises en page en tant que modèles à réutiliser encore et encore.

Lignes

Le générateur comprend des éléments de création de page. Vous pouvez utiliser ces éléments comme blocs de construction littéraux pour votre page. Première Ajouter une ligne. Les lignes permettent d’ajouter des colonnes en un seul clic. Survolez simplement l’onglet de paragraphe jaune dans le coin supérieur gauche de votre ligne et sélectionnez une mise en page. La ligne se divise automatiquement en colonnes selon la disposition que vous choisissez.

total-add-row

Éléments de page

total-add-elements

L’étape suivante consiste à commencer à ajouter les fonctionnalités de votre page. Cliquez simplement sur le Ajouter un élément pour ouvrir un menu contextuel. Il existe de nombreuses options pour ajouter des zones de texte, des en-têtes, le partage social, des images et des galeries, des bascules ou des onglets, des accordéons, des articles récents (qui fonctionnent également avec les types de messages personnalisés de votre thème en plus des articles de blog), des boutons et même widgets de la barre latérale.

En outre, selon le thème WordPress et les plugins compatibles que vous utilisez avec Visual Composer, vous verrez plus ou moins d’éléments de page. L’exemple ci-dessus est tiré de notre thème WordPress Total Drag & Drop, il y a donc 30 éléments de générateur de page supplémentaires que nous avons créés et stylisés exclusivement pour Total. Cela comprend des séparateurs personnalisés, des boîtes à icônes, des jalons, des carrousels et plus encore.

Cliquez sur n’importe quel élément pour ouvrir les options de cet élément. Vous trouverez ci-dessous un exemple des «options» de notre module Icon Box dans le thème Total. Comme vous pouvez le voir, chaque module peut avoir de nombreux paramètres et même plusieurs onglets de paramètres.

icon-box-settings

Le générateur prend également en charge quatre super plugins tiers: Layer Slider, Revolution Slider, Gravity Forms et Contact Form 7. Si l’un de ces plugins est installé, un élément de page apparaîtra automatiquement pour le thème. Lorsque vous choisissez d’insérer un élément de page pour l’un de ces plugins, Visual Composer affiche une liste déroulante des curseurs / formulaires respectifs que vous avez créés, ou affiche une zone de saisie pour que vous puissiez ajouter votre ID de curseur. Plus de copier-coller de shortcodes!

Glisser-déposer

éditeur-compositeur visuel

À tout moment du processus de conception, vous pouvez faire glisser et déposer n’importe quel élément de ligne ou de page pour les réorganiser. Vous pouvez également dupliquer n’importe quelle ligne ou élément, ce qui rend l’ajout de contenu répétitif rapide et facile (idéal pour les colonnes similaires, les FAQ, les bascules, etc.).

Une fois que vous avez créé un design que vous aimez, vous pouvez l’enregistrer comme modèle. Cela est pratique lorsque vous créez une mise en page ou une barre latérale personnalisée que vous souhaitez réutiliser. Cliquez simplement sur le Modèles , donnez un nom à votre mise en page et appuyez sur Enregistrer. Lorsque vous utilisez votre modèle, il remplira automatiquement votre page avec la mise en page et les éléments que vous avez enregistrés.

Options de ligne: formater, cloner et supprimer des lignes

Il y a trois fonctionnalités supplémentaires ajoutées dans le coin extrême gauche de chaque ligne qui peuvent être utilisées pour cloner ou dupliquer une ligne entière et tout son contenu, ajouter de nouveaux modules, modifier les colonnes, etc. Passez simplement la souris sur n’importe quelle ligne que vous devez modifier pour accéder à ces paramètres:

total-visual-composer-row-settings

Encore une fois, selon le thème que vous utilisez avec Visual Composer, les options de mise en forme disponibles peuvent être différentes. Alors que certains développeurs de thèmes choisissent de laisser Visual Composer tel quel, beaucoup personnalisent le plugin pour l’adapter aux besoins ou au style de leur thème.

Editeur Frontend

Le puissant compositeur visuel comprend désormais un éditeur frontal, ce qui facilite plus que jamais la création de vos propres pages et mises en page. La seule mise en garde est que tous les thèmes ne prennent pas encore en charge l’éditeur frontal. Assurez-vous de vérifier la liste des fonctionnalités d’un thème ou de contacter directement le développeur du thème pour voir si l’éditeur frontal Visual Composer est compatible avec votre thème WordPress. Notre Le thème Total WordPress est 100% compatible avec l’éditeur frontal donc si votre thème actuel ne l’est pas, vous voudrez peut-être envisager une “mise à niveau” vers notre thème.

Extensions

La dernière fonctionnalité que je voudrais aborder est l’extensibilité de Visual Composer. Si vous êtes un développeur avancé de codeurs ou de thèmes, vous pouvez intégrer vos propres shortcodes dans le plugin. En fait, nous avons ajouté notre propre Symple Shortcodes Premium pour donner aux utilisateurs Total des éléments de création de page supplémentaires. Cela donne aux utilisateurs encore plus d’options lors de la création de pages!

Si vous n’êtes pas un codeur, consultez CodeCanyon et effectuez une recherche rapide pour le module complémentaire Visual Composer. Il existe de nombreux excellents plugins premium qui ajoutent des fonctionnalités supplémentaires à Visual Composer et même quelques bons gratuits tels que notre plugin Symple Shortcodes.

Options des paramètres de Visual Composer

Je continue de faire référence à Visual Composer en tant que constructeur de page, mais cela fonctionne très bien avec les publications et les types de publication personnalisés. Il vous suffit d’activer l’option. Aller vers Paramètres> Compositeur visuel. Vous devriez voir un écran similaire à celui-ci:

Paramètres de Visual Composer

Le plugin affichera automatiquement les différents types de contenu inclus dans votre thème WordPress. Sélectionnez simplement celui que vous souhaitez utiliser avec le générateur de page Visual Composer. L’exemple ci-dessus provient de notre thème Total, c’est pourquoi il existe des options supplémentaires pour le portefeuille, le personnel et les témoignages (tous les types de messages personnalisés) ainsi que les forums, les sujets, les réponses et les produits (liés aux plugins bbPress et WooCommerce pris en charge par Total).

Vous pouvez également mapper tous les plugins de shortcode au Visual Composer que vous avez déjà installé sur votre site WordPress. Sous la page des paramètres, cliquez sur l’onglet Mes shortcodes en haut et cliquez sur le bouton pour mapper le shortcode. Cela devrait ajouter vos shortcodes tiers à vos éléments compositeurs. Facile!

Voyez-le en action

Comme je l’ai dit, nous aimons tellement Visual Composer que nous l’avons intégré à notre thème Total WordPress le plus vendu (inclus gratuitement avec votre achat). Jetez un œil aux différentes pages de nos démos en direct pour le thème Total. La plupart des pages que vous verrez dans nos démos en direct ont été créées avec Visual Composer! Ajout d’arrière-plans, de titres, de texte, d’images, d’icônes… etc. C’est tout un “morceau de gâteau”.

total-demos

Guide d’utilisation complet de Visual Composer

Si vous possédez déjà le plugin et que vous cherchez un guide sur la façon de l’utiliser, consultez notre guide d’utilisation complet de Visual Composer qui vous guidera pas à pas et vous montrera comment utiliser le plugin.

Où vous pouvez l’obtenir

Visual Composer est disponible sur CodeCanyon si vous souhaitez l’obtenir vous-même. Il a également été complètement intégré à notre thème WordPress Premium Total (avec deux autres plugins premium pour une valeur totale de 67 $ – ce qui est plus que ce que vous payez pour le thème!).

Get Total Get Visual Composer

Faites-nous savoir ce que vous pensez du plugin ci-dessous. Nous sommes vraiment impressionnés par Visual Composer et nous aimerions connaître votre opinion!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me