Les sites web affichant une « mise en page emboitée » – appelée également « Boxed Layout » se font plutôt rares de nos jours. On en voit de moins en moins… Le thème Divi propose cette option et votre choix va être crucial pour la suite de la conception de votre projet.

La mise en boite du design de votre site est un parti-pris qui doit être décidé au début de la personnalisation de votre thème.

Est-ce que ce design est fait pour vous ? Comment activer la mise en page emboitée avec Divi ? Quels avantages ? Cet article va répondre à toutes ces questions…

Voici le programme :

 

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

 

Qu’est-ce que la mise en page emboitée de Divi (ou boxed layout) ?

Les sites web utilisant des « modèles encadrés » permettent de définir des limites de largeur pour le corps principal de la page.

Le boxed layout définit une largeur fixe pour afficher le contenu de chacune de vos pages. Ainsi, quelle que soit la résolution de l’écran, votre site Web conservera toujours la même taille car le conteneur propose une largeur fixe.

Même si en version mobile cela peut réduire la largeur de vos pages, en version ordinateur de bureau (et notamment sur les ordinateurs grands modèles), la lecture de vos pages et articles sera facilitée car l’internaute n’aura pas à parcourir vos rédactions sur une largeur en 100%. Cela peut être fatigant sur des écrans très larges.

 

Quand choisir la mise en page emboitée ?

Idéalement, vous devez décider de cette mise en page dès le début du lancement de votre projet web.

Même si cela peut être modifié en cours de route (car c’est très facile de cocher ou décocher l’option de Divi), ça pourrait impacter l’ensemble du design de votre site.

La mise en page emboitée (ou non) devrait être décidée en même temps que le type de header que vous souhaitez proposer sur votre site.

Pour en savoir plus sur les types de menus/headers proposés par Divi, je vous propose de découvrir mon article consacré aux menus et en-têtes de Divi. Dans cet article, vous découvrirez les divers types de design que vous pourrez utiliser pour le menu principal de votre site Divi.

 

Comment activer la mise en page emboitée sur Divi ?

Bonne nouvelle, cela est plus que simple. Il suffit de cocher une option dans les paramètres de Divi.

Activer la mise en page emboitée de Divi

Activer la mise en page emboitée de Divi (appelée aussi Boxed Layout)

  1. Allez à l’onglet Apparence > Personnaliser
  2. Cliquez sur Paramètres Généraux
  3. Cliquez sur Paramètres de mise en page
  4. Cochez l’option Activer la mise en page emboitée
  5. N’oubliez pas de cliquer sur « Publier » pour enregistrer vos modifications.

Vous pourrez même définir la largeur du contenu de votre site grâce à des options supplémentaires.

 

À quoi ressemble une mise en page « emboitée » ?

Mise ne page emboitée ou boxed layout

Voici la différence entre une mise ne page emboitée (ou boxed layout) et une mise en page pleine largeur.

Sur la première capture d’écran, on voit que la page web s’étend sur 100% de la largeur de l’écran. C’est la mise en page « par défaut » proposée par le thème Divi. Si ce type de design vous convient, vous n’aurez donc rien à faire. Aucune modification à apporter…

Sur la deuxième capture d’écran, on peut voir que le contenu de la page est réduit, comme « mis en boite ». La page web laisse alors apparaitre une sorte de « vide » des deux côtés. La mise en page emboitée étant une volonté spécifique, vous pourrez l’activer avec une simple option comme vu au chapitre précédent.

Voici deux exemples de mise en page emboitée avec Divi :

 

Quels avantages à choisir une mise en page emboitée ?

Bien évidemment, choisir ce type de mise en page est une histoire de goût, mais au-delà, c’est une histoire de design…

Lorsque je crée des sites pour mes clients, c’est rare que je choisisse ce type de mise en page mais il m’est arrivé de le choisir dans certains cas. Il faut donc prendre en compte le public visé, le design global et l’atmosphère du site.

En plus de tout cela, cette mise en page emboitée peut laisser libre cours à de nombreuses personnalisations qu’il n’est pas possible d’obtenir avec une mise en page en pleine largeur.

 

Comment utiliser la mise en page emboitée de Divi de manière originale ?

On y vient…

Lorsque vous choisissez la mise en page emboitée de Divi, celui-ci vous permet seulement de définir une image de fond ou une couleur de fond.

Je vous propose de changer cela à votre avantage dans deux nouveaux tutoriels :

 

Besoin de plus de ressources sur le Boxed Layout de Divi ? Découvrez ces articles du blog de ElegantTheme qui regorge d’idées et de tutos !

 

La mise en page emboitée de Divi (boxed layout)
Mise en page emboitée de Divi (boxed layout)
La « mise en page emboitée » de Divi est-elle faite pour vous ? (Boxed Layout)
3.7 pour 6 vote[s]
felis amet, Praesent ut justo ipsum dictum commodo leo.

Pin It on Pinterest

Shares
Share This