Utilisation de Visual Composer Website Builder pour créer des sites Web WordPress
La création d'un site Web était un exercice complexe que seuls les professionnels pouvaient effectuer, mais la situation a changé. Dans cet article, Nick passe en revue l'outil de création de site Web Visual Composer qui permet de simplifier le processus de création de page dans WordPress.
(Ceci est un article sponsorisé.) WordPress a changé notre façon de créer des sites Web et des millions de personnes l'utilisent pour créer des sites Web aujourd'hui. Mais cet outil a quelques limitations importantes – il faut du temps et des compétences en code pour créer un site Web.
Même lorsque vous avez acquis des compétences en code, sautez dans le code chaque fois que vous avez besoin de résoudre un problème (ajoutez un nouvel élément d'interface utilisateur ou changer les options de style pour celles existantes) peut être fastidieux. Trop souvent, nous entendons dire: “Nous devons travailler plus fort pour atteindre nos objectifs.” Bien que travailler dur soit absolument important, nous devons également travailler plus intelligemment.
Aujourd'hui, j'aimerais passer en revue un outil qui nous permettra de travailler. plus intelligent. Imaginez WordPress sans limites conceptuelles et techniques; Cet outil réduit le besoin de coder à la main les parties de votre site Web et vous permet de travailler sur des parties plus intéressantes et plus précieuses de la conception.
Dans cet article, je passe en revue Visual Builder, constructeur de site Web, et crée un Exemple concret – une page de renvoi pour un produit numérique – en utilisant simplement cet outil.
Qu'est-ce que Visual Composer Website Builder?
Visual Composer Website Builder est un simple et puissant site pour créer un glisser-déposer. constructeur qui promet de changer notre façon de travailler avec WordPress. Il introduit un moyen plus intuitif de créer une page: toutes les actions impliquant une hiérarchie visuelle et une gestion de contenu changeantes sont effectuées visuellement. Cet outil réduit le besoin de coder à la main les parties thématiques d'un site Web et vous permet de travailler sur des éléments précieux de la conception, tels que le contenu.
Le contenu est la propriété la plus importante de votre site web. C’est la principale raison pour laquelle les internautes visitent votre site – pour le contenu. Il est utile de déployer de nombreux efforts pour créer du contenu de qualité et utiliser des outils qui vous aident à fournir le contenu de la meilleure façon possible aux visiteurs avec le moins d'effort possible.
Visual Composer And WPBakery
Le compositeur de site Visual Composer est un constructeur des créateurs de WPBakery Page Builder. Si vous aviez déjà eu l'occasion d'utiliser le générateur de pages WPBakery, vous pourriez vous demander quelle est la différence entre les deux plugins. Soyons clairs sur ces deux produits:
Il existe quelques différences significatives entre les deux:
- La principale différence entre WPBakery Page Builder et Visual Composer est que WPBakery n’est que pour la partie contenu, alors que Visual Composer Website Builder, vous pouvez créer un site Web complet (y compris les en-têtes et les pieds de page).
- Visual Composer n'est pas basé sur un code court, ce qui permet de générer un code propre. En outre, la désactivation du plug-in ne vous laissera pas avec «l'enfer du shortcode» (une situation dans laquelle les shortcodes ne peuvent pas être restitués sans un plugin activé).
Vous pouvez consulter la liste complète des différences entre deux plugins ici .
Désormais, Visual Composer Website Builder n’est pas une version "avancée" de WPBakery. C'est un produit entièrement nouveau qui a été créé pour répondre aux besoins croissants des professionnels du Web. Visual Composer n'est pas qu'un plugin; c'est une plate-forme puissante qui peut être étendue à mesure que les besoins des utilisateurs évoluent.
Liste rapide des fonctionnalités de Visual Composer
Bien que je vais vous montrer comment fonctionne Visual Composer, il convient de souligner quelques avantages clés. de cet outil:
- Il s'agit d'un éditeur de prévisualisation en direct avec des fonctionnalités de glisser-déposer et des centaines d'éléments de contenu prêts à l'emploi qui apportent une grande liberté de conception. Vous pouvez apporter des modifications instantanément et voir les résultats finaux avant la publication.
- Deux méthodes de modification de page: à l'aide de l'éditeur de front-end et de la vue arborescente . L'arborescence permet de naviguer dans les éléments disponibles sur une page et facilite grandement le processus de conception.
- Des modèles WordPress prêts à l'emploi pour tous les types de pages – des pages de destination, des portefeuilles aux sites Web professionnels avec pages de produits dédiées, car la modification d'un modèle existant est beaucoup plus facile que de repartir de zéro avec une page vierge.
- Visual Composer fonctionne avec n'importe quel thème (c'est-à-dire qu'il est possible d'intégrer le créateur de site Visual Composer dans vos thèmes)
- Responsive design hors de la boîte. Tous les éléments et modèles sont réactifs et prêts pour le mobile. Vous pouvez ajuster la réactivité de chaque colonne indépendante.
- En-tête, pied de page et éditeur de la barre latérale. En général, l’en-tête, le pied de page et la barre latérale sont définis par le thème que vous utilisez. Lorsque les professionnels du Web doivent les modifier, ils passent généralement au code. Mais avec Visual Composer, vous pouvez modifier la disposition rapidement et facilement en utilisant uniquement l'éditeur visuel. Cette fonctionnalité est disponible dans la version Premium du produit.
- Une collection impressionnante de modules complémentaires (il est possible d’obtenir des modules complémentaires du Hub ou de les obtenir auprès de développeurs tiers)
Trois autres fonctions sont également disponibles. Visual Composer se démarque de la foule. Les voici:
1. Visual Composer Hub
Visual Composer Hub est un nuage qui stocke tous les éléments disponibles pour les utilisateurs. C'est en gros un système de conception qui se tient à jour et permet d'obtenir de nouveaux éléments, modèles, éléments et blocs (bientôt).
L’avantage de Visual Composer Hub est qu’il n’est pas nécessaire de mettre à jour le plug-in pour obtenir de nouveaux éléments. Vous pouvez les télécharger à tout moment. Par conséquent, votre configuration WP n’est pas surchargée de nombreux éléments inutilisés.
2. Nouvelle pile technique
Le constructeur de sites Web Visual Composer est construit sur une nouvelle pile technologique: il est alimenté par ReactJS et n’utilise aucun des codes courts WordPress. Cela aide à obtenir de meilleures performances – l'équipe à l'origine de Visual Composer a effectué une série de tests internes et a montré que les pages créées avec Visual Composer se chargent 1 à 1,5 secondes plus rapidement que les mêmes dispositions reproduites avec WPBakery.
3. API
Le constructeur de sites Web Visual Composer a une API ouverte bien documentée . Si vous avez des compétences en matière de codage, vous pouvez étendre Visual Composer avec vos propres éléments personnalisés, ce qui peut s'avérer utile pour certains projets personnalisés.
Comment créer une page de renvoi avec Visual Composer
Dans cette section, je vais vous montrer comment Créez une page de renvoi pour un produit numérique appelé CalmPod (un dispositif de haut-parleur fictif pour votre maison) avec le nouveau générateur de site Web Visual Composer.
Notre aventure débute dans une interface de WP dans laquelle nous devons créer une nouvelle page: donnez-lui un titre et cliquez dessus. le bouton 'Editer avec Visual Composer'.
Création d'une présentation pour une page de renvoi
Le processus de création de la page commence par la création d'une présentation appropriée. Généralement, la mise en page d’une page de destination nécessite beaucoup de temps et d’efforts. Les concepteurs doivent essayer différentes approches avant de trouver celle qui convient le mieux au contenu. Mais Visual Composer simplifie la tâche des concepteurs: il fournit une liste de dispositions prêtes à l’emploi (disponible dans l’option Ajouter un modèle ). Il suffit donc de trouver la mise en page appropriée dans la liste des options disponibles et de voir comment elle fonctionne pour votre contenu.
Mais pour notre exemple, nous allons sélectionner le modèle Startup Page . Ce modèle s'applique automatiquement dès que vous cliquez sur le symbole +, il ne vous reste plus qu'à le modifier en fonction de vos besoins.
Chaque disposition dans Visual Composer est composée de lignes et de colonnes. La ligne est une base qui définit la structure logique de la page. Chaque ligne est composée de colonnes. Visual Composer vous permet de contrôler le nombre de colonnes d'une ligne.
Astuce : Notez que Visual Composer utilise des bordures de couleurs différentes pour les unités de l'interface utilisateur. Lorsque nous sélectionnons une ligne, nous voyons une bordure de couleur bleue. Lorsque nous sélectionnons une colonne, nous voyons une bordure de couleur orange. Cette fonctionnalité peut s'avérer extrêmement utile lorsque vous travaillez à la création de dispositions complexes.
L'avantage de Visual Composer est qu'il est possible de personnaliser toutes les propriétés de la présentation – ajouter / supprimer des éléments ou de modifier leurs options de style (comme les marges, le remplissage entre les éléments). Par exemple, nous n’avons pas besoin de plonger dans le code pour modifier la taille des colonnes; nous pouvons simplement faire glisser les bordures des éléments individuels.
Il est important de mentionner que nous pouvons utiliser l'éditeur visuel ou la vue arborescente des éléments pour modifier les propriétés individuelles des éléments de l'interface utilisateur.
En cliquant sur l'icône 'Stylo', vous activez un écran avec des propriétés de style individuelles pour l'élément.
Final Polishing
Voyons l’affichage de notre page pour les visiteurs de notre site. Il est évident que cela pose deux problèmes:
- Il semble un peu inachevé (nous n'avons pas le logo d'un site Web),
- Les éléments ont des proportions erronées (le texte surpasse l'image et la mise en page semble déséquilibrée).
Laissons le premier problème. Allez à la section En-têtes et sélectionnez notre En-tête supérieur. Cliquez sur l’élément ‘+’ et sélectionnez un objet Single Image . Télécharger une nouvelle image (l'icône). Notez que nous pouvons modifier la taille de l'image directement dans Visual Composer. Faisons la taille de notre icône 50px x 50px (dans la section Taille ).
Le moment est maintenant venu de résoudre le deuxième problème. Sélectionnez la première colonne et ajustez la taille d'un texte (définissez la taille sur 40 pour le sous-en-tête). Voici à quoi ressemblera notre page après les modifications.
Conclusion
Le constructeur de sites Web Visual Composer simplifie le processus de création de page dans WordPress. Le processus de conception de sites Web devient non seulement rapide et facile, mais également plus amusant, car les concepteurs jouissent d'une plus grande liberté créative pour exprimer leurs idées. Et lorsque les professionnels du Web disposent de plus de liberté de création, ils peuvent proposer de meilleures solutions de conception.
Source link