Cómo usar Div

Cuando intenta convencer a los visitantes para que se dirigan a través de su sitio web, es esencial darles los incentivos correctos. Cuando piensas en incentivos, te aparecen exhortaciones claras e irresistibles de inmediato. Pero CTA suele ser la última parte del proceso de compra. Lo más probable es que construya su camino hacia arriba, mostrando el valor de su empresa. Una de las mejores maneras de hacerlo es compartir su enfoque y una propuesta de valor única. Si está buscando una manera fácil de diseñar su enfoque, le gustará este tutorial. Hoy, le mostraremos cómo incluir diferentes pasos adhesivos que cambian mientras las personas corren y leen. ¡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 el diseño de pasos adhesivos de forma gratuita para poner sus manos en el aspecto gratuito de los pasos adhesivos, primero deberá 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. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Cree el diseño de diseño Agregar una sección de fondo de gradiente regular Inicie agregando una nueva sección a la página a la que trabaja. Abra la configuración de la sección respectiva y aplique un fondo de gradiente:
Color 1: #ffffff
Color 2: # E5E5E5
Tipo de gradiente: lineal
Dirección de gradiente: 150 grados
Imagen del sótano Cargar una imagen de fondo más. Puede encontrar el que usamos en este tutorial en la carpeta de descarga que puede encontrar al comienzo de esta publicación. Puede usar la imagen de fondo gratuita y sin restricciones.

Tamaño de la imagen de fondo: adecuado
Posición de la imagen de fondo: superior izquierda
Espaciado Retire la sección predeterminada de la sección agregando “0px”.

Finamiento inferior: 0 PX
Agregue una nueva estructura de columna de fila Continuar agregando primero a la sección utilizando la siguiente estructura de columnas:

Color de fondo sin agregar módulos, abra la configuración de línea y cambie el color de fondo.

Color de fondo: RGBA (130,100.239,0.09)
Dimensión Vaya a la pestaña Diseño de fila y modifique la configuración de tamaño en consecuencia: iguala las alturas de la columna: Sí

Alineación de filas: centro
El espacio aplica algunos valores de espaciado personalizados.
Margen superior: 5%

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
ENLIZACIÓN IZQUIERDA: 5%
Revestimiento derecho: 5%
Border luego, acceda a la configuración del borde y use algunas esquinas redondeadas.
Todas las esquinas: 10 PX

Cambiamos los derrames de líneas a visibles. Esto asegurará que todo lo que exceda el contenedor de fila no se oculte.
Desbordamiento horizontal: visible

Desbordamiento vertical: visible
Configuración de la columna 1 Espacio Luego abra la configuración de la columna 1 y agregue algunos rellenos personalizados en la parte superior e inferior.
Revestimiento superior: 5%

Finamiento inferior: 5%
Configuración Columna 2 Antecedentes de gradiente Continuando, agregaremos un fondo de gradiente en la columna 2.
Color 1: # 7b47ff

Color 2: # 6929AAA
Tipo de gradiente: lineal
Dirección de gradiente: 158 grados
Espacio agregaremos algunos rellenos personalizados en la columna.
Revestimiento superior: 5%

Finamiento inferior: 5%
ENLIZACIÓN IZQUIERDA: 5%
Revestimiento derecho: 5%
Borde junto con algunas esquinas redondeadas.
Todas las esquinas: 10 PX

Escala de transformación y aumentaremos el tamaño de la columna en la configuración de transformación aplicando los siguientes valores de la escala de transformación:
Ambos: 107%

Agregue un módulo de texto en la columna 1 Agregar contenido H3 es hora de agregar módulos, comenzando con un módulo de texto en la columna 1. Ingrese un contenido H3 de su elección.
Configuración de texto H3 Cambiar a la pestaña Diseño del módulo y cambiar la configuración de texto H3 de acuerdo con: 3 Fuentes: Poppins

Rúbrica 3 Color de texto: # 6929AAA

Rúbrica 2 Dimensión de texto: 35 PX
Rúbrica 3 Espaciación de litros: -1 PX
Agregue un módulo divisor en la visibilidad de la columna 1, luego, haremos un módulo divisor en la columna 1. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si
La línea va a la pestaña Diseño del módulo y cambia el color de la línea.

Color de línea: # F5CA4E
Dimensión Modifique la configuración de tamaño.

Peso del divisor: 6 PX
Ancho: 20%

Altura: 6 PX
El borde llena la configuración del módulo incluyendo esquinas redondeadas en la configuración del borde.
Todas las esquinas: 20 PX
Agregue un módulo de texto a la columna 2 Agregar contenido en la columna 2, el único módulo que necesitamos es un módulo de texto con un contenido de descripción.

Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto de la siguiente manera:
Texto de fuente: PlayFair Display

Tamaño de texto: 16 PX

La altura de la línea de texto: 2.1em
El espacio completa la configuración del módulo agregando algunos valores de llenado personalizados.
Revestimiento superior: 5%
Finamiento inferior: 5%

ENLIZACIÓN IZQUIERDA: 5%

Revestimiento derecho: 5%
Clonar toda la fila tantas veces como sea necesario después de haber completado la primera fila, puede clonarla tantas veces como desee, dependiendo de cuánta información desea compartir sobre su primer paso.
Cambie todas las copias Asegúrese de cambiar todas las copias en filas duplicadas.
2. Agregue la barra de fila de paso a la parte inferior de la sección Agregue una nueva fila La estructura de la columna ahora, que tenemos todas las filas explicativas en su lugar, podemos agregar nuestra fila con pasos adhesivos. Agregue una nueva línea utilizando la siguiente estructura de columna: fondo de gradiente Abra la configuración de línea y use un fondo de gradiente.

Color 1: # FFDF51

Color 2: # E5AC49

Tipo de gradiente: lineal

Dirección de gradiente: 150 grados
Dimensión Vaya a la pestaña Diseño de fila y cambie la configuración de tamaño de la siguiente manera:
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí

Alineación de filas: centro
El espacio aplica algunos valores de espaciado personalizados.
Margen superior: 5%
SUS Lingo: 0 PX
Finamiento inferior: 0 PX

Border luego, acceda a la configuración del borde y agregue algunas esquinas redondeadas.
Todas las esquinas: 10 PX
Box Shadow Aplica la siguiente sombra de la caja:
Poder de poco claro de la sombra de la caja: 50 px

Color de la sombra: RGBA (0.0,0,0.13)
Externas entonces, explore la pestaña avanzada y establezca los flujos en la visible.

Desbordamiento horizontal: visible
Desbordamiento vertical: visible
Espacio de columna 2 Luego, abra la configuración de la columna 2 y use algunos rellenos superiores e inferiores personalizados.

Revestimiento superior: 1%
Finamiento inferior: 1%
Columna 3 El espacio, agregamos algunos rellenos personalizados, superior e inferior, y a la columna 3.

Revestimiento superior: 2%
Finamiento inferior: 2%
Agregue un módulo de texto a la columna 1 Agregar contenido es el momento de agregar módulos a nuestra fila con pasos adhesivos. Agregue un módulo de texto a la columna 1 y mencione el paso en el cuadro de contenido. Luego aplique un fondo de gradiente.

Color 1: # 7b47ff
Color 2: # 6929AAA
Tipo de gradiente: lineal

Dirección de gradiente: 158 grados

Configuración de texto Vaya a la pestaña Diseño del módulo y estilice el texto en consecuencia:
Texto de fuente: Poppins
El peso de la fuente de texto: en negrita
Color de texto: #ffffff
Tamaño del texto: 27 PX

Dimensión Modifique la configuración de tamaño.
Ancho: 60%
Alineación del módulo: centro
Espacio y luego, agregue algunos rellenos personalizados en la parte superior e inferior a la configuración de espaciado.
Revestimiento superior: 20 px

Finamiento inferior: 20 PX
Border agregue algunas esquinas redondeadas a la siguiente configuración del borde.
Todas las esquinas: 10 PX

Box Shadow también usa un tono de caja sutil.
Color de la sombra: RGBA (0.0,0,0,3)
Transformar la traducción y completaremos la configuración del módulo reposicionando fácilmente el módulo utilizando la configuración de traducción transformada de la div.

Derecha: -20px
Agregue un módulo de texto a la columna 2 Agregue el contenido H2 en la columna 2, agregue un módulo de texto con un contenido H2 que describe el paso que somos.

Configuración de texto H2 Vaya a la pestaña Diseño del módulo y estilice la configuración de texto H2 de la siguiente manera:
2 Sección de fuentes: Poppins

Fuente 2 Sección de peso: Medio
Alineación del cabezal de texto 2:

Escritorio: izquierda

Tableta y teléfono: centro
Rúbrica 2 Color de texto: # 6d40ed
Rúbrica 2 Espaciación de litros: -1 PX
El espacio agregue algunos revestimientos personalizados desde arriba e abajo.
Revestimiento superior: 5%de revestimiento inferior: 5%
Agregue un módulo de texto a la columna 3 Agregue el interruptor de contenido a la siguiente y última columna. Agregue un módulo de texto con un contenido de descripción.
Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto en consecuencia:
Texto de fuente: PlayFair Display

El peso de la fuente de texto: en negrita
Color de texto: RGBA (109,64,237,0,46)
Tamaño de texto: 20 PX

Alineación del texto:

Escritorio: izquierda
Tableta y teléfono: centro
3. Aplique efectos adhesivos en la configuración de la barra de fila de líneas adhesivas ahora, después de que nuestras barras de diseño con pasos pegajosos se hayan completado, es hora de arreglarlo en la parte inferior. Abra la configuración de la fila, acceda a la pestaña avanzada y aplique la siguiente configuración de posición adhesiva:
Posición pegajosa: adhiérase al fondo
Lipic Lower Gap: 1 PX
Límite superior de aterrizaje: sección
Brecha de los elementos circundantes adhesivos: sí
Transición predeterminada y estilos adhesivos: sí

Filtro de fila pegajosa En un estado predeterminado, no queremos que la barra ordinaria sea visible. Sin embargo, una vez que se ha vuelto pegajoso, queremos aparecer. Para hacer esto, cambiaremos el filtro de opacidad desde la configuración del filtro:
Valor predeterminado: 0%
Sticky: 100%
4. Reutilice la sección completa para los siguientes pasos Clon la sección siempre que sea necesario ahora que se ha creado nuestra primera sección, dedicada al paso 1, podemos reutilizar la sección completa en función de la cantidad de pasos que tenemos.
Cambie todas las copias a secciones duplicadas Asegúrese de cambiar todas las copias en secciones duplicadas. ¡Eso es todo!
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.Escritorio

Pensamientos finales En esta publicación, le mostré cómo ser creativo con el diseño del enfoque de su sitio web.Específicamente, le mostré cómo usar las opciones de división pegajosa para crear diferentes pasos adhesivos que ayudarán a sus visitantes a navegar a través de diferentes partes de su enfoque. ¡Puede descargar el archivo JSON de forma gratuita!Si tiene alguna pregunta o sugerencia, no dude en 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.