{"id":11601,"date":"2017-07-11T10:36:29","date_gmt":"2017-07-11T08:36:29","guid":{"rendered":"https:\/\/www.saasweb.agency\/blog\/wordpress-mises-en-page-personnalisees-avec-le-siteorigin-page-builder\/"},"modified":"2026-10-27T13:30:10","modified_gmt":"2026-10-27T12:30:10","slug":"wordpress-mises-en-page-personnalisees-avec-le-siteorigin-page-builder","status":"publish","type":"post","link":"https:\/\/www.saasweb.agency\/fr\/blog\/wordpress-mises-en-page-personnalisees-avec-le-siteorigin-page-builder\/","title":{"rendered":"WordPress : mises en page personnalis\u00e9es avec le SiteOrigin Page Builder"},"content":{"rendered":"
\n
\n
\n
\n

WordPress a besoin d\u2019extensions<\/h2>\n<\/div>\n
\n
\n

Un peu de contexte<\/h3>\n
\n

Il y a quelques ann\u00e9es encore, WordPress \u00e9tait un simple syst\u00e8me de blog, de sorte que les mises en page complexes pour les pages et les articles n\u2019\u00e9taient pas vraiment pertinentes. Cependant, WordPress est d\u00e9sormais le syst\u00e8me le plus r\u00e9pandu pour la cr\u00e9ation de sites web priv\u00e9s et professionnels, et m\u00eame de boutiques en ligne. <\/p>\n

WordPress n\u2019offre donc par d\u00e9faut qu\u2019un seul champ de contenu par page ou article, que l\u2019on peut modifier avec l\u2019\u00e9diteur visuel. Il est \u00e9galement possible d\u2019y int\u00e9grer des m\u00e9dias, tels que des images ou des vid\u00e9os. En compl\u00e9ment, des shortcodes peuvent \u00eatre utilis\u00e9s pour placer d\u2019autres contenus, par exemple ceux cr\u00e9\u00e9s par d\u2019autres plugins, dans la zone de contenu. <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n

SiteOrigin est L\u2019extension<\/h2>\n<\/div>\n
\n
\n

Gratuit mais pr\u00e9cieux<\/h3>\n
\n

SiteOrigin est un plugin Page Builder qui \u00e9tend (extr\u00eamement) les fonctionnalit\u00e9s de WordPress dans le domaine de la gestion de contenu. Avec le Page Builder, il est possible d\u2019ins\u00e9rer n\u2019importe quel contenu et de cr\u00e9er des structures de contenu, en principe ind\u00e9pendamment du th\u00e8me, tant que le th\u00e8me n\u2019impose pas d\u00e9j\u00e0 des contraintes \u00e0 l\u2019utilisateur. Il est important de savoir que SiteOrigin cr\u00e9e une structure qui se comporte de mani\u00e8re r\u00e9active \u2013 \u00e0 condition que les widgets soient compatibles (les widgets du bundle sont tous r\u00e9actifs). <\/p>\n

Il existe une extension Premium<\/a> pour le SiteOrigin Page Builder, qui permet d\u2019ajouter des widgets suppl\u00e9mentaires \u00e0 la s\u00e9lection existante. Honn\u00eatement, on s\u2019en sort tr\u00e8s bien sans la version \u00ab Premium \u00bb. <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n
\"Cr\u00e9ez<\/a><\/figure>\n<\/div>\n<\/div>\n
\n
\n
\n

Cr\u00e9er une structure personnalis\u00e9e<\/h3>\n
\n Une fois install\u00e9 et activ\u00e9, WordPress offre, en plus de l\u2019\u00e9diteur visuel et de l\u2019\u00e9diteur de texte, un onglet \u00ab Page Builder \u00bb. En mode Page Builder, l\u2019\u00e9diteur change compl\u00e8tement. Il n\u2019est plus possible de saisir du texte directement, mais il faut d\u2019abord d\u00e9finir la structure du contenu : pour cela, on cr\u00e9e des lignes qui peuvent \u00eatre divis\u00e9es en colonnes. Pour chaque zone cr\u00e9\u00e9e, on peut ins\u00e9rer un ou plusieurs widgets \u2013 les widgets \u00e9tant finalement les contenus r\u00e9els. <\/p>\n

La possibilit\u00e9 d\u2019imbriquer le Page Builder est \u00e9galement int\u00e9ressante : le Page Builder peut \u00eatre ins\u00e9r\u00e9 comme un widget, et on peut y cr\u00e9er une nouvelle structure.<\/p><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n
\n

Les contenus sont ins\u00e9r\u00e9s via des widgets<\/h3>\n
\n Le Page Builder permet d\u2019ins\u00e9rer n\u2019importe quel widget, y compris ceux d\u00e9j\u00e0 fournis avec WordPress ou ceux mis \u00e0 disposition par des plugins install\u00e9s. Les plugins de widgets que l\u2019on peut installer en plus sont particuli\u00e8rement int\u00e9ressants, par exemple ceux du SiteOrigin Widgets Bundle<\/a>. Si tu aimes les effets, il existe \u00e9galement des extensions pour des effets sp\u00e9ciaux, comme avec le plugin SO Page Builder Animate<\/a>. <\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\"Remplissez<\/a><\/figure>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\"Afficher<\/a><\/figure>\n<\/div>\n<\/div>\n
\n
\n
\n

Afficher le contenu en pleine largeur d\u2019\u00e9cran<\/h3>\n
\n

Dans l\u2019aper\u00e7u de la structure, des param\u00e8tres individuels peuvent \u00eatre d\u00e9finis pour chaque ligne \u2013 une ID de ligne (ID CSS pour la ligne) est par exemple pratique si l\u2019on conna\u00eet le CSS \u2013 et ainsi d\u00e9finir la mise en page de son projet au pixel pr\u00e8s. Un param\u00e8tre sp\u00e9cial dans la section \u00ab Disposition \u00bb est l\u2019option \u00ab Largeur totale \u00bb. Cela permet d\u2019\u00e9tirer la ligne sur toute la largeur de l\u2019\u00e9cran. Cependant, les contenus restent align\u00e9s avec les autres (g\u00e9n\u00e9ralement, la zone de contenu est une zone centr\u00e9e dans la fen\u00eatre du navigateur) ; si l\u2019option \u00ab Largeur totale \u00e9tir\u00e9e \u00bb est choisie, le contenu est \u00e9galement \u00e9tir\u00e9 sur toute la largeur de l\u2019\u00e9cran \u2013 cette option est g\u00e9n\u00e9ralement utilis\u00e9e pour les sliders ou les images d\u2019en-t\u00eate. <\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n
\n

Quelques ajustements<\/h3>\n
\n Une fois la structure de base cr\u00e9\u00e9e et les contenus ins\u00e9r\u00e9s via des widgets, tout est en principe bon. Cependant, il existe encore des r\u00e9glages fins qui permettent de modifier individuellement diff\u00e9rents param\u00e8tres. Un point important serait les points de rupture (breakpoints) \u2013 la largeur du navigateur en pixels \u00e0 laquelle les colonnes \u00ab fusionnent \u00bb, par exemple pour afficher un contenu \u00e0 deux colonnes en une seule colonne sur mobile. <\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\"Param\u00e8tres<\/a><\/figure>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n

SiteOrigin compar\u00e9 \u00e0 d\u2019autres Page Builders<\/h2>\n<\/div>\n
\n
\n
\n Bien s\u00fbr, il n\u2019y a pas que le Page Builder de SiteOrigin. Voici d\u2019autres exemples : <\/p>\n
    \n
  • Divi Builder, Elegant Themes (payant).<\/li>\n
  • Elementor, Elementor (Freemium)<\/li>\n
  • Virtual Composer, WP Bakery (payant)<\/li>\n<\/ul>\n

    Ces Page Builders comptent certainement parmi les plus r\u00e9pandus, mais il en existe d\u2019autres… Chaque Page Builder a sa propre interface utilisateur, ses propres fonctions, que tel ou tel utilisateur appr\u00e9cie particuli\u00e8rement. \u00c0 mon avis, le Page Builder de SiteOrigin a un avantage d\u00e9cisif : les \u00e9l\u00e9ments de contenu que l\u2019on ajoute dans les blocs de contenu cr\u00e9\u00e9s sont des widgets, des widgets tout \u00e0 fait normaux. La flexibilit\u00e9 est donc particuli\u00e8rement grande et l\u2019extensibilit\u00e9 quasi illimit\u00e9e. <\/p><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

    WordPress a besoin d\u2019extensions Un peu de contexte Il y a quelques ann\u00e9es encore, WordPress \u00e9tait un simple syst\u00e8me de blog, de sorte que les mises en page complexes pour les pages et les articles n\u2019\u00e9taient pas vraiment pertinentes. Cependant, WordPress est d\u00e9sormais le syst\u00e8me le plus r\u00e9pandu pour la cr\u00e9ation de sites web priv\u00e9s \u2026<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[816],"tags":[1492,1747,1748,1466,1463,2196,1470,901],"class_list":["post-11601","post","type-post","status-publish","format-standard","hentry","category-tutoriel","tag-constructeur-de-pages","tag-divi-builder","tag-elementor","tag-mise-en-page-adaptative","tag-page-builder-by-siteorigin","tag-virtual-composer","tag-widgets","tag-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.saasweb.agency\/fr\/wp-json\/wp\/v2\/posts\/11601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.saasweb.agency\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.saasweb.agency\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.saasweb.agency\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.saasweb.agency\/fr\/wp-json\/wp\/v2\/comments?post=11601"}],"version-history":[{"count":1,"href":"https:\/\/www.saasweb.agency\/fr\/wp-json\/wp\/v2\/posts\/11601\/revisions"}],"predecessor-version":[{"id":11903,"href":"https:\/\/www.saasweb.agency\/fr\/wp-json\/wp\/v2\/posts\/11601\/revisions\/11903"}],"wp:attachment":[{"href":"https:\/\/www.saasweb.agency\/fr\/wp-json\/wp\/v2\/media?parent=11601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.saasweb.agency\/fr\/wp-json\/wp\/v2\/categories?post=11601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.saasweb.agency\/fr\/wp-json\/wp\/v2\/tags?post=11601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}