Como adicionar um cursor estilizado e invertido à sua página Divi

Uma das maneiras mais rápidas de interagir com os visitantes do seu site é por meio do cursor. É aí que geralmente tudo começa. A interação do usuário na área de trabalho é quase inteiramente baseada na maneira como os visitantes usam o cursor para navegar pelas páginas. É também a única coisa que lhes permite acionar eventos, seja um efeito de foco ou um clique. É por isso que você encontrará uma tonelada de sites que personalizam o cursor com um objetivo específico em mente. Definir o estilo do cursor é útil se você deseja destacar uma frase de chamariz, por exemplo. Hoje, mostraremos como fazer isso no Divi. Você também poderá baixar o arquivo JSON gratuitamente!

Vamos lá.

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Baixe o layout GRATUITAMENTE

Para colocar as mãos no layout gratuito, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

1. Crie uma nova página / abra uma existente

Crie uma nova página ou abra uma existente

Comece criando uma nova página ou abrindo uma existente.

Faça upload do layout de sua escolha

Para focar na essência deste tutorial, vamos usar o Pacote de Layout de Reparo de Bicicleta, mas fique à vontade para usar qualquer outro layout de sua escolha.

Adicionar nova seção ao final da página

Depois de fazer o upload do seu layout, navegue até a parte inferior da página e adicione uma nova seção. Vamos usar esta seção para construir nosso cursor.

Espaçamento

Para criar um cursor personalizado, adicionaremos um Módulo de Texto posteriormente no tutorial. Este módulo será colocado dentro da seção, mas não queremos que o contêiner da seção real apareça em nosso design. Para evitar que a seção apareça, removeremos o preenchimento padrão superior e inferior nas configurações de espaçamento.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma linha à seção usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar módulos ainda, abra as configurações de linha e remova toda a largura de medianiz personalizada nas configurações de dimensionamento.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Remova também todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Adicionar Módulo de Texto (Cursor)

Deixe a caixa de conteúdo vazia

É hora de adicionar um Módulo de Texto, que usaremos mais tarde como cursor! Deixe a caixa de conteúdo vazia.

Dimensionamento

Vá para a guia de design e modele o módulo usando largura e altura personalizadas em diferentes tamanhos de tela:

• Largura:
  • Desktop: 100px
  • Tablet: 60px
  • Telefone: 40px
• Altura:
  • Desktop: 100px
  • Tablet: 60px
  • Telefone: 40px

Fronteira

Para transformar o cursor em um círculo, como você pode notar na visualização deste post, usaremos cantos arredondados e uma borda.

• Todos os cantos: 100%
• Largura da borda: 3px
• Cor da borda: #ffffff

Modo de mistura

Na visualização deste post, você pode notar um efeito invertido no cursor, especialmente ao passar o mouse sobre um Módulo de Botão. Para obter este efeito, usaremos um modo de mesclagem para nosso Módulo de Texto.

• Modo de mistura: diferença

CSS do elemento principal

Adicionando as seguintes linhas de código CSS ao elemento principal do módulo, ajudaremos a preparar o módulo para uso futuro como cursor:

transition: all .1s linear;
pointer-events: none;

Posição

Usaremos uma posição fixa para o módulo também.

• Cargo: Fixo
• Localização: Superior Esquerdo
• Índice Z: 2

Classe CSS

E concluiremos as configurações do módulo atribuindo uma classe CSS personalizada na guia avançada.

• Classe CSS: cursor

2. Adicionar funcionalidade

Adicionar Módulo de Código Abaixo do Módulo de Texto do Cursor

Agora que temos o módulo de texto do cursor no lugar, é hora de nos concentrarmos na funcionalidade! Adicione um Módulo de Código logo abaixo do cursor Módulo de Texto de sua nova seção.

Adicionar tags de estilo e script

Vamos combinar um pouco de código CSS e JQuery, então vá em frente e adicione tags de estilo e script ao seu Módulo de código.

Abertura de código JQuery

Em seguida, copie e cole as seguintes linhas de abertura de código JQuery entre as tags de script:

jQuery(document).ready(function($){
});

Módulo de Texto do Cursor de Reposicionamento

Agora que a base dentro de nosso Módulo de Código foi criada, iremos passo a passo. A primeira coisa que faremos é colocar o Módulo de Texto que criamos após o conteúdo interno do construtor. Isso nos permitirá usar o cursor em toda a página.

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

Remover o Cursor Padrão da Página

A seguir, removeremos o cursor padrão da página usando algum código CSS personalizado que colocaremos entre as tags de estilo.

body {
cursor: none;
}

Definir Módulo de Texto do Cursor como Cursor

A seguir, vamos permitir que o cursor siga os movimentos dos visitantes usando as seguintes linhas 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 efeito ao passar o mouse sobre um módulo específico

Adicionar classe CSS de aumento

Como você pode notar na visualização deste post, assim que um Módulo de Botão é movido, os estilos do cursor mudam. Para conseguir isso, vamos adicionar uma nova classe CSS entre nossas tags de estilo.

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

Todos os módulos de botão

Vamos alternar essa classe CSS usando algum código JQuery. O código a seguir direciona todos os Módulos de botão dentro de sua página Divi, um por um.

$('.et_pb_button').hover(function(){
$('.cursor').toggleClass('increase-size');
});

Um Módulo de Botão Específico

Se você deseja que o efeito se aplique a um módulo em particular, é necessária uma abordagem diferente. Primeiro, abra o Módulo de botão ao qual deseja aplicar o efeito e inclua uma classe CSS personalizada.

• Classe CSS: botão do cursor

Em seguida, substitua a classe CSS no código usado na etapa anterior. É isso!

$('.cursor-button').hover(function(){
$('.cursor').toggleClass('increase-size');
});

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Pensamentos finais

Neste post, mostramos como criar um cursor personalizado para sua página Divi. Também mostramos como usar esse cursor personalizado para acionar um efeito de foco quando alguém passa o mouse sobre uma frase de chamariz em sua página. Depois de aprender a criar um cursor personalizado, você poderá criar qualquer tipo de design ou efeito! Você também pode baixar o arquivo JSON gratuitamente. Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo.

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.