Creación de "notas adhesivas" con contenido expandible con Divi

Con las opciones integradas de Divi, hay muchas formas de presentar servicios y / o procesar pasos en su sitio web. Para ayudarlo a inspirarse, le mostraremos cómo crear notas adhesivas con contenido expandible utilizando solo las opciones integradas de Divi. Esta es una forma divertida de compartir contenido adicional tan pronto como el visitante activa la interacción. Puede utilizar este diseño para cualquier sitio web en el que esté trabajando y también podrá descargar el archivo JSON de forma gratuita.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue el diseño de notas adhesivas GRATIS

Para poner sus manos en el diseño gratuito de notas adhesivas, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

¡Empecemos a recrear!

Suscríbete a nuestro canal de Youtube

Agregar una nueva sección regular

Lo primero que deberá hacer es agregar una nueva sección regular a la página en la que está trabajando.

Agregar una nueva fila

Estructura de la columna

Continúe agregando una nueva fila también, usando la siguiente estructura de columnas:

Duración de la transición

Sin agregar ningún módulo todavía, abra la configuración de la fila. Estamos creando una transición instantánea cambiando la duración de la transición en la pestaña avanzada.

• Duración de la transición: 0 ms

Agregue el módulo de texto n. ° 1 a la columna 1

Agregar contenido

¡Es hora de comenzar a agregar módulos! Agregue un nuevo módulo de texto a la primera columna de la fila e ingrese el contenido H2 que desea que aparezca en el diseño de la nota adhesiva.

Color de fondo

Luego, vaya a la configuración de fondo y cambie el color de fondo en consecuencia:

• Color de fondo: # ffd800

Configuración de texto H2

Pase a la configuración de texto H2 y realice algunos cambios allí también:

• Fuente del título 2: Indie Flower
• Alineación del texto del encabezado 2: centro
• Color del texto del encabezado 2: # 3a0cf2
• Tamaño del texto del encabezado 2: 40px

Espaciado

Para crear la apariencia de una nota adhesiva, agregaremos algunos valores de relleno personalizados al módulo:

• Relleno superior: 150 px
• Acolchado inferior: 150px
• Relleno izquierdo: 20px
• Relleno derecho: 20px

Frontera

También estamos agregando un borde superior usando la siguiente configuración:

• Ancho del borde superior: 20px
• Color del borde superior: # ffc300

Agregar módulo divisor a la columna 1

Visibilidad

El siguiente módulo que necesitamos en la primera columna es un módulo divisor. Asegúrese de que la opción 'Mostrar divisor' esté habilitada.

• Mostrar divisor: Sí

Color

Luego, vaya a la pestaña de diseño y cambie el color del divisor.

• Color: # ffc300

Estilos

Modifique también la configuración de estilos del divisor.

• Estilo del divisor: discontinuo

Dimensionamiento

Y cambie también la configuración de tamaño.

• Peso del divisor: 5px
• Alto: 0px

Espaciado

Para crear algo de espacio entre el módulo anterior y este, agregamos un margen superior.

• Margen superior: 150 px

Transformar Girar

Como puede notar en la vista previa de esta publicación, estamos buscando crear un divisor vertical en lugar de uno horizontal. Para lograr esto, vamos a cambiar el valor de la izquierda en la configuración de rotación de transformación del Módulo Divisor:

• Izquierda: 270 grados

Visibilidad

También queremos asegurarnos de que el Módulo divisor aparezca debajo del Módulo de texto. Para hacer eso, disminuiremos el índice z del divisor en la pestaña avanzada.

• Índice Z: -99

Agregue el módulo de texto n. ° 2 a la columna 1

Agregar símbolo al cuadro de contenido

El siguiente y último módulo que necesitamos en la primera columna es otro módulo de texto. Agregue el carácter '●' al cuadro de contenido.

Configuración de texto

Luego, pase a la pestaña de diseño y cambie la configuración del texto.

• Fuente de texto: Open Sans
• Color del texto: # 3a0cf2
• Tamaño del texto: 100px
• Altura de la línea de texto: 1em
• Orientación del texto: centro

Espaciado

Cree la superposición deseada agregando un margen superior negativo a continuación.

• Margen superior: -50px

Agregue el módulo de texto n. ° 3 a la columna 2

Agregar contenido H3

Pasemos a la segunda columna. Aquí, el primer módulo que necesitamos es un módulo de texto. Ingrese algún contenido H3 de su elección.

Configuración de texto H3

Vaya a la pestaña de diseño y cambie la configuración de texto H3 en consecuencia:

• Fuente del título 3: Indie Flower
• Color del texto del encabezado 3: # 3a0cf2
• Tamaño del texto del encabezado 3: 30px

Espaciado

Agregue un margen superior personalizado a continuación:

• Margen superior: 400 px (escritorio), 200 px (tableta), 150 px (teléfono)

Agregue el módulo de texto n. ° 4 a la columna 2

Agregar contenido

Pasemos al siguiente módulo, que es otro módulo de texto. Ingrese algún contenido de párrafo de su elección.

Configuración de texto

Luego, vaya a la pestaña de diseño y cambie la configuración del texto.

• Fuente de texto: Open Sans
• Tamaño del texto: 13px
• Altura de la línea de texto: 2em

Dimensionamiento

Modifique el ancho del módulo a continuación.

• Ancho: 78%

Espaciado

Y agregue algunos márgenes superior e inferior.

• Margen superior: 10px
• Margen inferior: 50 px

Agregar módulo de botones a la columna 2

Agregar copia

El último módulo que necesitamos en la segunda columna es un módulo de botones. Ingrese alguna copia de su elección.

Configuración de botones

Luego, vaya a la pestaña de diseño y aplique estilo al botón.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 20px
• Color del texto del botón: # 3a0cf2
• Color de fondo del botón: # ffd800
• Ancho del borde del botón: 0px
• Radio del borde del botón: 0px
• Fuente del botón: Abhaya Libre

Espaciado

Agregue también algunos valores de relleno personalizados.

• Acolchado superior: 20px
• Acolchado inferior: 20px
• Relleno izquierdo: 60px
• Relleno derecho: 60px

Clonar fila dos veces

Una vez que haya terminado de agregar todos los módulos, puede continuar y clonar la fila dos veces.

Modificar fila duplicada n. ° 1

Cambiar el color de fondo del módulo de texto n. ° 1

Estamos cambiando la paleta de colores de ambos duplicados, comenzando por el primero. Abra el primer módulo de texto en la columna 1 y cambie el color de fondo.

• Color de fondo: # 00ffee

Cambiar el color del borde superior del módulo de texto n. ° 1

Modifique también el color del borde superior.

• Color del borde superior: # 00e0c2

Cambiar el color del divisor

Luego, use el siguiente código de color para el divisor:

• Color del divisor: # 00e0c2

Cambiar el color de fondo del módulo de botones

Y cambia el color de fondo del botón.

• Color de fondo del botón: # 00ffee

Modificar fila duplicada n. ° 2

Cambiar el color de fondo del módulo de texto n. ° 1

Pase a la segunda fila duplicada, abra el primer módulo de texto en la columna 1 y cambie el color de fondo.

• Color de fondo: # 42ff21

Cambiar el color del borde superior del módulo de texto n. ° 1

Modifique también el color del borde superior.

• Color del borde superior: # 1de524

Cambiar el color del divisor

Luego, abra el Módulo divisor y use el siguiente color divisor:

• Color del divisor: # 1de524

Cambiar el color de fondo del módulo de botones

Y por último, pero no menos importante, cambie el color de fondo del botón:

• Color de fondo del botón: # 42ff21

Crea contenido expandible

Agregar tamaño de fila predeterminado a todas las filas

Ahora que hemos personalizado todas las filas de nuestra sección, es hora de hacer que el contenido se pueda expandir. Para ello, abra cada una de las filas y aplique la siguiente altura máxima:

• Altura máxima: 397px

Agregar tamaño de fila flotante a todas las filas

Modifique la altura máxima al pasar el mouse a '100%'. Esto permitirá que la fila recupere su tamaño inicial.

• Altura máxima: 100%

Cambiar desbordamiento para todas las filas

¡Asegúrate de ocultar también los desbordamientos de cada una de las filas y listo!

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo crear notas adhesivas con notas expandibles utilizando solo las opciones integradas de Divi. Esta es una forma creativa y divertida de mostrar servicios en su sitio web. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.