Tutoriel

WordPress : mises en page personnalisées avec le SiteOrigin Page Builder

4 minutes de lecture

WordPress a besoin d’extensions

Un peu de contexte

Il y a quelques années encore, WordPress était un simple système de blog, de sorte que les mises en page complexes pour les pages et les articles n’étaient pas vraiment pertinentes. Cependant, WordPress est désormais le système le plus répandu pour la création de sites web privés et professionnels, et même de boutiques en ligne.

WordPress n’offre donc par défaut qu’un seul champ de contenu par page ou article, que l’on peut modifier avec l’éditeur visuel. Il est également possible d’y intégrer des médias, tels que des images ou des vidéos. En complément, des shortcodes peuvent être utilisés pour placer d’autres contenus, par exemple ceux créés par d’autres plugins, dans la zone de contenu.

SiteOrigin est L’extension

Gratuit mais précieux

SiteOrigin est un plugin Page Builder qui étend (extrêmement) les fonctionnalités de WordPress dans le domaine de la gestion de contenu. Avec le Page Builder, il est possible d’insérer n’importe quel contenu et de créer des structures de contenu, en principe indépendamment du thème, tant que le thème n’impose pas déjà des contraintes à l’utilisateur. Il est important de savoir que SiteOrigin crée une structure qui se comporte de manière réactive – à condition que les widgets soient compatibles (les widgets du bundle sont tous réactifs).

Il existe une extension Premium pour le SiteOrigin Page Builder, qui permet d’ajouter des widgets supplémentaires à la sélection existante. Honnêtement, on s’en sort très bien sans la version « Premium ».

Créez une structure personnalisée avec le Page Builder by SiteOrigin

Créer une structure personnalisée

Une fois installé et activé, WordPress offre, en plus de l’éditeur visuel et de l’éditeur de texte, un onglet « Page Builder ». En mode Page Builder, l’éditeur change complètement. Il n’est plus possible de saisir du texte directement, mais il faut d’abord définir la structure du contenu : pour cela, on crée des lignes qui peuvent être divisées en colonnes. Pour chaque zone créée, on peut insérer un ou plusieurs widgets – les widgets étant finalement les contenus réels.

La possibilité d’imbriquer le Page Builder est également intéressante : le Page Builder peut être inséré comme un widget, et on peut y créer une nouvelle structure.

Les contenus sont insérés via des widgets

Le Page Builder permet d’insérer n’importe quel widget, y compris ceux déjà fournis avec WordPress ou ceux mis à disposition par des plugins installés. Les plugins de widgets que l’on peut installer en plus sont particulièrement intéressants, par exemple ceux du SiteOrigin Widgets Bundle. Si tu aimes les effets, il existe également des extensions pour des effets spéciaux, comme avec le plugin SO Page Builder Animate.
Remplissez les blocs de contenu avec des widgets
Afficher également le contenu en pleine largeur d’écran avec SiteOrigin

Afficher le contenu en pleine largeur d’écran

Dans l’aperçu de la structure, des paramètres individuels peuvent être définis pour chaque ligne – une ID de ligne (ID CSS pour la ligne) est par exemple pratique si l’on connaît le CSS – et ainsi définir la mise en page de son projet au pixel près. Un paramètre spécial dans la section « Disposition » est l’option « Largeur totale ». Cela permet d’étirer la ligne sur toute la largeur de l’écran. Cependant, les contenus restent alignés avec les autres (généralement, la zone de contenu est une zone centrée dans la fenêtre du navigateur) ; si l’option « Largeur totale étirée » est choisie, le contenu est également étiré sur toute la largeur de l’écran – cette option est généralement utilisée pour les sliders ou les images d’en-tête.

Quelques ajustements

Une fois la structure de base créée et les contenus insérés via des widgets, tout est en principe bon. Cependant, il existe encore des réglages fins qui permettent de modifier individuellement différents paramètres. Un point important serait les points de rupture (breakpoints) – la largeur du navigateur en pixels à laquelle les colonnes « fusionnent », par exemple pour afficher un contenu à deux colonnes en une seule colonne sur mobile.
Paramètres de SiteOrigin : types de publication pris en charge, points de rupture...

SiteOrigin comparé à d’autres Page Builders

Bien sûr, il n’y a pas que le Page Builder de SiteOrigin. Voici d’autres exemples :

  • Divi Builder, Elegant Themes (payant).
  • Elementor, Elementor (Freemium)
  • Virtual Composer, WP Bakery (payant)

Ces Page Builders comptent certainement parmi les plus répandus, mais il en existe d’autres… Chaque Page Builder a sa propre interface utilisateur, ses propres fonctions, que tel ou tel utilisateur apprécie particulièrement. À mon avis, le Page Builder de SiteOrigin a un avantage décisif : les éléments de contenu que l’on ajoute dans les blocs de contenu créés sont des widgets, des widgets tout à fait normaux. La flexibilité est donc particulièrement grande et l’extensibilité quasi illimitée.