Uma vez que as novas opções de dimensionamento de Divi foram lançados, existem alguns tutoriais que mostram como criar revelações instantâneas. Nestes tutoriais, o conteúdo mascarado foi colocado verticalmente. No entanto, em alguns casos você pode querer criar uma revelação horizontal. Neste tutorial, mostraremos como revelar imagens usando as grades flutuantes e as opções de estouro. Divi. Fazer este trabalho requer uma abordagem ligeiramente diferente. Vamos usar uma linha de uma coluna e colocar todos os módulos um abaixo do outro. Ao passar o mouse, transformaremos a coluna em uma grade horizontal. Você também pode baixar o arquivo JSON gratuitamente!
Vamos.
Visão geral
Antes de mergulharmos no tutorial, vamos dar uma olhada rápida em como vemos os diferentes tamanhos de tela.
Vamos começar a recriar!
Adicione uma nova seção
Comece adicionando uma nova seção regular à página em que você está trabalhando.
Adicione uma nova linha
Estrutura da coluna
Continue adicionando uma nova linha usando a seguinte estrutura de coluna:
Fundo gradiente padrão
Sem adicionar mais módulos, abra os parâmetros de linha e adicione o seguinte fundo de gradiente:
- Cor 1: #b1ffc4
- Cor de 2: #ffffff
- Tipo de gradiente: Radial
- Direção Radial: Centro
- Posição inicial: 28%
- Posição final: 28%
Voando sobre o fundo gradiente
Mude o fundo do gradiente passando o mouse.
- Cor 1: #b1ffc4
- Cor de 2: #ffffff
- Tipo de gradiente: Radial
- Direção radial: esquerda
- Posição inicial: 5%
- Posição final: 5%
espaçamento
Vá para as configurações de espaçamento e altere os valores de preenchimento e margem.
- Top Padding: 0px
- Preenchimento inferior: 0px
- Margem superior: 50px
- Margem inferior: 50px
Borda padrão
Adicione um raio de borda de pixels 50 nos cantos superior direito e inferior direito.
Passar o mouse sobre a borda
Traga os cantos para "0px" pairando.
Sombra padrão
Em seguida, adicione uma sombra de caixa sutil usando os seguintes parâmetros:
- Força de desfoque de sombra de caixa: 50px
- Cor da sombra: rgba (0,0,0,0.09)
Sombra da Caixa Hover
Remova a sombra da caixa ao passar o mouse, substituindo a cor da sombra por uma cor completamente transparente.
- Cor da sombra: rgba (0,0,0,0)
Adicionar um módulo de texto a uma coluna
Adicionar conteúdo H2
É hora de começar a adicionar módulos, começando com um módulo de texto. Introduzir o conteúdo H2 de sua escolha.
Configurações de texto H2
Vá para a guia Design e altere as configurações de texto H2 de acordo:
- Título 2 Fonte: Acme
- Título 2 Font Style: Sublinhado
- Título 2 Cor do sublinhado: #00ff3f
- Título 2 Cor do texto: #000000
- Título 2 Tamanho do texto: 3vw
espaçamento
Em seguida, adicione valores de preenchimento personalizados.
- Melhor preenchimento: 6vw
- Estofamento inferior: 7vw
- Preenchimento esquerdo: 2vw
Adicionar módulo de imagem à coluna
Carregar imagem
O segundo módulo de que precisamos nesta coluna é um módulo de imagem. Faça upload de uma imagem de paisagem de sua escolha.
Caixa de luz
Ative então a opção lightbox nas configurações do link.
- Abrir no visualizador: sim
dimensionamento
E force a largura total da imagem nas configurações de dimensionamento. Isso garantirá que a imagem permaneça sensível em todos os tamanhos de tela.
- Forçar largura total: Sim
Clonar módulo de imagem duas vezes
Depois de concluir o primeiro módulo de imagem, você pode copiá-lo duas vezes.
Alterar imagens
Mude as imagens nas duas duplicatas. Certifique-se de que as imagens enviadas sejam do mesmo tamanho da primeira imagem.
Adicione o efeito de rollover à linha
dimensionamento
Agora que completamos as configurações básicas de linha e mod, é hora de criar o efeito de foco! Começaremos alterando a altura e a largura da linha e ocultaremos os transbordamentos. Abra as configurações de dimensionamento de linha e faça as seguintes alterações:
- Use uma largura de calha personalizada: Sim
- Largura da calha: 1
- Largura: 20%
- Largura máxima: 100%
- Altura: 15.9vw
Pairar
Reduza a largura para "100%" ao pairar. Isso permitirá que as imagens sejam exibidas depois que a linha for movida.
- Largura: 100%
visibilidade
Mude para a próxima guia avançada e oculte os estouros. Isso garantirá que as imagens sejam mascaradas antes do visitantes passe o mouse (desktop) ou clique (tablet/mobile) no módulo de texto.
- Estouro horizontal: oculto
- Estouro vertical: oculto
Transições
Também estamos alterando a duração da transição nos parâmetros de transição.
- Duração da transição: 0ms
Elemento de rolagem da coluna principal
Para criar uma grade de foco, vamos abrir as configurações de coluna, ir para a guia Opções avançadas e colocar as seguintes linhas de código CSS no elemento principal de foco:
exibição: grade; colunas de modelo de grade: 20% 25% 25% 25%; intervalo de grade: 10px;
Clone a linha duas vezes
Depois de concluir a primeira linha, você pode cloná-la quantas vezes quiser. Para este exemplo de design específico, clonamos a linha duas vezes.
Modifique o fundo gradiente da linha 1
Altere a cor do primeiro gradiente no plano de fundo gradiente da segunda linha.
- Cor 1: # ffdc96
Alterar o plano de fundo gradiente da linha 2
Faça o mesmo para a terceira linha.
- Cor 1: # b7c7ff
Alterar a cópia do módulo de texto e a cor do sublinhado das duas duplicatas
Continue alterando a cor do sublinhado das duplicatas do módulo de texto com a cópia e pronto!
- Cor sublinhada # 1: # ffaa00
- Cor sublinhada # 2: # 0037ff
Considerações finais
Neste tutorial, mostramos como exibir imagens em grades suspensas horizontais usando as opções de estouro. Divi. As imagens foram reveladas quando você passou o mouse no desktop e clicou no tablet/telefone. Embora tenhamos revelado imagens, você pode revelar o conteúdo de sua escolha, modificando os parâmetros no gerador. Esperamos que este tutorial inspire você a criar seus próprios designs alternativos de grade flutuante! Se você tiver alguma dúvida ou sugestão, deixe um comentário na seção de comentários abaixo!
