Cuando muestra elementos de destino en su página, es importante asegurarse de que las personas sepan que pueden elegir un elemento y hacer clic en él. Una de las formas más obvias de hacerlo es incluir un botón, pero si está buscando una forma interactiva adicional de alentar los clics en su página, disfrutará de este tutorial. Hoy, le mostraremos cómo convertir su cursor en un botón al pasar el mouse sobre un elemento en particular en el que se puede hacer clic, como una imagen. Esto agregará un incentivo adicional a sus visitantes y dará como resultado una hermosa interacción con la página. ¡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 el diseño GRATIS
Para poner sus manos en el diseño gratuito, 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.
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!
Suscríbete a nuestro canal de Youtube
1. Crear estructura de elementos
Agregar nueva sección
Color de fondo
Comenzaremos este tutorial construyendo la estructura del elemento dentro de una página Divi. Agregue una nueva sección y use un color de fondo blanco para ella.
- Color de fondo: #ffffff
Espaciado
Pase a la pestaña de diseño de la sección y cambie la configuración de espaciado de la siguiente manera:
- Relleno superior: 80px
- Relleno inferior: 0px
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar módulos todavía, abra la configuración de fila y cambie el ancho máximo en la configuración de tamaño.
- Ancho máximo: 2580px
Espaciado
Elimine todo el relleno superior e inferior predeterminado a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
Agregar módulo de imagen a la columna 1
Cargar imagen
Vamos a los módulos, comenzando con un módulo de imagen en la columna 1. Cargue una imagen de su elección.
Añadir enlace
Agregue un enlace al módulo de imagen a continuación.
Escala flotante
Luego, vaya a la pestaña de diseño y cambie la configuración de la escala flotante del módulo.
- Ambos: 90%
Clase CSS
Complete la configuración del módulo aplicando la siguiente clase CSS en la pestaña avanzada:
- Clase CSS: imagen-cursor
Agregue el módulo de texto n.º 1 a la columna 1
Agregar contenido H3
Pasemos al siguiente módulo, que es un módulo de texto que contiene 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: Actor
- Título 3 Color del texto: #000000
- Título 3 Tamaño del texto:
- Escritorio: 35px
- Tableta: 28px
- Teléfono: 22px
- Encabezado 3 Altura de línea: 1.4em
Espaciado
Agregue un poco de margen inferior a continuación.
- Margen inferior: 15px
Agregue el Módulo de Texto #2 a la Columna 1
Agregar contenido
Luego, agregue otro módulo de texto justo debajo del anterior con algún contenido descriptivo de su elección.
Configuración de texto
Cambie la configuración de texto del módulo de la siguiente manera:
- Fuente de texto: Actor
- Color del texto: #75baff
- Tamano del texto:
- Escritorio: 22px
- Tableta: 18px
- Teléfono: 15px
- Espaciado entre letras de texto: 0.5px
- Altura de línea de letra: 2em
Agregar copia
El siguiente y último módulo que necesitamos en esta columna es un módulo de botón. Agregue alguna copia de su elección.
Configuración de botones
Pase a la pestaña de diseño del módulo y cambie la configuración del botón en consecuencia:
- Usar estilos personalizados para el botón: Sí
- Color del texto del botón: #000000
- Ancho del borde del botón: 0px
- Radio del borde del botón: 1px
- Fuente del botón: Actor
- Mostrar icono de botón: Sí
- Ubicación del icono del botón: Izquierda
- Solo mostrar icono al pasar el mouse sobre el botón: No
Espaciado
Agregue también algunos valores de espaciado personalizados.
- Margen inferior: 80px
- Relleno inferior: 20px
- Relleno derecho: 30px
Sombra de la caja
Y complete la configuración del módulo aplicando la siguiente configuración de sombra de caja:
- Posición horizontal de la sombra del cuadro: 0px
- Posición vertical de la sombra del cuadro: 2px
- Color de sombra: #000000
Eliminar columna 2
Una vez que haya completado la primera columna y todos los módulos dentro de ella, elimine la segunda columna vacía de la fila.
Clonar columna 1
Y reutilice la primera columna clonándola una vez.
Clonar toda la fila
Continúe clonando toda la fila una vez.
Cambiar todo el contenido, las imágenes y los enlaces duplicados
Luego, asegúrese de cambiar todo el contenido, las imágenes y los enlaces en cada una de las columnas duplicadas.
2. Agregar cursor
Agregar nueva fila a la sección
Estructura de la columna
Ahora que tenemos la estructura del elemento en su lugar, es hora de crear el diseño del cursor. Para hacer eso, agregaremos una nueva fila a nuestra sección usando la siguiente estructura de columnas:
Espaciado
Abra la configuración de la fila y elimine todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno inferior: 0px
Agregue el módulo de texto del cursor a la columna de la nueva fila
Agregar contenido
A continuación, agregue un módulo de texto a la nueva fila. Este módulo de texto se dedicará a crear el diseño del botón del cursor. Agregue alguna copia de su elección dentro del cuadro de contenido.
Color de fondo
Luego, agrega un color de fondo.
- Color de fondo: #47669b
Configuración de texto
Pase a la pestaña de diseño y diseñe el texto en consecuencia:
- Fuente de texto: Actor
- Peso de fuente de texto: Negrita
- Estilo de fuente de texto: Mayúsculas
- Color del texto: #ffffff
- Espaciado entre letras de texto: 2px
- Alineación de texto: Centro
Dimensionamiento
Agregue un valor de ancho y alto a la configuración de tamaño a continuación.
- Ancho: 150px
- Altura: 150px
Borde
Estamos convirtiendo este módulo en un círculo cambiando la configuración del borde.
- Todas las esquinas: 100px
Sombra de la caja
Agregaremos una sombra de cuadro sutil también.
- Fuerza de desenfoque de sombra de cuadro: 0px
- Fuerza de propagación de sombra de cuadro: 20px
- Color de sombra: rgba(7,213,255,0.14)
Clase CSS
Luego, le daremos a nuestro módulo una clase CSS.
- Clase CSS: cursor
Elemento principal CSS
También estamos agregando algunas líneas de código CSS al elemento principal del módulo.
|
01
02
03
04
05
06
|
transition: all .1s linear;pointer-events: none;display: flex;justify-content: center;align-items: center; |
Posición
Y completaremos la configuración del módulo modificando la posición en la pestaña avanzada:
- Posición: Fija
- Ubicación: Arriba a la izquierda
- Índice Z: 2
Agregar módulo de código debajo del módulo de texto
Ahora que hemos diseñado nuestro cursor, es hora de hacer que la funcionalidad funcione. Para hacerlo, agregaremos un nuevo módulo de código justo debajo del módulo de texto del cursor.
Agregar etiquetas de estilo y secuencia de comandos
Agregue algunas etiquetas de estilo y script a su módulo de código.
Agregar código CSS
Inserte las siguientes líneas de código CSS entre las etiquetas de estilo:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
|
.hide-cursor {cursor: none;}.cursor {-webkit-transition: all 0.2s ease !important;-moz-transition: all 0.2s ease !important;-o-transition: all 0.2s ease !important;transition: all 0.2s ease !important;visibility: hidden;opacity: 0;}.show-cursor {visibility: visible !important;opacity: 1;} |
Añadir código JQuery
Y use las siguientes líneas de código JQuery entre las etiquetas del script:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
|
jQuery(document).ready(function($){var cursor = $('.cursor');$('.image-cursor').mousemove(function(e){cursor.css({top: e.clientY - cursor.height() / 2,left: e.clientX - cursor.width() / 2});cursor.addClass('show-cursor');$('body').addClass('hide-cursor');});$('.image-cursor').mouseleave(function() {cursor.removeClass('show-cursor');$('body').removeClass('hide-cursor');});}); |
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 este tutorial, le mostramos cómo agregar más interacción a los elementos en los que se puede hacer clic en su página. Más específicamente, le mostramos cómo activar un botón de cursor cuando alguien pasa el cursor sobre un elemento de su elección. ¡Esto agrega una interacción adicional al diseño de su página y podría ayudarlo a aumentar las tasas de clics! 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.