Cuando se trata de convencer a los visitantes de que se comuniquen a través de su sitio web, es fundamental brindarles los incentivos adecuados. Al pensar en incentivos, las llamadas a la acción claras e irresistibles vienen a la mente de inmediato. Pero los CTA suelen ser la última parte del proceso de adquisición. Lo más probable es que se abra camino allí mostrando el valor de su empresa. Una de las mejores maneras de hacerlo es compartiendo su enfoque y propuesta de valor única . Si está buscando una forma fluida de diseñar su enfoque, le encantará este tutorial. Hoy, le mostraremos cómo incluir diferentes pasos fijos que cambian mientras las personas se desplazan y leen. ¡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 GRATIS el diseño de Sticky Steps
Para poner sus manos en el diseño de pasos adhesivos gratuitos, 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.
@media only screen and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:before { border-top-color: #ffffff !important; border-left-color: transparent !important; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !important; border-left-color: transparent !important; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !important } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !important; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 strong { font-family: «Open Sans», Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: «Open Sans», Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !important;}
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!
1. Crear diseño de sección
Agregar sección normal
Fondo degradado
Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de esa sección y aplique un fondo degradado:
- Color 1: #ffffff
- Color 2: #e5e5e5
- Tipo de gradiente: lineal
- Dirección del gradiente: 150 grados
Imagen de fondo
Sube una imagen de fondo a continuación. Puede encontrar el que estamos usando a lo largo de este tutorial en la carpeta de descarga que puede encontrar al comienzo de esta publicación. Puede utilizar la imagen de fondo de forma gratuita y sin restricciones.
- Tamaño de la imagen de fondo: Ajuste
- Posición de la imagen de fondo: arriba a la izquierda
Espaciado
Elimine el relleno inferior predeterminado de la sección agregando «0px».
- Relleno inferior: 0px
Agregar nueva fila
Estructura de la columna
Continúe agregando la primera fila a la sección usando la siguiente estructura de columnas:
Color de fondo
Sin agregar módulos todavía, abra la configuración de la fila y cambie el color de fondo.
- Color de fondo: rgba(130,100,239,0.09)
Dimensionamiento
Pase a la pestaña de diseño de la fila y modifique la configuración de tamaño en consecuencia:
- Igualar alturas de columna: Sí
- Alineación de filas: Centro
Espaciado
Aplique también algunos valores de espaciado personalizados.
- Margen superior: 5%
- Relleno superior: 0px
- Relleno inferior: 0px
- Relleno izquierdo: 5%
- Relleno derecho: 5%
Borde
Luego, vaya a la configuración del borde y use algunas esquinas redondeadas.
- Todas las esquinas: 10px
desbordamientos
También estamos cambiando los desbordamientos de fila para que sean visibles. Esto asegurará que todo lo que sobrepase el contenedor de la fila no se oculte.
- Desbordamiento horizontal: visible
- Desbordamiento vertical: visible
Configuración de la columna 1
Espaciado
Luego, abra la configuración de la columna 1 y agregue un relleno superior e inferior personalizado.
- Acolchado superior: 5%
- Acolchado inferior: 5%
Configuración de la columna 2
Fondo degradado
Continuando, agregaremos un fondo degradado a la columna 2.
- Color 1: #7b47ff
- Color 2: #6929aa
- Tipo de gradiente: lineal
- Dirección del gradiente: 158 grados
Espaciado
También agregaremos un relleno personalizado a esa columna.
- Acolchado superior: 5%
- Acolchado inferior: 5%
- Relleno izquierdo: 5%
- Relleno derecho: 5%
Borde
Junto con algunas esquinas redondeadas.
- Todas las esquinas: 10px
Escala de transformación
Y aumentaremos el tamaño de la columna en la configuración de transformación aplicando los siguientes valores de escala de transformación:
- Ambos: 107%
Agregar módulo de texto a la columna 1
Agregar contenido H3
Es hora de agregar módulos, comenzando con un módulo de texto en la columna 1. Ingrese algún contenido H3 de su elección.
Configuración de texto H3
Pase a la pestaña de diseño del módulo y cambie la configuración de texto H3 en consecuencia:
- Título 3 Fuente: Poppins
- Título 3 Color del texto: #6929aa
- Encabezado 2 Tamaño del texto: 35px
- Encabezado 3 Espaciado entre letras: -1px
Agregue el módulo divisor a la columna 1
Visibilidad
A continuación, colocaremos un módulo divisor en la columna 1. Asegúrese de que la opción «Mostrar divisor» esté habilitada.
- Mostrar divisor: Sí
Línea
Pase a la pestaña de diseño del módulo y cambie el color de la línea.
- Color de línea: #f5ca4e
Dimensionamiento
Modifique también la configuración de tamaño.
- Peso del divisor: 6px
- Ancho: 20%
- Altura: 6px
Borde
Complete la configuración del módulo incluyendo algunas esquinas redondeadas en la configuración del borde.
- Todas las esquinas: 20px
Agregar 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 algún contenido de descripción.
Configuración de texto
Pase a la pestaña de diseño del módulo y cambie la configuración del texto de la siguiente manera:
- Fuente de texto: Pantalla Playfair
- Tamaño del texto: 16px
- Altura de línea de texto: 2,1 em
Espaciado
Complete la configuración del módulo agregando algunos valores de relleno personalizados.
- Acolchado superior: 5%
- Acolchado inferior: 5%
- Relleno izquierdo: 5%
- Relleno derecho: 5%
Clone toda la fila tantas veces como sea necesario
Una vez que haya completado la primera fila, puede clonarla tantas veces como desee, según la cantidad de información que desee compartir sobre su primer paso.
Cambiar todo Copiar
Asegúrese de cambiar toda la copia en filas duplicadas.
2. Agregue la barra de fila escalonada a la parte inferior de la sección
Agregar nueva fila
Estructura de la columna
Ahora que tenemos todas las filas explicativas en su lugar, podemos agregar nuestra barra de fila de pasos fijos. Agregue una nueva fila usando la siguiente estructura de columna:
Fondo degradado
Abra la configuración de la fila y use un fondo degradado.
- Color 1: #ffdf51
- Color 2: #e5ac49
- Tipo de gradiente: lineal
- Dirección del gradiente: 150 grados
Dimensionamiento
Pase a la pestaña de diseño de la fila y cambie la configuración de tamaño de la siguiente manera:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Igualar alturas de columna: Sí
- Alineación de filas: Centro
Espaciado
Aplique algunos valores de espaciado personalizados a continuación.
- Margen superior: 5%
- Relleno superior: 0px
- Relleno inferior: 0px
Borde
Luego, vaya a la configuración del borde y agregue algunas esquinas redondeadas.
- Todas las esquinas: 10px
Sombra de la caja
Aplique la siguiente sombra de cuadro también:
- Fuerza de desenfoque de sombra de cuadro: 50px
- Color de sombra: rgba(0,0,0,0.13)
desbordamientos
Luego, navegue a la pestaña avanzada y configure los desbordamientos como visibles.
- Desbordamiento horizontal: visible
- Desbordamiento vertical: visible
Columna 2 Espaciado
A continuación, abra la configuración de la columna 2 y use un relleno superior e inferior personalizado.
- Acolchado superior: 1%
- Acolchado inferior: 1%
Columna 3 Espaciado
También estamos agregando un relleno superior e inferior personalizado a la columna 3.
- Acolchado superior: 2%
- Acolchado inferior: 2%
Agregar módulo de texto a la columna 1
Agregar contenido
Es hora de agregar módulos a nuestra barra de fila de pasos fijos. Agregue un módulo de texto a la columna 1 y mencione el paso en el cuadro de contenido.
Fondo degradado
A continuación, aplique un fondo degradado.
- Color 1: #7b47ff
- Color 2: #6929aa
- Tipo de gradiente: lineal
- Dirección del gradiente: 158 grados
Configuración de texto
Pase a la pestaña de diseño del módulo y diseñe el texto en consecuencia:
- Fuente del texto: Poppins
- Peso de fuente de texto: Negrita
- Color del texto: #ffffff
- Tamaño del texto: 27px
Dimensionamiento
Realice algunos cambios en la configuración de tamaño también.
- Ancho: 60%
- Alineación del módulo: Centro
Espaciado
Luego, agregue un relleno superior e inferior personalizado a la configuración de espaciado.
- Relleno superior: 20px
- Relleno inferior: 20px
Borde
Agregue algunas esquinas redondeadas a la configuración del borde a continuación.
- Todas las esquinas: 10px
Sombra de la caja
También estamos usando una sombra de caja sutil.
- Color de sombra: rgba(0,0,0,0.3)
Transformar Traducir
Y completaremos la configuración del módulo reposicionando ligeramente el módulo usando la configuración de traducción de transformación de Divi.
- Derecha: -20px
Agregar módulo de texto a la columna 2
Agregar contenido H2
En la columna 2, agregamos un módulo de texto con algo de contenido H2 que describe el paso en el que nos encontramos.
Configuración de texto H2
Pase a la pestaña de diseño del módulo y aplique estilo a la configuración de texto H2 de la siguiente manera:
- Título 2 Fuente: Poppins
- Encabezado 2 Peso de fuente: Medio
- Encabezado 2 Alineación de texto:
- Escritorio: Izquierda
- Tableta y teléfono: Centro
- Título 2 Color del texto: #6d40ed
- Encabezado 2 Espaciado entre letras: -1px
Espaciado
Agregue un poco de relleno superior e inferior personalizado también.
- Acolchado superior: 5%
- Acolchado inferior: 5%
Agregar módulo de texto a la columna 3
Agregar contenido
En la siguiente y última columna. Agregue un módulo de texto con algún contenido de descripción.
Configuración de texto
Pase a la pestaña de diseño del módulo y cambie la configuración del texto en consecuencia:
- Fuente de texto: Pantalla Playfair
- Peso de fuente de texto: Negrita
- Color del texto: rgba(109,64,237,0.46)
- Tamaño del texto: 20px
- Alineación del texto:
- Escritorio: Izquierda
- Tableta y teléfono: Centro
3. Aplique efectos pegajosos a la barra de fila de pasos
Ajustes de fila fija
Ahora que nuestro diseño de barra de fila de pasos pegajosos se ha completado, es hora de hacer que se adhiera a la parte inferior. Abra la configuración de fila, vaya a la pestaña avanzada y aplique la siguiente configuración de posición fija:
- Posición pegajosa: Stick to Bottom
- Compensación inferior adhesiva: 1px
- Límite fijo superior: Sección
- Desplazamiento de los elementos pegajosos circundantes: Sí
- Estilos predeterminados y fijos de transición: Sí
Filtro de fila pegajosa
En un estado predeterminado, no queremos que la barra de fila sea visible. Sin embargo, una vez que se vuelve pegajoso, queremos que aparezca. Para que eso suceda, modificaremos el filtro de opacidad en la configuración de filtros:
- Predeterminado: 0%
- Pegajoso: 100%
4. Reutilice toda la sección para los próximos pasos
Clonar la sección tantas veces como sea necesario
Ahora que se ha creado nuestra primera sección, que está dedicada al paso n.º 1, podemos reutilizar toda la sección según la cantidad de pasos que tengamos.
Cambiar todo Copiar en secciones duplicadas
Asegúrese de cambiar toda la copia en las secciones duplicadas. ¡Eso es todo!
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 ser creativo con el diseño de enfoque de su sitio web. Más específicamente, le mostramos cómo usar las opciones adhesivas de Divi para crear diferentes barras de pasos adhesivos que ayudarán a sus visitantes a navegar a través de diferentes partes de su enfoque. ¡También pudo 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 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.