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 active la interacción. ¡Puede usar 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

notas adhesivas

Móvil

notas adhesivas

Descargar The Sticky Notes Layout GRATIS

Para poner sus manos en el diseño de notas adhesivas gratis, 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

¡Comencemos a recrearnos!

(incrustar) https://www.youtube.com/watch?v=UjTDWBvXwnQ (/ incrustar)

Suscríbase 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.

notas adhesivas

Agregar una nueva fila

Estructura de columna

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

notas adhesivas

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 al cambiar la duración de la transición en la pestaña avanzada.

  • Duración de transición: 0 ms

notas adhesivas

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.

notas adhesivas

Color de fondo

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

  • Color de fondo: # ffd800

notas adhesivas

Configuraciones de texto H2

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

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

notas adhesivas

Espaciado

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

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

notas adhesivas

Frontera

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

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

notas adhesivas

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í

notas adhesivas

Color

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

  • Color: # ffc300

notas adhesivas

Estilos

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

  • Estilo divisor: discontinuo

notas adhesivas

Dimensionamiento

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

  • Divisor de peso: 5px
  • Altura: 0px

notas adhesivas

Espaciado

Para crear espacio entre el módulo anterior y este, estamos agregando un margen superior.

  • Margen superior: 150 px

notas adhesivas

Transformar Rotar

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

  • Izquierda: 270 grados

notas adhesivas

Visibilidad

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

  • Índice Z: -99

notas adhesivas

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.

notas adhesivas

Configuraciones de texto

Luego, vaya 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: 100 px
  • Altura de la línea de texto: 1em
  • Orientación del texto: centro

notas adhesivas

Espaciado

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

  • Margen superior: -50px

notas adhesivas

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

Añadir 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.

notas adhesivas

Configuraciones de texto H3

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

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

notas adhesivas

Espaciado

Agregue un margen superior personalizado a continuación:

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

notas adhesivas

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

Agregar contenido

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

notas adhesivas

Configuraciones 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 de texto: 13px
  • Altura de la línea de texto: 2em

notas adhesivas

Dimensionamiento

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

  • Ancho: 78%

notas adhesivas

Espaciado

Y agregue un poco de margen superior e inferior.

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

notas adhesivas

Agregar módulo de botón 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.

notas adhesivas

Configuraciones 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: 20 px
  • 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

notas adhesivas

notas adhesivas

Espaciado

Agregue algunos valores de relleno personalizados también.

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

notas adhesivas

Clone Row Twice

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

notas adhesivas

Modificar fila duplicada # 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

notas adhesivas

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

Modifique el color del borde superior también.

  • Color del borde superior: # 00e0c2

notas adhesivas

Cambiar el color del divisor

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

  • Color del divisor: # 00e0c2

notas adhesivas

Cambiar el color de fondo del módulo de botones

Y cambie el color de fondo del botón.

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

notas adhesivas

Modificar fila duplicada # 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

notas adhesivas

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

notas adhesivas

Cambiar el color del divisor

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

  • Color del divisor: # 1de524

notas adhesivas

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

notas adhesivas

Crear 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 sea expandible. Para hacer eso, abra cada una de las filas y aplique la siguiente altura máxima:

  • Altura máxima: 397 px

notas adhesivas

Agregue el tamaño de fila de desplazamiento a todas las filas

Modifique la altura máxima al pasar el mouse por "100%". Esto permitirá que la fila vuelva a ocupar su tamaño inicial.

  • Altura máxima: 100%

notas adhesivas

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

notas adhesivas

Avance

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

Escritorio

notas adhesivas

Móvil

notas adhesivas

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 lúdica 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 regalos Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.