Ao construir um site, é essencial garantir que o seu conteúdo esteja bem organizado. Organizar bem suas páginas pode ajudar a melhorar a Experiência do Usuário (UX) e tornar o texto mais digerível. Uma das maneiras que você pode organizar seu conteúdo é usando o widget Elementor Tabs.
Conteúdo com abas permite que seus usuários alternem entre diferentes seções de conteúdo. Este recurso elimina a necessidade dos visitantes navegarem para diferentes áreas das páginas. Agrupar o conteúdo relacionado em contêineres com abas pode melhorar a aparência e a usabilidade do seu site. Além disso, você pode configurar tudo isso sem qualquer experiência de desenvolvimento do WordPress.
Neste artigo, vamos apresentar brevemente o Elementor e suas diferentes versões. Em seguida, vamos lhe mostrar como criar e personalizar as abas do Elementor e algumas ferramentas de terceiros que você pode usar para melhorar a funcionalidade padrão do widget.
Vamos começar!
Uma visão geral do Elementor
O Elementor é um plugin popular e poderoso para construir sites:
Você pode usar o construtor de páginas para criar lindas páginas para o seu site, seja do zero ou usando modelos pré-fabricados. O Elementor possui um editor de arrastar e soltar, assim você não precisará tocar em uma linha de código.
É importante notar que existe uma versão gratuita e paga do Elementor. O plugin gratuito do Elementor permite que você crie páginas e artigos padrão.
Entretanto, suas características e funcionalidade podem ser limitantes. Para desbloquear o conjunto completo de ferramentas, nós recomendamos a atualização para Elementor Pro. Ao longo deste post, nós vamos apontar as diferenças no plano livre versus plano profissional quando trabalharmos com o widget Tabs.
Como criar abas do Elementor (Widget Tabs)
Agora que entendemos mais sobre o Elementor, vamos ver como usar o widget Tabs. Note que, para o próximo tutorial, vamos assumir que você já tem o Elementor instalada e ativada em seu site WordPress.
Para começar, navegue até o artigo ou página do WordPress onde você quer adicionar o conteúdo da guia e selecione Editar com Elementor:
Isto irá lançar a interface do editor do Elementor. No painel do lado esquerdo, sob Elements, procure e selecione o widget Tabs :
Você pode arrastar e soltar o widget em uma seção de página. Uma vez colocado o widget Tabs, um novo painel de controle aparecerá com suas configurações:
Você pode digitar o título e o conteúdo de cada aba. Você também pode clicar no botão + Add Item para inserir outra aba. Em Type, selecione se deseja exibir as abas horizontalmente ou verticalmente.
Como personalizar suas abas do Elementor
Uma vez que você adicione texto às abas, você pode personalizar as configurações gerais do widget. Há algumas opções diferentes.
Selecione cada aba personalizada para modificar seus atributos, incluindo seu título, conteúdo da caixa, e ícone. Você também pode mudar sua posição e alinhamento:
Em seguida, na aba Style, você encontrará muitas opções para personalizar o design e a aparência do widget Elementor Tabs. Você pode modificar a cor e sombra do texto, tipografia, espaçamento e muito mais:
Você pode mudar a cor e a largura da borda que envolve as abas. Este recurso de design pode ajudar a distinguir as seções individuais.
Sob Title, você pode modificar a cor do texto dos títulos das abas. Você também pode mudar a fonte e o tamanho do texto clicando em Typography:
Quando você terminar, salve suas mudanças. Há também algumas configurações avançadas que você pode considerar usar para tornar seu conteúdo de abas mais sofisticado.
Configurações avançadas para abas do Elementor
Sob a aba Advanced no painel de configurações widget, você encontrará uma grande variedade de opções adicionais:
Vamos dar uma olhada mais de perto nestas configurações:
- Advanced: Mude as margens e almofadas das abas.
- Motions Effects: Adicione efeitos de rolagem e mouse para tornar o widget mais interativo e adicionar uma animação de entrada.
- Transform: Vire, gire e escale seu widget.
- Background: Escolha entre um fundo padrão ou passe o mouse para inserir uma transição.
- Border: Escolha o tipo de borda, tal como uma linha sólida ou tracejada.
- Mask: Selecione uma máscara de desenho elegante e a aplique no widget.
- Positioning: Ajuste a largura e a posição do widget.
- Responsive: Mude a visibilidade responsiva que afetará a visualização ou as páginas ao vivo.
- Attributes: Defina atributos personalizados para o invólucro do elemento.
- Custom CSS: Insira seu CSS personalizado.
É importante notar que se você estiver usando a versão gratuita do Elementor, você não terá acesso a todas essas configurações avançadas. Por exemplo, você não pode adicionar atributos personalizados, efeitos de rolagem, ou o seu CSS.
Como adicionar um Elemento dentro do Widget Tabs
Com o Elementor Pro, você também pode inserir outro elemento dentro do widget Tabs. Por exemplo, digamos que você queira adicionar o widget Mapas sob uma aba Localizações.
Para fazer isso, crie o mapa que você quer usar e salve-o como um Global Widget clicando com o botão direito no ícone do lápis e selecionando Save as Global:
A seguir, navegue até a sua Template Library (a partir do seu painel WordPress) e copie o atalho do Widget Global que você acabou de criar.
Então clique dentro do widget Tabs e selecione o botão + Add Item para adicionar uma nova aba. Na área de texto do recipiente, cole o código de atalho que você acabou de copiar:
Quando você terminar, clique em UPDATE ou PUBLISH na parte inferior da tela. Então você pode visualizar como o widget fica na parte da frente do seu site:
É isso aí! Você está acabado.
Os 8 melhores plugins de abas do Elementor
Elementor é uma ferramenta robusta que vem com todas as funcionalidades e recursos que você precisará para criar um conteúdo bonito e funcional com abas.
No entanto, você pode querer levar seu projeto mais longe ou usar capacidades avançadas. Nesse caso, você também pode considerar emparelhar o Elementor com outra ferramenta de terceiros.
Vamos dar uma olhada em alguns dos principais plugins para Elementor Tabs, classificados em nenhuma ordem em particular.
1. ElementsKit Elementor Table Widget
O ElementsKit Addon do Elementor é uma extensão popular:
Seu Table Widget permite que você mostre uma grande quantidade de dados não sincronizados de uma forma organizada. Você pode construir uma tabela personalizável, adicionar conteúdo corporal e inserir imagens e elementos de navegação.
As características do ElementsKit incluem:
- Tabelas de comparação
- Horários e calendários
- Gerenciamento de projetos
- Menus
- Mais de 500 blocos
- Mais de 70 addons
- Um construtor de mega menus
- Efeitos do Parallax
- Um construtor modal popup
O preço do ElementsKit começa em $39 por ano para um único local. Este plano inclui um ano de atualizações e suporte.
2. Elegant Tabs for Elementor
Elegant Tabs for Elementor é uma ferramenta intuitiva que ajuda você a criar e customizar abas dinâmicas:
Este add-on pode ser uma escolha sólida se você estiver procurando por uma extensão com muitas opções de personalização de design. Você pode adicionar cores, ícones e fontes personalizadas. Você também pode usar Elegant Tabs para adicionar um recurso de auto-switch às suas abas e vinculá-las a outros conteúdos em seu site.
As principais características do Elegant Tabs incluem:
- Opções avançadas de estilo
- Um recurso de chaveamento automático
- A opção de definir qualquer aba ativa na carga
- Abas justificadas e verticais
- Efeitos paralaxe
- Suporte de alinhamento de abas
O preço para Elegant Tabs começa em $19 por ano. Este plano inclui seis meses de atualizações.
3. Livemesh Addons
Livemesh Addons para Elementor inclui uma infinidade de elementos prontos para ajudá-lo a estilizar e estruturar seu conteúdo de abas com facilidade:
Você pode escolher entre os tipos de abas claras e escuras, mais de 10 projetos de abas, e opções de layout horizontal e vertical. Livemesh Addons também é simples de usar, o que é excelente se você é novo no WordPress ou Elementor.
As principais características do Livemesh incluem:
- 10 projetos de abas claras e 10 projetos de abas escuras
- Opções verticais e horizontais
- Resolução móvel personalizável
- mais de 25 addons
- Suporte para ícones
Os planos Livemesh Addons começam em $37 por ano. Este plano inclui atualizações e suporte por um ano.
4. Elementor Addons
Elementor Addons, do popular PowerPack, é um plugin rico em recursos para impulsionar tanto o design quanto a funcionalidade do seu widget Elementor Tabs:
Você pode usar este plugin para adicionar texto e imagens às suas abas e aplicar seis estilos para o widget Advanced Tabs. É fácil de usar e de fácil compreensão. Além disso, Elementor Addons também é leve, então você não precisa se preocupar em diminuir a velocidade do seu site.
As principais características do Elementor Addons by PowerPack incluem:
- Uma interface rápida e leve
- Templates pré-construídos
- Exibição de conteúdo personalizado
- Estilos avançados de aba
A partir de $44 por ano, este plugin é mais caro do que algumas outras opções desta lista. Entretanto, ele tem um conjunto completo de widgets para personalizar todos os aspectos do seu site, não apenas o seu conteúdo em abas.
5. JetElements
A JetElements oferece um widget de Tabelas Responsivas que pode ser ideal se você estiver procurando por uma maneira rápida e fácil de agrupar seu conteúdo:
Ele permite que você mostre dados não estruturados de uma forma limpa e moderna. A JetElements também oferece um widget de Tabela de Preços para personalizar e dar estilo aos seus detalhes de preços de oito maneiras diferentes.
As principais características da JetElements incluem:
- 45 widgets
- Importação de CSV para ajustes de tabela
- 8 opções de estilo
- Suporte para todos os tipos de conteúdo
- Totalmente personalizável
Uma assinatura da JetElements começa em $24 por ano. Crocoblock também oferece um pacote com tudo incluído por US$ 130 por ano, com mais de 150 widgets.
6. Essential Addons
Outro plugin popular que você pode considerar usar para seus Elementor Tabs é o Essential Addons:
É um dos mais populares widget plugins do Elementor. Ele inclui mais de 100 blocos prontos e mais de 80 elementos para expandir e melhorar o construtor do site.
Um dos melhores elementos que você pode aproveitar para o seu conteúdo de abas é a Tabela de Dados do plugin. Esta ferramenta permite que você projete praticamente qualquer tipo de tabela e adicione ícones, filtros, e muito mais.
As principais características essenciais dos Addons incluem:
- Importação de CSV para ajustes de tabela
- Opções de filtragem
- Configurações totalmente personalizáveis
- Opções avançadas de estilo
- Abas avançadas e elementos de acordeão
- Tabelas de preços
O preço para Essential Addons começa em $39.97 por ano para um site. Ele vem com um ano de atualizações e suporte.
7. Addons Premium
Premium Addons é uma ferramenta altamente customizável para a Elementor que vem com uma grande variedade de widgets gratuitos e premium:
Entre os muitos widgets poderosos incluídos com este addon está a Tabela de Preços do Elementor. Ela vem com um recurso de ordenação, busca ao vivo e a opção de organizar os itens em ordem ascendente ou descendente.
As principais características dos Premium Addons incluem:
- A opção de importação de arquivos CSV
- Adicionar URLs às células da tabela
- Busca e classificação em tempo real
- Customização e opções de estilo
- Animações da Lottie
Você pode baixar e usar o Widget Premium Addons Elementor Table Widget gratuitamente. Há também uma versão premium, a partir de $39 por ano.
8. Element Pack
Um último addon que você pode considerar usar com seu widget Elementor Tabs é o Element Pack:
Este pacote de extensões do Elementor inclui um widget de Tabela que pode apresentar o seu conteúdo de uma forma atraente e elegante. Você pode criar várias tabelas dentro do seu conteúdo de tabulação, incluindo preços, conteúdo e tabelas de moedas criptográficas.
As principais características do Element Pack incluem:
- Importação de CSV para ajustes de tabela
- Elementos de três tabelas
- Customização e opções de estilo
- Um recurso de filtragem
- Busca em tempo real
Uma licença de um único site para o Element Pack custa $29,25 por ano, tornando-o uma das opções mais baratas nesta lista. O plano também inclui uma garantia de 20 dias de devolução do dinheiro.
Resumo
Elementor é uma excelente ferramenta que pode ajudar você a projetar e construir seu site sem esforço. Se você está procurando agrupar e organizar seu conteúdo de uma forma atraente, você pode considerar o uso do widget Elementor Tabs.
Como discutimos neste artigo, você pode facilmente inserir este widget em qualquer página ou artigo através do editor do Elementor. Então você pode adicionar o seu conteúdo e estilo para combinar com a sua marca. Para estender a funcionalidade do widget, você também pode emparelhá-lo com um plugin de terceiros, como o ElementsKit.
Um design amigável e atraente é essencial para o sucesso de um site.
Você também precisará fazer uma parceria com um poderoso provedor hospedagem de aplicativos, hospedagem de banco de dados e hospedagem gerenciada de WordPress.
Confira nossos planos de hospedagem para ver como a Kinsta pode levar seu site para o próximo nível!
Deixe um comentário