Los sitios web con un "diseño en caja " son cada vez más raros. Cada vez los vemos menos... El tema Divi ofrece esta opción y su elección será crucial para el diseño posterior de su proyecto.
El diseño de su sitio web es una decisión que debe tomarse al principio del personalizar el tema.
¿Este diseño es para usted? ¿Cómo puedo habilitar los diseños anidados con Divi? ¿Cuáles son los beneficios? Este artículo responderá a todas estas preguntas...
Aquí está el programa:
- ¿Qué es el diseño en caja de Divi?
- ¿Cuándo elegir el diseño anidado?
- ¿Cómo puedo activar el diseño anidado en Divi?
- ¿Qué aspecto tiene un diseño "anidado"?
- ¿Cuáles son las ventajas de elegir un diseño anidado?
- ¿Cómo utilizar el diseño anidado de Divi de forma original?
Aviso: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.
¿Qué es el diseño en caja de Divi?
Sitios web que utilizan "Plantillas enmarcadas permiten establecer límites de anchura para el cuerpo principal de la página.
El diseño en caja define un ancho fijo para mostrar el contenido de cada una de sus páginas. Así, sea cual sea la resolución de la pantalla, su sitio web mantendrá siempre el mismo tamaño porque el diseño en caja tiene una anchura fija.
Aunque en la versión móvil puede reducir el ancho de sus páginas, en la versión de escritorio (y especialmente en ordenadores grandes), la lectura de sus páginas y artículos se verá facilitada porque el internauta no tendrá que navegar por sus escritos en un ancho en el 100%. Esto puede ser agotador en pantallas muy anchas.
¿Cuándo elegir el diseño anidado?
Lo ideal es que se decida por esta disposición desde el inicio de su proyecto web.
Aunque esto se puede cambiar sobre la marcha (ya que es muy fácil marcar o desmarcar la opción en Divi), podría afectar al diseño general de su sitio.
El diseño anidado (o no) debe decidirse al mismo tiempo que el tipo de cabecera que desea ofrecer en su sitio.
Para saber más sobre los tipos de menús/encabezados que ofrece Divi, le sugiero que descubra mi artículo sobre los menús y cabeceras de Divi. En este artículo, usted aprenderá acerca de los diferentes tipos de diseños que puede utilizar para el menú principal de su sitio Divi.
¿Cómo puedo activar el diseño anidado en Divi?
La buena noticia es que esto es más que sencillo. Sólo tienes que marcar una opción en la configuración de Divi.
Habilitar el diseño en caja de Divi
- Vaya a la pestaña Apariencia > Personalizar
- Haga clic en Configuración general
- Haga clic en Configuración del diseño
- Marque la opción Habilitar diseño anidado
- No olvides hacer clic en "Publicar " para guardar los cambios.
Incluso puede definir el ancho del contenido de su sitio con opciones adicionales.
¿Qué aspecto tiene un diseño "anidado"?
Esta es la diferencia entre un diseño en caja y un diseño de ancho completo.
En la primera captura de pantalla, puede ver que la página web se extiende al 100% del ancho de la pantalla. Este es el diseño "por defecto" que ofrece el tema Divi. Si este tipo de diseño le conviene, no tendrá que hacer nada. No hay que hacer cambios...
En la segunda captura de pantalla, podemos ver que el contenido de la página se reduce, como si estuviera "encajonado". La página web muestra entonces una especie de "vacío" en ambos lados. Como la disposición anidada es un deseo específico, puede activarla con una simple opción, como se ha visto en el capítulo anterior.
Aquí hay dos ejemplos de diseños anidados con Divi :
¿Cuáles son las ventajas de elegir un diseño anidado?
Por supuesto, la elección de este tipo de disposición es una cuestión de gusto, pero más allá de eso, es una cuestión de diseño...
Cuando creo sitios web para mis clientes, rara vez elijo este tipo de diseño, pero lo he elegido en algunos casos. Por eso hay que tener en cuenta el público objetivo, el diseño general y la atmósfera del sitio.
Además de todo esto, este diseño anidado puede permitir una gran cantidad de personalización que no es posible con un diseño de ancho completo.
¿Cómo utilizar el diseño anidado de Divi de forma original?
Estamos llegando...
Cuando eliges el diseño anidado de Divi, sólo te permite establecer una imagen de fondo o un color de fondo.
Te propongo cambiar esto en tu beneficio en dos nuevos tutoriales:
- ¿Cómo obtener un color de fondo diferente en cada página de su sitio Divi?
- ¿Cómo mostrar una imagen de fondo diferente en cada página de su sitio Divi?
¿Necesitas más recursos sobre el diseño en caja de Divi? Consulte estos artículos del blog de ElegantTheme que está lleno de ideas y tutoriales.
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).