Destaque do plugin Divi: Divi SuperTabs

Publicados: 2023-01-02

Divi SuperTabs é um plug-in de terceiros para Divi que adiciona um módulo de guia ao Divi Builder. Embora o Divi Builder já tenha um módulo de guia, este plug-in oferece algumas opções de design e recursos exclusivos que permitem criar guias mais complexas para o seu site Divi. Neste destaque do plug-in, veremos o que o Divi SuperTabs pode fazer e ajudaremos você a decidir se este é o plug-in certo para o seu site.

Vamos lá!

Instalando Divi SuperTabs

A instalação do Divi SuperTabs é simples e direta. Navegue até a página do plug-in no painel do WordPress e clique em carregar plug-in. Carregue o arquivo ZIP para o plug-in e, em seguida, ative o plug-in assim que estiver instalado.

Instalação do Divi Plugin Destaque do Divi SuperTabs

Módulo Divi SuperTabs

Um novo módulo é adicionado ao Divi Builder chamado SuperTabs. Este módulo permite adicionar guias complexas e personalizáveis ​​ao seu layout Divi. Vejamos as principais características.

Divi Plugin Destaque Divi SuperTabs Adicionar Módulo

Configurações da guia Divi SuperTabs

Na guia de conteúdo das configurações do SuperTabs, você pode adicionar suas guias. Cada guia também possui seu próprio menu de configurações, permitindo que você personalize o design de cada guia individual.

Divi Plugin Destaque Divi SuperTabs Nova guia

Configurações da guia - Conteúdo

Nas configurações de cada guia, você pode adicionar o conteúdo da guia, como título, subtítulo e conteúdo da guia.

Divi Plugin Destaque o conteúdo da guia Divi SuperTabs

Na seção Layout, você pode selecionar entre vários layouts para o conteúdo da sua guia. No exemplo acima, usei o layout Image Left, Text, Button.

Divi Plugin Destaque Divi SuperTabs Layout da guia

Como alternativa, você pode selecionar a opção de biblioteca para usar qualquer layout da Biblioteca Divi em uma guia, permitindo criar designs mais complexos usando outros módulos Divi.

Divi Plugin Destaque Divi SuperTabs Library Layout 2

Para usar um item de biblioteca com Divi SuperTab, salve o layout desejado na Biblioteca Divi e certifique-se de adicioná-lo à categoria “Tabs Content”.

Divi Plugin Destaque Divi SuperTabs Adicionar à biblioteca

Em seguida, selecione Biblioteca nas configurações de layout da guia e adicione o layout da Biblioteca Divi.

Divi Plugin Destaque Divi SuperTabs Layout da biblioteca

Também na guia de conteúdo das configurações da guia, você pode adicionar um ícone à sua guia. O SuperTab permite que você use os ícones padrão do Divi, os ícones do FontAwesome e até mesmo carregue seus próprios ícones personalizados.

Divi Plugin Destaque Ícone da guia Divi SuperTabs

Você também pode definir uma guia para vincular a um URL para que o link seja aberto quando a guia for selecionada. Essa é uma maneira prática de vincular a sites externos ao lado do conteúdo da guia. Você também pode definir um link para todo o módulo nas configurações de link.

Divi Plugin Destaque Divi SuperTabs Tab Link

Por fim, você pode definir um plano de fundo exclusivo para sua guia. As configurações de plano de fundo incluem todas as opções de plano de fundo padrão do Divi (cor, gradiente, imagem, vídeo, padrão e máscara). Neste exemplo, adicionei um plano de fundo colorido simples a esta guia.

Divi Plugin Destaque Divi SuperTabs Tab Background

Configurações da guia - Design

Na guia de design das configurações da guia, você pode encontrar muitas opções para personalizar completamente a aparência da sua guia. Quando você personaliza o design dessa maneira, suas alterações são aplicadas apenas à guia individual que você está editando, não ao restante das guias. As opções de design nas configurações de guias individuais são as mesmas que as opções de design nas configurações de SuperTabs, portanto, a principal diferença é se você deseja que seu design seja aplicado a todas as guias ou apenas a uma única guia.

Com as configurações de design, você pode editar a aparência da navegação, guia, conteúdo, layout, texto, dimensionamento, espaçamento etc. Examinaremos todas as opções de design em detalhes mais adiante neste artigo.

Divi Plugin Destaque Divi SuperTabs Tab Design Settings

Configurações da guia - Avançado

Na guia Avançado, você tem todas as opções Divi avançadas padrão, incluindo CSS personalizado, Condições, Visibilidade, Transições, Posição e Efeitos de rolagem.

Divi Plugin Destaque Divi SuperTabs Tab Configurações avançadas

Divi SuperTabs Guia de conteúdo

Agora que abordamos as configurações das guias individuais no módulo Divi SuperTabs, vamos explorar as configurações gerais do módulo SuperTabs, começando com a guia de conteúdo. Como já abordamos, aqui é onde você adiciona cada uma de suas guias.

Seta

Com esta opção, você pode adicionar uma seta às suas guias que serão exibidas na guia ativa. Você pode ver um exemplo disso acima. A cor da seta pode ser personalizada na guia de design.

Divi Plugin Destaque Divi SuperTabs Arrow

Ligação

Esta opção é uma opção padrão do módulo Divi, permitindo que você vincule o módulo a um URL.

Fundo

Você pode adicionar um plano de fundo ao módulo com a opção Plano de fundo. Quando você adiciona um plano de fundo dessa maneira, a cor abrange a guia de navegação e a área de conteúdo. Neste exemplo, adicionei um fundo amarelo ao módulo. Existem outras opções de plano de fundo na guia Design, que permitem adicionar cores diferentes para as guias e a área de conteúdo. Examinaremos essas opções de design na próxima seção.

Divi Plugin Destaque Divi SuperTabs Background

Aba Design do Divi SuperTabs

A guia de design é onde esse plug-in realmente brilha. Existem muitas opções para você customizar cada aspecto do módulo SuperTabs. Vamos dar uma olhada.

Configurações de navegação

Nas configurações de navegação, você pode alterar o posicionamento da navegação, o alinhamento e o posicionamento das legendas. No exemplo acima, o posicionamento da navegação está definido como Esquerda. Você também pode fixar as guias para que fiquem no topo da página conforme você rola pelo conteúdo da guia.

Divi Plugin Destaque Divi SuperTabs Configurações de navegação

Também nas configurações de navegação, você pode personalizar completamente o espaçamento da navegação alterando a largura, margem, preenchimento e medianiz da navegação. Neste exemplo, removi o preenchimento esquerdo e alterei a largura de navegação para 20%. Por fim, você pode personalizar as cores e o design geral da barra de navegação alterando a cor do plano de fundo, adicionando cantos arredondados ou adicionando uma borda. Mudei o fundo da barra de navegação para verde.

Divi Plugin Destaque Divi SuperTabs Configurações de navegação 2

Configurações da guia

Nas configurações da guia, você pode personalizar o preenchimento da guia, a cor de fundo da guia ativa e a cor de fundo da guia inativa. Você também pode alterar o posicionamento, alinhamento, margem e tamanho do ícone. Por fim, você pode optar por ocultar o ícone ou título, adicionar cantos arredondados ou adicionar uma borda.

No exemplo abaixo, alterei a cor de fundo da guia ativa para um verde mais claro, alterei o posicionamento do ícone para a esquerda e adicionei uma margem de ícone.

Divi Plugin Destaque Divi SuperTabs Active Tab Background

Configurações de seta

Nas configurações de seta, você pode alterar a cor da seta. Mudei para um verde mais claro para combinar com a cor de fundo da guia ativa.

Divi Plugin Destaque Divi SuperTabs Arrow Settings

Definições de conteudo

Aqui você pode personalizar o design geral do conteúdo em suas guias. Você pode adicionar preenchimento, cantos arredondados e uma borda. Adicionei algum preenchimento à seção de conteúdo para trazer um melhor equilíbrio ao design geral.

Divi Plugin Destaque Divi SuperTabs Configurações de conteúdo

Disposição

Nas configurações de layout, você pode definir a barra de navegação para ser inserida, exibida dentro do quadro da guia.

Divi Plugin Destaque Divi SuperTabs Inset

Texto do Item de Navegação

Aqui você pode personalizar a fonte do item de navegação, peso da fonte, estilo, cor, tamanho, espaçamento, altura da linha e sombra. Aqui mudei a cor da fonte do item de navegação para branco. Isso também altera a cor do ícone.

Divi Plugin Destaque Divi SuperTabs Nav Font

Texto do item de navegação ativo

As configurações de texto do item de navegação ativo têm as mesmas configurações que as configurações de texto do item de navegação, mas essas opções se aplicam somente ao item de navegação quando ele está ativo (selecionado). Aqui eu mudei a cor do texto do item de navegação ativo para laranja.

Divi Plugin Destaque Divi SuperTabs Active Nav Cor do texto

Texto do Subtítulo

Aqui você pode personalizar o design do texto da legenda. As opções são as mesmas das opções de texto de navegação.

Divi Plugin Destaque Divi SuperTabs Texto da legenda

Texto do subtítulo da guia ativa

E nesta seção você pode personalizar o design do texto da legenda ativa. Novamente, temos as mesmas opções de personalização das três últimas seções, mas essas configurações só se aplicam à legenda quando ela está ativa.

Outras configurações de design

Além das configurações exclusivas que abordamos, também existem outras opções padrão, como dimensionamento, borda de espaçamento, sombra de caixa, filtros, transformação e animação.

Divi Plugin Destaque Divi SuperTabs Design Settings

Guia avançada do Divi SuperTabs

A guia Avançado para Divi SuperTabs é bastante padrão. Você pode adicionar CSS personalizado para personalizar ainda mais o módulo e pode usar outras configurações, como condições, visibilidade, transições, posição e efeitos de rolagem para levar o design do SuperTabs ao próximo nível.

Divi Plugin Destaque Divi SuperTabs Advanced

Exemplos de Divi SuperTabs

Aqui estão alguns exemplos de como você pode usar o Divi SuperTabs.

Tabela de preços

O primeiro exemplo é uma tabela de preços. O conteúdo é do pacote de layout de reparo de dispositivo. Salvei cada uma das tabelas de preços na Biblioteca Divi e usei o recurso de layout da Biblioteca para adicionar o conteúdo a cada guia. Isso facilita a adição de layouts de conteúdo mais complexos nas guias.

Divi Plugin Destaque Divi SuperTabs Exemplo 1

Como funciona

O segundo exemplo usa as guias para organizar as diferentes etapas de um processo. Este layout foi feito usando o pacote de layout Planejamento Estate. Usei as configurações individuais da guia para definir uma cor de guia e um plano de fundo diferentes para cada uma das guias.

Divi Plugin Destaque Divi SuperTabs Exemplo 2

Recursos

O exemplo final usa o Divi Home Staging Layout Pack. Usei SuperTabs para organizar alguns dos recursos destacados na página. Além disso, usei ícones personalizados para adicionar algum interesse visual às guias.

Divi Plugin Destaque Divi SuperTabs Exemplo 3

Comprar Divi SuperTabs

Divi SuperTabs está disponível no Divi Marketplace. Mercado. Custa $ 29 para uso ilimitado do site e 1 ano de suporte e atualizações. O preço também inclui uma garantia de reembolso de 30 dias.

Pensamentos finais

Divi SuperTabs é um plug-in repleto de recursos para o Divi Builder que permite criar guias complexas para o site Divi. O ponto forte deste plug-in é definitivamente a capacidade de importar layouts de sua biblioteca Divi como uma guia, permitindo adicionar conteúdo de guia complexo contendo outros módulos Divi. Além disso, a personalização do plug-in é ótima. Com todas as configurações disponíveis, você pode personalizar e ajustar as guias para obter a aparência exata que deseja.

No geral, o Divi SuperTabs é muito fácil de configurar e usar, e você pode criar guias de ótima aparência para organizar as informações em seu site. Se você se sentir limitado pelo módulo de guias nativo do Divi ou quiser usar o conteúdo da Biblioteca Divi em suas guias, este plug-in pode ser uma ótima opção para você.

Gostaríamos muito de ouvir de você! Você já experimentou o Divi SuperTabs? Deixe-nos saber o que você pensa sobre isso nos comentários!