Como revelar conteúdo com um efeito de foco do obturador no Divi

Revelar o conteúdo do módulo durante o foco pode ter alguns benefícios úteis. 1) Pode ser uma ótima maneira de ter um design mais compacto ou elegante de sua página da web inicialmente. 2) Economiza espaço. 3) Pode motivar os usuários a interagir com sua página. 4) Parece legal :). A ideia básica é mostrar apenas uma parte do conteúdo do módulo (como um teaser), o que torna atraente para os visitantes passarem o mouse para ver mais. Depois de passar o mouse sobre o módulo, todo o conteúdo é revelado com um efeito de foco suave que abre e fecha como uma veneziana.

Neste tutorial, vou mostrar como você pode revelar o conteúdo do módulo com um efeito de foco no estilo obturador usando o construtor Divi.

Espiada

Aqui está uma rápida olhada no que iremos construir juntos.

Começando

Inscreva-se no nosso canal no Youtube

Para começar, crie uma nova página, dê a você um título para a página e implante o Divi Builder para construir no front end. Selecione a opção “Choose a Premade Layout” opção. Em seguida, no pop-up Divi Library, selecione o pacote Day Spa Layout e clique para usar o Landing Page Layout.

Uma vez que o layout é carregado na página, você está pronto para começar!

Adicionando divisores às partes superior e inferior do Blurb

Role a página para baixo até a seção intitulada “Experiências de spa de luxo” com as quatro sinopses. Estaremos usando a linha com as quatro sinopses para dar o pontapé inicial no design.

Adicionando o primeiro divisor

Nosso primeiro passo é adicionar divisores acima e abaixo do módulo de sinopse para ocultar o conteúdo de nossa sinopse. Você pode pensar nessas divisórias como as venezianas de uma janela que abre e fecha ao pairar.

Adicione um módulo divisor acima da sinopse na primeira coluna e atualize o seguinte:

Cor de fundo: #ffffff
Cor (da divisória): #ffffff
Peso do divisor: 100px
Altura: 100px
Margem personalizada: 0 px inferior

O fundo branco corresponde ao fundo de nossa seção, pois não queremos vê-lo. Certifique-se de que o peso e a altura do divisor sejam iguais.

Adicionando o segundo divisor (laranja)

Em seguida, crie outro divisor diretamente abaixo do divisor que você acabou de criar e atualize o seguinte:

Cor: # ff7a6b
Peso do divisor: 2px
Altura: 2px
Margem personalizada: 0 px inferior

Em seguida, pule para a guia de conteúdo e dê ao divisor um rótulo de administrador “divisor laranja”. Isso ajudará a distinguir o divisor do divisor anterior (branco) quando usarmos o modo wireframe para copiar e colar o divisor nas outras colunas.

Salve sua página.

Copiando e colando os divisores ao redor do Blurbs

Agora estamos prontos para copiar e colar nossos divisores acima e abaixo de cada uma das sinopses em cada uma das colunas. Para tornar esse processo um pouco mais fácil, implante o modo wireframe abrindo o menu de configurações na parte inferior da página e clicando no ícone wireframe. (ou use shft + w)

No modo wireframe, encontre a linha que contém as sinopses e os divisores que acabamos de criar. Em seguida, copie e cole o divisor e o divisor laranja acima e abaixo de cada uma das sinopses para que o resultado final fique assim.

Em seguida, volte para a visualização da área de trabalho (shft + w) para finalizar o design. Sua página deve ser semelhante a esta.

Personalizando os Módulos do Blurb

Agora que você tem todas as divisórias no lugar, é hora de editar nossos módulos de sinopse com alguns ajustes de estilo, incluindo uma margem personalizada para criar o efeito de foco de estilo do obturador.

Primeiro, use multiselect para selecionar todos os quatro módulos de blurb. Para fazer isso, simplesmente segure ctrl (ou cmd) e clique em cada módulo. Em seguida, abra as configurações de um dos módulos para implantar o modal de configurações do elemento.

Na guia de conteúdo, adicione algumas linhas de conteúdo simulado.

Em seguida, desative a sombra da caixa de imagem completamente.

Para criar o efeito de foco do obturador, precisamos adicionar margens superior e inferior negativas para ocultar o conteúdo atrás das divisórias por padrão. Em seguida, definimos as margens como 0px para revelar o conteúdo ao passar o mouse. Para fazer isso, adicione o seguinte espaçamento.

Margem personalizada (padrão): -100px superior, -65px inferior
Margem personalizada (foco): 0 px superior, 0 px inferior

Preenchimento personalizado (foco): 10px superior, 10px inferior

Pode ser necessário ajustar os valores da margem negativa dependendo de quanto conteúdo você tem. Por exemplo, você pode precisar de mais margem negativa para um conteúdo de texto mais longo.

Agora verifique o resultado até agora.

Observe que as partes superior e inferior de cada módulo estão escondidas atrás das divisórias até que você passe o mouse sobre elas.

Limpando o efeito de foco do obturador

Centralizando verticalmente os módulos

Atualmente, o efeito de foco do obturador empurra o resto do conteúdo para baixo na página a cada foco. Isso causa algum movimento da página que pode distrair. Além disso, a ação de pairar só vai para baixo, o que não é um verdadeiro efeito de obturador. Queremos que o conteúdo abra para cima e para baixo a partir do centro. Para conseguir isso, precisamos fazer o seguinte:

Abra as configurações de linha e equalize as alturas das colunas.

Em seguida, vá para a guia avançada e insira o seguinte CSS personalizado no Elemento principal:

align-items: center;

Isso garantirá que os módulos fiquem centralizados verticalmente dentro da coluna, dando-nos aquele efeito de obturador para cima e para baixo.

Dando à linha uma altura fixa

Para impedir que o efeito de foco empurre para baixo o conteúdo da página abaixo, precisamos impedir que a linha cresça em altura a cada passagem do mouse. Para fazer isso, devemos definir uma altura fixa para nossa linha no desktop. Como a altura será fixa, você precisará certificar-se de que a altura da linha seja alta o suficiente para acomodar a altura do conteúdo da sinopse em seu estado de foco. No entanto, você não quer torná-lo muito alto porque deixará muito espaço em branco acima e abaixo dos módulos. Neste exemplo, vou definir a altura da linha para 600px. Mas, uma vez que queremos apenas a altura fixa definida apenas no desktop, precisamos adicionar algum CSS às nossas configurações de página usando uma consulta de mídia.

Aqui está o que você precisa fazer.

Em primeiro lugar, nas configurações de linha, dê a sua linha um ID CSS:

ID CSS: altura fixa

Em seguida, abra as configurações da página (na guia avançada) e adicione o seguinte CSS personalizado:

@media (min-width: 980px) {
#fixed-height {
  height: 600px;
}
}

Isso dá à sua linha uma altura fixa de 600 px na área de trabalho e impede o efeito de foco de empurrar o resto do conteúdo da página para baixo.

É isso!

O Resultado Final

Confira o design final.

E aqui está o efeito de foco do obturador.

Pode ser uma boa ideia desativar o efeito de foco no celular. Para fazer isso, tudo que você precisa fazer é definir a margem personalizada para cada módulo de sinopse da seguinte maneira:

Margem personalizada (tablet): 0 px superior, 0 px inferior

Pensamentos finais

Este efeito de foco do obturador é uma forma criativa de provocar o seu público para que procure mais informações sobre os seus diferentes serviços. E com a magia do Divi e alguns trechos de CSS, o resultado final é bem elegante. Tenho certeza de que existem muitos outros aplicativos para esse efeito de foco do obturador, já que você pode usar qualquer módulo que desejar. Sinta-se à vontade para explorar seus próprios designs novos e emocionantes e não hesite em compartilhá-los conosco. Estou ansioso para ouvir de você nos comentários.

Saúde!