Tutorial Divi: Cómo añadir capas superpuestas y para qué sirven

Divi hover texto sobre imagen

Saltar al contenido La sección Fullwidth Header en Divi le da la opción de crear una superposición de fondo. Sin embargo, para las secciones estándar (o cualquier otro lugar) que la opción no está disponible.Este tutorial le mostrará cómo agregar color de superposición a la imagen de fondo de paralaje en la sección estándar. Esta superposición hace que la lectura del texto sea más fácil, especialmente cuando la imagen de fondo tiene varios colores.Configuración del módulo de sección > Avanzado > Clase CSS = bg-overlayDivi > Opciones de tema > General > CSS personalizado

Divi popup sin plugin

Crearemos el popup con un plugin premium de Divi llamado Divi Overlays. Este plugin fue creado por Tim Strifler de divilife.com. Si necesitas crear popups para un solo sitio web, estarás bien con la licencia de $24 Single Site. Este plugin es genial, porque nos permite construir cualquier diseño con el constructor Divi y establecerlo como una superposición. Puede ser una superposición de pantalla completa, modal o una ventana emergente. Vamos a utilizarlo como una ventana emergente en este tutorial.

El primer paso es comprar una licencia de Divi Overlays y luego instalar y activar este plugin en tu sitio web WordPress. Después de que usted verá un “Divi Overlays” enlace añadido en su panel de administración WordPess. Además, no se olvide de introducir su clave de licencia para activar el plugin (lo encontrará en el correo electrónico de confirmación de compra).

  Permalinks por defecto sin intervención del usuario

El siguiente paso es simplemente crear un nuevo Divi Overlay haciendo clic en Divi Overlays > Add New en tu panel de WordPress. Y, por supuesto, puede habilitar el Divi Builder en él y crear el diseño con él. En realidad esta será nuestra ventana emergente.

Divi popup en la carga de la página

Como se muestra en el video, este es el plugin popup que utilizo para crear un efecto en el que un botón, elemento de menú o cualquier elemento en su sitio web Divi puede emerger una ventana, formulario de contacto o prácticamente cualquier cosa que desee crear. Todo ello utilizando el constructor Divi para la superposición de popup. ¡Este Divi Popup también se crea sin tener que escribir ningún código! Con Divi Overlays, es simple, rápido, intuitivo e incluso fácil de crear popups impresionantes en Divi.

¡Si usted está interesado en probar Divi Overlays, por favor utilice el enlace de arriba como, descargo de responsabilidad completa, es un enlace de afiliado por lo que voy a obtener un retroceso si usted compra lo que me ayuda a mí ya mi familia y me permite seguir proporcionando tutoriales gratuitos, videos y recursos!

  Cómo optimizar la página de finalizar compra para no perder ventas

Mi curso Divi/WordPress para principiantes es la forma más rápida y rentable de aprender Divi y WordPress, garantizado. ¡Usted ahorrará tiempo, dinero y su cordura de tamizar a través de la documentación sin fin, tutoriales y foros de aprender todo lo que necesita saber en este entrenamiento conciso para que pueda empezar a construir sitios web impresionantes en ningún momento!

Ventana emergente modal Divi

Hay una serie de grandes plugins que te permiten crear algunas superposiciones de imágenes muy elegantes y efectos hover. Dos plugins Divi muy populares incluyen Image Intense por BeSuperfly y Divi Overlays por DiviLife.

Si estás trabajando con un tema hijo puedes ir a Apariencia>Editor y abrir tu hoja de estilos. Si no, ve a Apariencia>Opciones de tema Divi>C CSS personalizado (que se encuentra en la parte inferior de la primera pestaña de Opciones de tema).

Al igual que con todos mis tutoriales, mi objetivo no es enseñarle cómo utilizar la configuración de Divi tanto como lo es para enseñarle cómo personalizar su sitio web aprendiendo un poco de CSS en el camino. Así que con eso se dice, aquí hay algunos consejos CSS para ayudarle a aprender un poco más sobre CSS.

En este tutorial tenemos 6 diferentes estilos de superposición para elegir. Para el primer ejemplo hemos utilizado la técnica Fade-In-Text. Si desea utilizar una de las otras técnicas, sólo tiene que cambiar la Clase CSS en la pestaña Avanzado del Módulo de Código.

  Aprende WordPress mientras desayunas: Cómo instalar un SSL gratis de Lets Encrypt