Conteúdo
- Definição de sidebar
- Tipos de sidebars
- Conteúdo da sidebar
- Uso da sidebar
- Como colocar uma sidebar na página
Definição de sidebar
A sidebar é uma coluna lateral de uma página da web que contém informações adicionais, links e botões. Na maioria dos casos, a sidebar contém elementos como:
- Menu de navegação
- Catálogo de loja online
- Bloco de publicidade
- Recomendações
- Filtros
- Formulário de contato
- Botões sociais
Um ponto chave ao posicionar sidebars é manter um espaço ótimo: a sidebar não deve ocupar muito espaço na página. Embora as dimensões exatas possam variar, geralmente a sidebar é visualmente menor que o conteúdo principal, para não desviar a atenção dos usuários.
Tipos de sidebars
As sidebars podem ser classificadas em três tipos principais, dependendo de sua localização na página:
- Sidebars esquerdas: Opção mais comum, já que a maioria das pessoas lê da esquerda para a direita. Normalmente, aqui são colocados catálogos de lojas online e filtros, ajudando os usuários a encontrar os produtos desejados mais rapidamente.
- Sidebars direitas: Opção menos preferida, pois blocos de publicidade muitas vezes estão localizados à direita, tornando-os menos visíveis. Os usuários podem ignorar essa parte da página, o que reduz a eficácia da publicidade.
- Sidebars duplas: Colocar sidebars em ambos os lados pode comprimir o conteúdo principal, dificultando a percepção das informações. Colunas estreitas podem forçar os usuários a rolar a página constantemente, o que atrapalha a concentração no conteúdo principal.
Conteúdo da sidebar
A sidebar pode conter uma variedade de informações que ajudam os usuários a navegar melhor no site. Aqui estão alguns elementos principais que devem ser colocados na coluna lateral:
- Menu e categorização: A sidebar pode conter um catálogo ou um conjunto de links que permitem aos usuários navegar para outras seções do site. É recomendável incluir apenas links importantes relacionados à seção atual, para não distrair o usuário do conteúdo principal.
- Anúncios: A sidebar pode incluir feeds de notícias ou anúncios de publicações, permitindo que os usuários fiquem atualizados com eventos relevantes, mesmo sem clicar nos links.
- Publicidade: No sidebar direito, frequentemente são colocados blocos de publicidade ou materiais de parceiros, embora os usuários possam ignorar essa parte da página.
- Call to action e botões sociais: Elementos que incentivam os usuários a agir, como inscrição em newsletters ou pedidos de retorno de chamada, também podem ser colocados na sidebar.
- Filtros: Para facilitar a busca por produtos, os filtros são frequentemente colocados na sidebar à esquerda, para que o usuário os note facilmente.
Uso da sidebar
A sidebar pode ser útil para a maioria dos sites, especialmente aqueles que são abertos em desktops. No entanto, em dispositivos móveis, a sidebar pode mudar de forma e se mover para cima ou para baixo, tornando-se um "sandwich" padrão ou um conjunto de botões. Isso pode fazer com que parte da informação fique oculta atrás do botão "mais". É importante lembrar que landing pages que exigem uma exploração sequencial do material funcionam melhor sem sidebars, pois elas podem distrair os usuários.
No entanto, algumas landing pages podem estar cheias de muitos blocos, e nesses casos pode ser útil ter uma sidebar "sticky" com navegação, para que os usuários possam facilmente retornar às informações necessárias.
Como colocar uma sidebar na página
Posicionar uma sidebar em um site pode ser feito de duas maneiras principais: através de programação web ou usando sistemas de gerenciamento de conteúdo (CMS). Se a página for criada manualmente, será necessário escrever um código para a sidebar, o que requer certas habilidades em programação web. No caso de uso de um CMS, a sidebar é adicionada através das ferramentas do construtor.
Por exemplo, no WordPress existem várias maneiras de adicionar uma sidebar:
- Criar um tema com uma sidebar e carregá-lo;
- Escolher um tema pronto do catálogo;
- Instalar um plugin para adicionar a sidebar;
- Usar o plugin Elementor para personalizar o site.
Temas prontos do WordPress geralmente têm sidebars integradas, o que facilita bastante o processo de desenvolvimento.
