¿Es el "diseño en caja" de Divi adecuado para ti? (Diseño en caja)

Publicado el 24/02/2019 | 12 comentarios

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 resto del diseño de su proyecto.

El diseño de su sitio web es una decisión que debe tomarse al principio del personalice su tema.

¿Es este diseño el adecuado para usted? ¿Cómo puedo activar el diseño anidado con Divi? ¿Cuáles son los beneficios? Este artículo responderá a todas estas preguntas...

Aquí está el programa:

 

Anuncio: 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 Se denominan "plantillas en caja". 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 contenedor ofrece 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 usuario no tendrá que navegar por sus ensayos 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, aprenderás sobre los diferentes tipos de diseño que puedes utilizar para el menú principal de tu sitio Divi.

 

¿Cómo puedo activar el diseño anidado en Divi?

Buenas noticias, es más que sencillo. Sólo tienes que marcar una opción en la configuración de Divi.

Activer la mise en page emboitée de Divi

Habilitar el diseño en caja de Divi

  1. Vaya a la pestaña Apariencia > Personalizar
  2. Haga clic en Configuración general
  3. Haga clic en Configuración del diseño
  4. Marque la opción Habilitardiseño anidado
  5. 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"?

Mise ne page emboitée ou boxed layout

Esta es la diferencia entre un diseño en caja y un diseño de ancho completo.

En la primera captura de pantalla, puedes ver que la página web ocupa el 100% del ancho de la pantalla. Este es el diseño "por defecto" propuesto por el tema Divi. Si este tipo de diseño le conviene, no tendrá que hacer nada. No hay cambios que hacer...

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. La disposición anidada es un deseo específico, se puede activar con una simple opción como se vio 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, es raro que elija este tipo de diseño, pero lo he elegido en algunos casos. 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 muchas personalizaciones que no son posibles con un diseño de ancho completo.

 

¿Cómo puedo utilizar el diseño anidado de Divi de una manera nueva?

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:

 

¿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.

 

La mise en page emboitée de Divi (boxed layout)
Mise en page emboitée de Divi (boxed layout)
Divi boxed layout

932 palabras

4

A ti también te debería gustar:

12 Commentaires

  1. David

    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 ?

  2. Lycia Diaz

    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…

  3. David

    Merci par avance Lycia.
    J’ai un site de test au besoin 😉

  4. Lycia Diaz

    As-tu un lien ?

  5. David

    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 😉

  6. Dominique

    Merci pour vos conseils. Cela m’a super bien aide

  7. Lycia Diaz

    Merci Dominique 😉

  8. Fab

    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…

  9. Lycia Diaz

    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.

  10. David

    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;
    }
    }

  11. Lycia Diaz

    Merci 😉

  12. David

    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).

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto