Page Builder de SiteOrigin : ce constructeur de page gratuit vaut-il le coup ?

Une série d’hallucinations. Voilà ce que j’ai cru vivre en entamant mes recherches sur le Page Builder de Site Origin.

Pour commencer, Google m’a renvoyé des résultats concernant une plateforme de jeux vidéos (Origin) proche de ma requête de base. Ça reste un robot, alors je lui pardonne. 

D’autant que j’ai pu redécouvrir avec délectation que Les Sims et Command & Conquer existaient toujours.

Deuxième hallucination sur le répertoire officiel des extensions WordPress. Là-dessus, je me rends compte qu’avec Elementor, Page Builder est le seul constructeur de page à cumuler au moins 1 million d’installations actives ! Ca commence à faire beaucoup, et  personne ne m’a tenu au courant. Snif.

Troisième hallucination : Page Builder se présente comme étant totalement gratuit. Oui, vous avez bien lu. Gratos de chez gratos.

Qui est donc ce spécimen rare dont on entend finalement peu parler, malgré sa popularité ? Que se cache-t-il sous son capot ? Vaut-il la peine d’être adopté pour créer des pages aux petits oignons sur votre site ?

C’est ce que vous allez découvrir dans ce nouvel article.

Page Builder par SiteOrigin, qu’est-ce que c’est ?

Présentation de la maison SiteOrigin

Au-delà du nom générique que l’on associe parfois à son constructeur de page, SiteOrigin est avant tout “un petit studio de création de thèmes et de plugins WordPress qui travaille dur”, comme le précise la page A Propos du site officiel. 

Basé au Cap, en Afrique du Sud, ce studio a été lancé par le dénommé Greg Priday en 2011. Il se spécialise dans la création de thèmes et de plugins.

Arrêtons-nous précisément sur les plugins. Pour commencer, on retrouve notre sujet d’étude du jour : SiteOrigin Page Builder, le constructeur de pages maison de Site Origin.

Mais il n’est pas tout seul et un petit brief ne sera pas de trop pour bien comprendre la suite des opérations. Page Builder cohabite avec 4 autres extensions qui lui sont associées, de près ou de loin :

• SiteOrigin Widgets Bundle (gratuit), qui propose des widgets à utiliser avec Page Builder, ou dans vos zones de widgets (plus d’1 million d’installations actives).
• SiteOrigin CSS (gratuit) : un éditeur CSS en temps réel (200 000 installations actives). Pour rappel, le langage CSS permet de personnaliser l’apparence visuelle de vos contenus. 
• SiteOrigin Installer (gratuit) : cette extension installe notamment tous les plugins de SiteOrigin sur votre site WordPress.
• SiteOrigin Premium (payant) : une collection d’addons qui ajoute des options de personnalisation supplémentaires au Page Builder et à ses widgets. Cette extension est disponible à partir de 29$/an pour une utilisation sur 1 site.

En résumé, SiteOrigin a bâti un petit écosystème au centre duquel gravite Page Builder.

Page Builder, un constructeur de page 100% gratuit

En parlant de popularité, vous savez depuis l’introduction que Page Builder par SiteOrigin n’a rien d’un inconnu.

Au compteur du répertoire officiel WordPress, on relève plus d’1 million d’installations actives pour cette extension. Un chiffre qui commence à peser, surtout si on le compare à la concurrence.

Page Builder fait mieux dans ce domaine que certains constructeurs de page ayant pignon sur rue : 

• Beaver Builder (300 000+ installations actives)
• Visual Composer (80 000+ installations actives)
• Brizy (60 000+ installations actives)

Finalement, sur le répertoire officiel, seul l’intouchable Elementor devance Page Builder by SiteOrigin en termes d’installations actives (5 millions contre 1 million).

Comment expliquer le succès de Page Builder ? Pour commencer, il est dans le circuit depuis quelques années déjà. C’est d’ailleurs un des premiers constructeurs de page à s’être lancé sur le marché. Avec le temps, il a appris à se faire connaître.

Ensuite, la qualité du plugin semble être un deuxième élément de réponse. Page Builder est très bien noté par ses utilisateurs (4,8/5 étoiles sur près de 1 000 avis donnés).

Ses détracteurs se comptent sur les doigts d’une main. J’ai surtout trouvé des gens qui lui veulent beaucoup de bien et détachent sa “simplicité”, sa “facilité d’utilisation”, ou encore la grande qualité du support (assistance).

Page Builder possède par ailleurs la plupart des caractéristiques de tout bon constructeur de page qui se respecte : 

• Il s’utilise sans avoir besoin de coder.
• Il dispose d’une fonctionnalité drag and drop (glisser-déposer) pour déplacer vos éléments au sein de votre contenu.
• Vos changements sont visibles en temps réel.
• Il est flexible et personnalisable : grâce notamment à l’extension SiteOrigin Widgets Bundle, vous avez à disposition encore plus d’éléments pour “customiser” votre contenu.

Enfin, je vous rappelle que l’extension présente la particularité (rare) d’être totalement gratuite, ce qui reste un atout séduction considérable pour un utilisateur. 

Après ces présentations, je vous propose de découvrir comment fonctionne Page Builder par Site Origin. Est-il vraiment simple à utiliser ? Réponse dans la partie suivante.

La prise en main de Page Builder : est-il simple à utiliser ?

Premières impressions après l’installation

Je ne vais pas m’épancher sur le processus d’installation ici. Si vous avez besoin d’un coup de main là-dessus, je vous recommande la lecture de cet article d’Alex : Comment installer un plugin dans les règles de l’art.

En revanche, je vous donne un petit conseil si vous comptez installer Page Builder depuis votre administration WordPress. Dans la barre de recherche, tapez bien “siteorigin” en un seul mot pour tomber sur l’extension.

Si vous entrez la requête de façon séparée (site origin), vous ne tomberez pas sur la bonne extension.

Mais vous allez voir, no stress : installer WP Page Builder, c’est facile.

Une fois l’extension activée, vous retrouverez ses options via un lien Page Builder disponible dans le menu Réglages.

L’interface comporte 5 onglets (Général, Widgets, Disposition, Contenu, Welcome) pour vous permettre d’effectuer certains réglages de base comme : 

• La possibilité d’afficher les widgets recommandés
• Le choix des types de contenus (articles ou pages) sur lesquels activer Page Builder.
• Régler le responsive
• Choisir l’espacement par défaut entre les colonnes des widgets

Voici mes premières impressions après avoir activé le plugin. Pour commencer, les réglages sont assez peu nombreux ce qui comporte un avantage : ne pas se perdre au beau milieu d’une usine à gaz.

L’interface d’administration de Page Builder n’est que partiellement traduite en français. De façon globale, on parvient à s’y retrouver, même si certains termes sont assez incompréhensibles (ex : Sidebars Emulator ou Paquets de widgets hérités).

Concernant la traduction, vous pouvez pallier ce problème en utilisant : 

• L’extension Loco Translate
• Une traduction tout prête de chez Wp Trads

Enfin, j’ai trouvé l’administration du plugin assez austère et tristounette. Un peu de couleur aurait amené de la vitalité, comme on peut le voir chez d’autres constructeurs comme Divi ou Elementor.

En revanche, on note un point positif : l’extension utilise les outils que WordPress met à disposition pour la page de réglages, plutôt que de nous pondre une interface maison sans queue ni tête. Ça, c’est bien.

Structure du constructeur de page

Passée cette phase de découverte, mettons les mains dans le cambouis en découvrant comment fonctionne Page Builder. 

Son principal point différenciant “technique” par rapport à la concurrence réside dans le fait qu’il utilise les widgets pour personnaliser vos contenus. Ceux que vous connaissez déjà de base sur WordPress, bien sûr, mais aussi ses propres widgets maison. 

Pour info, un widget est un encart que vous pouvez placer à divers endroits de votre site (ex : dans votre barre latérale).

Pour voir comment ce système fonctionne de l’intérieur, on va créer une page ensemble. Première remarque, Page Builder est configuré par défaut pour fonctionner avec l’ancien éditeur de WordPress (TinyMCE).

Pour les besoins de ce test, on a plutôt commencé par vouloir utiliser Gutenberg, qui est l’éditeur natif de WordPress depuis l’apparition de la version 5.0, fin 2018.

Pour cela, il suffit de décocher la case “Use Classic Editor for New Posts” dans l’onglet Général des réglages de l’extension (pensez à enregistrer vos paramètres à la fin).

Gutenberg fonctionne bien avec Page Builder. Le seul souci, c’est qu’il manque sur son interface deux boutons majeurs (en tout cas, je ne les ai pas trouvés) : 

• Celui pour basculer en mode édition visuelle en temps réel.
• Celui pour activer l’historique de vos modifications, afin de revenir en arrière en cas d’erreur.

Du coup, on est repassé en mode édition classique pour avoir sous la main toutes les fonctionnalités. Pour notre test et la compréhension générale, c’était plus pratique.

Allez, après cette parenthèse, on enchaîne avec la suite. Il faut savoir que Page Builder propose deux éléments de structure fondamentaux : 

• Les rangées (rows, en anglais)
• Les widgets

Les rangées

Les rangées représentent le conteneur de votre page, à l’intérieur duquel vous imbriquerez vos widgets.

Pour commencer la construction de votre page, cliquez sur Ajouter une rangée. Vous pouvez notamment choisir : 

• Le nombre de colonnes à ajouter sur la largeur de votre page (de 1 à 12 colonnes)
• L’espace qu’occupent les colonnes sur la largeur. Il est d’ailleurs possible de redimensionner chaque colonne manuellement, comme vous le verrez ci-dessous.

Terminez en cliquant sur le bouton Insérer pour ajouter votre première rangée.

Les widgets

Ensuite, on passe à la phase de remplissage. Sélectionnez la colonne de votre choix en cliquant dessus, puis choisissez Ajouter un widget.

Par défaut, vous vous retrouverez avec les éléments suivants : 

• Les 12 widgets natifs de base de WordPress (Archives, Articles Récents, Catégories, Calendrier etc.)
• Une dizaine de widgets maison proposés par le Page Builder (ex : ajout d’un bouton, d’un diaporama, d’une vidéo, d’un texte enrichi).

Pour le moment, le choix est assez famélique et on reste clairement sur notre faim. Pour disposer de plus de widgets, Page Builder vous incite à activer son extension SiteOrigin Widgets Bundle.

Je vous recommande de le faire. Grâce à elle, vous aurez accès à 22 widgets supplémentaires, ce qui devient beaucoup plus intéressant. On retrouve d’ailleurs certains incontournables :

• Appel à l’action
• Formulaire de contact
• Google Maps
• Table de prix
• Boutons de médias sociaux
• Témoignages etc.

Le plus ? Vous pouvez activer/désactiver ceux qui vous intéressent afin de ne pas trop ralentir la vitesse de chargement de vos pages.
Ensuite, vous les retrouverez tous dans la section Widgets Bundle quand vous allez ajouter un nouveau widget.

Rangées, widgets : vous savez désormais comment fonctionne l’architecture du Page Builder de Site Origin.

Voyons voir ce qu’il en est concernant deux fonctionnalités majeures de tout bon constructeur de page qui se respecte : 

• Le drag and drop 
• L’édition en front-end

Le drag and drop

Le drag and drop (glisser-déposer) permet de déplacer les éléments présents dans votre contenu où bon vous semble, grâce à un simple mouvement de votre souris.

C’est très pratique et cela fonctionne sans accroc sur Page Builder.

Vous pouvez par exemple changer le positionnement de vos colonnes et widgets selon vos envies, ou encore la largeur de vos colonnes, pour les agrandir et les rétrécir.

Sur le drag and drop, rien à dire : Page Builder fait le boulot. Mon avis est beaucoup plus mitigé en ce qui concerne l’édition en temps réel, qui manque d’intuitivité.

 L’édition en live

Depuis le début de ce tutoriel, vous pouvez constater que toute ma démonstration se déroule en back-office, c’est-à-dire depuis l’interface d’administration de WordPress.

Une question vous taraude peut-être : qu’en est-il de l’édition en front-end (l’interface visible du site), si pratique, et je dirais même indispensable pour un constructeur de page ?

Eh bien Page Builder vous permet d’effectuer vos modifications directement sur votre page, telle qu’elle s’affiche à vos visiteurs… mais avec de sérieuses limitations. 

Pour cela, vous devez basculer en mode Éditeur.

A partir de là, vous retrouverez la barre d’outils du Page Builder sur la gauche, avec la structure de vos colonnes et widgets. Sur la droite de l’écran, vous voyez le rendu visuel de votre page.

Si vous vous amusez à glisser-déposer vos éléments, vous pourrez voir les modifications en temps réel.

Le gros bémol, c’est qu’il est impossible d’éditer directement le contenu en ligne. Par exemple, si je souhaite modifier le titre d’un widget directement sur ma page, Page Builder m’ouvre en surbrillance une fenêtre de réglages – en pleine page, en plus ! – à partir de laquelle je peux modifier le contenu, son apparence etc.

Impossible, aussi, d’utiliser le drag and drop sur le rendu visuel de ma page.

Clairement, cela met un sacré coup de canif à l’expérience utilisateur et à l’intuitivité que l’on est en droit de réclamer d’un page builder. Dommage.

D’autant plus si vous utilisez déjà un autre constructeur de page comme Elementor, Beaver Builder ou Divi. Quand on a connu l’édition en direct, difficile de s’en passer. Jugez plutôt :

Sans transition, on continue notre tour d’horizon des fonctionnalités de Page Builder en s’attaquant à un gros morceau : le design et la personnalisation.

Design et personnalisation

Les layouts de Page Builder

Pour vous faire gagner du temps dans le processus de création de vos contenus, les constructeurs de page ont l’habitude de proposer des mises en page prêtes à l’emploi (layouts ou templates).

Page Builder ne déroge pas à la règle. Le bouton Layouts donne accès à 16 modèles que vous pouvez activer en 1 clic. Ils vous permettront de ne pas partir d’une feuille blanche.

Vous retrouverez des exemples de pages d’accueil, à propos et contact. 

Les modèles sont hyper-minimalistes, à vous ensuite de les personnaliser grâce aux différents widgets proposés.

A titre de comparaison, on est assez loin, en termes de modèles proposés, de ce que propose la concurrence (ex : plus de 300 chez Elementor, plus de 800 chez Divi, plus de 40 chez Brizy).

Par ailleurs, SiteOrigin met aussi à disposition des “packs”, comprenez des modèles de sites entiers (avec plusieurs pages).

Au moment d’écrire ces lignes, on en recensait 16 sur cette page. En revanche, leur processus d’installation n’est pas intégré sur Page Builder.

C’est beaucoup moins pratique, mais vous devez d’abord télécharger le pack qui vous intéresse, puis l’ajouter sur WordPress comme une extension lambda (techniquement, le pack est un plugin).

Par contre, attention : l’installation d’un pack va effacer toutes les données présentes sur votre site. Auparavant, pensez à effectuer une sauvegarde (fichiers + base de données).

J’ai testé l’importation du Pack appelé MyBnB, voici mes remarques : 

• Le processus d’import prend un peu de temps (environ 2 minutes), ce qui est assez logique : SiteOrigin installe et crée en arrière-plan un nouveau site de A à Z.
• Comme je vous l’ai dit, tout mon ancien contenu (textes, pages, thème, extensions) a été remplacé par celui présent dans le pack que je viens d’installer, jusqu’au nom du site. Par exemple, ce pack installe 10 extensions.
• Rien à dire du côté de la création des pages et du contenu. Tout s’est correctement importé.

Au final, c’est plutôt fastidieux et cela demanderait à gagner en simplicité, mais ça fonctionne.

Le gros problème concerne un éventuel retour en arrière, si jamais le pack ne vous convient pas. Vos réglages antérieurs ont disparu. Pour les retrouver, vous devez tout réinstaller à la main (ex : vos extensions), ce qui n’est pas pratique pour deux sous.

Les widgets

Les widgets, je vous en ai déjà un peu parlé auparavant. Ce sont eux qui vous permettent d’ajouter les fonctionnalités de votre choix dans votre contenu. Ils sont donc primordiaux.

Pour tirer profit au maximum de Page Builder, il vous faudra donc installer SiteOrigin Widgets Bundle, qui ajoute 22 widgets supplémentaires au constructeur de page.

Le choix n’est pas démentiel et on reste sur des widgets classiques (ex : diaporama, témoignages, formulaire de contact, tableau de prix, google maps). 

Néanmoins, il est possible de disposer d’options de personnalisation supplémentaires grâce à des extensions proposées par développeurs tiers comme : 

• Livemesh SiteOrigin Widgets
• Ultimate Addons for SiteOrigin
• Tabs Widget for Page Builder

Styliser vos widgets et vos rangées

Une fois que vous avez choisi vos widgets, il ne reste plus qu’à les personnaliser en leur donnant l’apparence que vous souhaitez. 

Pour cela, cliquez sur le widget de votre choix. Une fenêtre en surbrillance va s’ouvrir et les réglages ont lieu à deux endroits.

Sur la gauche, vous pouvez procéder à des réglages de base qui varient en fonction du widget. Par exemple, vous pouvez modifier le texte, l’URL, ou encore les couleurs d’un bouton.

Sur la droite, vous avez accès à des réglages plus fins comme le réglage des marges, l’espacement sur mobile, les couleurs du widget (arrière-plan, police, liens, bordure). Sans oublier la possibilité d’ajouter du code CSS personnalisé.

Vous êtes allé trop vite et souhaitez revenir en arrière ? C’est possible grâce au bouton Historique, qui vous donne accès à tous vos changements et ajouts. 

La personnalisation des rangées et des colonnes fonctionne de la même façon. Cliquez sur l’icône sous forme de clé pour avoir accès aux réglages (modifier, dupliquer ou supprimer une rangée).

Concernant les rangées, notez que l’onglet Disposition permet d’afficher votre contenu en pleine largeur. Une option hyper-pratique, à condition que votre thème le permette.

Enfin, il vous suffit de cliquer sur la colonne de votre choix pour avoir accès à ses réglages.

Aller plus loin dans la personnalisation avec SiteOrigin Premium

Si vous vous sentez encore trop à l’étroit avec les options proposées par Page Builder par SiteOrigin, vous pouvez aussi vous procurer une suite d’add-ons contenus dans SiteOrigin Premium (à partir de 29$ pour une utilisation sur 1 site). Ils vous offriront encore plus d’options de personnalisation.

Cette vingtaine d’add-ons peut être utilisée avec toutes les extensions proposées par SiteOrigin. 

Grosso modo, elles vont vous donner plus de fonctionnalités pour agir sur le style de vos widgets (ex : ajout d’effets parallax, animations sur vos images).

L’un des add-ons qui propose le plus de valeur ajoutée me semble être celui appelé Custom Post Type Builder. C’est d’ailleurs celui-ci que SiteOrigin met en avant.

Il permet de créer vos propres types de contenus personnalisés (custom post types), ce qui est très pratique dans certains cas.

Mais pour ça, il faut avoir un minimum de bagage technique afin de comprendre tous les tenants et aboutissants.

Quelle adaptation aux thèmes et aux plugins ?

Compatibilité avec les thèmes

Page Builder de SiteOrigin est-il compatible avec votre thème favori ? L’entreprise sud-africaine affirme que son constructeur de page s’”intègre à n’importe quel thème”.

Pour les besoins de ce test, je l’ai essayé avec plusieurs d’entre-eux pour me faire une idée (Twenty Twenty, Astra, GeneratePress) et je n’ai rencontré aucun souci.

Quel que soit le thème que vous allez utiliser, je vous conseille de vérifier deux choses : 

• Qu’il puisse s’afficher sur toute la largeur de l’écran, afin de profiter de toute la flexibilité de Page Builder.
• Que son en-tête et son pied de page soient facilement personnalisables, car Page Builder ne permet pas de le faire : ce n’est pas un Theme Builder comme Divi ou Elementor.

De son côté, SiteOrigin vous propose une sélection de 20 thèmes qui se marieront très bien avec le constructeur de pages.

Vous retrouverez d’abord 7 thèmes gratuits maison, assez minimalistes, et particulièrement adaptés aux niches blogging et business (ex : SiteOrigin Unwind ou SiteOrigin Corp).

Par ailleurs, SiteOrigin met aussi en avant 13 thèmes payants (de 58$ à 79$) créés par des boutiques tierces comme ThemeTrust ou Proteus Themes. Ces thèmes ciblent des activités précises (avocats, métiers de la construction, salles de sport, consulting, domaine médical etc.).

Enfin, si vous en voulez encore plus sur les thèmes, n’hésitez pas à consulter nos sélections sur le blog.

Compatibilité avec les plugins

Pour les thèmes, on est bons. Reste un autre gros morceau : les extensions. Pour rappel, une extension permet d’ajouter des fonctionnalités à votre site, sans avoir besoin de coder.

Sur le répertoire officiel WordPress, on dénombre plus de 55 000 plugins. Je ne les ai pas testés un par un pour vérifier leur compatibilité avec Page Builder. 

Ce que je peux vous dire, c’est que le constructeur de Site Origin ne présente pas officiellement d’incompatibilité avec un quelconque plugin. 

Par contre, on peut noter qu’il ne dispose pas de widget dédié à l’un des plus célèbres d’entre-eux : WooCommerce. Même si, pour être précis, SiteOrigin Premium met à disposition un add-on pour créer des templates WooCommerce.

Je chipote un peu ici, car la vocation première de Page Builder n’est pas de vous aider à créer facilement des pages avec WooCommerce. Mais la concurrence (Elementor, Divi) le fait, il est toujours intéressant de le mettre en perspective.

Quelle expérience utilisateur ?

Performance

Vous voulez filer le smile à vos visiteurs et aux moteurs de recherche, Google en particulier (il est utilisé par près de 92% des internautes français) ? Alors proposez-leur un site WordPress qui se charge rapidement.

Du point de vue de l’expérience utilisateur, c’est juste primordial. En tant qu’internaute, vous ne me direz pas le contraire : si vous vous rendez sur un site qui ne s’affiche pas au bout de quelques secondes, vous irez voir ailleurs fissa, n’est-ce pas ?

La vitesse de chargement d’une page est aussi prise en compte par Google. Ce dernier utilise ce critère – parmi environ 200 autres – pour positionner un contenu dans ses résultats de recherche.

En d’autres termes et en grossissant le trait, plus votre page rame, moins vous avez de chances d’être bien positionné. 

Les performances de votre site web peuvent être impactées par plusieurs facteurs comme l’hébergement de votre site, la compression des images, la mise en cache, les extensions installées etc. Mais aussi, par votre constructeur de page.

Pour savoir si Page Builder fait figure de bon élève à ce niveau-là, je lui ai fait passer une batterie de tests, prêt à dégainer ma règle en cas de dérapage.

Pour mener ces tests, je me suis servi de l’outil Pingdom Tools. J’ai utilisé un site hébergé sur un serveur mutualisé d’o2switch avec toutes les extensions désactivées (pour info, il y en avait 30 sur le site de test utilisé). 

J’ai testé la page que j’avais créée avec Page Builder en activant le template appelé Consultant. Puis j’ai désactivé le plugin pour ensuite re-tester cette même page abritant le même contenu.

Au final, voici les résultats : 

Page avec Page Builder par SiteOrigin activé

Page avec Page Builder by SiteOrigin désactivé

Logiquement, la page avec Page Builder désactivé se charge plus rapidement.

Par contre, on peut souligner que même activé, Page Builder a un temps de chargement très performant et qu’il ne surcharge pas trop le poids de la page. Pour un constructeur de page, c’est assez rare pour être souligné.

Les résultats ci-dessus permettent d’avoir un premier aperçu, mais ne peuvent être considérés comme un jugement arrêté et définitif. Vous pourriez avoir des données différentes chez vous, en fonction de votre hébergement, ou encore des plugins que vous utilisez.

Optimisation du SEO

Commençons par une petite piqûre de rappel, qui ne fait jamais de mal. SEO est l’acronyme de Search Engine Optimization. Soit, en français, Optimisation pour les moteurs de recherche.

Optimiser son SEO est primordial pour tenter de truster les meilleures places sur la première page de résultats de Google. Pour cela, vous devrez notamment mettre en place une solide stratégie de contenu, faire la chasse aux backlinks (liens qui pointent vers votre site), mais aussi veiller à l’optimisation technique de votre contenu avec ce que l’on appelle le SEO on-page.

Il s’agit des optimisations que vous pouvez – devez – faire sur vos contenus. Et là-dessus, Page Builder nous intéresse, puisqu’il permet d’agir sur certains éléments, comme les balises hn (les balises titres de type h2, h3, h4 etc.).

Pour les paramétrer, il suffit d’éditer le widget qui vous intéresse et de choisir la balise de votre choix.
Pour cela, le widget SiteOrigin gros titre propose par exemple le réglage Etiquette HTML :

Un bon conseil, vérifiez toutes les balises hn de chaque widget. Une bonne pratique consiste à n’utiliser qu’un titre h1 par page ou par article. Sauf que par défaut, le widget SiteOrigin gros titre est configuré comme un titre h1. Evitez donc d’en utiliser plusieurs dans la même page.

Vous prenez le SEO très au sérieux ? Bien joué, vous avez raison. Dans ce cas, j’espère que vous avez visionné la vidéo d’Alex sur Yoast SEO, l’extension de référencement WordPress la plus populaire. Si non, voici une petite session de rattrapage :

Responsive

Le saviez-vous ? Le smartphone est le premier écran utilisé par les Français pour se connecter à Internet au quotidien.

Par conséquent, votre site WordPress doit avoir un rendu impeccable sur smartphone et, de façon générale, être responsive. Ce terme signifie que l’affichage de votre contenu doit être impeccable sur tous types de support (ordinateur, smartphone, tablette).

Sans compter que “Google utilise principalement la version pour mobile d’un site pour l’indexation et le classement”.

En résumé, vous n’avez pas le choix. Votre site doit être responsive, point barre. Première bonne nouvelle pour vous : les mises en page que vous allez créer avec Page Builder sont responsive par défaut. Vous pouvez redimensionner votre navigateur pour en avoir un premier aperçu.  

Astuce : Le test d’optimisation mobile de Google permet également de savoir si votre page est adaptée au mobile.

Le constructeur de page de Site Origin vous laisse aussi la main sur des réglages techniques un peu plus avancés :

• Vous pouvez avoir un aperçu de l’affichage en temps réel depuis l’éditeur en cliquant sur l’une des 3 icônes.

• Vous pouvez modifier les styles de vos rangées (marges, espacements) grâce à l’option Mobile layout présente dans les réglages d’une rangée.

• Il est possible de choisir la disposition des colonnes (de gauche à droite ou de droite à gauche) lorsque le site passe en mode responsive.

Et si jamais ça ne suffit pas, vous pourrez aussi procéder à quelques ajustements techniques avec du code CSS, grâce à l’encart Styles CSS sur mobile contenu dans les attributs d’une rangée.

Vous ne connaissez pas le langage CSS ? WPMarmite propose la formation CSS Express pour vous former.

Aide et support

Comment vous dépatouiller et trouver de l’aide si vous êtes bloqué dans l’utilisation du Page Builder de SiteOrigin ?

C’est peut-être une question que vous vous posez si vous souhaitez adopter cette extension. 

Pour commencer, SiteOrigin dispose de ressources et tutoriels sur son blog (en anglais).

Ensuite, vous disposez d’une documentation officielle qui présente les réglages de base du constructeur de page (ex : créer et styliser une page, édition en live, résolution de problèmes etc.).

C’est déjà pas mal pour mettre le pied à l’étrier, mais cette documentation a deux limites : 

• Elle n’est pas très fournie, surtout si on la compare à ce que proposent Elementor ou Beaver Builder, par exemple.
• Elle est uniquement disponible en anglais. Plutôt logique pour une entreprise sud-africaine, je le rappelle. Mais pour un Frenchie qui ne maîtrise pas toutes les subtilités de la langue de Shakespeare, ce n’est pas optimal.

Pour une assistance plus personnalisée, vous devrez utiliser le Forum public dédié à Page Builder. Des membres de l’équipe du constructeur de page, ainsi que d’autres utilisateurs, sont là pour répondre à vos requêtes.

D’après ce que j’ai pu constater, les réponses sont plutôt rapides (quelques heures en moyenne) et les membres du Forum sont assez actifs. Plusieurs sujets sont publiés chaque jour, ce qui démontre la vitalité de ce Forum.

Si vous souhaitez un support individuel “privé” par email, vous devrez vous procurer SiteOrigin Premium.

Pour les adeptes de l’apprentissage en vidéo, sachez que SiteOrigin dispose d’une chaîne YouTube qui présente 20 vidéos (prise en main du Page Builder, présentation de thèmes et de widgets).

Par contre, ne vous attendez pas à du contenu frais : la dernière vidéo mise en ligne date d’il y a 3 ans.

En ce qui concerne l’aide, on est aussi en droit de se demander quel écosystème gravite autour de SiteOrigin. Pour commencer, vous savez déjà que des développeurs tiers proposent des extensions dédiées à Page Builder, sur le répertoire officiel WordPress. 

Mais il n’y n’en a pas non plus des masses (une vingtaine environ) et elles ne sont pas forcément toutes récemment mises à jour (ex : Tabs Widget for Page Builder).

Comparé à ce que propose la concurrence (ex : Divi, Beaver Builder), Page Builder est clairement en retrait de ce côté-là.

Dernier détail pour finir : à ma connaissance, Site Origin ne dispose pas d’un groupe privé sur Facebook – ce qui n’est pas un problème en soi -, comme c’est souvent le cas pour bon nombre de ses concurrents. 
Sauf erreur de ma part, vous trouverez uniquement une page officielle sur laquelle sont publiées les actualités du constructeur de page.

Combien coûte SiteOrigin ?

Il s’agit de l’une des caractéristiques principales de Page Builder : il est gratuit. Il n’y a pas de frais cachés, pas d’arnaque, ni d’esbroufe. 

On le répète, vous pouvez en profiter sans dépenser un centime. Mais n’oublions pas une précision de taille, quand même. Vous pouvez rendre le constructeur de page de Site Origin encore plus complet en utilisant l’extension Site Origin Premium qui, elle, est payante.

Cette extension “ajoute des paramètres et des fonctionnalités supplémentaires au Page Builder, aux widgets SiteOrigin et aux thèmes SiteOrigin”. Elle n’est donc pas uniquement dédiée au constructeur de page maison, raison pour laquelle on le considère comme un page builder gratuit.

Site Origin Premium propose trois offres :

• Licence Single à 29$/an (environ 27€ pour une utilisation sur 1 site).
• Licence Business à 49$/an (environ 45€ pour une utilisation sur 5 sites au maximum).
• Licence Developer à 99$/an (environ 92€ pour une utilisation sur 5 sites au maximum).

Chaque offre donne accès à un an de support et aux mises à jour de l’extension. Site Origin propose aussi une garantie 60 jours satisfait ou remboursé, afin de tester son produit sans prendre de risques.

Vous pouvez aussi opter pour un paiement unique à l’année (Single Year License), sans renouvellement tacite de l’offre. Mais dans ce cas, les prix sont un peu plus élevés (38$ en Single, 64$ en Business et 128$ en Developer).

En résumé, je dirais que le rapport-qualité prix de Page Builder est bon. Mais le constructeur de page vaut-il vraiment la peine d’être adopté, surtout si vous utilisez déjà un autre page builder ?

Réponse dans la dernière partie de cet article, sous forme de bilan. Ça démarre juste en-dessous.

Notre avis final

Forces de Page Builder par Site Origin

• Il est gratuit, ce qui est un atout non négligeable.
• Sa courbe d’apprentissage est rapide : il est simple et prendre à main et on s’habitue rapidement à son interface.
• Il peut s’utiliser aussi bien en front-end (avec des limitations) qu’en back-end.
• Le système de glisser-déposer fonctionne très bien.
• Les réglages concernant le responsive sont bienvenus.
• Il est optimisé pour la performance.
• Il est bien intégré à WordPress en utilisant ses widgets natifs, par exemple.

Limites du constructeur de page

• L’édition en front-end est limitée : vous ne pouvez pas éditer et agir directement sur un contenu en ligne (ex : modifier le texte d’un titre sur l’interface publique).
• Je trouve que l’interface utilisateur (UI) pourrait être améliorée, en particulier pour l’édition en back-end. Les boutons sont très petits et malgré la présence de couleurs pour distinguer les rangées, tout cela reste très abstrait.

• L’intégration avec Gutenberg reste à peaufiner.
• L’extension étant gratuite, vous ne disposez pas de support individuel par email.
• Les options de Page Builder sont beaucoup moins importantes que chez la plupart de ses concurrents.
• Page Builder n’est pas un Theme Builder comme Elementor ou Divi : il ne permet pas de personnaliser l’en-tête et le pied de page de votre thème.

Devez-vous utiliser Page Builder ?

Difficile de répondre à cette question de façon tranchée et définitive, sachant que tout dépend principalement de vos besoins. Il y a aussi un ressenti personnel qui entre en jeu, forcément.

Pour vous aider, je vais quand même me mouiller un peu. Je dirais que Page Builder est particulièrement adapté : 

• Aux débutants sur WordPress, en raison de la simplicité de sa prise en main.
• Aux personnes qui ne souhaitent pas investir financièrement dans un constructeur de page premium. 
• A celles et ceux d’entre-vous qui accordent une importance particulière au temps de chargement de leurs pages. Page Builder est une extension légère, c’est un vrai avantage dans ce cas. 

Mais, pour autant, je la trouve largement en retrait par rapport à des constructeurs de pages premium disponibles sur le marché comme Elementor Pro, Divi, ou Beaver Builder.

Ces derniers, certes payants pour bénéficier de toutes leurs options, seront plus complets dans de très nombreux domaines. Par exemple, ils proposent plus de modèles de page (templates), plus de widgets (ou modules), ou encore une expérience utilisateur supérieure. Sans parler de leur écosystème, beaucoup plus développé.

Pour un utilisateur novice, je trouve qu’ils ont plus de cordes à leur arc que Page Builder. Je me dirigerais donc plutôt vers l’un d’entre-eux si je devais adopter un constructeur de page pour mon usage personnel et/ou professionnel.

Néanmoins, je rappelle que ce côté un peu “old-school” de Page Builder s’explique. D’abord, il est dans le circuit depuis très longtemps.

Ensuite, en matière de développement, sans entrer dans des détails techniques, il est compliqué de modifier du tout au tout un outil développé dans une certaine optique. Il est donc normal qu’il accuse du retard sur des page builders plus modernes.

Mais peut-être avez-vous un avis bien différent du mien. Dans ce cas, je vous invite à prolonger la discussion dans les commentaires.

Ne soyez pas timide, tous les retours sont les bienvenus.