[Ad_1]
Vamos.
Visão geral
Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.
escritório
Móvel Esteira
Baixe o layout GRATUITAMENTE
Para obter o layout gratuito, primeiro você precisa baixá-lo usando o botão abaixo. Para acessar o download, você precisará se inscrever em nossa lista de discussão Divi Daily usando o formulário abaixo de. Como novo assinante, você receberá ainda mais produtos Divi e um pacote Divi Layout gratuito toda segunda-feira! Se você já está na lista, basta digitar seu endereço de e-mail abaixo e clicar em download. Você não será "reinscrito" ou receberá e-mails adicionais.
1. Crie uma estrutura de elemento
Adicione uma nova seção
Cor de fundo
Começaremos este tutorial construindo a estrutura dos elementos em uma página Divi. Adicione uma nova seção e use uma cor de fundo branca para ela.
- Cor de fundo: #ffffff
espaçamento
Vá para a guia Section Design e altere as configurações de espaçamento da seguinte forma:
- Estofamento superior: 80px
- Preenchimento inferior: 0px
Adicione uma nova linha
Estrutura da coluna
Continue adicionando uma nova linha usando a seguinte estrutura de colunas:
dimensionamento
Sem adicionar nenhum módulo ainda, abra as configurações de linha e altere a largura máxima nas configurações de dimensionamento.
espaçamento
Em seguida, remova todo o preenchimento padrão superior e inferior.
- Estofamento superior: 0px
- Preenchimento inferior: 0px
Adicione um módulo de imagem à coluna 1
Baixar imagem
Vamos aos módulos, começando com um módulo de imagem na coluna 1. Carregue uma imagem de sua escolha.
Adicionar um link
Em seguida, adicione um link para o módulo de imagem.
Escala Flyover
Em seguida, vá para a guia Design e altere as configurações de escala de foco do módulo.
Classe CSS
Conclua os parâmetros do módulo aplicando a seguinte classe CSS na guia avançada:
Adicione o módulo de texto # 1 à coluna 1
Adicionar conteúdo H3
Vamos passar para o próximo módulo, que é um módulo de texto contendo conteúdo H3 de sua escolha.
Configurações de texto H3
Mude para a guia de design do módulo e altere as configurações de texto H3 de acordo:
- Polícia do Título 3: Ator
- Título 3 Cor do texto: # 000000
- Título 3 Tamanho do texto:
- Desktop: 35px
- Tablet: 28px
- Telefone: 22px
- Título 3 Altura da linha: 1,4em
espaçamento
Em seguida, adicione uma margem inferior.
Adicione o módulo de texto # 2 à coluna 1
Adicionar conteúdo
Em seguida, adicione outro módulo de texto logo abaixo do anterior com um conteúdo descrição de sua escolha.
Configurações de texto
Altere as configurações de texto do módulo da seguinte maneira:
- Fonte do texto: ator
- Cor do texto: # 75baff
- Tamanho do texto:
- Desktop: 22px
- Tablet: 18px
- Telefone: 15px
- Espaçamento entre letras do texto: 0.5 px
- Altura da linha da letra: 2ª
Adicione um módulo de botão à coluna 1
Adicione uma cópia
O próximo e último módulo de que precisamos nesta coluna é um módulo de botão. Adicione uma cópia de sua escolha.
Configurações de botão
Mude para a guia de design do módulo e altere as configurações do botão de acordo:
- Use estilos personalizados para o botão: Sim
- Cor do texto do botão: # 000000
- Largura da borda do botão: 0px
- Raio da borda do botão: 1px
- Fonte do botão: actor
- Mostrar ícone do botão: Sim
- Localização do ícone do botão: Esquerda
- Mostrar apenas o ícone ao passar o mouse para o botão: Não
espaçamento
Adicione também valores de espaçamento personalizados.
- Margem inferior: 80px
- Preenchimento inferior: 20px
- Preenchimento direito: 30px
Caixa de sombra
E conclua as configurações do módulo aplicando as seguintes configurações de sombra da caixa:
- Posição horizontal da sombra da caixa: 0px
- Posição da sombra da caixa vertical: 2px
- Cor da sombra: # 000000
Excluir coluna 2
Depois de preencher a primeira coluna e todos os módulos nela, remova a segunda coluna vazia da linha.
Clone coluna 1
E reutilize a primeira coluna, clonando-a uma vez.
Clone a linha inteira
Continue clonando a linha inteira uma vez.
Edite todo o conteúdo, imagens e links duplicados
Então certifique-se de editar todos os conteúdo, imagens e links em cada uma das colunas duplicadas.
2. Adicione um cursor
Adicione uma nova linha à seção
Estrutura da coluna
Agora que temos a estrutura do elemento no lugar, é hora de criar o design do controle deslizante. Para fazer isso, adicionaremos uma nova linha à nossa seção usando a seguinte estrutura de coluna:
espaçamento
Abra as configurações de linha e remova todo o preenchimento padrão superior e inferior.
- Estofamento superior: 0px
- Preenchimento inferior: 0px
Adicionar módulo de texto de cursor a nova coluna de linha
Adicionar conteúdo
Em seguida, adicione um módulo de texto à nova linha. Este módulo de texto será dedicado à criação do design do botão do cursor. Adicione uma cópia de sua escolha na área de conteúdo.
Cor de fundo
Em seguida, adicione uma cor de fundo.
- Cor de fundo: # 47669b
Configurações de texto
Mude para a guia Design e estilize o texto de acordo:
- Fonte do texto: ator
- Espessura da fonte do texto: Negrito
- Estilo da fonte do texto: maiúsculas
- Cor do texto: #ffffff
- Espaçamento entre letras do texto: 2 px
- Alinhamento do texto: centro
dimensionamento
Em seguida, adicione um valor de largura e altura aos parâmetros de dimensionamento.
- Largura: 150px
- Altura: 150px
Fronteira
Transformamos este módulo em um círculo, alterando as configurações de borda.
Caixa de sombra
Também adicionaremos uma sombra de caixa sutil.
- Força do desfoque da 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
A seguir, daremos ao nosso módulo uma classe CSS.
Elemento principal CSS
Também adicionamos linhas de código CSS ao elemento principal do módulo.
transition: all .1s linear; pointer-events: none; display: flex; justify-content: center; align-items: center;
Posição
E vamos completar os parâmetros do módulo mudando a posição na guia avançada:
- Posição: fixa
- Localização: canto superior esquerdo
- Índice Z: 2
Adicione um módulo de código no módulo de texto
Agora que projetamos nosso controle deslizante, é hora de fazer o recurso funcionar. Para fazer isso, adicionaremos um novo módulo de código logo abaixo do módulo de texto do cursor.
Adicionar tags de estilo e script
Adicione tags de estilo e script ao seu módulo de código.
Adicionar código CSS
Insira as seguintes linhas de código CSS entre as tags de estilo:
.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
E use as seguintes linhas de código JQuery entre as tags de 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');
});
});
Visão geral
Agora que passamos por todas as etapas, vamos dar uma última olhada no resultado em diferentes tamanhos de tela.
escritório
Móvel Esteira
Considerações finais
Neste tutorial, mostramos como adicionar mais interação aos elementos clicáveis em sua página. Especificamente, mostramos como acionar um botão do cursor quando alguém passa o mouse sobre um item de sua escolha. Isso adiciona interação extra ao design de sua página e pode ajudar a aumentar as taxas de cliques! 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ê quiser saber mais sobre o Divi e receber mais brindes do Divi, certifique-se Assine a nossa newsletter et Canal do Youtube Assim, você sempre será uma das primeiras pessoas a conhecer e desfrutar desse conteúdo gratuito.
[Ad_2]
