Como transformar o cursor em botão criativo enquanto passa o mouse sobre o elemento usando Divi

Rifat Divi Tutorials Jul 8, 2021

E se você passar o mouse sobre um elemento e ele se tornar um botão e clicar nele o redirecionará para outra página? Freqüentemente, colocamos um botão na parte inferior ou lateral da galeria de imagens ou blocos de artigos / produtos para nos levar à página detalhada desse elemento. E se o botão não estiver definido visualmente? Nós o configuramos com o efeito de pairar do mouse para que o mouse se transforme em um botão assim que pousar na imagem ou nos blocos do artigo e clicar em qualquer lugar da área específica que nos levará à página desejada. Sim! Com Divi , temos muitas opções para personalizar nosso site e o tutorial de hoje sobre como transformar um cursor em um botão criativo enquanto passa o mouse sobre o elemento. Não é emocionante?

Portanto, não vamos esperar mais e pular para o tutorial.

Sneak Peak

Antes de prosseguirmos, é assim que nosso design de hoje será.

Parte Um: Estrutura do Elemento de Construção

Adicione uma página do painel do WordPress e abra-a com o Divi builder. Avance com "Construir a partir do zero".

Create Amazing Websites

Com o melhor criador de páginas gratuito Elementor

Comece agora

Adicionando: Nova Seção

Cor de fundo

Vamos adicionar branco como cor de fundo em nossa seção inicial.

  • Cor de fundo: #ffffff

Espaçamento

Agora, na guia de design, adicione algum espaçamento à seção.

  • Enchimento superior: 80px
  • Preenchimento inferior: 0 px

Adicionando: Nova Linha

Estrutura da Coluna

Agora vamos adicionar uma linha de duas colunas à nossa seção.

Dimensionamento

Agora, antes de adicionar qualquer outro módulo, vamos alterar as configurações de dimensionamento desta linha de duas colunas.

  • Largura máxima: 2580 px

Espaçamento

Agora, faça algumas alterações no espaçamento.

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

Adicionando: Módulo de Imagem à Coluna 1

Adicionar imagem

Agora adicione um módulo de imagem à coluna 1 e adicione uma imagem de sua escolha.

Adicionar Link

Agora adicione um link para esta imagem.

Escala Hover

Agora, vá para a guia de design e vamos alterar as configurações de escala de foco deste módulo de imagem.

  • Ambos: 90%

Classe CSS

Adicione alguma classe CSS na guia avançada.

  • Classe CSS: cursor de imagem

Adicionando: Módulo de Texto 1 à Coluna 1

Conteúdo H3

Vamos adicionar um módulo de texto à coluna 1 e adicionar algum conteúdo H3 conforme a necessidade.

Configurações de conteúdo H3

Modifique as configurações de conteúdo H3 na guia de design.

  • Fonte do Título 3: Ator
  • Cor do texto do título 3: # 000000
  • Cabeçalho 3 Tamanho do texto: Desktop: 35px, Tablet: 28px E Telefone: 22px
  • Altura da linha do título 3: 1,4em

Espaçamento

Adicione espaçamento ao módulo de texto.

  • Margem inferior: 15px

Adicionando: Módulo de Texto 2 à Coluna 1

Conteúdo de Texto

Adicione outro módulo de texto logo abaixo do módulo de texto anterior e adicione algum conteúdo descritivo a esse módulo.

Configurações de conteúdo de texto

Modifique as configurações de conteúdo de texto na guia de design.

  • Fonte do Título 3: Ator
  • Cor do texto do título 3: # 75BAFF
  • Cabeçalho 3 Tamanho do texto: Desktop: 22px, Tablet: 18px E Telefone: 15px
  • Espaçamento entre letras do texto: 0,5 px
  • Altura da linha do título 3: 1,4em

Adicionando: Módulo de Botão à Coluna 1

Botão de texto

Finalmente, adicione um módulo de botão à coluna 1 e adicione uma cópia relevante.

Configurações de texto do botão

Vá para a guia de design do módulo e altere as configurações do botão de acordo:

  • Usar estilos personalizados para botão: Sim
  • Cor do texto do botão: # 000000
  • Largura da borda do botão: 0 px
  • Raio da borda do botão: 1px
  • Fonte do botão: Ator
  • Mostrar ícone do botão: Sim
  • Posicionamento do ícone do botão: Esquerda
  • Mostrar apenas o ícone ao passar o mouse para o botão: Não

Espaçamento

Ajuste os valores de espaçamento.

  • Margem inferior: 80px
  • Preenchimento inferior: 20 px
  • Preenchimento direito: 30px

Sombra da caixa

Conclua as configurações do módulo aplicando as seguintes configurações de sombra da caixa:

  • Posição horizontal da sombra da caixa: 0 px
  • Posição vertical da sombra da caixa: 2 px
  • Cor da sombra: # 000000

Duplicar o conteúdo

Aqui faremos algumas coisas. Primeiro, vamos deletar a segunda coluna.

Agora, vamos clonar a primeira coluna.

Agora duplique a linha inteira e altere o conteúdo.

Parte Dois: Adicionar Cursor

Adicionar nova linha

Estrutura da Coluna

Uma vez que terminamos com a estrutura de design, faremos o design do cursor. Adicione uma nova linha à seção com a seguinte estrutura de coluna.

Espaçamento

Abra as configurações de linha e faça algumas alterações conforme mencionado abaixo.

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

Adicionando: Módulo de Texto para Cursor

Adicionar cópia

Agora adicione um módulo de texto à linha recém-criada e adicione alguma cópia de sua escolha.

Cor de fundo

Em seguida, adicione uma cor de fundo.

  • Cor de fundo: # 47669b

Configurações de texto

Na guia de design, altere o estilo do texto.

  • Fonte do Texto: Ator
  • Peso da fonte do texto: negrito
  • Estilo da fonte do texto: maiúsculas
  • Cor do texto: #ffffff
  • Espaçamento entre letras do texto: 2px
  • Alinhamento de Texto: Centro

Dimensionamento

Faça alguns ajustes na seção de dimensionamento.

  • Largura: 150px
  • Altura: 150px

Fronteira

Vamos mudar as configurações de borda para fazer este círculo.

  • Todos os cantos: 100px

Sombra da caixa

Vamos adicionar uma sombra de caixa de luz também.

  • Força do desfoque de sombra da caixa: 0 px
  • Força de propagação da sombra da caixa: 20px
  • Cor da sombra: rgba (7.213.255,0.14)

Classe CSS

Em seguida, daremos ao nosso módulo uma classe CSS.

  • Classe CSS: cursor

Elemento Principal CSS

Agora adicione o código CSS à caixa do elemento principal.

transition: all .1s linear;
pointer-events: none;
 
display: flex;
justify-content: center;
align-items: center;

Posição

Agora, terminaremos este módulo fazendo algumas alterações na seção de posição da guia avançada.

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

Adicionando: Módulo de Código

Agora adicione um módulo de código abaixo do último módulo de texto. Adicione tags de estilo e scripts dentro do módulo de código.

Adicionar código CSS

Cole o seguinte código CSS dentro de Style .

.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;
}

Adicionar código JQuery

Cole o seguinte código CSS dentro do Script.

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');
 
});
 
});

Resultado final

Aqui está a aparência do nosso design final, impressionante!

Conclusão

O tutorial de hoje foi baseado em como você pode trazer um design mais interativo para o seu site. Divi oferece a você uma grande oportunidade de chamar a atenção de mais visitantes para o seu site, tornando o design limpo e lindo. Espero que gostem do tutorial de hoje, e se sim, um compartilhamento será INCRÍVEL!

Divi WordPress Theme