Como revelar o conteúdo da coluna ao passar o mouse com o Divi (download grátis!)

Em uma das últimas postagens do Divi, mostramos como fazer com que o conteúdo de linhas ocultas apareça ao passar o mouse. Hoje, mostraremos como usar o mesmo tipo de abordagem para revelar o conteúdo da coluna. A abordagem que lidaremos é semelhante e permitirá que você crie todos os tipos de designs que tenham um bom efeito de foco na área de trabalho, mas funcionam bem para tamanhos de tela menores sem opções de foco também.

Esperamos que este tutorial inspire você a criar todos os tipos de designs interativos para os sites que você constrói! No final da postagem, você poderá baixar o arquivo JSON e ajustá-lo às suas necessidades.

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

Como você pode observar no GIF abaixo, temos uma transição suave ao passar o mouse que revela o conteúdo da coluna ao passar o mouse.

Móvel

Em telas menores, por outro lado, o conteúdo da coluna já será mostrado sem a necessidade de pairar.

Vamos começar a recriar!

Inscreva-se no nosso canal no Youtube

Adicionar nova seção regular

Espaçamento

Abra uma página nova ou existente e adicione uma seção regular a ela. Abra as configurações de seção e adicione algum preenchimento personalizado superior e inferior nas configurações de espaçamento.

• Enchimento superior: 10vw
• Preenchimento inferior: 15vw

Adicionar nova linha

Estrutura da Coluna

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

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e faça algumas alterações nas configurações de dimensionamento. Essas configurações permitirão que a linha ocupe toda a largura da tela e também ajudará a remover todo o espaço entre as colunas.

• Tornar esta linha com largura total: Sim
• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Vá para as configurações de espaçamento da próxima linha. Aqui, vamos substituir o espaço que removemos na etapa anterior, adicionando valores de preenchimento personalizados.

• Preenchimento esquerdo: 8vw
• Preenchimento direito: 8vw
• Preenchimento direito da coluna 1: 2vw
• Preenchimento esquerdo da coluna 2: 1vw
• Preenchimento direito da coluna 2: 1vw
• Preenchimento esquerdo da coluna 3: 2vw

Adicione o Módulo de Texto # 1 à Coluna 1

Adicionar conteúdo

É hora de começar a adicionar módulos! Comece com um Módulo de Texto na coluna 1. Adicione algum conteúdo H3 de sua escolha.

Configurações de texto H3

Em seguida, vá para as configurações de texto do título e faça algumas alterações na aparência do conteúdo H3.

• Fonte do título 3: Didact Gothic
• Peso da fonte do cabeçalho 3: negrito
• Alinhamento de Texto Título 3: Centro
• Cor do texto do título 3: # 3567ff
• Tamanho do texto do título 3: 1,2vw (desktop), 20px (tablet e telefone)

Espaçamento

Adicione alguns valores de espaçamento personalizados ao Módulo de Texto a seguir.

• Margem inferior: 4vw
• Preenchimento superior: 4vw
• Preenchimento inferior: 4vw

Sombra da caixa

E dê ao módulo uma sombra de caixa sutil.

• Posição vertical da sombra da caixa: 36 px
• Força do desfoque de sombra da caixa: 60 px
• Cor da sombra: rgba (0,0,0,0,06)

Adicione o Módulo de Texto # 2 à Coluna 1

Adicionar conteúdo

Continue adicionando outro Módulo de Texto logo abaixo do anterior. Adicione algum conteúdo de parágrafo de sua escolha.

Configurações de texto

Em seguida, vá para a guia de design e faça algumas alterações nas configurações de texto.

• Fonte do texto: Open Sans
• Tamanho do texto: 0,8vw (desktop), 14px (tablet e telefone)
• Espaçamento entre letras do texto: -0,05vw
• Altura da linha de texto: 2.2em
• Orientação do Texto: Justificado
• Cor do Texto: Escuro

Espaçamento

Brinque com a margem personalizada e os valores de preenchimento nas configurações de espaçamento também.

• Margem inferior: 3vw
• Preenchimento superior: 2vw
• Preenchimento inferior: 2vw
• Preenchimento esquerdo: 4vw
• Preenchimento direito: 4vw

Fronteira

E adicione uma borda esquerda e direita ao módulo usando as seguintes configurações:

• Largura da borda direita: 1px
• Cor da borda direita: # e5e5e5

Adicionar Módulo de Botão à Coluna 1

Adicionar cópia

O próximo módulo de que precisamos na primeira coluna é um Módulo de botão. Adicione alguma cópia de sua escolha.

Alinhamento

Em seguida, vá para a guia de design e altere o alinhamento do botão para o centro.

• Alinhamento do botão: Centro

Configurações de botão

Continue abrindo as configurações do botão e altere a aparência do botão para que corresponda ao design geral que pretendemos alcançar.

• Use estilos personalizados para botão: Sim
• Tamanho do texto do botão: 1vw (desktop), 15px (tablet e telefone)
• Cor do texto do botão: # 000000
• Largura da borda do botão: 1 px
• Cor da borda do botão: #dddddd
• Raio da borda do botão: 0 px
• Espaçamento entre letras dos botões: -0,05vw
• Intensidade da fonte: Negrito
• Estilo da fonte: maiúsculas

Espaçamento

Brinque também com os valores de espaçamento do Módulo de Botão.

• Margem inferior: 100 px (tablet e telefone)
• Preenchimento superior: 0,8vw (desktop), 10px (tablet e telefone)
• Preenchimento inferior: 0,8vw (desktop), 10px (tablet e telefone)
• Preenchimento esquerdo: 3,5vw (desktop), 50px (tablet e telefone)
• Preenchimento direito: 3,5vw (desktop), 50px (tablet e telefone)

Clonar módulos na coluna 1 duas vezes e colocar duplicatas nas colunas restantes

Quando terminar de adicionar os três módulos diferentes à coluna 1, você pode prosseguir e clonar cada um dos módulos duas vezes. Coloque as duplicatas nas duas colunas restantes para obter o mesmo design em cada uma das colunas.

Alterar a cor do texto do módulo de texto nº 1 na coluna 2

Abra o primeiro Módulo de Texto na coluna 2 e mude a cor do texto.

• Cor do texto do título 3: # 6d28c1

Alterar a cor do texto do módulo de texto nº 1 na coluna 3

Faça o mesmo para o primeiro Módulo de texto na terceira coluna.

• Cor do texto do título 3: # 15668e

Adicionar Módulo de Texto de Sobreposição à Coluna 1

Adicionar conteúdo

Agora que temos todo o conteúdo da coluna de que precisamos, podemos adicionar o elemento de sobreposição que ocultará o conteúdo antes de passar o mouse. Para conseguir isso, vamos usar outro Módulo de Texto. Vá em frente e adicione outro à primeira coluna. Certifique-se de que este seja o último módulo da coluna. Adicione algum conteúdo de sua escolha.

Fundo Gradiente

Continue adicionando um fundo gradiente ao módulo.

• Cor 1: # 6a30ff
• Cor 2: # 3567ff
• Direção do gradiente: 124deg

Configurações de texto

Altere as configurações de texto a seguir.

• Fonte do texto: Didact Gothic
• Cor do texto: #ffffff
• Tamanho do texto: 2vw
• Orientação do Texto: Centro

Espaçamento

E crie uma forma fora do módulo adicionando alguns valores de preenchimento personalizados. Também estamos adicionando uma margem superior negativa para criar a sobreposição entre este módulo e o conteúdo da coluna. O conteúdo que você esconde atrás do Módulo de Texto não será clicável. É por isso que é importante manter a frase de chamariz, como o botão em nosso exemplo, visível sem passar o mouse.

• Margem superior: -38vw
• Acolchoamento superior: 15vw
• Preenchimento inferior: 15vw

Fronteira

Adicione alguns cantos arredondados ao Módulo de Texto a seguir.

Sombra da caixa

Junto com uma sombra de caixa sutil.

• Força do desfoque de sombra da caixa: 40px
• Cor da sombra: rgba (0,0,0,0.16)

Filtros padrão

Em seguida, vá para as configurações de filtros e certifique-se de que a opacidade é '100%' por padrão.

• Opacidade: 100%

Filtros Hover

Altere a opacidade ao passar o mouse para '0%'. Isso fará com que o módulo desapareça e permitirá que todo o conteúdo da coluna apareça em seu lugar.

• Opacidade: 0%

CSS customizado

Para garantir que o Módulo de texto permaneça no topo de todo o conteúdo da coluna, adicione duas linhas de código CSS na guia avançada do Módulo de texto.

z-index: 99;
position: relative

Visibilidade

E esconda todo o módulo no tablet e no telefone. Conforme mencionado no início desta postagem, estamos exibindo todo o conteúdo das colunas em telas menores para garantir que a experiência do usuário seja boa para os visitantes.

Clonar módulo de texto de sobreposição duas vezes e colocar duplicatas nas colunas restantes

Quando terminar de modificar o Módulo de texto de sobreposição, vá em frente e clone-o duas vezes. Coloque cada uma das duplicatas nas duas colunas restantes.

Alterar plano de fundo gradiente do módulo de texto de sobreposição na coluna 2

Altere a cor de fundo gradiente da primeira duplicata.

• Cor 1: # d530ff
• Cor 2: # 6d28c1

Alterar plano de fundo gradiente do módulo de texto de sobreposição na coluna 3

E faça o mesmo para a segunda duplicata.

• Cor 1: # 41ff30
• Cor 2: # 15668e

Baixe a seção GRATUITAMENTE

Para colocar suas mãos na seção de revelação de colunas, 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!

Antevisão

Área de Trabalho

Móvel

Pensamentos finais

Nesta postagem, mostramos como revelar o conteúdo da coluna ao passar o mouse. Você pode usar essa abordagem para qualquer tipo de site que criar para adicionar um nível extra de interação. Se você tiver dúvidas ou sugestões, deixe um comentário na seção de comentários abaixo!