Cómo crear secciones emergentes con el diseño en caja de Divi

La creación de secciones emergentes en su sitio web realmente puede hacer que su contenido se destaque. Además, esta técnica de diseño emergente se puede aplicar a cualquier diseño Divi para innumerables combinaciones.

En este tutorial, le mostraré cómo usar el diseño de cuadro de Divi y Divi Builder para crear secciones y filas emergentes en su sitio web. Todo lo que se necesita es una pequeña cantidad de CSS personalizado que extienda la sección o fila más allá del contenedor de la página. A continuación, puede realizar ajustes y estilos adicionales con Divi Builder.

¡Empecemos!

Vistazo

Aquí tienes un ejemplo de lo que podrás hacer:

Cómo crear secciones emergentes con el diseño en caja de Divi

Suscríbete a nuestro canal de Youtube

Cargue su diseño Divi

Para demostrar cómo funciona esta ventana emergente, voy a utilizar el diseño de la página de destino de marketing de software de Divi. Para usar el diseño, cree una nueva página, implemente el generador visual, abra el menú de configuración, haga clic en el botón Agregar desde la biblioteca, seleccione el diseño de la página de destino de marketing de software y haga clic en el botón «Usar este diseño».

Guarda y publica tu página.

Habilitar diseño de caja en el personalizador de temas

El siguiente paso es implementar el diseño de la caja de Divi. Desde tu panel de WordPress, navega a Divi > Personalizador de temas > Configuración general > Configuración de diseño. Luego haga clic en la casilla de verificación para habilitar el diseño en caja y publicar sus cambios.

Agregar CSS personalizado al personalizador de temas

Lo siguiente en la lista es agregar algunos fragmentos de CSS personalizado. En el personalizador de temas, seleccione CSS adicional y agregue el siguiente CSS personalizado en el campo de edición:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
@media (min-width: 980px) {
/*** Adjust default box layout width and allow overflowing sections to become visible ***/
.et_boxed_layout #page-container{
    overflow-y: visible !important;
    width: 80%;
    -webkit-box-shadow: 0px 2px 60px 0px rgba(0,0,0,0.2);
        -moz-box-shadow: 0px 2px 60px 0px rgba(0,0,0,0.2);
        box-shadow: 0px 2px 60px 0px rgba(0,0,0,0.2);
  }
/*** custom class to increase the max width of your pop out sections ***/
.popout-section {
  width: 120% !important;
  }
}

Como ya sugieren los comentarios en el css, el primer fragmento de css permite que las secciones desbordadas se vuelvan visibles usando «overflow-y: visible». También agregué una sombra (caja-sombra) al diseño de la caja, pero si desea mantener la predeterminada, simplemente omita esto. También hay un ajuste en el ancho del diseño del cuadro predeterminado (o contenedor de página). Agregué esto para permitir más espacio de «emergencia» en cada lado del contenedor. Dado que el ancho ahora es del 80 % (era del 90 %), tendrá un 10 % de espacio de margen a cada lado del contenedor para permitir que se extienda la ventana emergente.

Como tenemos un 20 % adicional de espacio, creé un segundo fragmento con una clase CSS (denominada «sección emergente») que establecerá el ancho predeterminado en 120 % (20 % más que el 100 % del ancho del contenedor) para cualquier fila o sección a la que agregue la clase CSS.

Agregue la clase CSS a su sección

Para agregar la Clase CSS a su sección, abra la configuración de la sección y, en la pestaña avanzada, ingrese «sección emergente» en el campo de entrada Clase CSS.

Una vez que agregue la «sección emergente» de la clase CSS a su sección, debe notar que su sección ha crecido en ancho y se extiende más allá del lado derecho del contenedor de su página. Esto significa que su CSS está funcionando al aumentar el ancho de su sección al 120%. No personalicé completamente la sección usando CSS personalizado porque pensé que era mejor dejar algo de espacio para los ajustes usando Divi Builder.

Ajuste de su sección emergente con Divi Builder

Ahora que tiene una sección con un 120 % de ancho, puede usar Divi Builder para ajustar el ancho y la posición de la ventana emergente. Abra la configuración de su sección en la pestaña de diseño y cambie el ancho de su sección ingresando el valor porcentual en el campo. Puede ingresar cualquier valor entre 100-120%. Creo que 110% es un gran término medio feliz. Ingrese 110% en el campo de ancho.

Ahora necesita ajustar el margen para centrar la sección emergente. Dado que la sección se extiende un 10 % hacia la derecha del contenedor de la página, debemos moverla un 5 % hacia la izquierda. Para hacer esto, ingrese un margen izquierdo personalizado de -5%.

Si establece su ancho en 120%, deberá agregar un margen izquierdo de -10%.

A continuación, seleccione la primera opción de sombra de cuadro y dele una intensidad de desenfoque de 60 px. Y cambia el color de la sombra a rgba(0,0,0,0.2).

Crear una fila emergente

Para crear una fila emergente, seguirá el mismo proceso básico que cuando crea una sección emergente. Agregue la «sección emergente» de Clase CSS a la Configuración de fila en la pestaña Avanzado. Luego, en la pestaña de diseño, seleccione usar ancho personalizado, seleccione la opción de unidad de porcentaje y luego ingrese 110% para el ancho.

Luego establezca un margen izquierdo de -5%.

En lugar de agregar color de fondo y sombra de cuadro a la fila, puede optar por crear el efecto emergente en los módulos que se extienden más allá del contenedor de la página. Simplemente edite la configuración del módulo, agregue un color de fondo blanco y dele una sombra de cuadro con una fuerza de desenfoque de 60 px y el color rgba (0,0,0,0.2).

Pensamientos finales

La creación de secciones emergentes en un diseño de cuadro es una forma única de diferenciar su diseño con la ventaja adicional de hacer que su contenido se destaque. Todo lo que necesita es un poco de CSS personalizado y puede agregar una clase de CSS a cualquier fila o sección para extenderla más allá del contenedor de la página. Después de eso, puede ajustar su fila o sección usando la configuración de Divi Builder. Este tutorial simplemente presenta el concepto de diseño, pero siéntase libre de experimentar con su propia aplicación del diseño emergente.

Esperando saber de usted en los comentarios.

¡Salud!