Al crear un sitio web, queremos mostrar nuestros productos y servicios con llamadas a la acción (CTA) claras. Si va a crear un diseño más exclusivo para sus botones, también ayuda agregar efectos de desplazamiento para evitar cualquier confusión sobre si se puede hacer clic en sus botones o no.
En este tutorial, le mostraremos cómo diseñar secciones para exhibir productos y servicios destacados con CTA claros y únicos. Incluso le mostraremos cómo usar las opciones de diseño integradas de Divi para agregar un efecto de desplazamiento expandible a sus CTA.
Aquí hay un pequeño adelanto del diseño que crearemos en esta publicación.
Que necesitas
La única herramienta de diseño que necesitarás hoy es Divi. Vamos a utilizar las opciones de diseño de Divi Builder para agregar algunos espacios creativos, bordes y botones para crear un diseño refrescante y bien equilibrado.
Cómo crear una sección CTA desplegable única con Divi
Suscríbete a nuestro canal de Youtube
Diseño de la sección
Cree una nueva página e implemente el generador visual para comenzar. De forma predeterminada, Divi tendrá una sección con una fila de una columna lista para que la edites. Esto funcionará para lo que necesitamos para empezar. Haga clic para actualizar la configuración de la sección y actualice las opciones de la siguiente manera.
En la pestaña de contenido, haga clic en la pestaña de fondo degradado e ingrese lo siguiente:
Color de degradado izquierdo: #ffffff
Color de degradado derecho: #353e45
Dirección del gradiente: 90 grados
Posición inicial: 70 %;
Posición final: 70%;
Esto creará el color azul oscuro solo en el lado derecho del fondo de la sección que servirá como el lado derecho de nuestro marco para el contenido de la sección.
Sugerencia: siempre que seleccione la posición final para que sea igual o menor que la posición inicial del degradado, puede crear un contraste sin mezclar de los dos colores del degradado. La dirección del gradiente de 90 grados lo convierte en una línea de división perfectamente vertical.
A continuación, debemos ir a la pestaña de diseño y agregar un relleno personalizado que se verá genial y funcionará bien en todos los dispositivos.
Relleno personalizado: 10vh arriba, 0px derecha, 10vh abajo, 0px izquierda
Nota: 10vh representa el 10 por ciento de la altura de la ventana gráfica (vh) del navegador. Esto se ajustará muy bien al ajustar su navegador a diferentes alturas sin tener que dar un valor aparte a nuestros dispositivos móviles.
Para crear la parte superior e inferior de nuestro diseño de marco de sección, agregaremos un borde superior e inferior a nuestra sección.
Haga clic en la pestaña Estilo de borde superior y agregue lo siguiente:
Ancho del borde superior: 15vh
Color del borde superior: #353e45
Luego haga clic en la pestaña de estilo Borde inferior y agregue lo siguiente:
Ancho del borde inferior: 15vh
Color del borde inferior: #353e45
Guardar ajustes.
Diseño de la fila de la sección
Ahora estamos listos para personalizar nuestra Fila. Haga clic para editar la configuración de la fila y darle una imagen de fondo a la fila con una superposición de degradado.
Primero, haga clic en la pestaña de la imagen de fondo y cargue su imagen. Debe ser alrededor de 1920px por 1200px. Luego actualice lo siguiente:
Tamaño de la imagen de fondo: Portada
Posición de la imagen de fondo: Centro
Repetición de la imagen de fondo: No repetir
Luego haga clic en la pestaña de degradado de fondo e ingrese lo siguiente:
Color de degradado izquierdo: #ffffff
Color de degradado derecho: rgba(255,255,255,0)
Dirección de degradado: 90 grados
Posición inicial: 15 %
Posición final: 0 %
Colocar degradado sobre la imagen de fondo: SÍ
Esto crea una superposición blanca solo en el 15 % de la fila del lado izquierdo.
Ahora ve a la pestaña de diseño y dale a tu fila un tamaño y espaciado personalizados.
Hacer esta fila de ancho completo: SÍ
Usar ancho de medianil personalizado: SÍ
Ancho de medianil: 1
Igualar altura de columna: SÍ
Margen personalizado: 5vh
Relleno personalizado: 5 % superior, 5 % inferior
A continuación, agregue algunos bordes transparentes para ajustar el ancho de la fila.
Ancho del borde derecho: 15vw
Color del borde derecho: rgba(255,255,255,0)
Ancho del borde izquierdo: 5vw
Color del borde izquierdo: #ffffff
Guardar ajustes.
Creando tu CTA desplegable
Ahora que la configuración de su fila está en su lugar, agregue una estructura de dos tercios y un tercio a su fila y luego agregue un módulo de botón a la columna de dos tercios de la izquierda.
Actualice las siguientes opciones:
Texto del botón: Nuestros proyectos
URL del botón: [ingresar url]
Usar estilos personalizados para el botón: SÍ
Tamaño del texto del botón: 48 px (escritorio), 30 px (tableta), 18 px (teléfono inteligente)
Color del texto del botón: #353e45
Color de fondo del botón: #ffffff
Ancho del borde del botón: 0 px
Espaciado entre letras del botón: 2 px
Fuente del botón:
Peso de la fuente Karla :
Fuente en negrita: Estilo: TT
Ícono del botón: vea la captura de pantalla
Color del ícono del botón: #cb9d85
Espaciado de letras entre botones: 6 px (escritorio), 3 px (tableta), 2 px (teléfono inteligente)
La clave de este diseño es usar el espaciado entre letras al pasar el botón para activar el efecto de expansión cuando un usuario pasa el cursor sobre el botón. Disminuí los valores en el móvil para disminuir la distancia de expansión.
Luego agregue un poco de relleno personalizado y una sombra de cuadro a su botón para terminar el diseño.
Relleno personalizado: 15 % superior, 24 % derecho, 15 % inferior, 15 % izquierdo
El relleno derecho se establece en 25%. Esto cambiará con cada botón dependiendo de la cantidad/tamaño del texto del botón. Deberá ajustar este valor para cada botón para asegurarse de que todos los botones se alineen y parezcan tener el mismo ancho en la página.
Sombra de cuadro: ver captura de pantalla
Posición horizontal de sombra de cuadro: 58 px
Posición vertical de sombra de cuadro: 0
Intensidad de desenfoque de sombra de cuadro: 80 px
Intensidad de propagación de sombra de cuadro: -43 px
Color de sombra: rgba(0,0,0,0.5)
La clave del diseño de la sombra del cuadro es ajustar la posición horizontal y distribuir la fuerza para que la sombra no se muestre en el lado izquierdo del botón.
Para agregar un toque final a nuestro botón, voy a cambiar la posición del icono de flecha de mi botón para que siempre abrace el lado derecho del botón. De esa manera, puede agregar botones con texto diferente y la flecha siempre se alineará bien en el lado derecho. Para hacer esto, vaya a la pestaña avanzada y agregue el siguiente CSS personalizado en el cuadro de entrada Después:
|
01
|
right: 30px; |
Ahora veamos el resultado en la página en vivo.
Agregar más secciones es fácil
Todo lo que tiene que hacer para crear más secciones en su página es duplicar la fila. Entonces, para crear dos secciones más, duplique la fila dos veces y luego actualice la imagen de fondo de la fila, el texto del botón. También deberá actualizar el valor del porcentaje de relleno correcto para su botón para asegurarse de que los botones mantengan el mismo ancho.
Aquí está el resultado final con las tres secciones.
¡También funciona muy bien en dispositivos móviles!
Así es como se ve el diseño en el escritorio y en el móvil:
Pensamientos finales
Puedes crear algunas secciones de CTA bastante sorprendentes utilizando algunas de estas técnicas de diseño en este tutorial. El espaciado y los bordes personalizados crean un marco único para su sección y filas que se ven limpios y se ajustan maravillosamente en todos los navegadores. Y el efecto de desplazamiento de expansión creado con el espaciado de letras es una excelente manera de obtener una especie de microinteracción sin tener que usar código adicional.
Espero que esto lo inspire a crear hermosos llamados a la acción en su propio sitio.
Espero escuchar de usted en los comentarios.