Premiers pas avec WPBakery (anciennement Visual Composer)


Écrire du code HTML, CSS et PHP pour créer ou personnaliser un site WordPress peut prendre énormément de temps, même pour un développeur Web expérimenté. C’est probablement pourquoi une grande partie de la communauté WordPress est passée à l’utilisation de plugins de création de page à la place.

Générateur de pages WPBakery (anciennement appelé Visual Composer) est le plugin de création de pages WordPress le plus flexible et le plus riche en fonctionnalités que vous puissiez mettre la main sur en 2020.Il est compatible avec presque tous les thèmes WordPress modernes, et vous n’avez pas besoin de compétences en programmation pour pouvoir utilise le. En fait, lors de son utilisation, vous n’aurez même pas à taper de shortcode!

Avec les éditeurs front-end et back-end élaborés mais intuitifs proposés par WPBakery Page Builder, la création de pages pour votre site WordPress ne nécessite souvent que quelques clics et des opérations de glisser-déposer. Dans ce didacticiel Visual Composer, je vais vous montrer comment ajouter WPBakery Page Builder à votre instance WordPress et vous présenter toutes ses fonctionnalités importantes.

Conditions préalables

Pour pouvoir suivre ce didacticiel WPBakery Page Builder, vous aurez besoin de:

De plus, pour mieux comprendre comment utiliser Visual Composer et pourquoi vous devriez utiliser WPBakery Page Builder au lieu de tous les autres plugins de création de page disponibles aujourd’hui, je vous suggère de lire l’article suivant:

1. Installation de WPBakery Page Builder

WPBakery Page Builder est un plugin WordPress premium. Il est disponible sur CodeCanyon, alors connectez-vous à votre compte Envato et achetez une licence pour celui-ci. Il est encore souvent connu sous son ancien nom: Visual Composer.

Générateur de pages WPBakery sur CodeCanyon

Après l’avoir acheté, vous pourrez télécharger un fichier ZIP contenant divers fichiers liés au plugin.

Extrayez le fichier ZIP et recherchez un fichier nommé js_composer.zip. Il s’agit d’un fichier d’archive de plugin, que vous devez télécharger sur votre serveur WordPress. Alors connectez-vous à votre panneau d’administration WordPress et accédez à Plugins> Ajouter nouveau. Cliquez ensuite sur le Télécharger le plugin et sélectionnez js_composer.zip.

appuyez sur la Installer maintenant bouton pour démarrer l’installation.

Installation du plugin à partir d'un fichier ZIP

Une fois l’installation terminée, appuyez sur le Activer le plugin bouton. Dès que vous le faites, vous serez redirigé vers l’écran d’accueil de WPBakery Page Builder.

2. Configurer le plugin

Apprendre à utiliser WPBakery Page Builder est facile. Le plugin est extrêmement personnalisable, offrant des dizaines d’options de configuration que vous pouvez modifier pour répondre à vos besoins. appuyez sur la Paramètres sur l’écran d’accueil pour les consulter.

Page des paramètres généraux

Le plugin a une configuration par défaut bien pensée qui est suffisante pour la plupart des cas d’utilisation. Par exemple, dans le réglages généraux onglet, vous pouvez voir qu’il prend en charge la conception réactive dès la sortie de la boîte.

Le plugin essaie également d’appliquer diverses optimisations pour s’assurer que les pages que vous créez avec lui ont des temps de chargement minimaux. Par exemple, il utilise uniquement le sous-ensemble de script latin des polices Google par défaut. Pour prendre en charge d’autres scripts, il vous suffit de modifier le Sous-ensembles de polices Google option.

dans le Gestionnaire de rôle onglet, vous remarquerez peut-être que ce plugin n’est disponible que pour les pages de votre site WordPress. Si vous souhaitez qu’il soit également disponible pour vos publications, sélectionnez Douane dans le Types de messages lister et activer le Publier option.

Configurer les types de publication

Après avoir effectué les modifications, faites défiler vers le bas et cliquez sur le Sauvegarder les modifications bouton.

Enfin, si vous souhaitez personnaliser l’apparence des éléments de contenu de WPBakery Page Builder, passez à la Options de conception et vérifiez le Utilisez un design personnalisé champ. Une fois que vous le faites, vous pourrez modifier les couleurs, les marges et les largeurs par défaut utilisées par le plugin.

Options de conception personnalisées

3. Utilisation de l’éditeur back-end

Il s’agit d’une étape clé de ce didacticiel Visual Composer. WPBakery Page Builder est livré avec deux éditeurs puissants: un éditeur back-end et un éditeur frontal. Ils sont tous deux accessibles uniquement à l’intérieur d’une page ou d’un article. Par conséquent, pour l’instant, je vous suggère de créer une nouvelle page en allant sur Pages> Ajouter nouveau.

Dans l’interface de création de page, vous pourrez choisir l’éditeur que vous souhaitez utiliser. Commencez par cliquer sur le Éditeur backend bouton pour ouvrir l’éditeur back-end.

Éditeur backend

En utilisant cet éditeur, vous pouvez facilement ajouter une variété d’éléments couramment utilisés à la page. WPBakery Page Builder propose des éléments simples tels que des blocs de texte, des images et des séparateurs. Il propose également des fonctionnalités plus avancées telles que les boutons “J’aime” de Facebook, Google Maps, des graphiques et des carrousels animés.

Pour faciliter l’accès, les éléments sont divisés en quatre catégories différentes: contenu, social, structure et widgets WordPress.

Liste des éléments disponibles

Comme son nom l’indique, les éléments de contenu sont des éléments que vous utiliseriez généralement pour créer le contenu d’une page ou d’un article. De même, les éléments sociaux sont ceux qui permettent aux utilisateurs de partager facilement votre page sur les plateformes sociales. Les éléments de structure, en revanche, sont destinés aux utilisateurs plus avancés, qui sont à l’aise pour écrire du code. Ils vous permettent d’ajouter directement du HTML et du JavaScript bruts à votre page.

Pour ajouter un élément, il vous suffit d’appuyer sur le bouton Ajouter un élément et sélectionnez l’élément souhaité.

Vous pouvez également appuyer sur la touche Ajouter un bloc de texte pour ajouter directement du texte à la page.

Éditeur de texte

Notez que si vous n’êtes pas satisfait de l’aspect par défaut d’un élément, vous pouvez toujours modifier ses styles en passant à la Options de conception languette.

Après avoir ajouté quelques éléments, vous remarquerez peut-être que chaque élément est associé à une barre d’outils contenant quelques boutons. Ces boutons affichent des icônes intuitives et vous permettent d’effectuer des opérations importantes telles que le glisser-déposer de l’élément pour changer son emplacement, le dupliquer, le supprimer ou modifier son contenu.

Barres d'outils illustrées au-dessus des éléments

4. Utilisation de l’éditeur frontal WYSIWYG

L’éditeur back-end est idéal pour les pages longues et complexes contenant de nombreux éléments. Lors de son utilisation, vous devez appuyer sur le Aperçu chaque fois que vous souhaitez voir à quoi ressemblera votre page lorsqu’elle sera publiée.

Si vous choisissez d’utiliser l’éditeur frontal WYSIWYG à la place, vous pouvez travailler avec l’apparence finale de votre page dès le début. Vous pouvez toujours passer facilement d’un éditeur à l’autre, faites défiler vers le haut et appuyez sur le bouton Éditeur Frontend bouton pour ouvrir le nouvel éditeur.

Éditeur frontend

Dans cet éditeur, vous ne verrez les barres d’outils associées à un élément que lorsque vous survolez l’élément. Ces barres d’outils et les fonctionnalités qu’elles offrent sont très similaires à celles offertes par l’éditeur back-end.

De plus, l’éditeur frontal vous permet de voir à quoi ressemble la page sur différentes tailles d’écran. Il vous permet également de continuer à modifier la page dans n’importe quelle taille d’écran que vous préférez.

Options de prévisualisation des éditeurs frontend

5. Utilisation de modèles

Un autre aspect important de l’apprentissage de l’utilisation de WPBakery Page Builder consiste à utiliser des modèles. WPBakery Page Builder vous permet de convertir n’importe quelle page ou publication que vous créez avec elle en un modèle. En utilisant cette fonctionnalité, vous pouvez minimiser la quantité de travail répétitif que vous effectuez lors de la création de pages pour votre site WordPress.

Pour enregistrer la mise en page actuelle de votre page en tant que modèle, ouvrez le Modèles , donnez un nom au modèle et appuyez sur la touche Enregistrer le modèle bouton.

Boîte de dialogue Enregistrer le modèle

Vous n’êtes pas limité à travailler avec vos propres modèles. Ce plugin est livré avec une grande bibliothèque de modèles, qui est mise à jour régulièrement. Pour ouvrir la bibliothèque, passez à la Bibliothèque de modèles et appuyez sur le Accéder à la bibliothèque bouton.

Bibliothèque de modèles

Comme vous pouvez le voir, la bibliothèque contient une grande variété de modèles de mise en page de qualité supérieure. Tous sont à votre disposition gratuitement. Vous devez cependant activer votre licence WPBakery Page Builder avant de pouvoir les utiliser.

De manière générale, les modèles peuvent être divisés en deux catégories: des modèles pour des pages entières et des modèles pour des parties individuelles et indépendantes d’une page. Par exemple, le À propos de la page template vous aide à créer une page complète “à propos de nous”. Mais le Section des héros template crée uniquement une section héros pour vous.

Modèle de section de héros

Les meilleurs modules complémentaires et extensions WordPress WPBakery Page Builder sur CodeCanyon pour 2020

J’espère que vous avez apprécié le didacticiel WPBakery Page Builder que j’ai partagé avec vous. Vous savez maintenant comment utiliser WPBakery Page Builder. Ensuite, laissez-moi vous dire où trouver le meilleur professionnel Modules complémentaires WordPress WPBakery, vous pouvez donc créer un site Web étonnant en une fraction du temps.

Meilleurs modules complémentaires WPBakery Page Builder sur CodeCanyon
Meilleur Modules complémentaires WPBakery Page Builder sur CodeCanyon

Explorez des centaines des meilleurs Modules complémentaires WordPress jamais créé sur CodeCanyon d’Envato Market. Avec un paiement unique bon marché, vous pouvez acheter l’un de ces plugins, extensions et add-ons WordPress de haute qualité.

Bien que WPBakery soit un constructeur de pages complet, les modules complémentaires et extensions riches en fonctionnalités vous permettront d’ajouter une grande variété de fonctionnalités à votre site Web, telles que:

  • éléments uniques
  • fonctionnalités supplémentaires de WooCommerce
  • boîtes de contenu
  • et beaucoup plus

Vous savez comment utiliser Visual Composer. Mais ces fonctionnalités et fonctionnalités supplémentaires sont indispensables pour votre site Web WordPress, alors assurez-vous de consulter notre sélection ci-dessous!

5 principaux modules complémentaires WPBakery Page Builder

Voici quelques-uns des meilleurs Modules complémentaires WPBakery et extensions disponibles sur CodeCanyon pour 2020.

1. Compléments ultimes pour WPBakery Page Builder

Compléments ultimes pour WPBakery Page Builder

Ceci est notre module complémentaire le plus vendu pour WPBakery Page Builder. Avec plus de 60000 ventes, les gens l’adorent pour ses fonctionnalités fantastiques:

  • conception entièrement réactive
  • éléments uniques et flexibles
  • code propre
  • 9+ démos pleine page
  • parallaxe et arrière-plans vidéo
  • Animations CSS3
  • tutoriels vidéos
  • meilleur support client

2. Composium — Module complémentaire d’extensions WP Bakery Page Builder

Composium - Module complémentaire d'extensions WP Bakery Page Builder

Composium est un autre module complémentaire d’extensions WPBakery le plus vendu. Il comprend plus de 150 éléments premium pour WPBakery Page Builder et des fonctionnalités impressionnantes telles que:

  • conception entièrement réactive
  • gestionnaire de polices d’icônes
  • Gestionnaire de polices Google
  • générateur de modèles et de widgets
  • système modulaire
  • Intégration WooCommerce
  • code propre et efficace
  • support rapide

3. Addons massifs pour WPBakery Page Builder

Addons massifs pour WPBakery Page Builder

Massive Addons est compatible avec 99% des thèmes WordPress prenant en charge Visual Composer 4.7+. Et ce module complémentaire WPBakery populaire vient de publier une mise à jour avec de nombreux éléments intéressants:

  • préréglages de conteneur
  • 35 modèles de pages + 17 nouveaux modèles
  • Prise en charge de WooCommerce
  • installation du modèle en un clic
  • 1700+ préréglages prédéfinis

4. Générateur de pages WooCommerce

Générateur de pages WooCommerce

Cet add-on WPBakery a été créé pour vous aider à personnaliser votre site Web WooCommerce. Avec ce plugin, vous pourrez créer facilement n’importe quelle mise en page pour une page WooCommerce, sans aucune connaissance en codage requise. C’est un plugin WPBakery génial car c’est:

  • facile à installer
  • convivial
  • compatible avec n’importe quel thème
  • prend en charge les codes courts WooCommerce

5. Presse-papiers du générateur de pages WPBakery

Presse-papiers du générateur de pages WPBakery

Le Presse-papiers WPBakery Page Builder vous permet de copier / couper et coller des éléments de contenu uniques ou une pile d’éléments de contenu sur les pages, sans jamais quitter l’interface principale de WPBakery Page Builder.

Une autre fonctionnalité intéressante est que vous pouvez transférer des presse-papiers entre des sites et des domaines à l’aide de la fonction d’exportation / importation. Vous pouvez également créer des modèles de presse-papiers pour gagner beaucoup de temps!

Conclusion

Dans ce didacticiel WPBakery Page Builder, vous avez appris à télécharger, installer et configurer WPBakery Page Builder. Vous avez également vu à quel point il est facile de créer des pages et des articles pour votre site WordPress avec. Pour en savoir plus sur l’utilisation de Visual Composer, reportez-vous à sa documentation.

En créant le plugin Visual Composer, l’un des premiers générateurs de pages à part entière par glisser-déposer pour WordPress, l’équipe WPBakery a considérablement changé la façon dont les gens utilisent WordPress. Fin 2017, ils ont renommé leur plugin WPBakery Page Builder. Aujourd’hui, il compte plus de 350 000 utilisateurs et alimente plus de 2 millions de sites Web.

Le plugin a également un riche écosystème construit autour de lui. Parce qu’il est facilement extensible, il existe de nombreux modules complémentaires tiers disponibles pour cela.

Si vous êtes quelqu’un qui utilise régulièrement WordPress, CodeCanyon a beaucoup plus de plugins WordPress qui peuvent changer fondamentalement la façon dont vous développez et gérez vos sites WordPress. Découvrez les plus importants ici:

Close Menu