Una de las formas más rápidas de interactuar con los visitantes de su sitio web es a través del cursor. Ahí es donde suele empezar todo. La interacción del usuario en el escritorio se basa casi por completo en la forma en que los visitantes usan el cursor para navegar por sus páginas. También es lo único que les permite desencadenar eventos, ya sea un efecto de desplazamiento o un clic. Es por eso que te encontrarás con un montón de sitios web que personalizan el cursor con un objetivo específico en mente. Diseñar su cursor es útil si desea resaltar una llamada a la acción, por ejemplo. Hoy, le mostraremos cómo hacerlo dentro de Divi . ¡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!
1. Crear nueva página/Abrir una existente
Crear nueva página o abrir una existente
Comience creando una nueva página o abriendo una existente.
Cargue el diseño de su elección
Para centrarnos en la esencia de este tutorial, vamos a utilizar el paquete de diseño de reparación de bicicletas, pero siéntete libre de usar cualquier otro diseño de tu elección.
Agregar nueva sección al final de la página
Una vez que se haya cargado su diseño, navegue hasta la parte inferior de su página y agregue una nueva sección. Vamos a usar esta sección para construir nuestro cursor.
Espaciado
Para crear un cursor personalizado, agregaremos un módulo de texto más adelante en el tutorial. Este módulo se colocará dentro de la sección, pero no queremos que el contenedor de la sección real aparezca en nuestro diseño. Para evitar que se muestre la sección, eliminaremos el relleno superior e inferior predeterminado en la configuración de espaciado.
- Relleno superior: 0px
- Relleno inferior: 0px
Agregar nueva fila
Estructura de la columna
Continúe agregando una fila a la sección usando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar módulos todavía, abra la configuración de fila y elimine todo el ancho de medianil personalizado en la configuración de tamaño.
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
Espaciado
Elimine también todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno inferior: 0px
Agregar módulo de texto (cursor)
Dejar el cuadro de contenido vacío
¡Es hora de agregar un módulo de texto, que más adelante usaremos como cursor! Deje el cuadro de contenido vacío.
Dimensionamiento
Pase a la pestaña de diseño y dé forma al módulo usando un ancho y alto personalizados en diferentes tamaños de pantalla:
- Ancho:
- Escritorio: 100px
- Tableta: 60px
- Teléfono: 40px
- Altura:
- Escritorio: 100px
- Tableta: 60px
- Teléfono: 40px
Borde
Para convertir el cursor en un círculo, como puedes notar en la vista previa de esta publicación, usaremos esquinas redondeadas y un borde.
- Todas las esquinas: 100%
- Ancho del borde: 3px
- Color del borde: #ffffff
Modo de mezcla
En la vista previa de esta publicación, puede notar un efecto invertido en el cursor, especialmente al pasar el cursor por encima de un módulo de botones. Para lograr este efecto, usaremos un modo de fusión para nuestro módulo de texto.
- Modo de fusión: diferencia
Elemento principal CSS
Al agregar las siguientes líneas de código CSS al elemento principal del módulo, ayudaremos a preparar el módulo para su uso futuro como cursor:
|
01
02
|
transition: all .1s linear;pointer-events: none; |
Posición
También usaremos una posición fija para el módulo.
- Posición: Fija
- Ubicación: Arriba a la izquierda
- Índice Z: 2
Clase CSS
Y completaremos la configuración del módulo asignando una clase CSS personalizada en la pestaña avanzada.
- Clase CSS: cursor
2. Agregar funcionalidad
Agregar módulo de código debajo del módulo de texto del cursor
Ahora que tenemos el módulo de texto del cursor en su lugar, ¡es hora de enfocarnos en la funcionalidad! Agregue un módulo de código justo debajo del módulo de texto del cursor de su nueva sección.
Combinaremos un poco de código CSS y JQuery, así que continúe y agregue etiquetas de estilo y script a su módulo de código.
Apertura de código JQuery
A continuación, copie y pegue las siguientes líneas de apertura del código JQuery entre las etiquetas del script:
|
01
02
|
jQuery(document).ready(function($){}); |
Cambiar la posición del módulo de texto del cursor
Ahora que se ha creado la base dentro de nuestro módulo de código, iremos paso a paso. Lo primero que haremos es colocar el módulo de texto que hemos creado después del contenido interno del constructor. Esto nos permitirá usar el cursor en toda la página.
|
01
|
$('.cursor').insertAfter('.entry-content .et_builder_inner_content'); |
Eliminar el cursor predeterminado de la página
A continuación, eliminaremos el cursor predeterminado de la página usando un código CSS personalizado que colocaremos entre las etiquetas de estilo.
|
01
02
03
|
body {cursor: none;} |
Establecer el módulo de texto del cursor como cursor
A continuación, vamos a permitir que el cursor siga los movimientos de los visitantes usando las siguientes líneas de código JQuery:
|
01
02
03
04
05
06
07
|
$(window).mousemove(function(e){var cursor = $('.cursor');$('.cursor').css({top: e.clientY - cursor.height() / 2,left: e.clientX - cursor.width() / 2});}); |
Alternar efecto al pasar el mouse sobre un módulo en particular
Agregar aumentar la clase CSS
Como puede notar en la vista previa de esta publicación, tan pronto como se desplaza un módulo de botón, los estilos del cursor cambian. Para lograr esto, agregaremos una nueva Clase CSS entre nuestras etiquetas de estilo.
|
01
02
03
04
|
.increase-size {transform: scale(5);background-color: white;} |
Todos los módulos de botones
Alternaremos esta clase CSS usando algún código JQuery. El siguiente código apunta a todos los módulos de botones dentro de su página Divi uno por uno.
|
01
02
03
|
$('.et_pb_button').hover(function(){$('.cursor').toggleClass('increase-size');}); |
Un módulo de botones específico
Si desea que el efecto se aplique a un módulo en particular, se necesita un enfoque diferente. Primero, abra el módulo de botones al que desea aplicar el efecto e incluya una clase CSS personalizada.
- Clase CSS: botón de cursor
Luego, reemplaza la clase CSS en el código que usaste en el paso anterior. ¡Eso es todo!
|
01
02
03
|
$('.cursor-button').hover(function(){$('.cursor').toggleClass('increase-size');}); |
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 crear un cursor personalizado para su página Divi. También le mostramos cómo usar este cursor personalizado para activar un efecto de desplazamiento cuando alguien pasa el cursor sobre una llamada a la acción en su página. Una vez que obtenga el enfoque de crear un cursor personalizado, ¡podrá crear cualquier tipo de diseño o efecto! 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.