Como revelar conteúdo ao passar o mouse com as guias de canto em expansão no Divi (download GRATUITO)

É sempre divertido descobrir maneiras novas e criativas de envolver os usuários com seu conteúdo usando efeitos exclusivos de foco. Uma ótima maneira de fazer isso é revelar o conteúdo ao passar o mouse usando as guias de canto expansíveis. Isso permite que o usuário passe o mouse sobre uma guia no canto de uma coluna ou imagem para expandir uma sobreposição com conteúdo útil adicional para o usuário.

Para este tutorial, vamos criar um layout Divi completamente exclusivo que revelará o conteúdo ao passar o mouse usando as guias de canto expansíveis. Na verdade, mostraremos como projetar uma guia de canto expansível para todos os quatro cantos de uma coluna em Divi.

Vamos começar!

Espiada

Aqui está uma rápida olhada no layout da guia de canto em expansão que construiremos juntos. Observe como os efeitos e o conteúdo do foco são lindamente simétricos.

Baixe o Layout GRATUITAMENTE

Para colocar suas mãos nos designs deste tutorial, 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!

Para importar o layout para sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para o Divi Builder.

Vamos para o tutorial, vamos?

O que você precisa para começar

Para começar, você precisará fazer o seguinte:

1. Se ainda não o fez, instale e ative o Divi Theme.
2. Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
3. Escolha a opção “Build From Scratch”.

Depois disso, você terá uma tela em branco para começar a desenhar no Divi.

Criação do layout de sobreposições de conteúdo em expansão a partir do zero

Parte 1: Criando uma guia de canto em expansão a partir da posição inferior direita

Para começar, adicione uma linha de duas colunas (metade da metade) à seção regular.

Antes de adicionar um módulo, atualize as configurações de linha com uma largura de medianiz personalizada da seguinte maneira:

• Largura da calha: 4

Para este primeiro item apresentado, criaremos uma imagem de fundo de coluna que terá uma guia de canto (usando um módulo de sinopse) na parte inferior direita da coluna que expande e sobrepõe toda a coluna / imagem ao passar o mouse.

Vamos começar adicionando um módulo blurb.

Adicionar Módulo Blurb

Adicione um módulo blurb à coluna 1.

Não vamos estilizá-lo ainda. Basicamente, precisávamos de algum conteúdo para definir o estilo da coluna que contém a sinopse.

Configurações da coluna 1

Com a sinopse no lugar, abra as configurações de linha e clique para editar as configurações da coluna 1. Em seguida, atualize o seguinte:

• Imagem de fundo [inserir imagem]
• Tamanho da imagem de fundo: tamanho real

NOTA: para o meu exemplo, estou usando as imagens de fundo transparente da cerveja tiradas do Pacote de Layout da Cervejaria. Eles têm 128 x 359 pixels, por isso estou usando o tamanho real da imagem.

Borda da coluna 1

• Cantos arredondados: 10px inferior direito
• Largura da borda direita: 2 px
• Cor da borda direita: # e94558
• Largura da borda inferior: 2 px
• Cor da borda inferior: # e94558

CSS personalizado e overflow

Na guia avançada, adicione o seguinte CSS personalizado ao elemento principal:

height: 400px;

A atualização é o seguinte:

• Excesso horizontal: oculto
• Estouro vertical: oculto

Esta altura personalizada é necessária para que nosso módulo de sinopse (guia de canto) expanda a altura total da coluna. E o estouro oculto é necessário para que possamos ocultar a maior parte do módulo de publicidade fora da coluna até o estado de foco.

Adicionando Conteúdo do Módulo Blurb

Agora estamos prontos para começar a personalizar o módulo do blurb dentro da coluna 1. Abra as configurações do blurb e atualize o seguinte:

• Título: Mango IPA
• Corpo:

  <p>Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet</p>
  <p>Hops: Lorem Ipsum<br /> Yeast: Dolor Amet</p>
  <p>4.8% ABV / 4 IBUs</p>
  

• Imagem: adicione a mesma imagem usada para o plano de fundo da coluna

Projetando o Módulo Blurb

Dê à sinopse uma cor de fundo ao passar o mouse da seguinte maneira:

• Cor de fundo (desktop): transparente
• Cor de fundo (pairar): rgba (255.255.255,0.9)

Na guia de design, atualize o seguinte:

• Posicionamento de imagem / ícone: esquerda
• Fonte do título: Oswald
• Estilo da fonte do título: TT
• Tamanho do texto do título: 40px
• Peso da fonte do corpo: Semi negrito
• Cor do corpo do texto (desktop): transparente
• Cor do corpo do texto (foco): # 121212

• Largura da imagem: 100 px (desktop), 64 px (telefone)
• Largura do conteúdo: 100%
• Altura: 100%
• Preenchimento (desktop): 15% superior, 15% inferior, 8% esquerdo, 8% direito
• Preenchimento (pairar): 8% superior, 8% inferior, 8% esquerdo, 8% direito

• Cantos arredondados (padrão): 20px superior esquerdo
• Cantos arredondados (pairar): 10px superior esquerdo
• Largura da borda superior: 4 px (desktop), 2 px (pairar)
• Cor da borda superior: # e94558
• Largura da borda esquerda: 4 px (desktop), 2 px (pairar)
• Cor da borda esquerda: # e94558

Opção de transformação (desktop)

• Eixo Y da escala de transformação: 50%
• Eixo X da escala de transformação: 50%
• Transformar Traduzir Eixo Y: 50%
• Transformar Traduzir Eixo X: 30%
• Origem da transformação: inferior direito

Opções de transformação (passar o mouse)

• Eixo Y da escala de transformação (pairar): 100%
• Eixo X da escala de transformação (pairar): 100%
• Transformar Traduzir Eixo Y (pairar): 0%
• Transformar Traduzir Eixo X (pairar): 0%

Para virar a imagem do Blurb para o lado direito, adicione o seguinte CSS personalizado à caixa Conteúdo do Blurb:

direction: rtl

NOTA: A direção “rtl” significa “direita para esquerda” que muda a ordem padrão do conteúdo (esquerda para direita).

Resultado

Vamos verificar o resultado final de nossa guia de canto em expansão na posição inferior direita. Observe como ele se expande para preencher toda a coluna ao passar o mouse.

Parte 2: Criando uma guia de canto em expansão a partir da posição inferior esquerda

Duplique a coluna

Para criar a guia do canto em expansão a partir da posição inferior esquerda, podemos iniciar o design duplicando a coluna inteira. Abra as configurações de linha e duplique a coluna 1. Em seguida, exclua a coluna extra para que você tenha apenas duas duplicatas exatas.

Atualizar configurações da coluna 2

Em seguida, abra as configurações da coluna 2 e atualize o seguinte:

• Cantos arredondados: 10px inferior esquerdo
• Largura da borda direita: 0 px
• Largura da borda esquerda: 2 px
• Cor da borda esquerda: # e94558

Atualizar configurações do Blurb

Em seguida, atualize as configurações do Blurb da seguinte maneira:

• Alinhamento de texto: direita
• Cantos arredondados (desktop): 20 px superior direito
• Cantos arredondados (pairar): 10px superior direito
• Largura da borda esquerda: 0 px
• Largura da borda direita: 4 px (desktop), 2 px (pairar)
• Cor da borda direita: # e94558

• Transform Translate X Axis (desktop): -30%
• Origem da transformação (desktop): canto inferior esquerdo

Em seguida, certifique-se de excluir o CSS personalizado na caixa Conteúdo do Blurb.

Resultado

Aqui está o resultado. Observe como este é simétrico ao primeiro e se expande da posição inferior esquerda da coluna.

Parte 3: Criando uma guia de canto em expansão a partir da posição superior direita

Agora estamos prontos para começar nossos dois últimos designs de aba de canto em expansão. Para começar, vamos duplicar toda a linha que contém a sinopse que já projetamos.

Atualizar configurações da coluna 1

Em seguida, abra as configurações da linha duplicada e, em seguida, abra as configurações da coluna 1 e atualize o seguinte:

• Cantos arredondados 10px superior direito
• Largura da borda inferior: 0 px
• Largura da borda superior: 2 px
• Cor da borda superior: # e94558

Atualizar as configurações do módulo Blurb

Em seguida, abra a configuração do módulo blurb e atualize o seguinte:

• Cantos arredondados (desktop): 20px inferior esquerdo
• Cantos arredondados (pairar): 10px inferior esquerdo
• Largura da borda superior: 0 px
• Largura da borda inferior: 4 px (desktop), 2 px (pairar)
• Cor da borda inferior: # e94558
• Transformar o eixo Y da tradução (desktop): -50%
• Origem da transformação: canto superior direito

Blurb Custom CSS

No momento, podemos ver apenas a parte inferior esquerda do módulo de sinopses, que não mostra nosso título como as outras duas sinopses na linha acima. Para mostrar o Título dentro da guia, precisamos reposicionar o título na parte inferior esquerda da sinopse com algum CSS personalizado.

Adicione o seguinte CSS personalizado à caixa Título do Blurb:

position: absolute;
bottom: 0;
left: 15px;

Em seguida, adicione o seguinte CSS à caixa de conteúdo do Blurb:

direction: rtl;
height: 100%;

Parte 4: Criando uma guia de canto em expansão a partir da posição superior esquerda

Para o nosso quarto e último efeito de flutuação da guia do canto de expansão, vamos posicioná-lo no canto superior esquerdo para completar o design simétrico de todo o layout da grade.

Atualizar configurações da coluna 2

Nas configurações de linha, abra as configurações da coluna 2 e atualize o seguinte:

• Cantos arredondados: 10px superior esquerdo
• Largura da borda inferior: 0 px
• Largura da borda superior: 2 px
• Cor da borda superior: # e94558

Atualizar configurações do Blurb

Em seguida, abra as configurações da sinopse na coluna 2 e atualize o seguinte:

• Cantos arredondados (desktop): 20px inferior direito
• Cantos arredondados (pairar): 10px inferior direito
• Largura da borda superior: 0 px
• Largura da borda inferior: 4 px (desktop), 2 px (pairar)
• Cor da borda inferior: # e94558

Em seguida, atualize as opções de transformação:

• Transform Translate X Axis (desktop): -30%
• Origem da transformação: canto superior esquerdo

Blurb Custom CSS

Em seguida, adicione o seguinte CSS personalizado à caixa Título do Blurb:

position: absolute;
bottom: 0%;
right: 0%;

Em seguida, adicione o seguinte CSS à caixa Conteúdo do Blurb:

height: 100%;

Parte 4: Finalizando o Design do Layout

Cor de fundo da seção

Adicione uma cor de fundo da seção da seguinte maneira:

• Cor de fundo: #efefef

Adicionando o Título

Para criar o título, adicione uma linha no meio das duas linhas e adicione um módulo de texto à linha de uma coluna.

Adicione o conteúdo: “Sazonal”.

Em seguida, atualize as seguintes configurações:

• Fonte do título 2: Merriweather
• Peso da fonte do cabeçalho 2: negrito
• Estilo da fonte do título 2: TT
• Alinhamento de Texto do Título 2: Centro
• Cor do texto do título 2: # 999999
• Tamanho do texto do título 2: 50 px (desktop), 30 px (tablet), 24 px (telefone)
• Cabeçalho 2 espaçamento entre letras: 1em
• Preenchimento: 50 px à esquerda (desktop), 30 px à esquerda (tablet), 24 px à esquerda (telefone)

Resultado final

Confira o resultado final do layout com as guias de canto em expansão.

E aqui está o design no celular.

Pensamentos finais

As guias de canto expansíveis apresentadas neste design de layout definitivamente funcionarão para todos os tipos de conteúdo que você deseja apresentar em seu site Divi. Você também não precisa usar os quatro cantos. Por exemplo, você pode criar um layout de grade para imagens usando apenas as guias do canto superior direito para revelar o conteúdo ao passar o mouse. Os recursos de design são abundantes com este. Divirta-se.

Estou ansioso para ouvir de você nos comentários.

Saúde!