Sitios web que muestran un "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 propone esta opción y su elección será crucial para el nuevo diseño de su proyecto.
El boxeo del diseño de su sitio es un partido político que debe decidirse al comienzo del Personaliza tu tema.
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...
Aquí está el programa:
- Qu'est-ce que la mise en page emboitée de Divi (ou boxed layout) ?
- ¿Cuándo elegir el diseño encarnado?
- ¿Cómo activar el diseño grabado en Divi?
- À quoi ressemble une mise en page "emboitée" ?
- ¿Cuáles son las ventajas de elegir un diseño en relieve?
- ¿Cómo utilizar el diseño integrado de Divi de una manera original?
Qu'est-ce que la mise en page emboitée de Divi (ou boxed layout) ?
Sitios web utilizando "modèles encadrés" permite definir límites de ancho para el cuerpo principal de la página.
El diseño en caja 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 contenedor propone un ancho fijo.
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.
¿Cuándo elegir el diseño encarnado?
Idealmente, necesitas decidir sobre este diseño desde el inicio de su proyecto 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.
El diseño encarnado (o no) debe decidirse al mismo tiempo que el tipo de encabezado desea ofrecer en su sitio.
Para saber más sobre los tipos de menús/cabezas ofrecidos por Divi, te sugiero que descubras mi artículo dedicado a menús y encabezados Divi. En este artículo, usted descubrirá los diversos tipos de diseño que puede utilizar para el menú principal de su sitio Divi.
¿Cómo activar el diseño grabado en Divi?
Buenas noticias, es más que simple. Compruebe una opción en la configuración Divi.
- Vaya a la pestaña Apariencia > Personalizar
- Haga clic Parámetros generales
- Haga clic Configuración de la página
- Seleccione la opción Activar diseño en relieve
- Recuerda hacer clic en "Publicado" para salvar tus cambios.
Incluso puede configurar la anchura del contenido de su sitio con opciones adicionales.
À quoi ressemble une mise en page "emboitée" ?
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.
Aquí hay dos ejemplos de diseño encarnado con Divi:
¿Cuáles son las ventajas de elegir un diseño en relieve?
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.
Además de todo esto, este diseño encarnado puede dar rienda suelta a nombreuses personnalisations qu'il n'est pas possible d'obtenir avec une mise en page en pleine largeur.
¿Cómo utilizar el diseño integrado de Divi de una manera original?
On y vient...
Cuando eliges el diseño encarnado de Divi, esto solo te permite definir un imagen de fondo o color de fondo.
Propongo cambiar esto a su ventaja en dos nuevos tutoriales:
- ¿Cómo obtener un color de fondo diferente en cada página de su sitio Divi?
- comment afficher une image d'arrière-plan différente sur chaque page de votre site Divi ?
¿Necesita más recursos en Divi Boxed Layout? Descubre estos artículos de Elegante El blog del tema lleno de ideas y tutos!
On est d’accord que sur Ecran de PC c’est plus lisible surtout avec les tailles d’écran en WXGA d’aujourd’hui.
Par contre sur Mobile on n’a pas forcement envi d’avoir une marge sur les cotés… L’écran étant déjà réduit en visibilité (largeur).
Du coup, je cherche à mettre la taille en pleine largeur seulement sur mobile.
J’y arrive mais le top-heder et main-header se mettent aussi à 100%, du coup plus de marge là ou se trouve le logo et l’hamburger…
Voici le code utilisé :
/* Largeur page sur mobile */
@media only screen and (max-width:980px) {
.et_boxed_layout #page-container,
.et_boxed_layout #page-container .container,
.et_boxed_layout #page-container .et_pb_row,
.et_boxed_layout.et_non_fixed_nav.et_transparent_nav #page-container #top-header,
.et_boxed_layout.et_pb_pagebuilder_layout.single #page-container .et_pb_row,
.et_boxed_layout.et_pb_pagebuilder_layout.single.et_full_width_page #page-container .et_pb_row,
.et_boxed_layout.et_pb_pagebuilder_layout.single.et_full_width_portfolio_page #page-container .et_pb_row,
.et_fixed_nav.et_boxed_layout #page-container #main-header,
.et_fixed_nav.et_boxed_layout #page-container #top-header,
.et_non_fixed_nav.et_transparent_nav.et_boxed_layout #page-container #main-header {
width: 100% !important;
}
}
Je vois que sur le site Divi Soup il est bien configuré.
Avez-vous une idée des class et ID à modifier ?
Je comprends tout à fait ce que tu veux dire mais il faudrait que je teste pour voir sur quelle classe CSS s’appuyer. Si j’ai un moment, je regarde…
Merci par avance Lycia.
J’ai un site de test au besoin 😉
As-tu un lien ?
Pardon pour le temps de réponse. Je finalisais le WP de test avec DIVI et la page emboitée.
Je t’ai envoyé un mail avec les accès 😉
Merci pour vos conseils. Cela m’a super bien aide
Merci Dominique 😉
Je serais aussi intéressé par une solution de mise en page emboitée uniquement pour ordinateurs (et 100% pour les mobiles). Si quelqu’un a une solution…
Salut Fab,
Je suppose que ce n’est pas compliqué mais il faut que je cherche un peu. Dès que j’ai le temps, je mets le tuto à jour. En attendant, tu peux chercher du côté du CSS et des media-queries.
Aller c’est cadeau 😉
/* Page pleine largeur sur Mobile */
@media only screen and (max-width: 980px) {
.et_boxed_layout #page-container,
.et_boxed_layout #page-container #main-header,
.et_boxed_layout #page-container #top-header,
.et_boxed_layout #page-container #main-footer {
width: 100% !important;
}
}
Merci 😉
Bien entendu cela fonctionne que par rapport à la taille de l’écran < 980px.
Et non depuis le type de périphérique utilisé (Mobile, tablette, PC/MAC, etc…)
Il serai éventuellement possible de le faire en jQuery mais je ne vois pas trop l’intérêt.
A 980px, on a les smartphone et les tablettes (en mode portrait seulement, en paysage la largeur dépasse souvent les 980px).