Como converter linhas Divi em guias flutuantes horizontais e verticais
Publicados: 2019-05-29Definitivamente, as guias são úteis para disponibilizar informações importantes em uma área concisa do seu site. Isso reduz a necessidade de o usuário rolar pelo conteúdo da página longa. O módulo de guias do Divi é fácil de usar e ótimo para alternar entre conteúdo simples com um clique.
Mas, neste tutorial, vou mostrar como converter linhas Divi inteiras em guias flutuantes. Também mostrarei como criar guias horizontais e verticais. Isso desbloqueará o poder do Divi de projetar layouts de linha completos com vários módulos para cada área de conteúdo da guia. Nenhum plugin é necessário!
Vamos começar.
Espiada
Aqui está uma rápida olhada nas guias de foco horizontal e vertical que construiremos juntos neste tutorial.
Baixe o Divi Rows Hover Tabs 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.
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.
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?
Inscreva-se no nosso canal no Youtube
O que você precisa para começar
Para começar, você precisará ter a seguinte configuração:
- O Divi Theme instalado e ativo
- Uma nova página criada para construir do zero no front end (construtor visual)
- Três imagens a serem usadas para conteúdo simulado
Depois disso, você terá uma tela em branco para começar a construir algumas guias de foco no Divi.
Criação de guias horizontais de flutuação usando linhas Divi
Para começar, crie uma nova seção regular com uma linha de duas colunas.
Plano de fundo da linha, preenchimento e sombra de caixa
Antes de adicionar nossos módulos, vamos personalizar um pouco as configurações de linha primeiro. Teremos de voltar à linha mais tarde para posicioná-la para nossa funcionalidade de guia.
Abra as configurações de linha e atualize o seguinte:
Cor do gradiente de fundo à esquerda: # 284f91
Cor certa do gradiente de fundo: # 4646c4
Preenchimento: 50px superior, 50px inferior, 50px à esquerda, 50px à direita
Sombra da caixa: veja a imagem
Cor da sombra da caixa: rgba (70,70,196,0,66)
Adicionando Conteúdo à Linha
Agora vamos adicionar algum conteúdo simulado à nossa linha. Lembre-se de que você pode adicionar qualquer combinação de colunas e módulos para sua área de conteúdo.
Na coluna 1, adicione uma imagem com um módulo de imagem. Estou usando um do Pacote de Layout da Conferência de Design.
Na coluna certa, adicione um módulo de apelo à 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 de texto: esquerda
Fonte do título: Lato
Tamanho do texto do título: 60 px (desktop), 50 px (telefone)
Criação da guia
Para criar a guia real, 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 sob a imagem na coluna 1 e atualize o seguinte:
Conteúdo: “Guia Um”
Cor de fundo: # 284f91 (deve corresponder à cor gradiente à esquerda da linha)
Alinhamento do Texto do Texto: centro
Cor do texto do texto: #ffffff
Largura: 100px
Altura: 50px
Margem: -100px no topo, -50px à esquerda
Preenchimento: topo de 14px
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;
Este css mais as margens personalizadas que adicionamos garantirão que a guia seja posicionada exatamente no canto superior esquerdo da linha. É importante que as guias realmente fiquem acima da linha para que o usuário possa passar o mouse sobre ela mais tarde.
Altura e espaçamento da seção
Agora, antes de continuarmos a criar as linhas e guias restantes, vamos dar às nossas linhas um pouco de espaço para respirar, adicionando algumas margens superior e inferior à seção. Para este projeto, é importante que usemos as margens para espaçar nossa seção porque estaremos dando a ela uma altura definida também. Precisamos dar à nossa seção uma altura definida porque queremos que nossas fileiras ocupem toda a altura de nossa seção. Isso significa que cada uma de nossas linhas (o conteúdo da guia) terá a mesma altura de nossa seção. Portanto, é melhor que cada uma das linhas tenha uma quantidade semelhante de conteúdo ou haverá um espaço negativo indesejado em algumas das guias das linhas. Isso deve fazer mais sentido mais tarde.
Por enquanto, abra as configurações da seção e atualize o seguinte:
Altura: 500 px (desktop), 900 px (tablet), 750 px (telefone)
Margem: 100px superior, 100px inferior
Preenchimento: 0 px superior, 0 px inferior
Observe que a altura da seção precisará ser ajustada para levar em conta o maior espaço de conteúdo quando as colunas de linha forem empilhadas no celular. Portanto, será necessário fazer alguns ajustes a essa altura para suas próprias necessidades.
Agora salve suas configurações e vamos voltar a adicionar mais linhas.
Criação da segunda linha do conteúdo da guia
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 da aparência de diferentes conteúdos em cada guia.
Abra as configurações da segunda linha e mude as cores do gradiente de fundo passando o mouse sobre a área de visualização do fundo e clique no pequeno ícone “trocar”.
Em seguida, abra as configurações do módulo de texto usado para criar a guia na coluna 1 e dê a ela uma cor que corresponda ao novo gradiente superior.
Cor de fundo: # 4646c4
Em seguida, precisamos mover a guia para a direita para que, quando esta linha se sobrepõe à linha acima, você possa ver a guia diretamente à direita da guia na primeira linha.
Margem: 50px esquerdo
Adicionando efeito de flutuação do filtro de opacidade para a segunda linha
Para a linha, podemos adicionar um efeito de foco de filtro de opacidade para que haja uma boa transição de foco ao passar o mouse sobre a guia e revelar o conteúdo da linha.
Abra as configurações de linha e adicione o seguinte filtro:
Opacidade: 70% (padrão), 100% (foco)
Em seguida, adicione uma duração de transição e uma curva de velocidade para o efeito de foco do filtro de opacidade.
Duração da transição: 500ms
Curva de velocidade de transição: Linear
Criação da terceira linha do conteúdo da guia
Agora podemos adicionar nossa linha final de conteúdo da 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 fundo.
Cor do gradiente de fundo à esquerda: # 333333
Cor certa do gradiente de fundo: # 4646c4
Em seguida, abra a configuração do módulo de texto usado para criar a guia na coluna 1 e atualizar a cor e a margem.
Cor de fundo: # 333333
Margem: 150px restantes
Esta é a aparência de sua página antes de posicionarmos nossas linhas para se sobreporem.
Sobrepondo as linhas com posicionamento absoluto
Para sobrepor nossas linhas, precisamos usar o posicionamento absoluto. Em seguida, usaremos a opção de índice Z para trazer cada linha para o primeiro plano ao passar o mouse sobre as guias. Mas como estamos dando às nossas linhas uma posição absoluta (e o pai / seção tem uma altura definida), podemos adicionar 100% de altura a cada uma das linhas para que abranjam a altura total da seção.
Veja como fazer.
Primeiro, implante o modo wireframe. Em seguida, use multiselect para selecionar todas as três linhas e abrir as configurações de uma delas para implantar o modal de configurações de elemento. Em seguida, atualize a altura para 100%.
Altura: 100%
Isso definirá a altura de todas as três linhas para 100%.
Em seguida, adicione o seguinte CSS personalizado ao elemento principal:
position: absolute !important; left: 0; right: 0; margin: auto;
Agora implante o modo de visualização da área de trabalho para ver como as linhas estão se sobrepondo bem para criar nossas guias.
Alterando a ordem das linhas ao pairar com o índice Z
Agora você deve ter notado que a terceira linha / guia está em primeiro lugar. Portanto, precisamos reordenar as linhas usando o índice Z para que a primeira guia seja exibida primeiro até que você passe o mouse sobre a outra guia.
Para fazer isso, volte ao modo de visualização de wireframe e abra as configurações da primeira linha que você criou (com a guia um). Em seguida, atualize o índice z da seguinte maneira:
Índice Z: 10
Em seguida, use a seleção múltipla para selecionar a segunda e a terceira linha. Em seguida, abra o modal de configurações de elemento e adicione o seguinte índice z ao passar o mouse para ambas as linhas.
Índice Z: 11 (pairar)
É isso. Vamos conferir o resultado final.
Resultado final
Isso funciona porque, tecnicamente, cada guia (módulo de texto) faz parte de cada linha, embora estejam posicionados acima e fora da linha. É por isso que passar o mouse sobre uma guia exibirá a linha na qual ela está contida.
E é assim que fica no celular.
Criação de guias suspensas verticais
Se você deseja adicionar guias verticais às linhas, tudo o que você realmente precisa fazer é reposicionar os módulos de texto usados para criar cada guia. Também precisaremos ajustar o tamanho de nossas linhas e espaçamento de seção para abrir espaço para as guias.
Aqui está o que fazer.
Vá em frente e duplique a seção que contém as guias de foco 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, 10% à direita
Em seguida, use multiselect para selecionar todas as três linhas e atualizar as configurações do elemento com o seguinte:
Largura: 70% (desktop), 70% (tablet), 80% (telefone)
Largura máxima: 980 px
Em seguida, atualize a direção do gradiente para 90 graus para todas as três sinopses para que, quando posicionarmos as guias à esquerda, a cor do gradiente esquerdo se misture com a cor de fundo da guia.
Direção do gradiente: 90 graus
Agora é hora de posicionar as guias do módulo de texto à esquerda de nossas linhas para obter as guias verticais que desejamos.
Abra a configuração da guia do módulo de texto na primeira linha e atualize o seguinte:
Margem (desktop): -50px superior, -150px à esquerda
Margem (telefone): -100px na parte superior, -50px à esquerda
A configuração de margem para telefone é trazer a guia de volta acima da linha para uma exibição de guia horizontal.
Em seguida, abra as configurações da guia do módulo de texto na linha da seção e atualize o seguinte:
Margem (desktop): 0px superior, -150px à esquerda
Margem (telefone): -100 px na parte superior, 50 px à esquerda
E para a guia final na terceira linha, atualize o seguinte:
Margem (desktop): 50px superior, -150px à esquerda
Margem (telefone): -100 px na parte superior, 150 px à esquerda
Resultado final
Agora vamos conferir o resultado final.
E aqui está um tablet e um telefone.
Pensamentos finais
Com um pouco de pensamento criativo e o poder do Divi, você pode criar algumas guias flutuantes 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 da seção. Mas, por não precisar usar um plugin, acho que essa é uma ótima solução. E não se esqueça, uma vez que você pode usar linhas Divi para seu conteúdo, há várias maneiras de usar essas guias em seu próximo projeto.
Estou ansioso para ouvir de você nos comentários.
Saúde!