Con Divi y sus opciones integradas, hay muchas maneras 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 usando 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!
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descarga 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
¡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 también una nueva fila, utilizando 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: 0ms
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 haga 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
Espaciado
Para crear la apariencia de una nota adhesiva, agregaremos algunos valores de relleno personalizados al módulo:
- Relleno superior: 150px
- Relleno inferior: 150px
- Relleno izquierdo: 20px
- Relleno derecho: 20px
Borde
También estamos agregando un borde superior usando la siguiente configuración:
- Ancho del borde superior: 20px
- Color del borde superior: #ffc300
Agregue el 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, ve a la pestaña de diseño y cambia el color del divisor.
- Color: #ffc300
Estilos
Modifique también la configuración de estilos del divisor.
- Estilo de divisor: punteado
Dimensionamiento
Y cambie la configuración de tamaño también.
- Peso del divisor: 5px
- Altura: 0px
Espaciado
Para crear algo de espacio entre el módulo anterior y este, estamos agregando un margen superior.
- Margen superior: 150px
Transformar Rotar
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 aparece 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 #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, 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: 100px
- Altura de 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 #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:
- Título 3 Fuente: Indie Flower
- Título 3 Color del texto: #3a0cf2
- Título 3 Tamaño del texto: 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 #4 a la Columna 2
Agregar contenido
Pasamos al siguiente módulo, que es otro módulo de texto. Introduzca 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 línea de texto: 2em
Dimensionamiento
Modifique el ancho del módulo a continuación.
- Ancho: 78%
Espaciado
Y agregue un poco de margen superior e inferior.
- Margen superior: 10px
- Margen inferior: 50px
Agregar copia
El último módulo que necesitamos en la segunda columna es un módulo de botones. Introduzca alguna copia de su elección.
Configuración de botones
Luego, ve a la pestaña de diseño y dale 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.
- Relleno superior: 20px
- Relleno 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 #1
Cambiar el color de fondo del módulo de texto #1
Estamos cambiando la paleta de colores de ambos duplicados, empezando 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 #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 cambie el color de fondo del botón.
- Color de fondo del botón: #00ffee
Modificar fila duplicada #2
Cambiar el color de fondo del módulo de texto #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 #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
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
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 tome su tamaño inicial nuevamente.
- 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 usando solo las opciones integradas de Divi. Esta es una forma creativa y divertida de mostrar los 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 de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.