Como criar guias de rolagem vertical no WordPress com Elementor

As guias de rolagem vertical permitem mostrar conteúdo com guias em um layout alto, lado a lado. As guias ficam empilhadas no lado esquerdo ou direito, enquanto o conteúdo de cada guia aparece no lado oposto. Os visitantes podem rolar as guias para explorar o conteúdo dentro deles.

Isso mantém a página limpa e as pessoas podem visualizar muitas informações sem sair da página atual. Não apenas você pode exibir textos, mas também pode exibir imagens, vídeos e modelos nas guias de rolagem vertical. Os usuários podem clicar ou tocar em uma guia para ver o conteúdo vinculado a ela, enquanto as outras seções permanecem ocultas.

O Elementor é um fabricante popular de sites sem código. Com este plug-in, você pode criar um site inteiro a partir do zero usando sua funcionalidade de arrastar e soltar. Nesta postagem do tutorial, mostraremos como criar guias de rolagem vertical no WordPress com Elementor.

Usar casos de guias de rolagem vertical

Guias de rolagem vertical ajudam a organizar uma grande quantidade de conteúdo em um pequeno espaço. Eles permitem que os visitantes se movam por tópicos sem carregar uma nova página. Esse layout é fácil de usar no desktop e no celular. Vamos dar uma olhada em alguns casos de uso de guias de rolagem vertical abaixo.

um. Detalhes do produto ou serviço

Você pode exibir muitos descrições de produtos ou serviços lado a lado. Cada guia pode conter especificações, preços, recursos ou revisões. Os visitantes podem comparar rapidamente opções diferentes sem sair da página.

b. Perguntas frequentes (perguntas frequentes)

Guias verticais são perfeitas para perguntas frequentes. Você pode agrupar perguntas semelhantes em uma guia e respostas sob outra. Os leitores podem rolar e clicar apenas nas perguntas que os interessam.

c. Guias ou tutoriais passo a passo

Se você deseja compartilhar um processo com muitas etapas, as guias verticais mantêm cada etapa limpa. Os usuários podem clicar em cada guia para seguir o guia em ordem. Isso facilita o aprendizado e mantém a página limpa.

d. Membros da equipe ou perfis de equipe

Apresente sua equipe de maneira profissional, dando a cada membro uma guia. Cada guia pode mostrar uma foto, função e biografia curta. Os visitantes podem percorrer a lista e aprender sobre todos sem desordem. Explore alguns dos melhores exemplos de página da equipe.

e. Portfólio ou vitrine de projeto

Exiba seu trabalho ou projetos em guias verticais para economizar espaço. Cada guia pode mostrar imagens, descrições e links para detalhes. Isso ajuda os visitantes a explorar muitos projetos de uma única página.

Como criar guias de rolagem vertical no Elementor

A parte teórica acabou. Espero que agora você tenha uma idéia clara do que é a guia de rolagem vertical e quais são seus casos de uso. Vamos cobrir a parte do tutorial agora. Explicaremos como criar guias de rolagem vertical com Elementor no WordPress nesta seção. Continue lendo!

Pré-requisitos para iniciar o tutorial

Para criar guias de rolagem vertical no WordPress com Elementor, você precisa dos seguintes plugins instalados e ativados no seu site.

• Elementor grátis
• Happyaddons grátis
• Happyaddons pro

Nota: Você precisa do HappyAddons Pro porque o Elementor não possui uma opção interna para criar guias de rolagem. O Happyaddons Pro oferece um widget chamado guias de rolagem que permite criar guias de rolagem vertical com facilidade.

Depois que esses plug -ins estiverem prontos no seu site, siga o tutorial explicado abaixo.

Etapa 01: Abra uma página com Elementor

Basta abrir uma página com o Elementor, onde você deseja criar guias de rolagem vertical.

Etapa 02: arraste e solte o widget de guias de rolagem na tela

Encontre o widget de guias de rolagem no painel Elementor. Arraste e solte -o na tela elementar.

O widget Scroll Tabs vem com algum conteúdo padrão. Depois que o widget for adicionado à tela, você verá esse conteúdo padrão.

Etapa 03: comece a adicionar conteúdo às guias

Você pode adicionar conteúdo ao widget de rolagem e estilizar o layout de várias maneiras. Explore -os nesta etapa.

# Adicione um título ao widget Scroll Tabs

Toda seção da Web deve ter um título que informe claramente que tipo de conteúdo ele contém. Portanto, você deve escrever um título para a seção Widget de rolagem.

Vá para o conteúdo> Guias Conteúdo> Título . Você terá espaço para escrever um título. Você pode ver que escrevemos um título, 'Insights de relógio elegante'.

# Escreva uma descrição para o widget

Escreva sob o título, você pode escrever uma descrição para o widget. Se a descrição não for necessária, basta removê -la.

# Adicione conteúdo às guias

Leve o cursor a uma guia e clique nela. Isso expandirá a guia e permitirá que você adicione conteúdo.

# Escreva um título para a guia

Você deve escrever um título para cada guia . Depois que a guia for expandida, você receberá uma caixa sob texto de NAV. Aqui, você pode escrever um título para a guia.

# Altere o ícone da guia

Você pode remover o ícone se não for necessário. Mas, para alterar o ícone, clique no ícone que você pode ver no ícone NAV.

A biblioteca do ícone será aberta instantaneamente. Escolha um ícone que você gosta e pressione o botão Inserir .

Você pode ver que o ícone foi alterado.

# Adicione conteúdo à guia via editor

Cada guia permite adicionar dois tipos de conteúdo. Você pode escolher se deve usar o editor ou o modelo .

Vamos primeiro selecionar a opção Editor .

Usando este editor, você pode adicionar qualquer tipo de texto e imagens, que serão exibidos instantaneamente na tela da guia respectiva.

# Altere a cor de fundo do conteúdo com guias

Para destacar melhor o conteúdo na guia, você pode alterar sua cor de fundo, para que ele se alinhe bem com todo o conteúdo que você adicionou à guia.

# Adicione conteúdo à guia via modelo

Como dito acima, o widget permite adicionar conteúdo à guia via editor e modelo. Agora vamos dar uma olhada em como adicionar conteúdo usando modelos.

Escolha a opção de modelo do tipo de conteúdo . Se você já possui modelos pré-projetados no seu site, essa opção será adequada.

Clique no ícone suspenso em seguida para escolher o modelo . Em seguida, selecione o modelo que você deseja exibir na guia.

Você pode ver que nosso modelo desejado já está adicionado à guia.

Da mesma forma, adicione conteúdo a todas as guias do widget de rolagem.

Etapa 04: Configurar configurações do widget de abas de rolagem

Depois que a parte do conteúdo for concluída, expanda a seção Configurações .

Você poderá alterar a largura do painel do navegador e a altura do painel de conteúdo, incluindo vários ajustes de alinhamento, a partir desta seção.

# Ajuste a largura do painel NAV

O widget Scroll Tabs possui duas partes - o painel do navegador (painel NAV) e o painel de conteúdo .

Você pode alterar a largura do painel do navegador arrastando a escala sob esta opção. Além disso, você pode ajustar sua posição e alinhamento. O processo é mostrado no videoclipe anexado abaixo.

# Ajuste a altura do painel de controle

Da mesma forma, ajuste a altura do painel de controle. Além disso, confirme que o conteúdo está alinhado verticalmente corretamente.

Etapa 05: estilize o widget de guias de rolagem

Venha para a guia Style . Vamos primeiro definir uma cor de fundo para o painel do navegador .

# Personalize a tipografia do conteúdo do painel NAV

Atualize a tipografia, uma a uma, para cada conteúdo que você adicionou ao painel do navegador. Você pode alterar a família de fontes, tamanho, peso, altura da linha, etc., conforme necessário.

# Estilizar as guias

Ao adicionar um tipo de borda, largura da borda, preenchimento, cor da borda, raio de borda, cor de texto e cor de fundo, você pode estilizar as abas e apresentá -las como a seguinte imagem. Espero que você possa fazer isso sozinho.

Da mesma forma, expanda e estilize o conteúdo relacionado ao painel de conteúdo e à seção de rolagem.

Etapa 06: otimize o widget de guias de rolagem para telefone celular

Para otimizar o widget para o tamanho da tela móvel, vá para o modo de retrato móvel na barra superior.

Você verá que as guias do navegador aparecem na parte superior por padrão.

# Ajuste a altura do painel de conteúdo para dispositivos móveis

A altura existente pode não ser suficiente para o painel de conteúdo. Nesse caso, você deve aumentar a altura para que todo o conteúdo da guia possa ser perfeitamente visto nos tamanhos de tela móvel.

Etapa 07: Otimize o widget de guias de rolagem para tablets

Da mesma forma, mude para o modo de retrato do tablet para otimizar o conteúdo para uma tela ideal nos tamanhos da tela do tablet.

Você pode ver no videoclipe anexado abaixo que o widget já parece bom na tela do tablet. Então, não precisamos modificá -lo de qualquer maneira.

Etapa 08: Visualize o widget de abas de rolagem

Venha para a página de visualização e verifique se o widget está funcionando bem ou não. Você pode ver que o widget funciona bem do nosso lado.

Assim, você pode criar guias de rolagem vertical no WordPress com Elementor.

Tiradas finais!

As guias de rolagem vertical são uma maneira inteligente de manter uma página da web limpa enquanto compartilham muitas informações. Eles deixaram os visitantes encontrarem o que precisam sem pular para novas páginas. Depois de seguir as etapas acima, você pode projetar facilmente essas guias com o Elementor e o Happyaddons Pro.

Isso dá ao seu site uma aparência moderna e melhora a maneira como os usuários exploram seu conteúdo. No entanto, ao criar esta seção, mantenha algumas práticas recomendadas em mente. Use títulos claros para cada guia para que os usuários saibam o que esperar. Verifique se o texto, imagens e vídeos são leves para que a página carregue rapidamente.

Verifique o design em diferentes tamanhos de tela e ajuste o espaçamento para usuários móveis. Mantenha as cores e fontes consistentes com o estilo do seu site, para que as guias se misturem naturalmente com o restante do design. Esses pequenos detalhes ajudam a criar uma experiência profissional e suave para todos os visitantes.

Aprenda a projetar uma caixa de flip no WordPress com Elementor.