Fusion Builder, le constructeur de pages d’Avada

Le thème Avada possède son propre constructeur de pages web, le Fusion Builder. Beaucoup de builders existent pour WordPress, et ont la réputation d’être un peu lourds bien que très pratiques pour la création de site internet. Je vous propose ici de compléter notre dossier sur Avada et d’analyser le fonctionnement du Fusion Builder pour pouvoir vous faire un avis sur ses performances et le comparer aux constructeurs de pages des autres thèmes premium.

Les auteurs du thème ont jugé utile de fournir aux utilisateurs d’Avada un menu dédié au Fusion Builder proposant un accès à une vidéo de présentation du builder, ainsi qu’à des liens directs vers une base de connaissance du thème, une vidéothèque, un forum, une FAQ ou encore la page de soumission de « ticket de support ». Cette attention n’est pas sans raison puisque Le Fusion Builder propose de très nombreuses options et autres possibilités de personnalisation de contenus. Avoir accès à une certaine « base de connaissances » n’est donc pas superflu.

Vous trouverez aussi, au sein du menu Fusion Builder, un onglet Settings vous permettant d’activer les éléments du builder dont vous avez besoin et d’activer le constructeur de pages d’Avada pour tous les types de contenus enregistrés sur le site : Pages, posts (articles) portfolio, FAQ ou autres Custom Post Types dont vous pourriez bénéficier via d’autres plugins.

Mais vous n’aurez sans doute pas besoin de tous les modules proposés par le builder pour votre site internet. Je vous conseille donc de prendre le temps de les passer en revue un à un, afin de vous familiariser avec eux, puis de dresser la liste de ceux que vous utiliserez vraiment sur votre site et ainsi ne pas vous perdre en paramétrages inutiles. 😉

Le Fusion Builder ressemble beaucoup aux constructeurs de pages concurrents tels que l’Avia Builder d’Enfold ou Visual Composer, son usage leur est donc assez similaire. Néanmoins certaines spécificités de son paramétrage incombent directement au thème Avada lui-même. Nous voyons çà un peu plus loin.

Activation et fonctionnement général du Fusion builder d’Avada

Je vous rappelle que le Fusion Builder est un plugin fourni avec le thème Avada et vous vous devrez l’installer depuis le menu « Avada -> Plugins » pour pouvoir en bénéficier sur vos pages d’éditions

Afin de nous faciliter son apprentissage, le constructeur propose, dès son activation sur une page d’édition (en cliquant sur le bouton « Use Fusion Builder »), une barre supérieure d’outils liés au builder comportant notamment :

• un onglet « Library » permettant d’accéder des templates de démonstration, ainsi qu’à des conteneurs, des colonnes ou des éléments précédemment sauvegardées par nos soins ;
• un onglet d’injection de code CSS inline dans le document ;
• un onglet de sauvegarde du travail effectué avec le builder sur la page.

L’accès à ces pages de démonstration est très pratique, mais nous allons ici tenter de comprendre le fonctionnement du Fusion Builder et voir directement comment construire une page avec Avada.

Organisation des sections d’une page avec le Fusion Builder

Assez logiquement, le builder d’Avada vous permet de définir des sections d’éléments, comprenant un conteneur central pour lequel il vous faudra définir un nombre de colonnes à afficher. Vous devez donc commencer par choisir le modèle de ligne (et de colonnes) qui vous convient le mieux pour construire votre section.

Le Fusion Builder vous permet de réorganiser vos colonnes ou vos lignes par simple glisser/déposer (drag and drop).

Un click sur le bouton « Element » d’une colonne donne accès au tableau des éléments disponibles pour le builder d’Avada, et le choix d’un élément vous amènera directement sur sa page de paramètres. Notez d’ailleurs que lorsque le builder est activé, vous passez aussi par ce tableau d’éléments pour récupérer le widget correspondant à l’éditeur de texte Gutemberg de WordPress.

Enfin vous pourrez ajouter de nouvelles sections horizontales en cliquant sur le bouton « + Container », ou ajouter une nouvelle ligne de colonne au conteneur existant en cliquant sur le bouton « + Columns » s’affichant, au survol de la souris, en bas à gauche d’un conteneur visible.

Les 2 ou 3 niveaux de paramétrage des modules du Fusion Builder d’Avada

La page de paramètres d’un élément du builder vous permet de « surcharger » les réglages par défaut (définis de façon globale) pour chaque module dans les options générale d’Avada. En l’absence de réglage de certaines options, vos éléments seront paramétrés avec les options par défaut d’Avada définies dans le menu « Avada -> Options du thème -> Fusion Builder Elements », pensez donc à y faire un tour si votre affichage est « surprenant »… 😉

Mais à bien y regarder, certains widgets à contenus multiples du constructeur (comme Content Boxex, ou Counter boxe) vous proposent, un troisième niveau de réglages pour chaque contenu supplémentaire créé tel qu’un nouveau compteur, une nouvelle boite de contenu, etc.).

Ajoutez à ce paramétrage multiple le nombre conséquent d’éléments proposés pour le Fusion Builder, et vous comprenez mieux l’intérêt d’explorer dans le détail ces modules, avant de définir, pour chacun d’eux, des valeurs par défaut depuis le menu d’options d’Avada. 😉

Le constructeur de pages d’Avada, propose beaucoup de widgets et certains sont plus intéressants que d’autres. Nous ne pouvons donc pas tous les passer en revue mais je vous en présente ici quelques uns à titre d’exemple.

Exemples de modules du builder d’Avada

Le module Text Block vous donne accès à l’éditeur de texte natif de WordPress (actuellement Guttemberg), il est donc idéal pour écrire directement du contenu éditorial sur votre page web.

Le module de blog permet d’afficher vos articles récents et de choisir plusieurs présentations possibles (dont des grilles telles que Masonry), le nombre d’articles à afficher, leurs sources (comme leurs catégories), et les éléments à afficher pour chaque article proposé dans la liste.

Le module « Button » permet de créer rapidement un bouton cliquable pour diriger vos visiteurs vers une page de votre choix. Un clic sur le lien « Select link » de la boite de dialogue vous ouvre une liste de vos pages et articles pour récupérer facilement leur URL.

L’onglet « Design » vous permettra de customiser votre bouton en vous laissant choisir sa couleur (ou son dégradé) et sa couleur de police de caractères, régler son comportement au survol, choisir son type, sa taille et pourquoi pas son icône.
• Enfin l’onglet « Animation » vous permettra de donner du dynamisme à votre page à l’aide, par exemple, d’un zoom ou d’un fondu animé.Ce module est assez convivial.

Le module « Checklist » est lui aussi très utile pour afficher les listes décorées et animées. Vous pourrez ainsi choisir l’icône à afficher devant vos items de liste, et accéder à un éditeur de texte pour ajouter chacun de vos items et les mettre en forme depuis la partie gauche de la fenêtre. Enfin vous pourrez définir la couleur des icônes, leur contour et leur taille pour coller au plus près de votre design.

Le module « Content Boxes » vous permet de mettre en évidence des boites de contenus possédant un titre et un texte, et d’y ajouter à nouveau l’icône de votre choix.La particularité de ce module est de vous laisser définir le nombre d’items à créer ainsi que le nombre de colonnes utilisées pour les afficher. Vous allez pouvoir là aussi définir les options de design de votre icône, leur emplacement ou même choisir une image à la place de l’icône fontAwesome. Ce module dispose lui aussi d’un onglet « Animation » pour dynamiser son affichage.

Le builder d’Avada possède aussi 2 autres éléments distincts, relativement prisés ces temps-ci, proposant un affichage progressif des chiffres clés de votre activité :

• Le « Counter box » permet de créer des des boites d’items et et de choisir le nombre de colonnes utiles à leur affichage, la couleur du texte et des icônes. La définition du chiffre, de l’icône et du et du texte descriptif se fait au niveau de chaque item
• le « Counter Circle » propose la même chose, à ceci près que le chiffre est donné sous forme de pourcentage de remplissage d’un cercle de contour.

Au total ce sont 47 modules proposés par Avada pour vous aider à présenter et formater votre contenu et on ne pourra pas les voir tous en détail, mais on citera rapidement un formulaire de connexion, un module de portfolio, de galerie d’images, un carrousel, une table de prix, un widget SoundCloud, des accès aux sliders Fusion Slider, Revolution Slider et layer Slider, ainsi que des modules de présentation de contenu par onglets… Il vous faudra donc le temps de regarder leur fonctionnement et ne pas hésiter à consulter la documentation officielle des éléments du Fusion Builder sur le site de Theme Fusion.

Maintenant que nous savons manipuler le Fusion Builder, nous allons créer une page simple pleine largeur pour voir ce que Fusion Builder à nous offrir.

Création d’une page simple avec le Builder d’avada

À titre d’exemple nous allons créer une page simple à section unique contenant 1 colonnes, intégrant quelques éléments du Fusion builder d’Avada. Nous analyserons ensuite le rendu de la page généré par le Fusion Builder.

Créons une page WordPress : « Pages -> Ajouter » et depuis le modèle de page, choisissons « 100% width ».

Création d’une section sur Avada

Le constructeur de page est accessible via le bouton « Use Fusion Builder » au dessus de l’éditeur standard de WordPress. Nous créons une section en ajoutant un conteneur auquel nous attribuons 1 colonne (1/1).

Nous créons ensuite un élément titre dans la colonne, ainsi qu’une image, un séparateur et un bloc de texte de description.

Création d’un titre formaté avec Fusion Builder

Après avoir cliqué sur le bouton « Elements », il nous faut descendre tout en bas du tableau d’éléments du Fusion Builder pour trouver le module « H Title » permettant de créer un titre formaté.

Dans l’onglet « Général » s’ouvre un éditeur classique possédant les options de l’éditeur standard de WordPress. Je tape mon titre sans choisir de format (paragraphe, titre 1, titre 2, etc.) puisque ce formatage est situé dans l’onglet « Design » de la fenêtre. Au dessous se trouvent 2 champs permettant d’ajouter des marges externes (hautes et basses) à mon titre. Je vais tester cela et ajouter 50 pixels au dessous du titre… Ensuite, 3 boutons donnent la possibilité d’afficher ou de masquer mon élément en fonction du support avec lequel la page sera consultée (mobiles, tablettes ou pc de bureau).Enfin les 2 dernières lignes permettent d’injecter des classes et ID au bloc de l’élément (option pour les utilisateurs avancés).

Dans l’onglet « Design Options », se trouvent d’autres options de mis en forme.Nous allons choisir ici le type de titre (h1, h2, h3, etc.), son alignement (gauche, centré ou droit), et lui ajouter un séparateur visuel coloré (moi qui pensais ne paramétrer qu’un titre…) pour pouvoir tester tout cela.

Ok passons maintenant à l’image. Il me faut visiblement passer par l’élément « Image » du Fusion Builder pour en importer une.

Importation d’une image avec Le Fusion Builder

L’onglet « General » permet d’uploader l’image depuis la bibliothèque média de WordPress. Pour faire simple, je ne choisie pas de stylisation ni d’animation si ce n’est l’alignement de l’image au centre. On notera un champ « Image Alt Text » qui remplace purement et simplement celui de l’éditeur de média de WordPress, j’y insère donc mon texte alternatif pour tester cette fonctionnalité du builder d’Avada.

Là encore je peux déclarer la visibilité les classe et l’identifiant de mon élément. L’onglet « Animations » permet de choisir l’animation en entrée de page pour cette image, comme un fondu). Restons simple pour tester le code source généré.

Un élément « Texte » pou un éditeur très simple

Pour finir, nous utiliserons un élément de texte pour ajouter du poids sémantique à la page. Le module « Text Block » d’Avada n’affiche que l’éditeur standard de WordPress, sans option de stylisation. Son utilisation est donc très simple, mais la question se posera alors de savoir pourquoi un paragraphe généré par le Fusion Builder est « sur-balisé » dans le code source… à méditer. 😉

Un élément « Separator » pour aérer sa page

Bon, mon image et mon texte seront un peu collés, il va me falloir ajouter un séparateur invisible pour leur donner un peu d’air. Je vais donc ensuite rechercher dans le constructeur d’Avada un élément « Separator » pour le glisser entre mon image et mon texte.

Je lui assigne des marges hautes et basses de 50px depuis l’onglet « Design », je ne lui colle pas d’icône et réduit sa bordure à 0 pour le garder invisible, et je le glisse entre mes 2 blocs.

Bon, le builder d’Avada cela est assez intuitif, mais voyons maintenant à quoi ressemble le code source généré par le Fusion Builder.

Le code source généré par Fusion Builder

SI nous analysons le code source, nous nous rendons compte que le titre de section est bien là mais le Fusion Builder utilise pas moins de 6 niveaux de balisage pour afficher un h2 stylisé d’une bordure double. Quand je vous disais que les constructeurs de pages pouvaient être un peu lourd ! Mais c’est sans doute le prix à payer pour bénéficier d’un constructeur de pages multi usages …

Le balisage affichant notre image, lui, est finalement relativement « light« , il comporte une balise <div> de classe « imageframe-align-center » pour l’alignement, un pour accueillir les éléments d’animation potentielle et la balisage image comportant bien notre texte alternatif.

Le balisage du séparateur, quant à lui, la particularté de comporter une stylisation inline dont il faudra tenir compte si nous voulons modifier la stylisation de tyous les conteneurs du site de façon globale. 😉

Enfin notre paragraphe possède un conteneur « fusion-text » (qui ne semble pas servir à grand chose).

En fait, ce que nous observons ici est typiquement l’impacte des nombreuses possibilités de réglages du builder sur le code source de la page.Le Fusion Builder, à l’instar des constructeurs de page de sa catégorie surcharge le document avec un balisage, qui pour autant, lui est nécessaire, et on devine assez vite l’effet d’un usage excessif des widgets du Builder et de leurs options sur les performances de la page toute entière…

Mais qu’arrive-t-il si l’utilisateur souhaite revenir à l’éditeur natif de WordPress pour créer une page plus simple ?

Attention à la désactivation du builder

Voici à quoi pourra ressembler cette même page après avoir désactivé Fusion Builder, et si, bien sûr, vous vous en êtes servi pour construire votre page :

Surprenant, non ?!?! 😯 Nous avons inséré moins de 2 lignes de texte et nous nous retrouvons avec une page pleine de shortcodes WordPress et totalement illisible. Pas trop de panique tout de même, cet inconvénient existant chez 90% des constructeurs de pages du marché, ne pourra pas être considéré comme un critère de comparaison de thèmes payants. Pour autant, il vous faudra certainement anticiper les enjeux et les besoins de performances de votre site internet afin de déterminer si votre choix doit se faire en faveur d’un thème premium ou plutôt en faveur d’un thème sur mesure…

Conclusion sur le Fusion Builder

En conclusion sur le builder d’Avada, je dirais que présentant les mêmes avantages et inconvénients, il n’est ni meilleur ni moins bon que celui des ses concurrents. Il permet d’agencer assez rapidement ses pages par glisser/déposer et d’éditer chaque élément dans une fenêtre conviviale d’options et si la multitude d’options proposées par le Fusion Builder peut donner le tournis à l’utilisateur il est tout de même relativement intuitif et plutôt complet pour des besoins standards. Enfin ce builder reste un peu gourmand en performances et propose, comme les autres, un balisage surdimensionné.

Le Fusion Builder ne conviendra donc peut-être pas aux développeurs soucieux de créer des pages performantes mais assez bien aux néophytes désirant manipuler au long cours les structures et contenus de leurs pages.

Mais si votre choix d’acquisition de votre thème premium repose sur l’utilisabilité de son builder, il vous faudra peut-être le comparer avec celui des thèmes premiums concurrents d’Avada.

Voilà, nous avons globalement fait le tour des possibilités offertes par ce thème premium WordPress, et si vous décidez d’acheter Avada, ce sera, je l’espère, en connaissance de cause.

À bientôt ! 😉