Cómo agregar un cursor con estilo e invertido a su página Divi

Una de las formas más rápidas de interactuar con los visitantes de su sitio web es mediante el cursor. Ahí es donde suele empezar todo. La interacción del usuario en el escritorio se basa casi en su totalidad en la forma en que los visitantes usan el cursor para navegar por sus páginas. También es lo único que les permite activar eventos, ya sea un efecto de desplazamiento o un clic. Es por eso que encontrará un montón de sitios web que personalizan el cursor con un objetivo específico en mente. Diseñar el cursor es útil si, por ejemplo, desea resaltar una llamada a la acción. Hoy, le mostraremos cómo hacerlo dentro de Divi. ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descarga The Layout 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 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.

Descarga los archivos

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.

DESCARGAR

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!

1. Crear nueva página / abrir una existente

Crear nueva página o abrir una existente

Empiece por crear una nueva página o abrir una existente.

Cargue el diseño de su elección

Para centrarnos en la esencia de este tutorial, usaremos el paquete de diseño de reparación de bicicletas, pero siéntase libre de usar cualquier otro diseño de su 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. Usaremos 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 aparezca la sección, eliminaremos el relleno superior e inferior predeterminado en la configuración de espaciado.

• Relleno superior: 0px
• Acolchado 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 filas y elimine todo el ancho de canalón personalizado en la configuración de tamaño.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

Elimine también todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado 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 con 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

Frontera

Para convertir el cursor en un círculo, como puede 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 mouse por 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

CSS del elemento principal

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:

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. Agregue 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 centrarse en la funcionalidad! Agregue un módulo de código justo debajo del módulo de texto del cursor de su nueva sección.

Agregar etiquetas de estilo y secuencia de comandos

Combinaremos un poco de CSS y código JQuery, así que continúe y agregue etiquetas de estilo y script a su módulo de código.

Apertura del código JQuery

A continuación, copie y pegue las siguientes líneas de apertura del código JQuery entre las etiquetas del script:

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.

$('.cursor').insertAfter('.et_builder_inner_content');

Eliminar el cursor predeterminado de la página

A continuación, eliminaremos el cursor predeterminado de la página utilizando un código CSS personalizado que colocaremos entre las etiquetas de estilo.

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 utilizando las siguientes líneas de código JQuery:

$(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 cursor sobre un módulo en particular

Agregar clase de aumento de CSS

Como puede observar en la vista previa de esta publicación, tan pronto como se coloca sobre un módulo de botones, los estilos del cursor cambian. Para lograr esto, agregaremos una nueva clase CSS entre nuestras etiquetas de estilo.

.increase-size {
transform: scale(5);
background-color: white;
}

Todos los módulos de botones

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

$('.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, reemplace la clase CSS en el código que usó en el paso anterior. ¡Eso es todo!

$('.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 coloca una llamada a la acción en su página. Una vez que tenga 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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.