Creación de “notas adhesivas” con contenido extensible con div Div

Con las opciones integradas de la división, hay muchas formas de presentar los 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 de división construidas. Esta es una forma divertida de compartir contenido adicional tan pronto como el visitante desencadena la interacción. ¡Puede usar este diseño para cualquier sitio web para el que trabaje y podrá descargar el archivo JSON de forma gratuita! ¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio

Móvil

Descargue las notas del sticko busque de forma gratuita para poner sus manos en el aspecto gratuito de notas adhesivas, primero debe descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Revise su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! ¡Comencemos a recrear! Suscríbase a nuestro canal de YouTube Agregue una nueva sección normal. Lo primero que tendrá que hacer es agregar una nueva sección habitual a la página en la que trabaja.
Agregue una nueva estructura de columna de fila Continúe agregando una nueva fila, utilizando la siguiente estructura de columnas:

La duración de la transición sin agregar módulos, abra la configuración de la fila. Creamos 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 no. 1 en la columna 1 Agregar contenido es hora de comenzar a agregar módulos. Agregue un nuevo módulo de texto en la primera columna de la fila e ingrese el contenido H2 que desea aparecer en el diseño de notas adhesivas.

Color de fondo luego acceda a la configuración de fondo y cambie el color de fondo en consecuencia:

Color de fondo: # FFD800
Configuración de texto H2 Cambiar a la configuración de texto H2 y realizar algunos cambios allí:

2 Sección de fuentes: flor indie
Título 2 Alineación de texto: Centro
Rúbrica 2 Color de texto: # 3A0CF2
Rúbrica 2 Dimensión de texto: 40 PX
Espacio Para crear la apariencia de una nota adhesiva, agregaremos algunos módulos de relleno personalizados a la forma:

Revestimiento superior: 150 PX
Revestimiento inferior: 150 px
ENLIZACIÓN IZQUIERDA: 20 PX
Revestimiento derecho: 20 PX
El borde también agregue un borde superior utilizando la siguiente configuración:

El ancho del borde superior: 20 px
Color de marco más alto: # FFC300
Agregue un módulo divisor en la visibilidad de la columna 1 La siguiente manera que necesitamos en la primera columna es un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”. Divisor: sí

Colorear luego acceda a la pestaña de diseño y cambie el color del separador.
Color: # FFC300

Estilos modificados y configuraciones de estilo divisor.
Estilo divisor: puntaje

Dimensión y modifique la configuración de tamaño.
Peso del divisor: 5 PX

Altura: 0px
Espacio para crear un espacio entre el módulo anterior y él, agregamos un margen desde arriba.
Margen superior: 150 PX

Transformación de rotación Como puede ver en la vista previa de esta publicación, buscamos crear un divisor vertical en lugar de uno horizontal. Para lograr esto, cambiaremos el valor de la izquierda en la configuración de giro de la transformación del módulo divisor:
Izquierda: 270 grados

Visibilidad también, queremos asegurarnos de que el módulo divisor aparezca en el módulo de texto. Para hacer esto, reduciremos el índice Z del divisor en la pestaña avanzada.
IND ÍNDICE: -99

Agregue el módulo de texto no. 2 en la columna 1 Agregue el símbolo al cuadro de contenido El siguiente modo y último modo que necesitamos en la primera columna es otro módulo de texto. Agregue el carácter “●” al cuadro de contenido.
Configuración de texto Entonces, pase a la pestaña Diseño y cambie la configuración de texto.

Texto de fuente: Abrir sans

Color de texto: # 3A0CF2

Tamaño del texto: 100 PX
La altura de la línea de texto: 1em
Orientación de texto: centro
El espacio crea la superposición deseada agregando algunos bordes superiores negativos.
Margen superior: -50 PX

Agregue el módulo de texto no. 3 En la columna 2 Agregue el contenido H3, pasemos a la segunda columna. Aquí, el primer módulo que necesitamos es un módulo de texto. Ingrese un contenido H3 de su elección. Texto H3 Acceso a la pestaña Diseño y modifique la configuración de texto H3 en consecuencia:
3 Fuentes de fuentes: flor indie

Rúbrica 3 Color de texto: # 3A0CF2

Rúbrica 3 Dimensión de texto: 30 PX
Espacio Agregar algunos bordes superiores personalizados:
Margen superior: 400 PX (escritorio), 200 px (tableta), 150 px (teléfono)
Agregue el módulo de texto # 4 a la columna 2 Agregue el interruptor de contenido al siguiente módulo, que es otro módulo de texto. Ingrese un contenido de párrafo de su elección.

Configuración de texto Entonces, acceda a la pestaña de diseño y cambie la configuración de texto.
Texto de fuente: Abrir sans

Tamaño de texto: 13 PX

Altura de la línea de texto: 2em
Dimensión Modifique el ancho del módulo a continuación.
Ancho: 78%
Espacio y agregue algunos bordes superior e inferior.

Margen superior: 10 PX
Margen inferior: 50 PX

Agregue un módulo de botón a la columna 2 Agregue una copia El último módulo que necesitamos en la segunda columna es un módulo de botón. Ingrese una copia de su elección.
Establece el botón y luego vaya a la pestaña de diseño y estilice el botón.
Use estilos personalizados para el botón: Sí

Botón de tamaño de texto: 20 PX

El color de texto del botón: # 3A0CF2
El color de fondo del botón: # FFD800
El ancho del nudo del botón: 0 PX
El rasgo de botón de botón: 0 px
Botón de fuente: abhaya libre
Sparto Agregue algunos valores de llenado personalizados.
Revestimiento superior: 20 px
Finamiento inferior: 20 PX


Junta izquierda: 60 PX
Revestimiento derecho: 60 PX
Clone Row dos veces Después de que termine agregue todos los módulos, puede continuar y puede clonar el giro dos veces. Modifique el giro duplicado # 1 Cambie el módulo de texto # 1 Color de fondo Cambiamos la paleta de colores de ambos duplicado, comenzando con primero. Abra el primer módulo de texto en la columna 1 y cambie el color de fondo.
Color de fondo: # 00ffee
Cambie el módulo de texto # 1 El color del borde superior cambia y el color del borde superior.

Color de marco más alto: # 00e0c2

Cambie el color del separador y luego use el siguiente código de color para el divisor:
Color divisor: # 00e0c2

Cambiar el botón de color de fondo y cambiar el color de fondo del botón.
El color de fondo del botón: # 00ffee

Cambie la fila duplicada # 2 Cambie el módulo de texto # 1 Color de fondo Pase el segundo duplicado, abra el primer módulo de texto en la columna 1 y cambie el color de fondo.
Color de fondo: # 42FF21

Cambie el módulo de texto # 1 El color del borde superior cambia y el color del borde superior.
Color de marco más alto: # 1DE524

Cambie el color del separador luego, abra el módulo divisor y use el siguiente color divisor:
Color divisor: # 1de524

Cambiar el botón de color de fondo y por último, pero no menos importante, cambie el color de fondo del botón:
El color de fondo del botón: # 42FF21

Cree contenido extensible Agregar el tamaño predeterminado de las filas a todas las líneas Ahora que hemos personalizado todas las filas en nuestra sección, ha sido hora de expandir el contenido. Para esto, abra cada una de las filas y aplique la siguiente altura máxima:
Altura máxima: 397 PX

Agregue el tamaño de la fila a todas las filas Cambie la altura máxima para caminar al “100%”. Esto permitirá que la fila vuelva a tomar su tamaño original. Longitud máxima: 100%
¡Cambie el desbordamiento para todas las filas, asegúrese de ocultar los derrames de cada una de las filas y ya está terminado!

Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto

Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil

Pensamientos finales En esta publicación, le mostré cómo crear notas pegajosas con notas extensibles usando solo las opciones incorporadas del DIV. Esta es una forma creativa y lúdica de presentar 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.