Creación de una llamada a la acción "Comenzar" que revela múltiples opciones al pasar el mouse
Publicado: 2019-06-26Muchas empresas incluirán una llamada a la acción para "empezar" en su página de inicio. Por lo general, es la llamada a la acción principal en la página, ya que guiará al usuario a través de algún tipo de proceso previsto. Podría ser un simple botón "empezar ahora" que enlaza con otra página. O podría ser una sección de una página que incluye instrucciones para "comenzar" y / o diferentes opciones que el usuario puede tomar para iniciar el proceso previsto por la empresa.
En este tutorial, le mostraremos cómo crear una CTA de "Comenzar" que revelará múltiples opciones de "Comenzar" al pasar el mouse. Usando Divi, diseñaremos una sección para que aparezca como un botón grande. Luego, al pasar el cursor sobre el botón, las opciones aparecerán de forma muy similar a como un control deslizante vertical revelaría la siguiente diapositiva.
El diseño es elegante y la funcionalidad puede resultar útil de muchas formas.
Empecemos.
Vistazo
Aquí hay un vistazo rápido a la CTA "Comenzar" que crearemos en este tutorial.
Descargue el diseño de CTA Divi "Comenzar" GRATIS
Para poner sus manos sobre el diseño de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo json al Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, necesitará lo siguiente:
- El tema Divi instalado y activo
- Una nueva página creada para construir desde cero en el front-end (constructor visual)
- Imágenes que se utilizarán para contenido simulado
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Implementación del diseño de CTA "Empiece aquí" en Divi
La idea básica detrás de este diseño es mover el contenido de una sección hacia arriba al pasar el cursor sobre la sección. Para hacer esto, necesitamos asegurarnos de que nuestra sección tenga una altura fija con desbordamiento oculto. Esto ocultará las opciones de CTA antes del estado de desplazamiento. Luego, podemos usar el margen para colocar nuestros módulos y el relleno superior para mover el contenido a la vista al pasar el mouse.
Empecemos por la sección.
Creando la Sección
Para comenzar, cree una sección regular con una fila de una columna. Luego, antes de agregar módulos, actualice la configuración de la sección.
Abra la configuración de la sección y actualice lo siguiente:
Color de fondo: # 2b87da
Ancho: 90%
Ancho máximo: 1100px
Alineación de la sección: centro
Margen: 6vw superior, 6vw inferior (solo para darle un poco de espacio para respirar)
Relleno (escritorio): 300 px arriba, 0 px abajo
Relleno (tableta): 0px arriba, 15% abajo
Luego agregue algunas esquinas redondeadas. Esto creará nuestro diseño similar a un botón cada vez que le demos a la sección una altura máxima.
Esquinas redondeadas: 140 px (escritorio), 20 px (desplazamiento), 10 px (tableta)
Luego dale una sombra de cuadro (ver captura de pantalla).
No vamos a agregar todas las configuraciones necesarias para el diseño final en este momento. Tendremos que volver y darle una altura fija y un efecto de desplazamiento. Pero por ahora agreguemos el contenido.
Creación de la primera fila de contenido
Abra la configuración de la fila de una columna que creó y actualice lo siguiente:
Ancho: 100%
Relleno: 0px arriba, 0px abajo, 5% a la izquierda, 5% a la derecha
Dentro de la fila de una columna, agregue un módulo de texto.
Luego agregue el siguiente encabezado h2 al contenido del cuerpo.
<h2>Get Started Here...</h2>
Actualice la configuración de diseño de la siguiente manera:
Fuente del encabezado 2: Nunito
Peso de fuente del encabezado 2: Negrita
Color del texto del encabezado 2: #ffffff
Tamaño del texto del encabezado 2: 78 px (escritorio y tableta), 46 px (teléfono)
Ancho máximo: 500px
Alto: 300px (escritorio), automático (tableta y teléfono)
Margen: -300px superior (escritorio), 0px superior (tableta y teléfono)
Acolchado: 7% top
La altura de 300px y el margen superior de -300px elevan el módulo de texto para llenar el relleno superior de 300px de la sección. Más tarde, cada vez que eliminemos el relleno de la sección superior al pasar el mouse, el módulo de texto se desplazará hacia arriba por encima de la sección.
Creación de la segunda fila de contenido
La segunda fila de contenido es donde agregaremos nuestras opciones de CTA. Continúe y agregue una nueva fila con un diseño de tres columnas.
Luego actualice la configuración de la fila de la siguiente manera:
Ancho: 100%
Ancho máximo: 100%
Relleno: 0px arriba, 0px abajo
Luego agregue un módulo de propaganda en la columna 1.
Luego actualice la configuración de propaganda de la siguiente manera:
Saque el texto del cuerpo predeterminado y deje el título.
Luego, agregue un ícono de imagen (90 X 90). O puede utilizar un icono Divi normal si lo desea.
Agregue un fondo y actualice el diseño del texto del título.
Color de fondo: #ffffff
Fuente del título: Nunito
Peso de la fuente del título: Ultra Bold
Estilo de fuente del título: TT
Alineación del texto del título: centro
Color del texto del título: # 2b87da
Tamaño del texto del título: 14px
Antes de que podamos hacer que los anuncios sean circulares, primero debemos darle al anuncio una altura y un ancho iguales. Luego, podemos usar el espaciado para alinear la propaganda y el contenido de la propaganda en el centro.
Ancho del contenido: 200 px (escritorio), 250 px (tableta)
Ancho: 250 px (escritorio), 300 px (tableta)
Alineación del módulo: centro
Alto: 250 px (escritorio), 300 px (tableta)
Margen: 25px superior, 0px inferior
Relleno: 50 px en la parte superior (escritorio), 75 px en la parte superior (tableta y teléfono)
Para completar el diseño del círculo, dale a la propaganda una esquina redondeada y una sombra de caja.
Esquinas redondeadas: 50%
Box Shadow: ver captura de pantalla
Eso se encarga de nuestra primera propaganda. Para crear los dos siguientes. Copie la propaganda y péguela en la columna 2 y la columna 3. Luego actualice el icono de imagen para cada una. Debería verse así:
Toques finales a la sección
Para completar el diseño de CTA "Comenzar", necesitamos actualizar la sección un poco más. Actualice la siguiente configuración de la sección:
Alto: 300px (escritorio), automático (tableta y teléfono)
Desbordamiento horizontal: oculto
Desbordamiento vertical: oculto
Esto mantendrá la sección a la misma altura que el contenido de la fila 1 y la fila 2. Al ocultar el desbordamiento, se mantendrá el contenido de la fila 2 oculto hasta que lo veamos al pasar el mouse.
Para mostrar el contenido de la fila 2, debemos quitar el relleno superior de la sección al pasar el mouse.
Relleno (flotar): 0px arriba
Ahora mira el resultado hasta ahora. El contenido se desplazará hacia arriba para revelar el contenido en la fila 2 que muestra las tres opciones de CTA.
Para hacer que la sección se parezca más a un botón, podemos usar las opciones de transformación para reducirla y luego devolverla a su tamaño normal al pasar el mouse. Actualice las siguientes opciones de transformación para la sección.
Transformar escala (escritorio): 70%
Transformar escala (flotar): 100%
Transformar escala (tableta): 100%
Ahora agregue un gráfico de imagen de fondo (500 X 500) para tomar el tamaño correcto de la sección.
Imagen de fondo: insertar imagen
Tamaño de la imagen de fondo: tamaño real
Posición de la imagen de fondo: Centro a la derecha (escritorio), Arriba a la derecha (tableta), Arriba a la izquierda (teléfono)
Agregar URL de enlace a los Blurbs y escalarlos al pasar el mouse
Dado que nuestros anuncios publicitarios en realidad sirven como botones circulares, necesitamos agregar URL de enlace de módulo a cada uno de los anuncios publicitarios. Por supuesto, deberá agregar el suyo para satisfacer sus necesidades.
Dado que los anuncios publicitarios están ocultos en el generador visual, cambie el modo de vista de estructura alámbrica y actualice cada una de las configuraciones de propaganda con la URL del enlace del módulo.
Luego permanezca en el modo de vista de estructura alámbrica y use la selección múltiple para seleccionar los tres desenfoques. Y abra la configuración de uno de los anuncios para actualizar la configuración del elemento para los tres. Luego actualice la opción de transformación de la siguiente manera:
Transformar escala (flotar): 105%
¡Eso es todo!
El resultado final
Veamos el diseño final de la llamada a la acción "Comenzar".
Y aquí está el diseño en tableta y teléfono.
Pensamientos finales
La llamada a la acción "Comenzar" es común en la web hoy en día. Con suerte, este tutorial te ayudará a llevarlo al siguiente nivel. Y no tema pensar en otras formas de utilizar esta funcionalidad. Piénsalo. ¡Puedes agregar cualquier contenido que quieras a la sección!
No dude en compartir sus pensamientos en los comentarios a continuación.
Espero escuchar de usted.
¡Salud!