Fermer

novembre 12, 2018

Utilisation de Visual Composer Website Builder pour créer des sites Web WordPress


À propos de l'auteur

Nick Babich est un développeur, un passionné de technologie et un amateur de l'expérience utilisateur. Il a passé les 10 dernières années dans l'industrie du logiciel avec une spécialisation dans…
Pour en savoir plus sur Nick

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.

 Un fichier GIF présentant certaines fonctionnalités de Visual Composer Website Builder
. ] Grand aperçu )

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).


 Une capture d'écran de Visual Composer Hub: un nuage qui stocke tous les éléments disponible pour les utilisateurs.
( Grand aperçu )

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'.


 Comment créer une page de destination avec Visual Composer
( Grand aperçu )

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.


 Vous pouvez commencer avec une page vierge ou sélectionner une page prête à l'emploi. utiliser modèle.
Vous pouvez commencer avec une page vierge ou sélectionner un modèle prêt à l'emploi. ( Grand aperçu )

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.


 Le modèle de page de démarrage s'applique automatiquement dès que vous cliquez sur le symbole Plus. le faire est de le modifier selon nos besoins.
( Grand aperçu )

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.


 Chaque mise en page de Visual Composer est composée de lignes et de colonnes.
( Grand aperçu )

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.


 Visual Composer utilise des bordures de couleurs différentes pour les unités d'interface utilisateur
( Grand aperçu .

 Visual Composer peut personnaliser toutes les propriétés de la présentation, c.-à-d. Ajouter / supprimer des éléments ou modifier leurs options de style (telles que les marges, le remplissage entre les éléments)
( Grand aperçu )

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 n’est pas nécessaire de plonger dans le code pour modifier la taille des colonnes; nous pouvons simplement faire glisser les bordures d'éléments individuels.
( Grand aperçu )

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.


 Il n'est pas nécessaire de plonger dans le code pour modifier la taille des colonnes; nous pouvons simplement faire glisser les bords des éléments individuels.
( Grand aperçu )

En cliquant sur l'icône 'Stylo', vous activez un écran avec des propriétés de style individuelles pour l'élément.


 En cliquant sur l'icône 'Stylo', vous pouvez activer un écran avec des propriétés de style individuelles pour l'élément.</p data-recalc-dims=

 19659033] (<a href= Grand aperçu
)

Stretch Content

Visual Composer permet de rendre la présentation encadrée ou étirée. Si vous réglez le curseur "Étirer le contenu" sur "Activé", votre mise en page sera entièrement large.


 Visual Composer permet de créer une mise en page encadrée ou étendue.
( Grand aperçu )

Modification du titre de la page

Visual Composer permet aux utilisateurs de modifier le titre de la page. Vous pouvez le faire dans les paramètres de mise en page. Attribuons à notre page le titre suivant: «C almTech: le meilleur assistant numérique.»


 Visual Composer permet aux utilisateurs de modifier le titre de la page. Vous pouvez le faire dans les paramètres de présentation.
( Grand aperçu )

Il est maintenant temps d’ajouter un menu principal à notre page de destination. Supposons que nous ayons le menu suivant dans WP:


 Ajout d’un menu supérieur à la page de destination
( Grand aperçu )

Et nous voulons le placer en haut de notre page de destination nouvellement créée. Pour ce faire, nous devons accéder à Visual Composer -> Headers (car le haut de la page est un emplacement par défaut pour la navigation) et créer un nouvel en-tête.

Dès que vous cliquez sur le lien. Le bouton "Ajouter un en-tête" affiche un écran dans lequel nous demandons de donner un titre à la page. Attribuons-lui un nom. "En-tête supérieur". C'est un nom technique qui nous aidera à identifier cet objet.


 As soon Lorsque vous cliquez sur le bouton "Ajouter un en-tête", un écran vous demande de donner un titre à la page
( Grand aperçu )

Ensuite, Visual Composer nous dirigera vers le hub où nous pourrons ajouter tous les éléments d'interface utilisateur requis à notre en-tête. Puisque nous voulons avoir un menu, nous tapons "menu" dans le champ de recherche. Le Hub nous offre deux options: menu de base et menu sandwich. Dans notre cas, nous utiliserons le * Menu de base * car nous disposons d’un nombre limité d’options de navigation de niveau supérieur et souhaitons qu’elles soient toutes visibles en permanence (une navigation cachée telle que Menu sandwich peut être nuisible à la possibilité de découverte ).


 Le hub nous offre deux options: menu de base et menu sandwich. Pour notre cas, nous allons utiliser le menu de base.
( Grand aperçu )

Enfin, nous devons choisir le source du menu (dans notre cas, il s'agira du menu Main celui que nous avons dans WP) et modifier l'apparence des options de navigation.


 la source de menu afin de changer l'apparence des options de navigation
( Grand aperçu )

Modifions l’alignement du menu (nous le déplacerons à droite).


 Modification de l’alignement du menu à droite
( Grand aperçu )

Et c’est tout. Maintenant, nous pouvons utiliser nos paramètres de page d'en-tête. Modifions notre page d'accueil pour inclure un en-tête. Survolez l'élément * Veuillez choisir votre en-tête * et vous verrez un bouton Ajouter un en-tête .


 Modification de la page d'accueil pour y inclure un en-tête
( Grand aperçu )

Lorsque vous cliquez sur le bouton, une boîte de dialogue apparaît dans la partie gauche de l’écran pour vous inviter à sélectionner un en-tête. Choisissons l’option En-tête de liste dans la liste.


 Choix de l’option En-tête de page
( Grand aperçu )

Après avoir sélectionné un en-tête, un menu apparaît en haut de la page.


 Après avoir sélectionné un en-tête, vous verrez un menu en haut de la page.
(. ] Grand aperçu )

Selon le principe de base d'une bonne navigation, un menu de navigation devrait être disponible pour les utilisateurs tout le temps. Mais malheureusement, sur de nombreux sites Web, le menu de navigation supérieur se cache lorsque vous faites défiler. Un tel comportement oblige les utilisateurs à revenir au début afin de naviguer vers une autre page. Il introduit des coûts d'interaction inutiles. Heureusement, il existe une solution simple à ce problème: nous pouvons rendre le menu supérieur collant. Un menu collant reste visible en permanence, quel que soit le lieu où se trouve l'utilisateur sur la page.

Pour activer le caractère collant, nous devons activer la bascule Collante pour notre en-tête Sur (pour le conteneur Menu complet) et ajoutez une marge de 50 pixels au sommet de la marge .


 Pour activer le collage, nous devons activer la bascule Sticky pour notre en-tête et ajouter une marge de marge de 50 pixels au sommet de la marge. [19659033] (<a href= Grand aperçu
)

Lorsque vous faites défiler la page de destination, vous remarquerez que l’en-tête reste visible tout le temps.

Pairing Image With Text

Nous en arrivons ensuite à une partie très intéressante: nous devons décrire notre produit à nos visiteurs. Pour créer une bonne impression initiale, nous devons fournir d’excellentes images, associées à une description claire. La description textuelle et la photo (ou les images) du produit doivent fonctionner ensemble et inciter les visiteurs à en savoir plus sur un produit.

Nous devons remplacer une image par défaut par notre image. Cliquez sur l'image et téléchargez-en une nouvelle. Nous allons utiliser une image avec un arrière-plan de fléchette, nous devons donc également changer l’arrière-plan du conteneur. Vous devez sélectionner la ligne et modifier l'option de couleur d'arrière-plan.


 Téléchargement d'une image avec un arrière-plan de fléchette
( Grand aperçu )

Ensuite, nous devons ajouter une section de texte à gauche de l'image. Dans le monde occidental, les utilisateurs numérisent la page de gauche à droite pour que les visiteurs lisent une description textuelle et la mettent en correspondance avec l'image. Visual Composer utilise l'objet Text Block pour stocker les informations de texte. Remplaçons un texte fourni avec thème par notre texte personnalisé «CalmTech Un haut-parleur révolutionnaire qui s'adapte à son emplacement.» Modifions également la couleur du texte pour le rendre plus pertinent par rapport au thème (blanc pour le titre et nuance de gris pour le sous-titre.


 Modification de la couleur du texte pour le rendre plus pertinent pour le thème
( Grand aperçu )

Création d'un groupe d'éléments

Nous avons une photo du produit et une description textuelle, mais il manque tout de même un élément. Comme vous l’avez probablement deviné, c’est un appel à l’action (CTA). Les bons designers ne créent pas seulement des pages individuelles, mais un parcours utilisateur holistique . Par conséquent, pour créer un parcours utilisateur agréable, il est important de guider les utilisateurs tout au long du processus. Au moment où les visiteurs lisent les informations nécessaires, il est essentiel de leur fournir la prochaine étape logique, et un CTA est un élément tout à fait approprié pour ce rôle.

Dans notre cas, nous aurons besoin de deux CTA: 'Acheter maintenant 'et' En savoir plus '. Le principal bouton d'appel à l'action «Acheter maintenant» devrait venir en premier et attirer davantage l'attention (nous nous attendons à ce que les utilisateurs cliquent dessus). Ainsi, nous devons le rendre plus contrasté tandis que le bouton "En savoir plus" doit être un bouton creux.

Visual Composer facilite la personnalisation des paramètres généraux de l'élément d'interface utilisateur (tels qu'un espace vide) ainsi que le style individuel. options. Puisque nous sommes intéressés par la modification de propriétés individuelles, nous devons cliquer sur "Modifier" pour un bouton particulier.


 Visual Composer facilite la personnalisation des paramètres généraux de l'élément d'interface utilisateur (tels qu'un espace vide) ainsi que des paramètres individuels. options de style.
( Grand aperçu )

Jouer avec l'animation pour transmettre une dynamique et raconter des histoires

Les visiteurs visitent quotidiennement des dizaines de sites Web. Sur un marché aussi concurrentiel, les professionnels du Web doivent créer des produits véritablement mémorables. Un moyen d’atteindre cet objectif consiste à renforcer l’engagement des utilisateurs.

Il est possible d’engager les visiteurs à interagir avec un produit en transmettant une certaine dynamique. Si vous créez un site moins statique, les visiteurs auront plus de chances de s’en souvenir.

Visual Composer vous permet de choisir parmi quelques animations CSS prédéfinies d’un élément donné. Lorsque nous ouvrons des options de conception pour tout élément d'interface utilisateur, nous pouvons trouver l'option Animate . Lorsque nous choisissons l'option animée, elle sera déclenchée dès que l'élément sera visible dans la fenêtre du navigateur.


 Visual Composer vous permet également de choisir parmi quelques animations CSS prédéfinies d'un élément particulier.
([19459079)] Grand aperçu )

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).

 Aperçu de la page créée
( Grand aperçu )

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 ).


 La taille de l'image peut être modifiée directement dans le compositeur visuel.
( Grand aperçu )

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.


 Aperçu final de la page créée avec Visual Composer
( Grand aperçu )

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.

 Smashing Editorial (ms, ra, il)




Source link