Como Criar uma Barra Lateral Deslizante no Divi

Barras laterais podem ser ótimas, mas também podem ser uma perda de espaço. É por isso que criar uma barra lateral deslizante pode ser uma opção perfeita para quem deseja ter uma barra lateral que não distraia o usuário do conteúdo principal da página. Além disso, esse tipo de barra lateral dá ao usuário a opção de ver ou ocultar a barra lateral sempre que desejar.

O efeito de deslizamento push é único, pois a barra lateral desliza do lado esquerdo da página enquanto simultaneamente empurra (ou aperta) o conteúdo principal da página para ajustar a barra lateral na janela de exibição. Resumindo, ele desliza a barra lateral e empurra a página.

Depois que a barra lateral é construída, ela se torna uma ferramenta versátil para todos os tipos de aplicativos, incluindo menus e formulários.

Vamos lá!

Espiada

Aqui está uma rápida olhada no design que construiremos neste tutorial.

Baixe o Layout GRATUITAMENTE

Para colocar suas mãos no layout da barra lateral deslizante deste tutorial, primeiro você precisará baixá-lo 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!

Para importar o layout da seção para sua biblioteca Divi, navegue até a biblioteca Divi.

Clique no botão Importar.

No pop-up de portabilidade, selecione a aba de importação e escolha o arquivo de download do seu computador.

Em seguida, clique no botão importar.

Feito isso, o layout da seção estará disponível no Divi Builder.

Para adicioná-lo a uma página ou modelo, você precisará adicionar uma nova seção e escolher o layout da seção na biblioteca.

Vamos para o tutorial, vamos?

O que você precisa para começar

Para começar, você precisará fazer o seguinte:

1. Se ainda não o fez, instale e ative o Divi Theme.
2. Crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).
3. Escolha a opção “Choose a Premade Layout”.
   
4. Escolha o Pacote de layout do evento e clique para usar o layout da página inicial do evento.
   

Como Criar uma Barra Lateral Deslizante no Divi

Para criar o Sliding Push Sidebar, vamos precisar usar uma nova seção regular. Vamos dimensionar e posicionar a seção para se tornar uma barra lateral fixa que se abre ao clicar em um botão, empurrando (e apertando) a área de conteúdo principal à direita para abrir espaço para a barra lateral.

Construindo a Seção

Primeiro, vamos adicionar uma nova seção regular à página.

Em seguida, mova a seção no topo da página.

Configurações da seção

Abra as configurações da seção e atualize a posição a ser fixada da seguinte forma:

• Cargo: Fixo
• Índice Z: 9999

Na guia de design, atualize o tamanho e o espaçamento da seguinte forma:

• Largura: 350 px (desktop e tablet), 100% (telefone)
• Altura: 100%
• Preenchimento: 100 px superior, 0 px inferior

O preenchimento destina-se a abrir espaço para o cabeçalho na parte superior da página.

Em seguida, na guia avançada, dê à seção uma classe CSS:

• Classe CSS: et-push-sidebar

Depois que a classe css estiver no lugar, dê à seção uma cor de fundo:

• Cor de fundo: # 1a1e36

Para criar uma separação mais perceptível, volte para a guia de design e adicione uma borda direita.

• Largura da borda direita: 2 px
• Cor da borda direita: #eeeeee

Isso cuida da seção que serve de contêiner principal para nossa barra lateral. Agora é hora de começar a construir os dois botões que usaremos para abrir e fechar a barra lateral.

Criação dos botões de alternância da barra lateral

Haverá dois botões usados ​​para alternar a barra lateral. O primeiro botão será um ícone “X” que fechará a versão móvel da barra lateral após ser aberta. O “X” será construído usando um módulo de blurb. O segundo é o botão de alternância principal que construiremos usando um módulo de sinopse que é girado com texto vertical e posicionado absolutamente adjacente à barra lateral / seção.

Vamos lá.

Criando a linha para os botões

Crie uma nova linha de uma coluna dentro da seção / barra lateral.

Abra as configurações de linha e atualize o seguinte:

• Largura da calha: 1
• Largura: 100%
• Preenchimento: 0 px superior, 0 px inferior

Na guia Avançado, atualize as opções de posição da seguinte maneira:

• Posição: Absoluta
• Índice Z: 1

Criando o ícone Fechar “X”

Para criar o ícone Fechar “X”, adicione um módulo de sinopse à linha. Pode ser mais fácil adicionar um novo módulo usando o modal Layers porque as coisas serão um pouco difíceis de clicar.

Contente

Em seguida, abra as configurações do blurb. Na guia de conteúdo, retire o título e o conteúdo do corpo e adicione o ícone X à sinopse.

• Ícone de uso: SIM
• Ícone: x (veja a imagem)

Projeto

Na guia de design, atualize o seguinte:

• Cor do ícone: #eeeeee
• Posicionamento de ícone de imagem: esquerda
• Use o tamanho da fonte do ícone: SIM
• Tamanho da fonte do ícone: 40px
• Largura: 50px

Em seguida, abaixe um pouco o ícone adicionando a seguinte propriedade transform translate:

• Transform Translate X: 100px
• Transform Translate Y: -10px

Avançado

Na guia Avançado, desative a sinopse no tablet e desktop para que possamos vê-la apenas na tela do telefone.

• Desativar em: tablet e desktop

Em seguida, adicione uma classe CSS à sinopse e dê a ela uma posição fixa para que fique visível ao rolar pelo conteúdo da barra lateral na tela do telefone.

• Classe CSS: et-slide-push-close
• Cargo: Fixo
• Localização: Cima direita

Isso resolve o botão “X” do ícone Fechar.

Criando o botão de alternância da barra lateral principal

Para criar o botão de alternância da barra lateral principal, adicione um módulo de sinopse sob a sinopse do ícone “X” existente.

Contente

Atualize o Título e clique para usar o ícone de seta para baixo.

• Título: Informações do Evento
• Ícone de uso: SIM
• Ícone: seta para baixo (veja a imagem)

Em seguida, adicione uma cor de fundo à sinopse.

• cor de fundo: #eeeeee

Projeto

Na guia de design, atualize o seguinte:

• Cor do ícone: # 1a1e36
• Posicionamento de imagem / ícone: esquerda
• Use o tamanho da fonte do ícone: SIM
• Tamanho da fonte do ícone: 25px
• Fonte do Título: Viaduto
• Peso da fonte do título: negrito
• Estilo da fonte do título: TT
• Cor do texto do título: # 1a1e36
• Espaçamento entre letras de título: 2px
• Altura da linha de título: 1,2em
• Preenchimento: 0,6em superior, 1em à esquerda, 1em à direita
• Cantos arredondados: 5px nos dois cantos inferiores

Para posicionar e girar a sinopse fora da seção, use as opções de transformação da seguinte maneira:

• Transform Translate Y: 100px
• Transformar rotação Z: -90deg
• Origem da transformação: canto superior direito

Avançado

Na guia Avançado, atualize o seguinte:

• Classe CSS: et-slide-push-toggle
• Posição: Absoluta
• Localização: Centro Direito

Adicionar código personalizado com um módulo de código

Quando os dois botões estiverem completos, estamos prontos para adicionar o código personalizado que fornecerá a funcionalidade de push deslizante necessária para a barra lateral.

Para adicionar o código, primeiro, adicione um módulo de código à mesma coluna.

Em seguida, cole o código a seguir no módulo de código.

<style>
  #page-container, #et-main-area, .et-push-sidebar, .et-slide-push-toggle .et-pb-icon {
    transition: all 300ms !important;
  }
/*
 * use if using blank template with no header or footer
 * 
  #page-container.et-push-sidebar-active {
    margin-left: 350px;
  }
*/  
  #page-container.et-push-sidebar-active #et-main-area {
    margin-left: 350px;
  }  
  .et-push-sidebar {  
    transform: translateX(-100%);
  }
  .et-fb .et-push-sidebar {  
    transform: translateX(0%);
  }
  .et-push-sidebar-active .et-push-sidebar {
    transform: translateX(0%);
  }
  .et-slide-push-toggle, .et-slide-push-close {
    cursor:pointer;
  }
  .et-push-sidebar-active .et-slide-push-toggle .et-pb-icon {
    transform: rotate(180deg);
  }
@media all and (max-width: 767px) {
  .et-push-sidebar-active .et-push-sidebar {
    overflow: scroll !important;
    overscroll-behavior: contain;
  }
  #page-container.et-push-sidebar-active #et-main-area, #page-container.et-push-sidebar-active {
    margin-left: 0px;
  }  
}  
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.et-slide-push-toggle').click(function(){
      $('#page-container').toggleClass('et-push-sidebar-active');
    });
    $('.et-slide-push-close').click(function(){
      $('#page-container').removeClass('et-push-sidebar-active');
    });    
  });
})( jQuery );   
</script>

Criação da linha de conteúdo da barra lateral

A primeira linha que criamos foi para os botões e o código que fazem a função da barra lateral. A próxima linha será para o conteúdo da barra lateral.

Para criar a linha de conteúdo da barra lateral, adicione uma nova linha de uma coluna sob a primeira linha na barra lateral / seção.

Configurações de linha

Abra as configurações da nova linha e atualize o seguinte:

• Largura: 100%
• Altura: 100%
• Preenchimento: 5% superior, 5% inferior, 5% esquerdo, 5% direito

Na guia Avançado, atualize as opções de estouro da seguinte forma:

• Excesso horizontal: rolagem (desktop e tablet), auto (telefone)
• Estouro vertical: rolagem (desktop e tablet), auto (telefone)

Preenchendo a barra lateral com conteúdo / módulos

Agora que sua barra lateral está pronta, tudo que você precisa fazer é adicionar qualquer módulo à segunda linha da barra lateral conforme necessário. Para este exemplo, estou apenas copiando módulos do layout da página inicial do evento e colando-os na coluna da linha.

Resultado final

Confira o resultado final na página ao vivo.

Adicionando a barra lateral deslizante push a um modelo de página

Se desejar usar esta barra lateral em todas as suas páginas por padrão, você precisará adicionar a barra lateral / seção a um modelo de página usando o Divi Theme Builder.

Salvar Layout da Seção na Biblioteca Divi

Para fazer isso, primeiro salve a seção que foi usada para criar a barra lateral na Biblioteca Divi. Você pode fazer isso clicando nos três pontos na barra lateral no modal de camadas, adicionar o nome do layout e salvá-lo na biblioteca.

Criar um novo modelo de página

Em seguida, vá para o criador de temas, crie um novo modelo e atribua esse modelo a todas as páginas.

Adicionando a barra lateral deslizante ao modelo de página

Em seguida, clique para editar o modelo de página.

Dentro do editor de layout de modelo, adicione uma nova seção de largura total.

Em seguida, insira um módulo de Postagem de largura total na seção.

Próximo clique para. crie uma nova seção acima da seção de largura total. Em seguida, clique na guia Adicionar da Biblioteca e selecione o layout de seção Sliding Push Sidebar da biblioteca.

Uma vez feito isso, você pode editar a barra lateral da maneira que precisar usando o editor de layout de corpo.

Salvar configurações do Theme Builder

Certifique-se de salvar as mudanças no construtor de tema.

Agora todas as suas páginas terão a barra lateral.

Pensamentos finais

Uma barra lateral deslizante é uma opção perfeita para aqueles que procuram o melhor dos dois mundos - uma barra lateral que permanece na vanguarda sem tirar (ou distrair) o conteúdo principal da página. Sinta-se à vontade para usá-lo para todos os tipos de coisas, como formulários de registro, opções de e-mail, menus e muito mais.

Estou ansioso para ouvir de você nos comentários.

Saúde!