Destaque do plugin Divi: Divi Accordions Plus

Publicados: 2023-01-30

Divi Accordions Plus é um módulo de terceiros para o Divi Builder que adiciona um novo construtor de acordeões. Use vários módulos Divi Accordions Plus juntos em uma única página e eles funcionam como um único acordeon, então quando um abre outro fecha. Estilize os acordeões juntos ou individualmente, exiba ícones e imagens e muito mais. Nesta postagem, veremos o Divi Accordions Plus, veremos o que ele pode fazer e como é fácil de usar para ajudá-lo a decidir se é o produto certo para suas necessidades. Usaremos o Poke Restaurant About Page Layout como pano de fundo para este tutorial. Portanto, se você ainda não baixou, pode baixá-lo agora com sua assinatura Divi.

Módulo Divi Accordions Plus

Divi Accordions Plus adiciona um novo módulo ao Divi Builder. Basta adicionar o módulo em qualquer lugar que você quiser dentro de seus layouts Divi.

Adicionando Accordions Plus ao layout

Submódulos Acordeão

Os submódulos criam acordeões individuais. Adicione quantos quiser clicando em Adicionar novo item. Você também pode cloná-los, reorganizá-los e excluí-los. Eles seguem as configurações do módulo principal, mas têm configurações específicas de conteúdo e design que você precisará usar.

Adicionar novo item

Contente

Adicione um título, subtítulo (que você pode desativar se quiser) e o conteúdo do corpo. Estes são os principais elementos dos acordeões.

conteúdo de acordeão

Estado do item

O estado do item define o estado aberto ou fechado das sanfonas quando a página é carregada. Está desligado por padrão, então os acordeons estão fechados. Eu não abri o acordeão neste exemplo. Ele abriu automaticamente quando habilitei o Item State.

Estado ativo do acordeão

Divi Accordions Plus Accordion Submodules Design Settings

A guia Design dos submódulos controla as configurações desse acordeon. Você pode personalizá-los nas configurações do módulo principal se quiser que tenham a mesma aparência, mas ainda precisará usar essas configurações para escolher as imagens e os ícones. Vejamos as configurações exclusivas do submódulo.

ícone Esquerda

Ícone Esquerdo controla o elemento gráfico que aparece à esquerda do acordeão. Ative ou desative-o, gire ao abrir, escolha um ícone ou uma imagem e estilize-o com as ferramentas Divi padrão. Uma imagem ou ícone como um logotipo funciona muito bem à esquerda. Neste exemplo, selecionei uma imagem e ativei o ícone Girar à esquerda (alternância aberta), de modo que a imagem girou quando abri o acordeão.

Ativando o ícone esquerdo

Para este exemplo, ajustei o plano de fundo e a cor do ícone.

Estilização do ícone esquerdo

ícone direito

Right Icon controla o elemento gráfico que aparece à direita do acordeão. Ative ou desative-o, gire ao abrir, escolha um ícone ou uma imagem e estilize-o com as ferramentas Divi padrão. Um ícone que indica o estado aberto ou fechado do acordeão funciona muito bem à direita.

Adicionando o ícone certo

Neste exemplo, selecionei um ícone diferente, alterei a cor do ícone, a cor do plano de fundo e adicionei uma borda com estilo.

Estilo do ícone certo

Divi Accordions Plus Configurações de conteúdo

A guia Conteúdo inclui as configurações básicas do Divi e algumas configurações específicas do Divi Accordions Plus.

Velocidade

A velocidade controla a rapidez com que os botões abrem e fecham. É definido em milissegundos.

Configurando a velocidade de alternância do acordeon

Modo

O modo muda a maneira como os acordeões funcionam.

Modo Acordeão

O Modo Acordeão permite escolher entre várias alternâncias ativas e uma única alternância ativa. Várias alternâncias ativas deixam todas as alternâncias abertas até que o usuário as feche. O exemplo abaixo mostra Múltiplos Alternâncias Ativas.

Um exemplo de várias alternâncias ativas

Alternâncias ativas únicas permitem apenas uma alternância aberta por vez. Ele fecha a alternância aberta quando o usuário seleciona uma nova alternância. Este exemplo mostra Alternâncias Ativas Simples.

Modo de alternância ativo único, o modo padrão de como os acordeões funcionam

Modo Acordeão Global

O Global Accordion Mode é um novo recurso interessante. Ele permite uma única alternância aberta, independentemente do número de módulos Divi Accordion Plus na página. Habilite o Global Accordion Mode dentro de cada módulo Divi Accordions Plus na página onde você deseja usar o Global Accordion Mode. Quaisquer módulos que não tenham esse modo ativado não serão afetados pelo modo. Isso é especialmente bom para criar acordeões de várias colunas na mesma linha.

No exemplo abaixo, adicionei outro módulo Divi Accordions Plus e habilitei o Global Accordion Mode para ambos. Quando eu abro uma sanfona em um dos módulos, a sanfona aberta no outro módulo fecha.

Alternância global

Configurações de design do Divi Accordions Plus

As configurações de Design controlam os estilos padrão para todos os acordeões. Essas configurações são substituídas pelas configurações individuais do submódulo.

Cabeçalho

O cabeçalho controla a cor de fundo, a cor de fundo de alternância aberta, o espaçamento, as bordas e a sombra da caixa. Neste exemplo, alterei as cores de fundo para a alternância aberta e fechada.

Cores de fundo do cabeçalho do item

ícone Esquerda

Ícone esquerdo controla a cor do ícone, cor de alternância de abertura de ícone, cor de fundo, cor de fundo de alternância aberta, espaçamento, borda e sombra de caixa para todo o módulo sanfona. Se você deseja uniformidade no estilo, é melhor definir as cores do ícone aqui e, em seguida, selecionar individualmente seu ícone para cada alternância no acordeão. Neste exemplo, adicionei e estilizei uma borda ao redor dos ícones para torná-los mais uniformes com a cor de fundo.

Estilizando o ícone esquerdo

ícone direito

O ícone direito controla a cor do ícone, a cor de alternância de abertura do ícone, a cor de fundo, a cor de fundo de alternância aberta, o espaçamento, a borda e a sombra da caixa. No exemplo, ajustei as cores de alternância aberta, a borda e alterei a cor do ícone na alternância aberta.

Estilizando o ícone certo

Título

Título controla a cor de fundo do título, a cor de fundo de alternância aberta, o espaçamento, a borda e a sombra da caixa.

Definir a cor de fundo do título

Corpo

Corpo controla o corpo do item, espaçamento, borda e sombra da caixa. Eu ajustei a borda neste exemplo.

Estilo do corpo do acordeão

Texto do Cabeçalho

O texto do cabeçalho controla o texto de alternância aberto e permite que você controle o título e o subtítulo independentemente do mesmo menu. Ele inclui todos os controles de texto padrão. Ajustei as cores dos títulos e subtítulos, alterei o tamanho da fonte do título e coloquei em negrito no exemplo abaixo.

Estilo do texto do cabeçalho

Cabeçalhos do corpo

Os títulos do corpo incluem todos os controles de texto padrão para os títulos do corpo que você especificou na área de conteúdo. No exemplo abaixo, adicionei uma tag de cabeçalho H2 e H3 ao conteúdo do corpo. Alterei os pesos e a cor da fonte para ambos os títulos no conteúdo do corpo.

Estilização dos títulos do corpo

Texto de corpo

Corpo de texto inclui todos os controles de texto padrão para o corpo de texto na área de conteúdo. Neste exemplo, alterei a fonte, coloquei em itálico, alterei a cor e alterei o tamanho da fonte.

Estilização do corpo do texto

Demonstração final com Divi Poke Restaurant

É assim que o acordeão final se parece no layout da página About Us para o Divi Poke Restaurant Layout Pack.

Resultado final com cabeçalho, rodapé e layout da página

Demonstrações do Divi Accordions Plus

O Divi Accordions Plus vem com sete demos para você começar.

Demonstração 1

A primeira demonstração inclui um acordeão de várias colunas com ícones multicoloridos. Os acordeões têm uma borda única e o conteúdo é cercado por todos os lados.