{"id":50620,"date":"2022-06-20T09:37:34","date_gmt":"2022-06-20T12:37:34","guid":{"rendered":"https:\/\/kinqsta.com\/pt\/?p=50620&preview=true&preview_id=50620"},"modified":"2025-01-20T07:24:21","modified_gmt":"2025-01-20T10:24:21","slug":"abas-do-elementor","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/pt\/blog\/abas-do-elementor\/","title":{"rendered":"Como Criar e Usar Abas do Elementor"},"content":{"rendered":"

Ao construir um site<\/a>, \u00e9 essencial garantir que o seu conte\u00fado esteja bem organizado. Organizar bem suas p\u00e1ginas pode ajudar a melhorar a Experi\u00eancia do Usu\u00e1rio (UX) e tornar o texto mais diger\u00edvel. Uma das maneiras que voc\u00ea pode organizar seu conte\u00fado \u00e9 usando o widget Elementor Tabs.<\/p>\n

Conte\u00fado com abas permite que seus usu\u00e1rios alternem entre diferentes se\u00e7\u00f5es de conte\u00fado. Este recurso elimina a necessidade dos visitantes navegarem para diferentes \u00e1reas das p\u00e1ginas. Agrupar o conte\u00fado relacionado em cont\u00eaineres com abas pode melhorar a apar\u00eancia e a usabilidade do seu site. Al\u00e9m disso, voc\u00ea pode configurar tudo isso sem qualquer experi\u00eancia de desenvolvimento do WordPress<\/a>.<\/p>\n

Neste artigo, vamos apresentar brevemente o Elementor e suas diferentes vers\u00f5es. Em seguida, vamos lhe mostrar como criar e personalizar as abas do Elementor e algumas ferramentas de terceiros que voc\u00ea pode usar para melhorar a funcionalidade padr\u00e3o do widget.<\/p>\n

Vamos come\u00e7ar!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Uma vis\u00e3o geral do Elementor<\/h2>\n

O Elementor<\/a> \u00e9 um plugin popular e poderoso para construir sites<\/a>:<\/p>\n

\"Elementor
Elementor construtor de p\u00e1ginas<\/figcaption><\/figure>\n

Voc\u00ea pode usar o construtor de p\u00e1ginas para criar lindas p\u00e1ginas para o seu site, seja do zero ou usando modelos pr\u00e9-fabricados. O Elementor possui um editor de arrastar e soltar, assim voc\u00ea n\u00e3o precisar\u00e1 tocar em uma linha de c\u00f3digo<\/a>.<\/p>\n

\u00c9 importante notar que existe uma vers\u00e3o gratuita<\/a> e paga do Elementor<\/a>. O plugin gratuito do Elementor permite que voc\u00ea crie p\u00e1ginas e artigos padr\u00e3o.<\/p>\n

Entretanto, suas caracter\u00edsticas e funcionalidade podem ser limitantes. Para desbloquear o conjunto completo de ferramentas, n\u00f3s recomendamos a atualiza\u00e7\u00e3o para Elementor Pro. Ao longo deste post, n\u00f3s vamos apontar as diferen\u00e7as no plano livre versus plano profissional quando trabalharmos com o widget Tabs.<\/p>\n\n

Como criar abas do Elementor (Widget Tabs)<\/h2>\n

Agora que entendemos mais sobre o Elementor, vamos ver como usar o widget Tabs. Note que, para o pr\u00f3ximo tutorial, vamos assumir que voc\u00ea j\u00e1 tem o Elementor instalada e ativada<\/a> em seu site WordPress.<\/p>\n

Para come\u00e7ar, navegue at\u00e9 o artigo ou p\u00e1gina do WordPress onde voc\u00ea quer adicionar o conte\u00fado da guia e selecione Editar com Elementor<\/strong>:<\/p>\n

Selecione “Edit with Elementor”<\/figcaption><\/figure>\n

Isto ir\u00e1 lan\u00e7ar a interface do editor do Elementor. No painel do lado esquerdo, sob Elements<\/strong>, procure e selecione o widget Tabs <\/strong>:<\/p>\n

Procure e selecione o widget “Tabs”<\/figcaption><\/figure>\n

Voc\u00ea pode arrastar e soltar o widget em uma se\u00e7\u00e3o de p\u00e1gina. Uma vez colocado o widget Tabs, um novo painel de controle aparecer\u00e1 com suas configura\u00e7\u00f5es:<\/p>\n

\"Arraste
Arraste o widget para sua p\u00e1gina<\/figcaption><\/figure>\n

Voc\u00ea pode digitar o t\u00edtulo e o conte\u00fado de cada aba. Voc\u00ea tamb\u00e9m pode clicar no bot\u00e3o + Add Item <\/strong>para inserir outra aba. Em Type<\/strong>, selecione se deseja exibir as abas horizontalmente ou verticalmente.<\/p>\n

Como personalizar suas abas do Elementor<\/h2>\n

Uma vez que voc\u00ea adicione texto \u00e0s abas, voc\u00ea pode personalizar as configura\u00e7\u00f5es gerais do widget. H\u00e1 algumas op\u00e7\u00f5es diferentes.<\/p>\n

Selecione cada aba personalizada para modificar seus atributos<\/a>, incluindo seu t\u00edtulo, conte\u00fado da caixa, e \u00edcone. Voc\u00ea tamb\u00e9m pode mudar sua posi\u00e7\u00e3o e alinhamento:<\/p>\n

\"Modificar
Modificar as abas conforme necess\u00e1rio.<\/figcaption><\/figure>\n

Em seguida, na aba Style<\/strong>, voc\u00ea encontrar\u00e1 muitas op\u00e7\u00f5es para personalizar o design e a apar\u00eancia do widget Elementor Tabs. Voc\u00ea pode modificar a cor e sombra do texto, tipografia, espa\u00e7amento e muito mais:<\/p>\n

\"Personalizar
Personalizar estilos e espa\u00e7amentos<\/figcaption><\/figure>\n

Voc\u00ea pode mudar a cor e a largura da borda que envolve as abas. Este recurso de design pode ajudar a distinguir as se\u00e7\u00f5es individuais.<\/p>\n

Sob Title<\/strong>, voc\u00ea pode modificar a cor do texto dos t\u00edtulos das abas. Voc\u00ea tamb\u00e9m pode mudar a fonte e o tamanho do texto clicando em Typography<\/strong>:<\/p>\n

\"Mais
Mais op\u00e7\u00f5es de modifica\u00e7\u00e3o<\/figcaption><\/figure>\n

Quando voc\u00ea terminar, salve suas mudan\u00e7as. H\u00e1 tamb\u00e9m algumas configura\u00e7\u00f5es avan\u00e7adas que voc\u00ea pode considerar usar para tornar seu conte\u00fado de abas mais sofisticado.<\/p>\n

Configura\u00e7\u00f5es avan\u00e7adas para abas do Elementor<\/h2>\n

Sob a aba Advanced <\/b>no painel de configura\u00e7\u00f5es widget, voc\u00ea encontrar\u00e1 uma grande variedade de op\u00e7\u00f5es adicionais<\/a>:<\/p>\n

\"Op\u00e7\u00f5es
Op\u00e7\u00f5es avan\u00e7adas da aba<\/figcaption><\/figure>\n

Vamos dar uma olhada mais de perto nestas configura\u00e7\u00f5es:<\/p>\n