Como criar conteúdo com guias no Elementor usando complementos do PowerPack

Quer saber como criar conteúdo com guias no Elementor?

O conteúdo com guias melhora a aparência de suas páginas da Web exibindo uma grande quantidade de informações de forma compacta e funcional.

Neste artigo, discutiremos como você pode criar conteúdo com guias para o seu site WordPress usando os complementos Elementor e PowerPack.

Widget da guia avançada do PowerPack – Visão geral

Complementos do PowerPack para Elementor é um dos complementos finais para o construtor de páginas Elementor. Possui mais de 150 modelos exclusivos e elegantes e mais de 80 widgets úteis, incluindo o widget de guias avançadas para criar conteúdo com guias no Elementor.

O widget de guias avançadas é o melhor widget de guia para criar conteúdo com guias em qualquer site WordPress. Vamos dar uma olhada nos recursos do widget PowerPack Advanced Tabs para Elementor:

• Suporta várias fontes de conteúdo
• Várias opções personalizáveis ​​de conteúdo para estilizar seu conteúdo.
• Permite criar guias horizontais e guias verticais.
• Oferece excelente suporte responsivo e funciona sem problemas em todas as telas.
• Oferece várias opções de estilo, como cor do texto, tipografia, tipo de plano de fundo, espaçamento de guias, borda, alinhamento de texto e muito mais.
• Permite personalizar o ícone, título e parte de conteúdo separadamente.

Criar conteúdo com guias no Elementor com complementos do PowerPack

Antes de começar, verifique se você instalou e ativou o construtor de páginas Elementor e os complementos do PowerPack para Elementor.

Depois de ativar os dois plugins em seu site WordPress, abra a página usando o editor Elementor.

Em seguida, procure as “ Guias Avançadas ” na área do widget e arraste e solte o widget na página.

Não se esqueça de verificar o PowerPack “ PP ” no canto superior direito do widget.

Guia Conteúdo do Widget Guia Avançado

A guia de conteúdo do widget Guias avançadas inclui duas seções:

1. Guias avançadas
2. Esquema

Vejamos essas seções em detalhes.

Guias avançadas

Vejamos os recursos disponíveis nesta seção:

• Você pode adicionar quantas “ guias ” quiser. Basta clicar em “ Adicionar item ” para criar mais guias.
• Você pode personalizar cada guia individualmente.
• Tipo de conteúdo: Esta opção permite que você escolha vários tipos de conteúdo, como conteúdo, imagem, link (vídeo/imagem), seção salva, widget salvo e modelo de página salva.

"Conteúdo" como o tipo de conteúdo

Quando você deseja exibir conteúdo, pode personalizar estas opções:

1. Título: Escreva um título para o conteúdo usando esta opção.
2. Conteúdo: Nesta seção, você pode adicionar conteúdo à guia com recursos como lista de números, lista de marcadores, link, negrito, itálico, sublinhado e muitos outros recursos para estilizar o texto. Além disso, você também pode adicionar uma imagem da biblioteca de mídia.

“Imagem” como o tipo de conteúdo

Quando você deseja exibir uma imagem, pode personalizar estas opções:

1. Escolher Imagem: Escolha uma imagem da biblioteca de imagens usando esta opção.
2. Tamanho da imagem: Esta opção permite que você selecione o tamanho de imagem desejado.

Quando você deseja exibir um link, pode soltar um link na opção “Link”. E se você escolher uma seção salva, um widget salvo ou um modelo de página salvo, poderá selecioná-los adequadamente.

À medida que você personaliza a parte de conteúdo separadamente para cada guia, da mesma forma, você pode fazer isso para os ícones de cada guia.

Os recursos da seção de ícones são:

1. Tipo de ícone: Você pode escolher um tipo de ícone, um ícone ou uma imagem. Pode ser o logotipo da sua marca ou qualquer outra coisa.
2. Ícone: Você pode escolher um ícone da biblioteca de ícones.

Esquema

Vejamos os recursos disponíveis nesta seção:

• Layout: Você pode selecionar o layout como um padrão horizontal ou vertical.
• Suporte responsivo: o widget Advanced Tabs suporta o modo responsivo em todos os dispositivos, seja desktop, tablet ou celular.
• Selecionar estilo: Selecione o estilo da guia usando esta opção.
• Scroll To Top: Você pode selecionar sim ou não se deseja rolar para o topo das guias ao clicar no título.

[ Nota: Esta opção estará disponível apenas se você selecionar um padrão de layout vertical para as guias.]

• Índice da guia ativa padrão: Esta opção pode definir a guia ativa padrão. Assim, sempre que você visitar seu site, a guia que você selecionou aparecerá por padrão.
• Prefixo de ID personalizado: você pode adicionar um prefixo de ID personalizado que será aplicado aos atributos de ID da guia em HTML.

Aplique essas alterações ao widget de guias avançadas para ver os melhores resultados.

Guia Estilo do Widget Guia Avançado

A guia de estilo do widget de guias avançadas inclui duas seções:

1. Abas
2. Título
3. Contente

Vejamos essas seções em detalhes.

Abas

Vamos ver o que todos os recursos estão incluídos nesta seção:

• Alinhamento horizontal ou vertical: selecione o alinhamento das guias usando esta opção, mas escolha o layout primeiro.
• Espaço entre abas: personalize o espaçamento entre as abas com esta opção.
• Cor de fundo: Usando esta opção, você pode escolher uma cor de fundo para as abas.
• Raio da borda: aplique o raio da borda se desejar exibir as bordas curvas na borda da guia.
• Preenchimento: Ajuste o preenchimento da guia para manter o espaçamento entre a borda da guia e o conteúdo.

Título

Vamos ver o que todos os recursos estão incluídos nesta seção:

• Posição do ícone: escolha uma posição do ícone para cima, para baixo, para a direita ou para a esquerda.
• Tamanho do ícone: Ajuste o tamanho do ícone com esta opção.
• Largura da imagem do ícone: Ajuste a largura da imagem do ícone usando esta opção.
• Raio da borda: aplique o raio da borda se desejar exibir as bordas curvas na borda do título da guia.
• Preenchimento: Ajuste o preenchimento da guia para manter o espaçamento entre a borda do título da guia e o conteúdo.
• Tipografia do título: Personalize a tipografia do texto do título usando esta opção.
• Cor do ícone: Escolha uma cor de ícone com esta opção.
• Cor do título: personalize a cor do texto do título usando a opção de cor do título.
• Cor de fundo do título: Se você deseja exibir a cor de fundo do título, você pode escolher uma cor de fundo usando esta opção.
• Efeito de foco: Esta opção oferece a flexibilidade de ativar ou desativar o efeito de foco.

Contente

Vamos ver o que todos os recursos estão incluídos nesta seção:

• Alinhamento: Defina o alinhamento do conteúdo exibido nas guias usando esta opção.
• Tipo de plano de fundo: você pode escolher um tipo de plano de fundo clássico ou gradiente.
• Cor do texto: escolha uma cor de texto para o conteúdo que deseja exibir nas guias.
• Tipografia de texto: Você pode personalizar a tipografia do texto de conteúdo usando esta opção.
• Tipo de borda: escolha um tipo de borda para o conteúdo das opções disponíveis, como sólido, duplo, pontilhado, tracejado ou ranhurado.
• Largura da borda: A largura da borda aplicada ao conteúdo pode ser ajustada por esta opção.
• Preenchimento: ajuste o preenchimento para permitir o espaçamento entre o texto do conteúdo e sua borda para torná-lo organizado e limpo.
• Cor da borda: A cor da borda do conteúdo pode ser personalizada usando esta opção.
• Raio da borda: se você aplicou uma borda à parte do conteúdo, pode ajustar seu raio usando esta opção.

Então, isso foi tudo sobre como personalizar a guia de conteúdo e estilo do widget Advanced Tabs para Elementor por PowerPack Addons.

Instale, ative e faça algumas alterações de acordo com sua escolha; É simples assim.

Obtenha as guias avançadas do PowerPack para o Elementor Page Builder

Depois de conhecer todos esses recursos do widget Advanced Tabs fornecido pelo PowerPack Elementor Addons, temos certeza de que você vai adorar usá-lo em seu site.

Esperamos que este tutorial tenha ajudado você a criar “guias” estilosas para o seu site usando o widget de guias avançadas do PowerPack.

Widgets por PowerPack Addons são incrivelmente projetados por nossos codificadores criativos para que não codificadores possam usá-los facilmente em questão de minutos.

Clique aqui para obter o widget PowerPack Advanced Tabs e aprimorar a aparência do seu site e a experiência do usuário.

Se você gostou de ler este artigo, também adoraria experimentar nossos outros elementos do PowerPack.

Sinta-se à vontade para deixar seus comentários aqui; adoraríamos receber suas respostas.
Além disso, junte-se a nós no Twitter, Facebook e YouTube.