Como otimizar sua barra lateral no celular usando o Divi Theme Builder

Em alguns casos, manter uma barra lateral no celular pode ser um pouco exagerado. Os usuários ficam felizes em navegar por informações relevantes em seus tablets e telefones (até certo ponto). Mas quando você tem uma quantidade significativa de conteúdo da barra lateral após o conteúdo principal da página, os usuários podem nunca chegar ao rodapé, que geralmente consiste em algumas frases de chamariz importantes. É por isso que é importante otimizar a barra lateral no celular.

Neste tutorial, examinaremos as maneiras de usar o Divi Theme Builder para otimizar sua barra lateral na tela do celular. Aqui estão algumas das coisas que abordaremos neste artigo:

• Como criar um modelo com uma barra lateral
• Criação de conteúdo da barra lateral usando módulos Divi e widgets do WordPress
• Usando Múltiplas Áreas de Widget para ocultar / mostrar certos widgets no celular
• Controlando o espaçamento entre o conteúdo da barra lateral no celular
• Ocultar o conteúdo da barra lateral completamente no celular
• Ocultar algum conteúdo da barra lateral no celular
• Escondendo elementos dentro dos módulos para minimizar o conteúdo no celular
• Tornar o conteúdo da barra lateral responsivo ajustando o tamanho e o espaçamento do texto
• Como alterar a ordem de empilhamento da barra lateral no celular

Vamos começar.

Espiada

Aqui está uma rápida olhada no layout da barra lateral na área de trabalho e como ele foi otimizado para exibição em dispositivos móveis.

Baixe o modelo GRATUITO com barra lateral otimizada no celular

Para colocar suas mãos no modelo deste tutorial, primeiro você precisa 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á faz parte da lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será inscrito ou 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!

Inscreva-se no nosso canal no Youtube

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?

O que você precisa para começar

Para começar, você precisará instalar e ativar o Divi Theme. Certifique-se de que possui a versão mais recente do Divi.

Você também precisará de algumas postagens / páginas criadas para fins de teste para que o conteúdo da página realmente mostre os resultados.

Depois disso, você está pronto para ir.

Como otimizar a barra lateral do seu modelo Divi no celular

Antes de começarmos a otimizar nossa barra lateral no celular, precisamos primeiro colocar um modelo funcional em funcionamento. Vamos construir nossa barra lateral em um modelo de página usando o Divi Theme Builder. Isso nos ajudará a entender melhor o que está envolvido na construção de uma barra lateral no Divi, para que possamos entender melhor como otimizá-lo no celular.

Criando o modelo com a barra lateral

Importando Divi Theme Builder Pack # 3

Para começar, usaremos o Divi Theme Builder Pack # 3 para iniciar o design de nosso site. Então, vamos usar um dos modelos para adicionar a barra lateral que iremos otimizar para celular.

Depois de baixar o pacote, descompacte a pasta.

No painel do WordPress, navegue até Divi> Theme Builder. Em seguida, clique no ícone de portabilidade no menu superior direito da página. No modal de portabilidade, selecione a guia de importação e escolha o arquivo divi-theme-builder-pack-3-all.json da pasta que você baixou anteriormente. Em seguida, clique no botão importar.

Importante: use um site de teste com uma nova instalação do Divi para que você não substitua o conteúdo ao vivo em seu site ou quebre algo.

Você verá que todos os modelos foram importados para o construtor de temas.

Criação do layout da barra lateral dentro do modelo de página de categoria

Encontre o modelo de todas as páginas de categoria e clique para editar o layout de corpo personalizado.

O layout atual da página usa uma linha de uma coluna para a área de conteúdo principal da página. Precisamos mudar isso para uma estrutura de layout de barra lateral. Para fazer isso, clique no ícone “Escolher Layout” no menu de linha da segunda linha e escolha a estrutura de layout de coluna de dois terços e um terço.

Agora você terá uma área do lado direito para sua barra lateral.

AVISO: Não estou usando uma seção especializada para este layout de barra lateral. Seções especiais não são necessárias ao criar um layout de barra lateral para sua página, no entanto, se você deseja manter a funcionalidade de linha separada para a área de conteúdo principal, você desejará usar uma seção especial.

Não vamos nos concentrar muito na recriação do design exato dos módulos neste tutorial. Em vez disso, vamos nos concentrar nos elementos que ajudarão a otimizar a barra lateral no celular.

Dito isso, precisamos adicionar uma cor de fundo e preenchimento à coluna da barra lateral.

Configurações da coluna da barra lateral

Abra as configurações da coluna designada para a barra lateral e atualize o seguinte:

• Cor de fundo: # f2f5f9
• Preenchimento: 25px superior, 25px inferior, 25px à esquerda, 25px à direita

Criando o conteúdo da barra lateral com módulos Divi e widgets do WordPress

O conteúdo da barra lateral irá variar de acordo com as necessidades de um site. No entanto, se estivermos falando sobre um site de blog, normalmente você encontrará alguma combinação dos seguintes elementos de conteúdo da barra lateral:

• Informações do autor (nome, foto, biografia)
• Botões de seguimento da mídia social
• Aceitar email
• Links para produtos e / ou serviços
• Publicidades
• Categorias
• Postagens recentes / populares

A criação desses elementos no Divi pode ser feita usando uma combinação de Módulos Divi. Para este exemplo, adicionaremos os seguintes Módulos Divi para construir nosso Conteúdo da Barra Lateral.

1. Módulo de pesquisa - servirá como formulário de pesquisa.
2. Módulo de optin por e-mail - servirá como o formulário de inscrição por e-mail.
3. Módulo de texto - este será o título dos botões Seguir de mídia social
4. Módulo de seguimento de mídia social - Isso mostrará os botões de seguimento de mídia social.
5. Módulo de texto (com imagem bg) - Isso servirá como um exemplo de anúncio para a barra lateral.
6. Módulo Blurb (com conteúdo do autor) - servirá como a área de informações do autor da barra lateral.
7. Módulo de texto - servirá como um título para o módulo de blog abaixo dele.
8. Módulo de blog - servirá como um conteúdo de postagens recentes / em destaque na barra lateral.

Puxando widgets do WordPress usando o módulo da barra lateral

Se você ainda não está familiarizado, o Divi tem um módulo de barra lateral que permite puxar o conteúdo da área do widget (ou widgets) para a área da barra lateral Divi. Na verdade, este modelo já está usando o widget da barra lateral na linha diretamente abaixo daquele em que estamos trabalhando.

Arraste o módulo da barra lateral da linha e coloque-o logo abaixo do módulo de ativação do email.

Em seguida, abra as configurações do módulo da barra lateral. Você verá que o módulo está puxando a área do widget da barra lateral, que deve ser semelhante à seguinte se você tiver a configuração padrão no WordPress.

Usando Múltiplas Áreas de Widget

No momento, a área de widgets “Barra Lateral” exibe vários widgets porque existem vários widgets dentro da área de widgets da Barra Lateral. Mas, você pode realmente obter mais controle sobre o design da barra lateral do Divi usando várias áreas de widget que contêm um único widget. O uso de várias áreas de widget lhe dará mais controle sobre o design de seus widgets, bem como a visibilidade dos widgets no celular.

Para criar vários widgets, abra uma nova guia e vá para o painel do WordPress. Navegue até Aparência> Widgets.

Crie uma nova área de widget inserindo um nome e clicando no botão Criar. Uma vez que esta área de widget será onde adicionaremos o widget Categorias, vamos chamar a área de “Categorias”. Atualize a página para ver a área do widget. Em seguida, arraste o widget Categorias para a Área do widget Categorias.

Repita o processo para criar uma nova área de widget chamada “Arquivos”. Em seguida, arraste o widget Arquivos para a área do widget Arquivos.

Volte para o modelo de páginas de categoria com o layout da barra lateral e atualize o conteúdo do Módulo da barra lateral para exibir a área do widget Categorias.

Duplique o módulo da barra lateral (para manter o design)

Atualize o módulo da barra lateral duplicado para obter a área do widget Arquivos.

Assumindo o controle sobre o espaçamento entre os módulos da barra lateral

Atualmente, a linha que contém a barra lateral tem um valor de largura de medianiz de 2. Isso significa que haverá uma margem / espaçamento padrão inferior entre cada módulo dentro da barra lateral. Para obter mais controle sobre esse espaçamento, podemos excluir a margem inferior de todos os módulos na coluna da barra lateral. Para fazer isso, abra as configurações do módulo de pesquisa e atualize o seguinte:

• Margem inferior: 0 px (desktop), 15 px (tablet)

Em seguida, clique no ícone Mais configurações (ou no menu do botão direito) na opção de margem. Em seguida, selecione “Estender margem”.

No Módulo Estender Estilos, atualize as opções para estender a margem para “Todos os Módulos” em “Esta Coluna”.

Então, podemos adicionar espaçamento entre os módulos usando módulos divisores.

Otimizando a barra lateral no celular

Escondendo a barra lateral no celular

Às vezes, você pode querer ocultar completamente a barra lateral no celular. Para fazer isso, você precisará desativar a visibilidade da coluna que contém a barra lateral no tablet e telefone.

Abra as configurações de linha e abra as configurações da coluna designada para a barra lateral. Em seguida, atualize a visibilidade da seguinte forma:

• Desativar em: tablet, telefone

Isso ocultará toda a barra lateral no tablet e na tela do celular.

Ocultar parte do conteúdo da barra lateral no celular

No desktop, você pode ter espaço para manter a maior parte (ou todo) o conteúdo da barra lateral sem se tornar uma grande distração do conteúdo. Mas no celular, o usuário precisará rolar por muito conteúdo da barra lateral que ele ou ela pode ter pouco interesse em ver. Portanto, ao construir sua barra lateral no Divi Theme Builder, aproveite as opções de visibilidade para desabilitar alguns dos elementos da barra lateral na tela do celular. E, se você estiver usando widgets do WordPress para conteúdo da barra lateral, crie várias áreas de widgets para ajudar a projetar e ocultar determinados widgets no celular também.

Para ocultar os módulos no celular, abra o módulo de visualização de wireframe e, em seguida, use o recurso multiselect do Divi para selecionar todos os módulos que deseja ocultar / desabilitar no tablet e telefone. Em seguida, abra as configurações de um dos módulos selecionados e atualize o seguinte:

• Desativar em: telefone, tablet

Nesta ilustração, ocultamos todos os módulos (incluindo as divisórias), exceto os dois módulos da barra lateral (contendo os widgets de categorias e arquivos) e o módulo de texto (contendo o Anúncio) na tela do tablet e telefone. Em outras palavras, apenas as categorias, arquivos e anúncios serão exibidos no celular.

Visualizando os resultados em uma página de blog

Antes de vermos os resultados na página ao vivo, vamos atribuí-lo à página de blog do site primeiro. Para fazer isso, clique no ícone de engrenagem acima do modelo, selecione o Blog na lista e salve-o.

Certifique-se de ter uma página de postagens selecionada em Aparência> Leitura.

Resultados

Aqui está a diferença entre a barra lateral da área de trabalho e a barra lateral móvel. Observe como a barra lateral móvel tem o conteúdo da aula.

Evitar conteúdo duplicado da barra lateral e do rodapé no celular

No Desktop, você pode adicionar conteúdo duplicado à barra lateral e ao rodapé. Na verdade, essa é uma boa maneira de aumentar as conversões. Por exemplo, no desktop, faz sentido incluir um módulo de adesão de email na parte superior da barra lateral e dentro do rodapé para que os usuários possam ver a permissão de email enquanto lêem o conteúdo da postagem, bem como no final da postagem. No entanto, no celular, não existe um layout de barra lateral. Tudo é exibido em uma coluna (talvez duas). As barras laterais direitas empilhadas sob o conteúdo da postagem / página e as barras laterais esquerdas empilhadas no topo do conteúdo da postagem / página. Portanto, se um módulo de opção de e-mail da barra lateral ficar sob o conteúdo da postagem / página, o usuário pode rolar por mais de um módulo de opção de e-mail (um na barra lateral e um no rodapé). Além disso, se houver optin por email na parte inferior da barra lateral direita e uma na parte superior do rodapé, o usuário percorrerá dois optins de email consecutivos no celular.

Escondendo elementos dentro dos módulos para minimizar o conteúdo no celular

Você pode decidir que ocultar um módulo inteiro no celular não é necessário. Em vez disso, você pode minimizar o conteúdo do módulo ocultando certos elementos apenas na tela do celular.

Por exemplo, você pode querer mostrar a imagem em destaque e um trecho das postagens em destaque na barra lateral da área de trabalho. Mas, no celular, você pode ocultar a imagem em destaque e o trecho para criar uma versão minimizada do conteúdo.

Tornar o conteúdo da barra lateral responsivo

Você pode decidir manter todo o conteúdo da barra lateral na tela do celular. Por que não? Se você tem informações valiosas que sabe que os usuários irão apreciar, guarde-as. No entanto, você deve tomar medidas para garantir que o conteúdo da barra lateral seja responsivo. Ou seja, você desejará ajustar o tamanho e o espaçamento dos elementos para caber em telas menores. Isso reduzirá a distância de rolagem da página e tornará o conteúdo mais fácil de ler.

Ajuste o tamanho do texto no celular

Uma maneira fácil de minimizar o espaçamento vertical e melhorar a legibilidade no celular é ajustar o tamanho do texto do conteúdo do módulo na barra lateral. Por exemplo, você pode ajustar o texto do título de 24 px no desktop para 14 px no celular.

Ajuste o espaçamento / divisores no celular

Neste exemplo, adicionamos divisórias entre os módulos para criar espaço. No entanto, podemos usar as configurações de divisor do Divi para ajustar o espaçamento desses divisores no celular. Isso reduzirá o espaço desperdiçado ao rolar.

Por exemplo, você pode alterar as margens superior e inferior do divisor de 30 px para 15 px no tablet e no telefone.

Alterar a ordem de empilhamento da barra lateral no celular

A ordem de empilhamento é um problema comum com barras laterais. Isso é especialmente verdadeiro para as barras laterais esquerdas. Como mencionei anteriormente, as barras laterais direitas empilhadas abaixo (ou depois) do conteúdo da postagem / página e as barras laterais esquerdas empilhadas no topo (ou antes) do conteúdo da postagem / página. Isso significa que quando você visualiza uma página com uma barra lateral esquerda no celular, a primeira coisa que um usuário verá é o conteúdo da barra lateral, em vez do conteúdo principal da postagem / página. Isso não é bom para UX. Para corrigir isso, você pode ocultar a barra lateral por completo ou pode alterar a ordem de empilhamento para que a barra lateral esquerda fique abaixo do conteúdo da postagem / página no celular.

Para alterar a ordem de empilhamento de uma barra lateral esquerda para empilhar sob (ou após) o conteúdo da página no celular, abra as configurações de linha da linha que contém o layout da barra lateral. Em seguida, adicione o seguinte CSS personalizado ao elemento principal:

 display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;

Em seguida, abra as configurações da coluna designada como a barra lateral e adicione o seguinte CSS personalizado à tela do Tablet Elemento Principal:

order: 2;

Se você ainda não adivinhou, este pequeno trecho muda a ordem do valor padrão (“1”) para o valor de “2”, o que faz com que toda a coluna / barra lateral se empilhe abaixo / depois da coluna que contém o conteúdo principal.

Pensamentos finais

As barras laterais continuam a ser um espaço familiar para os usuários que fornecem conteúdo secundário útil à medida que se envolvem com o conteúdo principal de uma página. No entanto, o mesmo conteúdo da barra lateral no celular pode se tornar uma distração. Esperançosamente, esta postagem o inspirou a dar às barras laterais a atenção que elas merecem em tablets e telefones. Isso pode significar que você oculta a barra lateral completamente, mostra apenas algum conteúdo da barra lateral ou simplesmente otimiza o conteúdo existente especificamente para exibição no celular.

A barra lateral que foi construída para o modelo neste tutorial foi projetada usando os elementos de design existentes encontrados no pacote de layout do construtor de tema # 3. Se você gostou do design deste modelo com a barra lateral, sinta-se à vontade para baixá-lo acima para dar uma olhada mais de perto.

Para obter mais informações, consulte este guia para usar barras laterais com o Divi Theme Builder.

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

Saúde!