Article mis à jour le
Marre de bidouiller en html sur votre site WP ?
Vous venez de trouver un hébergeur pour wordpress pour votre projet et recherchez le meilleur constructeur de page WordPress pour votre site Web ?
Nous avons tous rencontré un jour ce problème en travaillant sur nos sites ! Créer du contenu de qualité prend énormément de temps mais le mettre en page ne doit pas forcément être un calvaire pour vous !
Au cours des 3 dernières années, nous avons testé les principaux constructeurs de page WordPress (site builders en Anglais) pour trouver le plus adapté à nos besoins. Nous avons utilisé tous les plugins listés dans cet article et vous faisons aujourd'hui profiter de notre expérience.
Nous allons ici comparer objectivement ces constructeurs de pages WordPress dans 5 catégories différentes :
- Interface - comment fonctionne l'interface et facilite-t-elle la création de pages ?
- Widgets/Modèles inclus - quelles options obtenez-vous pour construire vos pages ?
- Options de style - comment pouvez-vous styliser les éléments de votre page ?
- Autres caractéristiques notables - le constructeur de pages offre-t-il des caractéristiques uniques notables ?
- Désinstallation et qualité du code - que se passe-t-il si vous voulez désactiver le plugin ?
Vous perdrez le plus souvent votre style personnalisé, mais certains constructeurs de pages laissent derrière eux un code propre, alors que d'autres ne le font pas.
Pour chaque catégorie, nous donnerons au constructeur de page une note sur 5. Ensuite, à la fin de cet article, nous allons recommander celui que nous pensons être le meilleur site builder pour WordPress.
Voici les constructeurs de page WordPress que nous allons analyser - vous pouvez cliquer pour naviguer directement vers un constructeur de page de votre choix :
Vous pouvez aussi vous rendre directement au tableau comparatif en fin d'article.
Divi Builder
Divi Builder est un constructeur de page premium populaire de Elegant Themes. Bien qu'il soit le plus souvent utilisé dans le cadre du thème Divi, Divi Builder est aussi un plugin autonome que vous pouvez utiliser avec d'autres thèmes.
Contrairement aux constructeurs de pages précédents, Divi Builder vous permet d'éditer votre contenu en utilisant à la fois une interface visuelle frontale et une interface dans le back-end du site, bien que la plupart des utilisateurs préféreront probablement l'interface frontale.
Divi Builder est utilisé par de nombreuses agences web design dans le monde car il est puissant, hautement customisable et permet de déployer facilement des sites WP peu a moyennement complexes.
Prix : Disponible dans le cadre d'une souscription Elegant Themes à 89 $.
Interface |
L'interface d'arrière-plan de Divi Builder ressemble à ceci :
Mais la plupart du temps, vous utiliserez l'interface visuelle frontale. Le Divi Builder est définitivement unique. Nous ne sommes pas leurs premiers fans pour être honnête, mais nous connaissons énormément de professionnels du web qui apprécient ce builder !
Fondamentalement, au lieu d'un système de sidebar, Divi utilise principalement des pop-ups et boutons flottants. Vous pouvez voir un exemple d'ajout d'un module ci-dessous :
Widgets/Templates inclus |
Options de style |
Comme Beaver Builder, Divi Builder vous permet de styliser des éléments à partir d 'un popup que vous pouvez, si vous le souhaitez, épingler sur le côté.
L 'une des caractéristiques de Divi a toujours été le contrôle maximal du style que le plugin vous donne. A travers trois onglets différents, vous pouvez configurer une variété de paramètres, y compris les contrôles réactifs, l 'espacement personnalisé, et bien plus encore. Vous pouvez même ajouter des CSS personnalisés à l 'élément principal ou avant/après l'élément principal. Les éditeurs CSS incluent même la validation de base et l'auto-complétion ! Et vous pouvez également ouvrir un sélecteur de couleurs directement depuis l 'éditeur :
Dans l'ensemble, Divi Builder repousse vraiment les limites avec ses options de style - c'est
une bonne chose.
Autres caractéristiques notables |
- Test A/B : L'une des meilleures caractéristiques supplémentaires est le système de test A/B intégré de Divi Builder. Aucun autre constructeur de page ne permet de diviser aussi facilement le test dans le noyau.
- Thème Divi : La combinaison du Divi Builder avec le thème Divi vous donne un contrôle total sur l'apparence de votre site.
- Contrôles d'accès des utilisateur : Divi Builder inclut de solides contrôles d'accès basés sur les rôles.
- Contrôles de WordPress Customizer : Vous pouvez personnaliser l'apparence de certains éléments à l'aide du Customizer natif de WordPress.
Désactivation |
L'une des critiques de Divi Builder a toujours été qu'il est basé sur des shortcodes. Cela signifie que si vous le désactivez, il va laisser derrière lui un tas de shortcodes dans votre contenu.
Bien que ce soit un peu déprimant, c'est moins un problème maintenant que des plugins comme "Shortcode Cleaner" existent. Vous perdrez le formatage - comme une balise <h3> - mais vous ne perdrez pas le contenu lui-même.
Elementor
Lancé à l'origine en 2016, Elementor est l'un des plus jeunes constructeurs de pages de cette liste. Mais même s'il a démarré tardivement, Elementor a rapidement accumulé plus d'un million d'installations actives sur WordPress.org, ce qui en fait l'un des constructeurs de pages WordPress les plus populaires.
Sa force vient avant tout de son interface visuelle simple et efficace, des options de style flexibles et d'autres caractéristiques puissantes comme la construction d'un thème complet.
Prix : Version de base gratuite. Elementor Pro est disponible à partir de 49 $ pour une utilisation sur un seul site.
Interface |
L'interface d'Elementor est divisée en deux sections, avec une troisième section pour certains réglages mineurs :
1. C'est l'aperçu en direct de votre design. Il vous donne directement un aperçu de ce que vos visiteurs verront sur le front-end. Vous pouvez également taper du texte directement dans cette interface, ainsi que glisser-déposer divers éléments pour les réarranger.
2. Ceci montre une liste d'éléments que vous pouvez utiliser. Il suffit de les faire glisser. Et lorsque vous sélectionnez un élément ou une section individuelle, c'est ici que vous le styliserez.
3. Ils vous aident à accéder à des prévisualisations réactives, à annuler/rétablir des changements et à d'autres fonctionnalités plus petites.
Widgets/Templates inclus |
Dans la version gratuite, Elementor inclut 28 widgets gratuits. Et vous pouvez également utiliser tous les widgets WordPress de base. La version Pro ajoute 30 widgets en plus, ce qui vous donne un total de 58 widgets dans la version Pro :
La version gratuite est également livrée avec 40 modèles gratuits. Et la version Pro ajoute des centaines de modèles supplémentaires. Les modèles sont disponibles en deux formats :
- Pages - dessins pleine page que vous n'avez qu'à éditer.
- Blocs - sections individuelles que vous pouvez assembler vous-même.
Vous pouvez également enregistrer vos propres sections de pages comme modèles pour les réutiliser plus tard. Vraiment pratique pour gagner du temps lors de la publication et garder une bonne cohérence sur toutes vos pages !
Options de style |
Lorsque vous cliquez sur une section, une colonne ou un widget, Elementor propose trois onglets de style dans la barre latérale gauche.
Les options exactes dépendent de l'élément que vous éditez, mais Elementor offre généralement l'un des ensembles d'options de style les plus complet du marché.
Au-delà des éléments de base comme les couleurs, les arrière-plans et la typographie, vous pouvez également contrôler des paramètres plus avancés comme :
- Marges et alignement.
- Classes CSS personnalisées/IDs. Avec Elementor Pro, vous pouvez ajouter directement des styles CSS à des éléments individuels.
- Contrôles réactifs. Vous pouvez afficher/masquer des éléments sur des appareils spécifiques.
Autres caractéristiques notables |
Ces fonctions sont disponibles dans Elementor Pro :
- Construction d'un thème complet : Vous pouvez utiliser la même interface Elementor pour construire des parties de modèle comme les en-têtes, les pieds de page. Vous pouvez construire votre thème entier avec Elementor.
- Des widgets globaux : Ceux-ci vous permettent de réutiliser un élément commun sur plusieurs pages et d'éditer toutes les instances du widget global en mettant simplement à jour le widget global.
- Intégration poussée : Utilisez les modèles Elementor dans d'autres domaines via des widgets ou des shortcodes.
Désactivation |
Si vous désactivez Elementor, il laisse derrière lui un code propre. Par exemple, si vous aviez un en-tête <h2> avec Elementor, vous aurez toujours un en-tête <h2> après avoir désactivé Elementor, il n'utilisera que le style de votre thème.
Beaver Builder
Beaver Builder a été un pilier dans le marché de la construction de pages depuis un certain temps maintenant. Il produit du code propre (pour un constructeur de page), est populaire auprès des utilisateurs WP, et reçoit des MAJ régulières avec de nouvelles fonctionnalités.
Il y a aussi des add-ons officiels que vous pouvez utiliser avec Beaver pour plus de flexibilité - notamment un thème Beaver Builder optionnel et l'extension Beaver Themer.
Prix : Version gratuite limitée. À partir de 99 $ pour une utilisation sur des sites limités.
Interface |
Beaver Builder offre une interface unique pour son constructeur visuel front-end. Vous faites la plupart de votre travail à partir d'une barre latérale à droite. Mais ces options de la barre latérale n'apparaissent que lorsque vous cliquez sur un bouton dans la barre supérieure, il est donc possible d'afficher un aperçu plein écran à tout moment :
1. Vous cliquez sur ce bouton pour ouvrir la barre latérale.
2. Il s'agit d'un aperçu en direct de votre design.
Beaver Builder a récemment ajouté l'édition de texte en ligne, ce qui signifie que vous pouvez soit taper directement sur la page pour éditer votre texte, soit utiliser le popup qui apparaît :
Utiliser l'édition en ligne avec le popup est un peu gênant, pour être honnête. Mais vous pouvez facilement épingler l'éditeur sur la barre latérale pour corriger cela.
Widgets/Templates inclus |
Dans la version gratuite, Beaver Builder ne vous donne accès qu'à 6 modules, mais vous pouvez aussi utiliser des widgets WordPress standard. La version premium, par contre, vous donne accès à 30 modules. Ces modules sont également modulables, vous pouvez donc les activer ou les désactiver selon vos besoins.
Dans la version premium, vous avez également accès à 56 modèles de page, ainsi que la possibilité d'enregistrer vos propres designs en tant que modèles. Pratique pour gagner du temps et de l'argent !
Options de style |
Pour styliser vos modules et sections, vous pouvez soit :
- Utiliser la fenêtre popup par défaut
- Épinglez la fenêtre sur le côté pour créer une barre latérale.
Les options exactes dépendent du module, mais en général Beaver Builder vous donne un assez bon contrôle sur vos éléments, y compris l'espacement personnalisé et les contrôles réactifs.
Beaver Builder offre également une fonction unique qui vous permet d'afficher ou de masquer des modules individuels selon que l'utilisateur est connecté ou non. Super pratique si vous êtes plusieurs à travailler sur le même projet !
Autres caractéristiques notables |
- Beaver Themer : Bien qu'il s'agisse d'une extension séparée, elle ajoute une fonctionnalité complète de construction de thèmes comme Elementor.
- White Label : Vous pouvez facilement customiser Beaver Builder si vous l'utilisez sur les sites de vos clients.
- Thème Beaver Builder : Ce thème optionnel vous donne encore plus de contrôle sur l'apparence de votre site Web.
Bien que les caractéristiques uniques soient excellentes, nous enlevons 1 point parce que vous devez payer plus pour les obtenir !
Désactivation |
Comme Elementor, Beaver Builder laisse derrière lui un code 100% propre avec le bon formatage HTML.
Thrive Architect
Thrive Architect est la version remaniée de ce qui était autrefois connu sous le nom de Thrive Content Builder par Thrive Themes. La nouvelle interface présente de nombreuses similitudes avec l'interface d'Elementor.
Bien que n'importe qui puisse l'utiliser, il est particulièrement populaire auprès des blogueurs et des spécialistes du marketing d'affiliation en raison de la priorité donnée aux éléments influençant le taux de conversion. C'est le content builder que nous utilisons pour opportunites-digitales.com et nous le trouvons vraiment très fonctionnel ! C'est l'éditeur "drag and drop" par excellence pour WordPress selon nous.
Prix : À partir de 67$
Interface |
Comme annoncé plus haut, vous trouverez des similitudes entre l'interface de Thrive Architect et d'Elementor.
Les similitudes :
1. Aperçu en direct de votre design. Vous donne un aperçu direct de ce que vos visiteurs verront sur le front-end. Vous pouvez également taper du texte directement dans cette interface, ainsi qu'utiliser le glisser-déposer pour réarranger divers éléments sur vos pages.
2. Liste d'éléments que vous pouvez utiliser. Il suffit de les faire glisser. Lorsque vous sélectionnez un élément ou une section individuelle, c'est ici que vous le styliserez.
3. Le plugin vous aide à accéder à des prévisualisations réactives, à annuler/rétablir des changements et à d'autres fonctionnalités mineures.
Une option unique ici est le sélecteur de fil d'Ariane lorsque vous cliquez sur un élément imbriqué. Cette fonction est très pratique lorsque vous voulez sauter rapidement entre un élément et une section :
Thrive Architect offre également une véritable option d'édition de texte en ligne. En fait, Thrive Architect possède la fonctionnalité d'édition en ligne la plus simple de tous les constructeurs de pages, selon nous.
Widgets/Templates inclus |
Thrive Architect offre 40 widgets différents, y compris des widgets vraiment soignés comme un compte à rebours permettant de créer une sensation d'urgence auprès de vos lecteurs.
Thrive Architect comprend également des centaines de modèles divisés en 36 sets de thèmes. Et vous pouvez également enregistrer vos propres designs en tant que modèle.
Options de style |
Thrive Architect rompt avec Elementor dans la façon dont il gère le style. Plutôt que de vous donner des onglets différents, Thrive Architect inclut tout dans une seule colonne.
Les options de style sont assez détaillées et comprennent des commandes réactives et un espacement personnalisé.
Vous pouvez également ajouter votre propre CSS personnalisé au niveau de la page. Pour les éléments individuels, vous ne pouvez affecter que des classes CSS ou des ID. Un éditeur de code html est par ailleurs disponible dans les options.
Autres caractéristiques notables |
L'une des fonctions les plus intéressantes est l'option de configuration des événements de page. Celles-ci vous permettent d'afficher une fenêtre contextuelle basée sur certains paramètres :
Nous aimons beaucoup la façon dont il s'intègre avec les autres produits de l'écosystème Thrive Themes. Par exemple :
- Si vous utilisez Thrive Optimize, vous pouvez exécuter des tests A/B en utilisant Thrive Architect.
- Si vous utilisez Thrive Leads, vous pouvez facilement intégrer les opt-ins détaillés de Thrive Leads depuis Thrive Architect.
Désactivation |
Thrive Architect laisse derrière lui un code 100% propre comme Elementor et Beaver Builder. Le plugin ajoute pas mal de code a votre html ce qui peut donner l'impression d'un code gonflé mais celui-ci ne pose aucun problème avec Google d'après notre expérience !
SiteOrigin
SiteOrigin Page Builder existe depuis de nombreuses années. Le plugin a réussi à collecter plus d'un million d'installations actives sur WordPress.org, ce qui en fait le plugin de création de pages le plus populaire dans ce domaine.
Bien que SiteOrigin soit un peu plus léger que la plupart des autres options de cette liste, il offre d'excellentes performances et des tonnes de contrôles CSS utiles.
Prix : Gratuit. SiteOrigin Premium à partir de $29.
Interface |
SiteOrigin a deux interfaces que vous pouvez utiliser pour construire votre design.
Vous avez l'éditeur backend d'origine :
Vous pouvez glisser-déposer des blocs ou cliquer sur un bloc spécifique pour l'éditer. Cet éditeur vous donne le plus d'espace pour travailler, mais il lui manque tout type de prévisualisation en direct. Si vous voulez cet aperçu en direct, SiteOrigin Page Builder a ajouté un mode éditeur en direct sur le front-end :
Ce n'est pas la même option que les autres constructeurs de pages de cette liste parce que vous ne pouvez pas faire glisser et déposer les éléments sur l'aperçu en direct. Mais c'est aussi plus qu'un simple aperçu de votre design car il y a une certaine interactivité entre les options à gauche et l'aperçu en direct. Par exemple, vous pouvez survoler une case sur l'aperçu en direct et la case correspondante dans la barre latérale affichera également une surbrillance. Vous pouvez également cliquer sur un élément dans l'aperçu en direct pour ouvrir ses paramètres.
Widgets/Templates inclus |
Au-delà des widgets WordPress de base, SiteOrigin offre également un plugin gratuit Widgets Bundle qui ajoute un ensemble modulaire de 23 widgets que vous pouvez utiliser. Il inclut également 25 modèles préconstruits que vous pouvez utiliser, bien qu'ils soient assez nus en comparaison avec ce que proposent d'autres constructeurs de pages. Vous ne pouvez pas enregistrer vos designs sous forme de modèles, mais vous pouvez facilement cloner des pages existantes, ce qui vous permet d'obtenir des fonctionnalités similaires.
Options de style |
Les options de style de SiteOrigin vont être décevantes par rapport aux autres constructeurs de pages si vous ne connaissez pas CSS. Mais si vous êtes à l'aise avec votre propre CSS, elles sont en fait très utiles. En plus d'ajouter des classes et ID CSS, vous pouvez aussi ajouter directement du CSS à des éléments individuels, y compris une section pour les CSS pour mobile seulement :
Vous obtenez également beaucoup d'options de style non-CSS - tout simplement pas autant que les autres plugins. Si vous êtes un développeur qui prévoit d'utiliser votre propre CSS, vous pourriez probablement donner au plugin un 4 ou 5 dans cette catégorie.
Autres caractéristiques notables |
SiteOrgin est assez léger, mais vous obtenez un constructeur de base de type personnalisé dans le pack SiteOrigin Premium.
Désactivation |
SiteOrigin Page Builder laisse derrière lui un mélange de HTML propre et de shortcodes. C'est-à-dire que certains widgets - comme l'éditeur de texte - laissent derrière eux un HTML propre, tandis que d'autres - comme le widget de bouton - laissent derrière eux des shortcodes.
WPBakery
WPBakery Page Builder, anciennement connu sous le nom de Visual Composer, est un autre constructeur de page premium massivement populaire. Une grande partie de cette popularité vient du fait que WPBakery est associé à ce qui semble être 99% des thèmes de ThemeForest. Mais le fait est qu'il est utilisé sur un grand nombre de sites. Il s'agit probablement selon nous du plugin de construction de page WordPress le plus complet et ayant la plus grosse courbe d'apprentissage !
Prix : $46
Interface |
Comme Divi Builder, WPBakery Page Builder vous donne à la fois l'édition visuelle back et front-end.
Vous pouvez utiliser l'interface back-end si vous le souhaitez :
Mais je pense que la plupart des gens travailleront plus sur le front-end, qui ressemble à ceci :
Vous insérez de nouveaux éléments et les stylisez à l'aide de popups - il n'y a pas de zone de barre latérale, comme sur d'autres plugins. Nous ne sommes pas les plus grands fans de cette approche, mais certaines personnes apprécient cette fonctionnalité car vous n'avez ici pas de pop-ups ouvertent ce qui offre un excellent niveau de visualisation en direct.
Widgets/Templates inclus |
WPBakery offre 39 éléments, plus tous les widgets WordPress normaux. Vous obtenez également 86 modèles. Certains modèles sont des pages entières, tandis que d'autres ne sont que des sections.
Options de style |
Comparé à quelque chose comme Elementor ou Divi Builder, les options de style de WPBakery sont un peu limitées.
Vous avez un bon contrôle sur vos lignes :
Mais les options de style pour les éléments individuels sont un peu plus limitées.
Si vous voulez utiliser votre propre CSS, vous pouvez ajouter une classe ou un ID CSS personnalisé à des éléments individuels, ou vous pouvez ajouter des styles réels au niveau de la page :
Autres caractéristiques notables |
Il semble que WPBakery Page Builder n'ai pas de caractéristiques uniques particulièrement remarquables. Mais ce qu'il offre, c'est une communauté impressionnates d'addons tierces.
Alors que beaucoup d'autres constructeurs de pages ont des add-ons tiers, WPBakery est unique dans ce domaine, offrant plus de 250 add-ons !
Désactivation |
Comme Divi Builder, WPBakery Page Builder laisse un tas de shortcodes dans votre contenu si vous le désactivez.
Themify Builder
Themify Builder est, sans surprise, le constructeur de pages de Themify qui fournit des thèmes premiums WordPress. Themify l'associe à un grand nombre de leurs thèmes pour offrir aux clients des options de personnalisation simples et fonctionnelles. Mais vous pouvez aussi l'acheter comme plugin autonome et l'utiliser avec n'importe quel thème.
Prix : Version de base. Pro à partir de 39$ ou 59$ (selon les add-ons)
Interface |
Comme Divi Builder et WPBakery Page Builder, Themify Builder vous permet de construire vos conceptions en utilisant à la fois les interfaces back et front-end.
L'interface du back-end ressemble à ceci :
Mais encore une fois, la plupart des gens voudront probablement utiliser l'interface front-end, qui fonctionne ainsi :
1. Elle vous permet d'insérer de nouveaux modules (de 2 façons différentes)
2. Prévisualisation en direct
3. Prévisualisations réactives, annulation/rétablissement et autres paramètres.
Il n'y a pas d'édition en ligne ici - vous devrez éditer votre texte dans une fenêtre popup :
Widgets/Templates inclus |
Themify Builder offre 21 modules, ainsi que tous les widgets WordPress normaux. Vous obtenez également 143 modèles de page, ainsi qu'un plus petit nombre de lignes, qui sont essentiellement des sections pré-construites.
Options de style |
Si vous cliquez sur un élément, vous obtiendrez quatre onglets différents pour vous aider à le styliser :
- Contenu
- Style (illustré ci-dessous)
- Visibilité (vous permet de masquer un élément sur certains appareils)
- Animation
Autres caractéristiques notables |
Une chose intéressante à propos de Themify Builder est qu'il vous permet toujours d'utiliser l'éditeur WordPress ordinaire, alors que d'autres constructeurs de pages vous obligent à utiliser l'interface du constructeur de pages pour tout.
Le contenu de Themify Builder est mis en avant dans l'éditeur WordPress afin que vous puissiez placer le contenu autour de celui-ci :
Désactivation |
Themify Builder s'est considérablement amélioré en ce qui concerne le code et l'aspect désactivation. Maintenant, si vous le désactivez, il laisse votre contenu relativement propre avec du code HTML.
Quel est le meilleur constructeur de pages WordPress en 2019 ?
Lequel de ces constructeurs de pages devriez-vous choisir ? Voici comment les scores s'accumulent :
Site Builder | Total | Interface | Widget | Style | Autres | Désactivation |
|---|---|---|---|---|---|---|
22 | 4 | 5 | 5 | 5 | 3 | |
25 | 5 | 5 | 5 | 5 | 5 | |
24 | 5 | 5 | 5 | 4 | 5 | |
22 | 5 | 4 | 5 | 3 | 5 | |
14 | 3 | 2 | 3 | 2 | 4 | |
15 | 3 | 3 | 3 | 3 | 3 | |
18 | 3 | 3 | 4 | 3 | 5 |
Le gagnant est clairement Elementor ici qui se distingue de part ses fonctionnalités et son interface en drag and drop.
Chez Opportunités Digitales, nous apprécions particulièrement Thrive Architect que nous utilisons pour créer nos pages et pour gagner du temps.
Le meilleur Page Builder pour WordPress sera avant tout celui qui convient le mieux à votre type d'utilisation ! Certains de ces plugins sont testables via une version gratuite, donc un conseil ne vous faites pas prier pour les essayer avant de faire votre choix.
