Les page builder ont tout simplement révolutionné la création de sites internet. Ouais carrément. Avant, pour créer un site web, il fallait être un geek ultime OU avoir eu la possibilité d’apprendre le code.
Aujourd’hui les sites internet sont devenus quasiment obligatoires. Tout le monde, y compris les travailleurs indépendants et les artistes, a besoin (/envie) d’avoir son propre site internet. Et il est même assez courant de le concevoir soi-même. En plus, tout le monde a pris l’habitude de chercher soi-même les infos sur internet pour apprendre de nouvelles choses et acquérir de nouvelles compétences.
Et ça c’est uniquement grâce aux CMS comme WordPress et aux Page Builder comme Divi, Showit ou Squarespace.
Ils sont vraiment conçus pour être accessibles aux débutants, et on trouve beaucoup de documentation en accès libre sur internet.
Sur le même thème :
Choisir une plateforme pour créer un site internet de photographe
Créer un site internet avec Divi et WordPress – les étapes
Comment créer un site internet avec Showit ?
**Cet article traite de plusieurs produits et logiciels, et il contient des liens affiliés.
Il s’agit de 2 logiciels que j’utilise dans le cadre de mon travail, et donc (forcément) que j’apprécie : Divi et Showit**
À quoi sert un page builder ?
La définition d’un page builder n’est pas très compliquée. Pas besoin d’être super bilingue pour comprendre : ce sont des constructeurs de page. Qui servent… à construire des pages d’un site internet.
Pas à ajouter des pages, mais vraiment à construire leur contenu, les textes, les liens, les carousels, les formulaires, les barres latérales, tout.
Avant pour créer un site internet il n’y avait qu’une façon de faire : avec du html. Et on codait chaque page à la main. Sur un logiciel dédié, on écrivait nos paragraphes, des listes à puces, on insérait des liens vers d’autres pages web, etc. Puis on envoyait tout sur un serveur.
Sur le même thème :
7 règles basiques de code HTML à connaitre
On pouvait aussi ajouter du CSS si on était un peu un artiste et qu’on aimait choisir les couleurs de ses textes ou aligner les images.
C’était… un peu complexe (mais pas tant que ça finalement, c’était brut donc il n’y avait rien de très très poussé). Et surtout, c’était loin d’accessible à tout le monde. Il fallait avoir un ordinateur (bon ok aujourd’hui aussi), avoir du temps pour apprendre à coder, et encore plus de temps pour bosser sur son site.
Aujourd’hui, on a des page builders, ce qu’on pourrait aussi appeler des plateformes de création de site web.
Là c’est une autre histoire : ce sont des logiciels qui sont conçus pour les débutants. Ils rendent la création de sites web accessible à tous.
Aujourd’hui on a plutôt 2 façons de faire :
- soit vous codez le site à la main. Mais pas à l’ancienne. Pour ça aussi, on a aujourd’hui des outils qui simplifient le travail.
- soit vous utilisez un page builder qui va vous aider à faire un site web conforme à vos rêves
La page builder va vous servir à concevoir tout le design de vos pages.
Là où vous voudrez mettre des images, des textes ou des boutons, vous pourrez faire glisser le module correspondant, choisir sa couleur et sa taille, jusqu’au résultat parfait.
Des exemples de pages builder
Un page builder, comment ça marche ?
Tous les page builder fonctionnent à peu près sur le même principe, même si chacun a ses spécialités. Et ses petits défauts.
Installer un Page Builder
Un page builder pour WordPress :
Certains Page Builder sont conçus pour travailler en complément de WordPress. Dans ce cas il faut installer WordPress, qui est gratuit (cette option est souvent proposée en un clic par votre hébergement).
Et dans un second temps, il faudra installer le Page Builder sur ce site WordPress. C’est le cas de Divi.
Divi est un thème, donc il s’installe dans le menu des thèmes du tableau de bord.
Une plateforme de création de site web :
D’autres ont leur propre système et sont dans ce cas des CMS à part entière. Vous concevez tout le site sur la plateforme et vous n’avez pas forcément besoin d’avoir votre propre hébergement. Ces sites sont auto-hébergés : le contenu de votre site ET le logiciel sont sur les serveurs de l’entreprise chez qui vous avez souscrit ce service.
Le fonctionnement
Les page builders fonctionnent avec un système de glisser-déposer (drag & drop). Et avec des blocs ou des modules que vous pouvez placer sur votre page.
Ils organisent généralement le contenu des pages en lignes et en colonnes. Parce que c’est le fonctionnement classique de l’affichage d’une page web.
Quant à Showit, il se démarque par sa grande flexibilité. La page ne contient (en apparence) aucune structure. Vous êtes libre de déplacer chaque élément n’importe où sur la page.
Donc généralement ça fonctionne comme ça :
- 1- Vous ajoutez une première section, qui prend toute la largeur de la page.
- 2- À l’intérieur de celle-ci, vous mettez une ligne. Cette ligne peut avoir plusieurs colonnes, plus ou moins larges.
- 3- Dans chaque colonne, vous ajoutez vos modules : textes, boutons, images, etc. La liste des modules est très longue.
Ainsi de suite jusqu’en bas de page.
Pour ne pas vous perdre, ni partir à l’aveugle, le mieux est d’avoir préparé une maquette qui vous servira de base travail :
Télécharger la maquette – Template Canva
Vous pouvez aussi partir d’un modèle.
En savoir plus sur les modèles Divi - 4- Si vous voulez, vous pouvez faire glisser les modules dans une autre ligne ou à coté d’un autre élément. Vous pouvez aussi déplacer les lignes et les sections pour obtenir une version différente.
- 5- Vous pouvez (avec certains logiciels) passer à la version mobile :
Créer la version mobile de son site internet avec Divi
Comment créer un site web adapté aux mobiles avec Showit
Voilà pour la définition d’un page builder.
De plus, dans la plupart des cas, des fonctions supplémentaires sont incluses pour vous faciliter encore plus le travail :
Enregistrer des modules
Vous pouvez enregistrer une partie de votre site (comme une section ou un bouton) et le réutiliser sur d’autres pages.
Un module global va être identique sur tout le site. Ce n’est pas juste une copie, c’est vraiment le même, qui s’affiche sur plusieurs pages. Donc si vous changez un détail sur une page, le même changement va s’appliquer sur tout le reste du site.
Exemple :
Vous avez un paragraphe qui incite à vous contacter, avec un bouton qui ouvre l’application mail. Vous en faites un module global, et vous le placez sur 3 pages distinctes : sur la page d’accueil, sur celle des services, et sur la page contact.
Si vous changez d’adresse mail, vous n’avez pas besoin d’aller modifier le lien du bouton partout. Vous modifiez le bouton un fois avec la nouvelle adresse, et le changement se répercute partout où ce module est utilisé.
Des changements plus chronophages, comme le style peuvent aussi être organisés de manière globale pour gagner du temps.
Vous pouvez ainsi vous construire une petite bibliothèque. Au fil de vos besoins pendant la construction du site, vous allez pouvoir piocher dans tous les « morceaux de site » que vous avez en stock, pour les réutiliser en un clic quand vous construisez de nouvelles pages.
Les Theme Builders
Ça porte parfois différents noms, mais les pages builder permettent de gérer l’apparence globale de tout le site. Et pas seulement page par page.
Certains éléments d’un site peuvent s’appliquer au niveau global. Par exemple vous pouvez décider définir la police de TOUT le site et régler ça dans un menu unique.
Vous pouvez évidemment créer un menu et aussi un pied de page qui seront identiques sur chaque page.
Pour aller plus loin, les page builder basés sur WordPress utilisent le cœur du système et modifient son apparence. Y compris pour les modèles de publications. Vous pouvez donc créer des modèles pour les articles, pour les produits, etc. Et ils s’appliqueront à tous les articles que vous publierez à l’avenir ou à tous les produits d’une boutique en ligne.
On peut appeler cette fonction « constructeur de thème » (theme builder).
Créer son site plus rapidement avec un page builder grâce à des modèles
L’un des plus grands avantages de Divi et des autres constructeurs de page, c’ est leur système de modèles, quasiment proposé par toutes les plateformes.
Vous avez accès à un catalogue de sites conçus par des designers, qui peuvent vous servir de base de travail. Ce qui évite l’angoisse de la page blanche au moment de s’attaquer au design de son site. Vous pouvez aussi acheter séparément des modèles premium plus originaux.
Divi propose par exemple presque 300 packs de modèles appelés Layouts (donc plus de 2000 pages individuelles) , que vous pouvez importer et personnaliser à volonté. Au moment de créer une nouvelle page, il suffit de choisir l’option « Choisir la mise en page » qui ouvre directement le catalogue de modèles. Vous pouvez ensuite filtrer par catégorie.
Pour en savoir plus :
Utiliser les modèles Divi pour créer un site web plus vite
6 modèles Divi pour créer son site d’architecte d’intérieur avec WordPress
Les modèles Divi peuvent être utilisés de deux façons :
- soit et vous téléchargez un site complet, et il vous servira de base pour le votre. Vous n’aurez plus qu’à modifier chaque module et à y ajouter votre contenu.
- soit vous piochez page par page dans le catalogue. Par exemple si vous avez besoin d’ajouter une page « contact » à votre site Divi, vous pouvez parcourir tous les modèles de page contact et en choisir une pour réutiliser sa structure. Cette manœuvre s’effectue directement depuis le Divi Builder lorsque vous ajoutez la page.
Elementor propose également ce système, et vous pouvez aussi acheter des éléments individuels ou des modèles de sites complets sur des sites spécialisés.
Avec Showit et Squarespace, vous décidez au début d’un modèle à utiliser. La bibliothèque de designs contient de nombreux templates gratuits ou payants, dont les plus premium coutent plusieurs centaines de $.
Une bibliothèque vous permet également de réutiliser certaines parties que vous aimez, où vous voulez sur votre site Showit.
Notez que dans tous les cas, vous pouvez totalement partir d’un site vierge et construire chaque page entièrement sur mesure.
Peut on changer de page builder quand on en a choisi un ?
Non !
Le logiciel écrit du code à votre place pour que votre page s’affiche comme vous voulez.
Mais ce code est propre à chaque système, donc vous ne pouvez pas utiliser un page builder pour modifier une page construite avec un autre.
Ils ne sont pas compatibles entre eux, Vous devriez donc en choisir un, et apprendre à utiliser toutes ses fonctionnalités au maximum de leur potentiel.
De toute façon, il n’y a pas vraiment de mauvais choix. Tous ces produits sont payants, donc ils sont quand même conçus pour ne pas décevoir leurs clients.
Choisir c’est renoncer, mais même les designers ont un outil de prédilection sur lequel ils sont spécialisés.
Quels sont les avantages d’un page builder ?
Les pages builders ne servent pas qu’à construire un site internet rapidement. Ils ont bien d’autres avantages qui les ont rendu si populaires :
- Ils remplacent des plugins. Les page builders embarquent beaucoup de fonctionnalités de manière native. Ils vous dispensent donc de l’installation de nombreuses extensions sur votre site. Par exemple pour construire des formulaires ou des popups, ils ont généralement un module natif.
- Ils permettent de personnaliser facilement l’apparence sur mobile, et certains gèrent cet aspect de manière (partiellement) automatique.
Sur le même thème :
Créer la version mobile de son site internet avec Divi
Comment créer un site web adapté aux mobiles avec Showit
- 3- Un joli site au design original est accessible à tous. Un page builder permet de faire des choses très poussées au niveau design sans utiliser de code : des effets au survol de la souris, des ombres, des animations, etc.
Du CSS pourra vous aider à faire des choses très personnalisées et uniques, mais les options de base incluses dans l’éditeur sont amplement suffisant dans la plupart des cas. - 4- Ils offrent un aperçu en temps réel des changements. Vous éditez votre site en direct, sur le système du WYSIWYG : « What you see is what you get ». (À peu près : « ce que vous voyez = ce que vous avez« ). À chaque fois que vous ajoutez un élément, déplacez un bouton, changez une couleur, vous voyez directement le résultat. Vous travaillez donc de manière plus fluide et c’est beaucoup plus convivial.
- 5- Ces produits sont très populaires. Vous pourrez donc trouver beaucoup de documentation sur les sites officiels des concepteurs, ou même dans des groupes Facebook. Chacun offre un service d’assistance réactif qui pourra vous aider en cas de problème.
WordPress est-il un page builder ?
Non, WordPress est une sorte de coquille vide dont vous pouvez faire tout ce que vous voulez. Vous pouvez donc ajouter un page builder à WordPress pour construire plus facilement le design des pages.
Par contre, beaucoup de Page Builder sont en effet basés sur WordPress. Puisque c’est le système le plus répandu depuis des dizaines d’années.
Vous aurez donc accès au tableau de bord de WordPress pour gérer la rédaction des articles ou l’ajout de produits.
Certaines plateformes ont leur propre système, comme Squarespace ou Wix. Ce sont donc des plateformes de création de site, ou des CMS, plus que des constructeurs de pages. Ceux-ci peuvent offrir des prestations tout compris, avec l’hébergement, le nom de domaine ou même la conception d’un logo.
Il existe aussi des pages builder qui s’utilisent avec d’autres outils, comme Elementor pour Prestashop, qui permet de concevoir de jolis designs pour des boutiques en ligdne Prestashop.
Sur le même thème :
Comment utiliser WordPress? Le tableau de bord pour les débutants
Quelle est la différence entre WordPress.org et WordPress.com ?
Quel est le meilleur page builder ?
En fait ça n’a pas beaucoup d’importance. Utilisez ce qui vous parait le plus simple, sans fonctionnalités inutiles et qui correspond à votre budget.
Beaucoup de page builder sont faits pour les webdesigners ou les développeurs, vous n’avez pas forcément besoin de tout ça.
Lorsque j’utilise des page builder, j’utilise Divi ou Showit, qui sont combinés à WordPress. Mais peut être qu’un autre système sera plus facile à utiliser pour vous. Ou proposera des fonctionnalités dont vous avez vraiment besoin.
Chaque outil nécessite un petit temps d’apprentissage.
Donc mieux vaut faire un essai, et se renseigner en suivant les tutoriels présents sur le site de chacun.
Avec Divi, vous avez par exemple une page de tests qui vous permet de vous faire une idée :
Page de démonstration de Divi. (Ou ici)
Celle-ci vous permet de tester l’éditeur gratuitement : vous pouvez tout modifier, et elle contient la plupart des modules disponibles. Vous pouvez tous les déplacer, et essayer leurs réglages. Si vous rafraichissez la page, elle se remet à zéro et vous pouvez recommencer.
Pour vous faire une idée, beaucoup de plateformes offrent aussi un essai gratuit, de 15 jours ou 1 mois.
Le page builder est l’outil qui a permis à chacun de créer son propre site internet.
Comparer les produits, les offres et les prix peut être un peu fastidieux. Mais lorsque vous aurez trouvé l’outil parfait, vous devriez pouvoir concevoir le site de vos rêves assez facilement.
Si vous avez besoin d’aide au cours de cette mission, vous pouvez réserver une journée VIP avec moi : une journée où je travaille exclusivement sur votre site, pour vous aider à avancer dans votre to-do-list.
