Deseja criar guias com efeito de foco a partir de linhas com Divi ?
As abas são definitivamente úteis para disponibilizar informações importantes em uma área concisa do seu site da Web. Isso reduz a necessidade do usuário percorrer o conteúdo de uma página longa. O módulo de guias Divi é fácil de usar e ideal para navegar em um conteúdo simples em um clique.
Mas neste tutorial mostraremos como converter linhas Divi tabulado e aparece ao passar o mouse.
Também mostraremos como criar guias horizontais e verticais. Isso irá desbloquear o poder do Divi para criar layouts completos com vários módulos para cada área do conteúdo aba.
Nenhum plug-in necessário!
Vamos começar.
Visão geral
Aqui está uma visão geral das guias que criaremos juntos neste tutorial.
Baixe DIVI agora !!!
Crie uma nova página com o Divi Builder
No painel do WordPress, vá para Páginas> Adicionar Novo para criar uma nova página.
Dê um título que faça sentido para você e clique Usar o Construtor Divi
Em seguida, clique Comece a construir (Construir do zero)
Depois disso, você terá uma tela em branco para começar a desenhar no Divi.
Criando guias horizontais usando "Divi Rows"
Na seção padrão presente, adicione uma linha de duas colunas.
Fundo de linha, preenchimento de caixa e sombra
Antes de adicionarmos nossos módulos, vamos personalizar um pouco as configurações de linha primeiro. Abra Configurações de linha e atualize o seguinte:
- Cor do gradiente esquerdo: #284f91
- Cor do gradiente direito: #4646c4
- Preenchimento: 50px (superior e inferior), 50px (esquerda e direita)
- Box Shadow: veja a captura de tela
- Cor da sombra da caixa: rgba(70,70,196,0.66)
Adicionar conteúdo à linha
Agora adicionaremos o conteúdo do espaço reservado à nossa linha. Na coluna 1, adicione uma imagem de sua escolha com um módulo Image. Aqui usamos uma imagem do pacote de layout « Pacote de layout de conferência de design« .
Na coluna da direita, adicione um módulo Chamado à Ação e atualize o seguinte:
- URL do link do botão: # (apenas para exibir o botão por enquanto)
- Usar cor de fundo: NÃO
- Alinhamento do texto: esquerda
- Fonte do título: Lato
- Tamanho do texto do título: 60px (computador), 50px (telefone)
Criação da aba
Para criar a guia real sobre a qual os usuários passarão o mouse para revelar o conteúdo dessa linha, precisamos criar um módulo de texto e posicioná-lo no canto superior direito com algum CSS personalizado.
Vá em frente e adicione um novo módulo de texto abaixo da imagem na coluna 1 e atualize o seguinte:
- Corpo: "Tab 1"
- Plano de fundo: #284f91 (isso deve corresponder à cor gradiente esquerda da linha)
- Alinhamento do texto: centralizado
- Cor do texto: #ffffff
- Largura: 100px
- Altura: 50px
- Margem: -100px (superior), -50px (esquerda)
- Preenchimento: 14px (superior)
Finalmente, adicione o seguinte CSS personalizado ao elemento principal para dar a ele uma posição absoluta no topo da linha.
position: absolute !important;
top: 0;
Altura e espaçamento da seção
Por enquanto, abra as configurações da seção e atualize o seguinte:
- Altura mínima: 500px (computador), 900px (tablet), 750px (telefone)
- Margem: 100px (superior e inferior)
- Preenchimento: 0px (superior e inferior)
Criação da segunda linha
Para criar a segunda linha, duplique a linha que você criou anteriormente. Mova o módulo de texto para a coluna 1 e a imagem para a coluna 2. Em seguida, atualize a imagem com uma nova. Isso ajudará você a ter uma ideia de como é o conteúdo diferente em cada guia.
Em seguida, abra as configurações do módulo Texto usado para criar a guia na coluna 1 e mova a guia para a direita para que onde esta linha se sobreponha à linha acima você possa ver a guia diretamente à direita da guia da primeira linha.
- Margem: 50px (esquerda)
Adicionado efeito de foco
Abra Configurações de linha e adicione o seguinte filtro:
- Opacidade: 70% (padrão), 100% (passar o mouse)
Em seguida, adicione uma duração de transição e uma curva de velocidade para o efeito de foco do filtro de opacidade.
- Tempo de transição: 500 ms
- Curva de Velocidade de Transição: Linear
Criação da terceira aba
Agora podemos adicionar nossa última guia. Para fazer isso, duplique a segunda linha que você acabou de criar. Em seguida, mova o módulo de texto para a coluna 1 e a imagem para a coluna 2. E atualize o módulo de imagem com uma nova imagem.
Atualize as configurações de linha com um novo gradiente de plano de fundo.
- Cor gradiente de fundo esquerdo: #333333
- Cor gradiente de fundo direito: #4646c4
Em seguida, abra a configuração do módulo Texto usada para criar a guia na coluna 1 e atualize a cor e a margem.
- Plano de fundo: #333333
- Margem: 150px (esquerda)
Veja como sua página deve ficar antes de posicionarmos nossas linhas para se sobreporem.
Linhas sobrepostas com posicionamento absoluto
Para sobrepor nossas linhas, precisamos usar o posicionamento absoluto. Primeiro, atualize a altura de todas as três linhas para 100%.
- Altura: 100%
Em seguida, adicione o seguinte CSS personalizado ao elemento principal de todas as três linhas:
position: absolute !important;
left: 0;
right: 0;
margin: auto;
É assim que nossas abas se parecem no momento.
Alterando a ordem das linhas ao passar o mouse com o índice Z
Neste momento, você deve ter notado que a terceira linha/guia está em primeiro plano. Portanto, precisamos reorganizar as linhas usando o Índice Z para que a primeira guia seja exibida primeiro até que você passe o mouse sobre outra guia.
Leia também: Como criar sobreposições de imagem personalizadas no Divi
Para fazer isso, abra as configurações da primeira linha e atualize o z-index da seguinte forma:
Índice Z: 10
Em seguida, coloque o índice Z das outras duas linhas em foco.
Índice Z: 11 (Passar o mouse)
Está feito ! Vamos ver o resultado final.
Resultado final
Baixe DIVI agora !!!
Criando abas verticais
Se você quiser adicionar guias verticais às linhas, veja o que fazer.
Vá em frente e duplique a seção que contém as guias flutuantes que acabamos de criar para que você tenha um novo design para trabalhar.
Em seguida, abra as configurações da seção e atualize o seguinte:
- Preenchimento: 10% (esquerda e direita)
Atualize os seguintes parâmetros para todas as três linhas da seção duplicada com o seguinte:
- Largura: 70% (computador), 70% (tablet), 80% (telefone)
- Largura máxima: 980px
Em seguida, atualize a direção do gradiente para 90 graus para todas as três linhas.
- Direção do gradiente: 90 graus
Agora é hora de posicionar nossas guias do módulo Text à esquerda de nossas linhas para obter as guias verticais desejadas.
Veja também: Como criar um menu de roda giratória ao passar o mouse no Divi
Abra a configuração da guia do módulo de texto na primeira linha e atualize o seguinte:
- Margem (computador): -50px (superior), -150px (esquerda)
Em seguida, abra as configurações da guia do módulo Section 2nd Line Text e atualize o seguinte:
- Margem (computador): 0px (superior), -150px (esquerda)
E para a última guia na terceira linha, atualize o seguinte:
- Margem (computador): 50px no topo, -150px à esquerda
Resultado final
Agora vamos ver o resultado final.
Baixe DIVI agora !!!
Conclusão
Com um pouco de criatividade e o poder do Divi, você pode criar algumas abas personalizadas bem legais usando as linhas Divi. Existem algumas limitações para o que você pode exibir.
Por exemplo, com esta configuração, todas as linhas devem ter a mesma altura que a seção. Mas, para não precisar usar um plugin, essa é uma ótima solução.
Esperamos que este tutorial o inspire para seus próximos projetos Divi. Se você tiver alguma dúvida ou sugestão, encontre-nos em a seção de comentários para discutir isso.
Você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.
...
