Creación de un CTA de "inicio" que revela múltiples opciones al pasar el mouse por encima


Muchas compañías incluirán un CTA de "inicio" en la 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 de "inicio" 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 "Comenzar" que revelará varias 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 mouse sobre el botón, las opciones aparecerán como un control deslizante vertical revelaría la próxima diapositiva.

El diseño es elegante y la funcionalidad podría ser útil de muchas maneras.

Empecemos.

Vistazo

Aquí hay un vistazo rápido a la CTA "Comenzar" que desarrollaremos en este tutorial.

empezar cta en divi

empezar cta en divi

empezar cta en divi

Descargue el diseño CTA Divi "Comenzar" GRATIS

Para poner sus manos en 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

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á tener lo siguiente:

  1. El tema Divi instalado y activo
  2. Una nueva página creada para construir desde cero en el front-end (generador visual)
  3. Imágenes para ser utilizadas como 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 "Comenzar 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, debemos 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.

Comencemos con la sección.

Crear la sección

Para comenzar, cree una sección regular con una fila de una columna. Luego, antes de agregar cualquier módulo, 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áx .: 1100px
Alineación de sección: centro
Margen: 6vw arriba, 6vw abajo (solo para darle un poco de espacio para respirar)
Relleno (escritorio): 300px arriba, 0px abajo
Acolchado (tableta): 0px arriba, 15% abajo

empezar cta en divi

Luego agrega algunas esquinas redondeadas. Esto creará nuestro diseño tipo botón siempre que le demos a la sección una altura máxima.

Esquinas redondeadas: 140 px (escritorio), 20 px (hover), 10 px (tableta)

Luego dele una sombra de cuadro (ver captura de pantalla).

empezar cta en divi

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.

Crear 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

empezar cta en divi

Dentro de la fila de una columna, agregue un módulo de texto.

empezar cta en divi

Luego agregue el siguiente encabezado h2 al contenido del cuerpo.

Get Started Here...

empezar cta en divi

Actualice la configuración de diseño de la siguiente manera:

Título 2 Fuente: Nunito
Título 2 Peso de la fuente: negrita
Título 2 Color del texto: #ffffff
Título 2 Tamaño del texto: 78 px (computadora de escritorio y tableta), 46 px (teléfono)
Ancho Máx .: 500px
Altura: 300 px (escritorio), automático (tableta y teléfono)
Margen: -300px superior (escritorio), 0px superior (tableta y teléfono)
Acolchado: 7% superior

La altura de 300 píxeles y el margen superior de -300 píxeles hacen que el módulo de texto complete el relleno superior de 300 píxeles de la sección. Más tarde, cada vez que quitamos 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.

empezar cta en divi

Crear 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.

empezar cta en divi

Luego actualice la configuración de la fila de la siguiente manera:

Ancho: 100%
Ancho Máx .: 100%
Relleno: 0px arriba, 0px abajo

empezar cta en divi

Luego agregue un módulo de propaganda en la columna 1.

empezar cta en divi

Luego actualice la configuración de propaganda de la siguiente manera:

Saca el texto del cuerpo predeterminado y deja el Título.

Luego agregue un icono de imagen (90 X 90). O puede usar un icono Divi normal si lo desea.

empezar cta en divi

Agregue un fondo y actualice el diseño del texto del título.

Color de fondo: #ffffff
Título de la fuente: 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: 14 px

empezar cta en divi

Antes de que podamos hacer que las imágenes borrosas sean circulares, primero debemos darle a la publicidad la misma altura y anchura. Luego podemos usar el espaciado para alinear la propaganda y el contenido de 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
Altura: 250 px (escritorio), 300 px (tableta)
Margen: 25px arriba, 0px abajo
Relleno: 50 px superior (escritorio), 75 px superior (tableta y teléfono)

empezar cta en divi

Para completar el diseño del círculo, dele a la propaganda una esquina redondeada y una sombra de cuadro.

Esquinas redondeadas: 50%
Box Shadow: ver captura de pantalla

empezar cta en divi

Eso se encarga de nuestra primera propaganda. Para crear los dos siguientes. Copie la propagación y péguela en la columna 2 y la columna 3. Luego actualice el icono de imagen para cada una. Debería verse así:

empezar cta en divi

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 sección:

Altura: 300 px (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 en la fila 1 y la fila 2. Ocultar el desbordamiento mantendrá el contenido en la fila 2 oculto hasta que lo veamos al pasar el mouse.

Para que el contenido de la fila 2 esté a la vista, necesitamos quitar el relleno superior de la sección al pasar el mouse.

Acolchado (desplazamiento): 0px arriba

empezar cta en divi

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.

empezar cta en divi

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 volver a su tamaño normal al pasar el cursor. Actualice las siguientes opciones de transformación para la sección.

Escala de transformación (escritorio): 70%
Escala de transformación (flotar): 100%
Escala de transformación (tableta): 100%

empezar cta en divi

Ahora agregue un gráfico de imagen de fondo (500 X 500) para ocupar el tamaño correcto de la sección.

Imagen de fondo: insertar imagen
Tamaño de imagen de fondo: tamaño real
Posición de la imagen de fondo: centro derecha (escritorio), superior derecha (tableta), superior izquierda (teléfono)

empezar cta en divi

Agregar URL de enlace a las Blurbs y escalarlas al pasar el mouse por encima

Dado que nuestras imágenes borrosas realmente sirven como botones circulares, necesitamos agregar URL de enlace de módulo a cada una de las imágenes borrosas. Por supuesto, deberá agregar los suyos para satisfacer sus necesidades.

Dado que los desenfoques están ocultos en el generador visual, cambie el modo de vista de estructura alámbrica y actualice cada una de las configuraciones de difusión con la URL de enlace del módulo.

empezar cta en divi

Luego, manténgase 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 desenfoques para actualizar la configuración del elemento para los tres. Luego actualice la opción de transformación de la siguiente manera:

Escala de transformación (desplazamiento): 105%

empezar cta en divi

¡Eso es!

El resultado final

Veamos el diseño final de la CTA "Comenzar".

empezar cta en divi

Y aquí está el diseño en tableta y teléfono.

empezar cta en divi

empezar cta en divi

Pensamientos finales

El CTA "Comenzar" es común en la web hoy en día. Con suerte, este tutorial te ayudará a llevarlo al siguiente nivel. Y no tenga miedo de pensar en otras formas de usar esta funcionalidad. Piénsalo. ¡Puedes agregar cualquier contenido que quieras a la sección!

Siéntase libre de compartir sus pensamientos en los comentarios a continuación.

Espero escuchar de usted.

¡Salud!