6 Microinterações que tornarão seu site Divi mais agradável (tutorial + download grátis)
Publicados: 2019-02-14Microinterações são uma ótima maneira de aprimorar a experiência do usuário conforme eles interagem com o seu site. Ligeiras animações de ícones, botões ou imagens podem indicar ao usuário a ação de uma forma divertida e proposital. Existem inúmeras microinterações que você pode incluir em seu site, mas uma boa regra é mantê-las “micro”. Você não quer exagerar.
Hoje vou mostrar algumas microinterações simples que você pode adicionar ao seu site Divi usando o Divi Builder e o CSS personalizado (sem jquery). Vou me concentrar nos elementos com os quais os usuários normalmente interagem - botões, ícones, imagens.
Vamos começar.
Espiada
Aqui está uma rápida olhada nas microinterações que iremos construir neste tutorial.
# 1 Dimensionamento de imagens ao pairar
Comece a construir microinteração # 1
# 2 Ícone de rolagem para baixo saltando
Comece a construir microinteração # 2
Nº 3 Rotação de Blurb e ícones de botão ao pairar
Comece a construir microinteração # 3
# 4 Ícones do botão deslizante para mostrar e ocultar o texto do botão
Comece a construir microinteração # 4
# 5 Rotação em perspectiva da imagem 3D
Comece a construir microinteração # 5
# 6 Botão deslizante microinteração
Comece a construir microinteração # 6
Inscreva-se no nosso canal no Youtube
O que você precisa para começar
Para começar, tudo o que você realmente precisa é Divi. Seremos nossos exemplos do zero usando o Divi Builder no front end.
Baixe os arquivos para fácil acesso
Eu incluí um download no final deste artigo para aqueles de vocês que desejam ter um exemplo prático dessas microinterações em execução em seu site da maneira rápida e fácil. Dessa forma, você pode ter um exemplo funcional à medida que segue o tutorial.
Download
# 1 Dimensionamento de imagens ao pairar
A escala refere-se ao ajuste do tamanho de um elemento. Portanto, se quisermos aumentar uma imagem ao passar o mouse (por exemplo), tudo o que precisamos fazer é adicionar um pequeno snippet CSS para dimensionar nossa imagem em uma certa porcentagem. Isso nos permite criar uma microinteração pequena, mas eficaz, quando um usuário passa o mouse sobre uma imagem. Deixe-me mostrar como você pode aplicar isso a três módulos Divi populares que usam imagens - o módulo de imagem, o módulo blurb e o módulo pessoa.
Vá em frente e crie uma nova seção com uma linha de três colunas para que possamos adicionar cada um de nossos exemplos a cada coluna.
Dimensionando uma imagem ao passar o mouse usando o módulo de imagem
Para adicionar a microinteração de imagem de dimensionamento a uma imagem usando o módulo de imagem, primeiro adicione um módulo de imagem à primeira coluna.
Em seguida, adicione uma imagem ao módulo de sua escolha.
Em seguida, adicione a seguinte classe CSS na guia avançada nas configurações de imagem:
Classe CSS: scale-image
Isso nos permite direcionar este módulo específico ao adicionar nosso CSS personalizado às configurações da página. Para adicionar o CSS necessário para dimensionar a imagem, abra as configurações da página e adicione o seguinte CSS personalizado:
/**This scales the image in the image module with the CSS class "scale-image" **/
.scale-image {
overflow:hidden;
}
.scale-image img{
transition: all 0.2s;
}
.scale-image:hover img {
transform: scale(1.3)
}
Agora verifique o resultado.
Dimensionando uma imagem de módulo do Blurb ao pairar
Para adicionar o mesmo efeito a uma imagem em um módulo de propaganda, primeiro adicione um módulo de propaganda à segunda coluna.
Em seguida, adicione uma imagem de sua escolha ao módulo blurb.
Em seguida, adicione a seguinte classe CSS ao módulo blurb.
Classe CSS: scale-blurb-image
Com esta classe CSS em vigor, podemos agora adicionar nosso CSS personalizado que visa a imagem do blurb. Abra as configurações da página e adicione o seguinte CSS personalizado:
/**This scales the image in the bl module with the CSS class "scale-blurb-image" **/
.scale-blurb-image .et_pb_main_blurb_image {
overflow:hidden;
}
.scale-blurb-image .et_pb_main_blurb_image img {
transition: all 0.2s;
}
.scale-blurb-image .et_pb_main_blurb_image:hover img {
transform: scale(1.3);
}
Aqui está o resultado.
Dimensionando a imagem de um módulo de pessoa ao pairar
Para dimensionar a imagem de um módulo de pessoa ao passar o mouse, adicione um módulo de pessoa à terceira coluna e adicione um upload de uma imagem de sua escolha ao módulo.
Em seguida, adicione a seguinte classe CSS ao módulo pessoa.
Classe CSS: escala-pessoa-imagem
Agora abra as configurações de página e adicione o seguinte CSS personalizado.
/**This scales the image in the person module with the CSS class "scale-person-image" **/
.scale-person-image .et_pb_team_member_image {
overflow:hidden;
}
.scale-person-image img {
transition: all 0.2s;
}
.scale-person-image img:hover {
transform: scale(1.3);
}
Confira o resultado de todos os três módulos com a microinteração de imagem em escala.
# 2 Ícone de rolagem para baixo saltando
A próxima microinteração adiciona uma animação de salto ao ícone de rolagem para baixo integrado ao módulo de cabeçalho de largura total. Esta é uma forma sutil de informar ainda mais o visitante de que há mais informações mais adiante na página. E você pode escolher ter esse efeito de salto por padrão ou ao passar o mouse.
Veja como fazer.
Primeiro, adicione uma nova seção de largura total com um módulo de cabeçalho de largura total.
Em seguida, atualize o seguinte:
Texto e orientação do logotipo: centro
Mostrar botão de rolagem para baixo: SIM
Ícone: [selecione o ícone de escolha]
Em seguida, adicione a seguinte classe CSS:
Classe CSS: bounce-scroll-icon
Esta classe nos permitirá direcionar o ícone de rolagem com css para animar o ícone por padrão no carregamento da página.
Em seguida, duplique o módulo de cabeçalho de largura total e atualize a classe CSS para o seguinte:
Classe CSS: bounce-scroll-icon-hover
Esta classe nos permitirá direcionar o ícone de rolagem com css para animar o ícone ao passar o mouse.
Em seguida, abra as configurações da página e adicione o CSS personalizado a seguir para ativar a animação de salto para nossos dois exemplos.
.bounce-scroll-icon-hover .et-pb-icon {
position: absolute;
top:-10px;
left:0;
right:0;
}
.bounce-scroll-icon-hover .et-pb-icon:hover {
animation-duration: 2s;
animation-name: bounce;
animation-iteration-count: infinite;
animation-timing-function: linear;
transition: all .2s;
}
.bounce-scroll-icon .et-pb-icon {
position: absolute;
top:-10px;
left:0;
right:0;
animation-duration: 2s;
animation-name: bounce;
animation-iteration-count: infinite;
animation-timing-function: linear;
transition: all .2s;
}
.bounce-scroll-icon .et-pb-icon:hover {
animation-name: none;
}
@keyframes bounce {
0% {top: -10px; opacity: 1;}
50% {top: 15px; opacity:0;}
100% {top: -10px;opacity:1;}
}
Confira o resultado dos dois exemplos. O ícone de rolagem do cabeçalho superior será animado por padrão e o ícone de rolagem do cabeçalho inferior será animado ao passar o mouse.
Nº 3 ícones giratórios ao pairar
Adicionar uma ligeira rotação a um ícone pode ser uma microinteração eficaz para envolver os usuários a clicar em um elemento. Como os dois módulos Divi mais populares com ícones integrados são o módulo de botão e o módulo de sinopse, pensei em mostrar como adicionar rotação a esses ícones ao pairar.
Girar um ícone de botão ao pairar
Divi já vem com uma microinteração útil para ícones de botão por padrão. Ao passar o mouse sobre o botão, o ícone do botão aparece e se move para a direita, indicando que ao clicar no botão você será redirecionado para outra página. Mas, se quiser ser um pouco mais criativo com ele, você pode girar o ícone para uma microinteração completamente nova.
Para girar um ícone de botão ao passar o mouse, primeiro adicione uma nova seção com uma linha de uma coluna. Em seguida, adicione um módulo de botão à linha.
Em seguida, atualize as configurações do botão da seguinte forma:
Use estilos personalizados para o botão: SIM
Mostrar apenas o ícone ao passar o mouse para o botão: NÃO
Ícone do botão: [escolha o ícone de escolha]
Em seguida, adicione a seguinte classe CSS:
Classe CSS: ícone do botão de rotação
Com nosso ícone e classe CSS no lugar, tudo o que precisamos fazer é adicionar o seguinte CSS personalizado às configurações da página:
/** This rotates the button icon on hover for the button module with the CSS class "rotate-button-icon" **/
.rotate-button-icon:after {
transform: rotate(-90deg);
}
.rotate-button-icon:hover:after {
transform: rotate(0deg);
}
Isso girará o ícone no sentido anti-horário em 90 graus inicialmente e, em seguida, voltará a 0 graus ao pairar.
Aqui está o resultado.
Girando um ícone de módulo do Blurb
Para girar um ícone de módulo de blurb, vamos primeiro criar uma nova seção com uma linha de três colunas. Em seguida, adicione um módulo de sinopse à coluna 1 e atualize as seguintes configurações de sinopse.
Ícone de uso: SIM
Ícone: [adicionar ícone de escolha]
Orientação do texto: centro
Classe CSS: rotate-blurb-icon
Agora adicione o seguinte CSS personalizado às configurações da página:
/** This rotates a blurb icon with the css class "rotate-blurb-icon" **/
.rotate-blurb-icon .et-pb-icon {
transition: 0.2s ease-out;
transform: rotateZ(-90deg);
}
.rotate-blurb-icon .et_pb_blurb_content:hover .et-pb-icon {
transform: rotateZ(0deg);
}
Aqui está o resultado.
Isso também funciona com o ícone colocado à esquerda do título. Tudo o que você precisa fazer é atualizar as configurações do blurb da seguinte maneira:
Posicionamento de imagem / ícone: esquerda
Altura da linha do título: 1,7em
Confira o resultado.
# 4 Ícones do botão deslizante para mostrar e ocultar o texto do botão
Texto do botão para ícone ao pairar
Essa microinteração exibe o texto do botão com um ícone por padrão e, em seguida, move o ícone para cobrir o texto ao pairar.
Veja como fazer.
Adicione uma nova seção com uma linha de uma coluna. Em seguida, adicione um módulo de botão à linha e atualize as seguintes configurações de botão:
Use estilos personalizados para botão: SIM
Cor de fundo do botão: # 0c71c3
Largura da borda do botão: 0 px
Cor do ícone do botão: #ffffff
Classe CSS: botão-texto-para-ícone
Agora adicione o seguinte CSS personalizado às configurações da página:
/** This styles button to cover button text with icon on hover when button has class "button-text-to-icon" **/
body #page-container .et_pb_button.button-text-to-icon:after {
width: 1em;
transition: all .3s !important;
margin-left: 0;
border-left: 1px solid #dddddd;
left: calc(100% - 1em);
}
body #page-container .et_pb_button.button-text-to-icon:hover:after {
border-left: 1px solid transparent;
left: calc(50% - 0.5em);
transform: scale(1.3);
}
body #page-container .et_pb_button:hover:after {
color: #ffffff;
margin-left: 0px;
left: 0;
width: 100%;
text-align: center;
transform: scale(1.5);
}
Agora verifique o resultado.
Ícone de botão para texto ao pairar
Você também pode criar o efeito oposto de mostrar o ícone do botão inicialmente e, em seguida, deslizar o ícone para revelar o texto do botão. Para fazer isso, duplique o módulo do botão e atualize as seguintes configurações do botão:
Cor do texto do botão (padrão): # 0c71c3
Cor do texto do botão (pairar): #ffffff
Em seguida, substitua a classe CSS pelo seguinte:
Classe CSS: ícone do botão para texto
Em seguida, adicione o seguinte CSS personalizado às configurações da página:
/** This styles button to reveal button text from icon on hover when button has class "button-text-to-icon" **/
body #page-container .et_pb_button.button-icon-to-text:after {
width: 1em;
transition: all .3s !important;
margin-left: 0;
border-left: 1px solid transparent;
left: calc(50% - 0.5em);
transform: scale(1.3);
}
body #page-container .et_pb_button.button-icon-to-text:hover:after {
border-left: 1px solid #dddddd;
left: calc(100% - 1em);
transform: scale(1);
}
Agora verifique o resultado.
# 5 Rotação em perspectiva da imagem 3D
Esta microinteração começa com uma imagem de módulo de imagem estilizada com perspectiva de imagem 3D e rotação por padrão. Então, ao passar o mouse, a imagem recorre a uma exibição normal da imagem.
Veja como fazer.
Primeiro, crie uma nova seção com uma linha de três colunas. Em seguida, adicione um módulo de imagem à coluna 1 e adicione uma imagem ao módulo de imagem de sua escolha.
Para este efeito, podemos adicionar nosso CSS personalizado diretamente ao módulo. Vá para a guia avançada e adicione o seguinte CSS personalizado no elemento principal:
CSS do elemento principal (padrão):
transform: perspective(700px) rotateY(45deg); transition: all .2s;
Este css está fazendo duas coisas em nossa imagem usando a propriedade Transform CSS. Primeiro, ele adiciona uma perspectiva de 700px, que é a distância entre a imagem e a perspectiva do usuário ao visualizar a página. O CSS também adiciona rotação à imagem. O rotateY (45deg) gira a imagem no eixo Y 45 graus (sentido horário). E com a perspectiva no lugar, a imagem agora tem uma aparência tridimensional.
CSS do elemento principal (foco):
transform: perspective(700px) rotateY(0deg);
Isso remove a rotação da imagem ao passar o mouse para que pareça normal para que os usuários possam ter uma visão melhor da imagem.
Agora vamos verificar o resultado.
Vamos fazer mais alguns exemplos dessa microinteração. Vá em frente e copie o módulo de imagem e cole-o na coluna 2 e coluna 3. No módulo de imagem duplicado na coluna 2, atualize o CSS personalizado da seguinte maneira:
CSS do elemento principal (padrão):
transform: perspective(700px) rotateX(45deg); transition: all .2s;
CSS do elemento principal (foco):
transform: perspective(700px) rotateX(0deg);
Observe que a única diferença aqui é a letra “X” após “girar”. Isso informa a imagem para girar no eixo x em 45 graus. Em seguida, definimos o valor de grau para 0 ao pairar para trazê-lo de volta ao normal.
Aqui está o resultado.
No módulo de imagem duplicada na coluna 3, atualize o CSS personalizado da seguinte maneira:
CSS do elemento principal (padrão):
transform: perspective(700px) rotateY(-45deg); transition: all .2s;
CSS do elemento principal (foco):
transform: perspective(700px) rotateY(0deg);
Observe que a única diferença entre este CSS e o CSS usado na imagem na coluna 1 é o valor “-45deg”. Isso gira a imagem no eixo Y no sentido anti-horário.
Aqui está o resultado final de todas as três microinterações de imagem usando perspectiva e rotação.
Não se esqueça de adicionar ainda mais efeitos e designs de foco integrados usando a configuração integrada do módulo de imagem. Por exemplo, este seria um ótimo lugar para adicionar o efeito de sombra de caixa também.
# 6 Botão deslizante microinteração
Para esta última microinteração, vamos criar um controle deslizante de botão que mostra informações adicionais (na verdade, um botão completamente novo) ao passar o mouse. A ideia básica é dar à coluna uma altura personalizada e, em seguida, empilhar dois módulos de botão dentro da coluna. O botão superior será o que o usuário vê por padrão, mas o segundo botão será o botão com “informações adicionais” que o usuário verá ao passar o mouse sobre o botão.
Veja como criá-lo.
Este botão abrangerá toda a largura da coluna da linha, por isso funciona melhor se você adicionar o botão a uma linha com uma coluna que não fique muito larga. Para este exemplo, vou usar uma linha de uma coluna e, em seguida, definir uma largura máxima para minha linha para que o botão não fique muito largo em navegadores grandes.
Crie uma nova seção com uma linha de uma coluna. Em seguida, adicione um módulo de botão à linha e atualize as seguintes configurações de botão:
Texto do botão: “Download”
Alinhamento do botão: centro
Use estilos personalizados para botão: SIM
Cor do texto do botão: #ffffff
Cor de fundo do botão: # 0c71c3
Largura da borda do botão: 0 px
Raio da borda do botão: 0 px
Ícone do botão: veja a captura de tela
Cor do ícone do botão: #ffffff
Posicionamento do ícone do botão: Esquerda
Mostrar apenas o ícone ao passar o mouse para o botão: NÃO
Margem personalizada: 0px inferior
Em seguida, duplique o botão que você acabou de criar para que a duplicata seja empilhada logo abaixo do botão que você acabou de criar. Em seguida, atualize as configurações do botão duplicado da seguinte forma:
Texto do botão: MP3 (3,5 MB)
Cor do texto do botão: # 0c71c3
Cor de fundo do botão: #ffffff
Ícone do botão: veja a captura de tela
Cor do ícone do botão: # 0c71c3
Antes de prosseguirmos com o estilo de nossa linha, precisamos adicionar uma classe CSS ao botão superior. Abra as configurações do botão superior e adicione a seguinte classe CSS:
Classe CSS: botão superior
Agora que os dois botões estão no lugar, vamos atualizar as configurações de linha com uma largura personalizada que servirá como a largura máxima de nossos botões e uma classe CSS de coluna para nosso CSS personalizado que adicionaremos às configurações de página. Abra as configurações de linha e atualize o seguinte:
Largura personalizada: 200px
Classe CSS da coluna: botão deslizante
Certifique-se de adicionar a classe CSS à coluna e não à linha.
Agora estamos prontos para adicionar o CSS personalizado. Abra as configurações da página e adicione o seguinte CSS:
/** This styles the slider button **/
.slider-button {
height: 50px;
overflow:hidden;
border:2px solid #0c71c3;
}
.slider-button .et_pb_button {
display:block;
margin: 0 !important;
}
.slider-button:hover .top-button {
margin-top: -48px !important;
}
Este CSS só funcionará com o botão no tamanho padrão. Isso ocorre porque temos que dar à coluna uma altura fixa para ocultar o segundo botão até pairar. No momento, a altura da coluna (com o “botão deslizante” da classe) recebe uma altura de 50px. Isso leva em consideração a borda de 2 pixels fornecida à coluna também. Ao passar o mouse, o botão superior (com a classe "botão superior" é movido para fora da vista com uma margem superior de -48px (a altura do botão menos uma das bordas de 2px). Mas, se você alterar a fonte- tamanho ou preenchimento dos botões, você precisará ajustar a altura da classe do botão deslizante junto com a margem superior do botão de acordo.
Aqui está o resultado final.
Não se esqueça de que você pode estilizar os botões com diferentes textos / informações e ícones para seu próprio uso. É uma ótima maneira de educar os usuários com informações adicionais em uma frase de chamariz exclusiva.
Download GRATUITO: Obtenha o Layout Premade e o arquivo CSS para este tutorial
Se quiser saber como serão essas microinterações em seu site, você pode baixar o arquivo zip abaixo. Depois de baixar o arquivo zip, localize o arquivo em seu disco rígido. Ele será chamado de “microinteraction-examples.zip”. Ao descompactar o arquivo, você verá dois arquivos. O arquivo denominado “microinteraction-examples.json” é o layout Divi. Terá de ser carregado para a sua biblioteca Divi. Você pode fazer isso no painel do WordPress navegando até Divi> Divi Library e clicando no botão importar na parte superior da página. O arquivo denominado “microinteractions.css” contém o CSS personalizado usado no tutorial. Este CSS precisará ser copiado para o CSS personalizado de configurações de página ou para a caixa CSS adicional do personalizador de tema. Você também pode usar o recurso de arrastar e soltar do Divi para arrastar o arquivo microinteractions.css diretamente para o Divi Builder assim que seu layout for carregado. Isso adicionará automaticamente o css às configurações da página.
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.
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!
Pensamentos finais
Espero que você ache essas microinterações úteis. Eles são simples de usar com Divi (usando apenas CSS) em todo o seu site. Por questão de tempo e simplicidade, usei os estilos padrão básicos de módulos, mas fique à vontade para ajustar as opções de design conforme necessário para estilos mais criativos. Além disso, não hesite em ajustar o CSS para esses exemplos para atender às suas necessidades ou inventar algo completamente novo.
Estou ansioso para ouvir de você nos comentários.
Saúde!