Ir para o conteúdo principal

Como usar o módulo Divi Builder Flip

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Antes de adicionar um módulo Toggle à sua página, você deve primeiro pular para o Divi Builder. Quando o tema Divi estiver instalado no seu site, você notará um botão Use o Divi Builder acima do editor sempre que você criar uma nova página. Clique neste botão para ativar o Divi Builder e acessar todos os módulos do Divi Builder. Então clique no botão Use o Visual Builder para iniciar o gerador no modo visual. Você também pode clicar no botão Ativar o Visual Builder quando você navega no seu site em primeiro plano, se estiver conectado ao seu painel do WordPress.

acesso ao construtor visual

Quando estiver no Visual Builder, você pode clicar no botão cinza para adicionar um novo módulo à sua página. Novos módulos só podem ser adicionados dentro de linhas. Se você iniciar uma nova página, não se esqueça de adicionar uma linha à sua página primeiro.

flip flop divi module.png

Localize o módulo rocker na lista de módulos e clique nele para adicioná-lo à sua página. A lista de módulos é pesquisável, o que significa que você também pode digitar "alternar" e pressionar enter para pesquisar e adicionar automaticamente a alternância de módulos! Depois que o módulo for adicionado, você será saudado pela lista de opções do módulo. Essas opções são separadas em três grupos principais: Conteúdo , Projeto et avançado .

Exemplo de caso de uso: Página de FAQ

Uma página de perguntas freqüentes é um dos melhores lugares para consolidar informações usando o módulo Alternar. Ele permite que o usuário identifique rapidamente a pergunta que está procurando sem precisar ler toneladas de texto. Para este exemplo, mostrarei como você pode usar o módulo Toggle para criar uma seção moderna de FAQ para sua página de FAQ em minutos.
página de amostra FAQ.jpg

Usando o Visual Builder, adicione uma nova seção com uma linha de largura total (coluna 1). Em seguida, adicione um módulo Divisor à linha. Na guia Conteúdo das Configurações do Módulo Divisor, selecione a opção "Mostrar Divisor".

exemplo de um botão de flip-flop divi.png

Na guia Design, insira as seguintes opções:

Cor: # 000000 (preto)
Estilo do Divisor: Sólido
Posição do Separador:
Separador verticalmente centrado Peso: 4px
Altura: 1

opções de configuração toggle divi.png

Em seguida, adicione um módulo rocker sob o divisor que acabei de criar na mesma linha. Nas configurações do módulo Toggle, atualize os seguintes itens:

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 554.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Guia Conteúdo

Título: [insira seu título]
Conteúdo: [insira seu conteúdo]
Estado: Fechar
Abrir Cor de Fundo: #ffffff
Fechado Alterna a cor de fundo: #ffffff
Cor de fundo: #ffffff

Guia Design

Cor do ícone: # 000000
Abrir Alternar Cor do Texto: # 000000
Cor de texto de alternância fechada: # 000000
Fonte do título: Open Sans, Bold
Tamanho da fonte: 24px
Título Cor do Texto: # 000000
Fonte do corpo: Open Sans
Tamanho da Fonte do Corpo: 18px
Cor do texto do corpo: # 666666
Altura da linha do corpo: 1.6em
Use a borda: SIM
Largura da borda: 0px
Preenchimento personalizado: 2px superior, 2px inferior

novo conteúdo com o rocker divi.png

Depois de salvar sua configuração para o módulo de alternância, duplique o módulo divisor que você criou e coloque-o sob o módulo de alternância. Isto irá enquadrar o Flip com uma linha de separação superior e inferior. Depois disso, duplique seu módulo de alternância e coloque-o após a linha de separação inferior. Como este é um módulo Duplicate Toggle, todos os parâmetros de design foram transferidos para o novo Toggle e tudo o que você precisa fazer é atualizar o conteúdo do novo módulo Toggle. Em seguida, continue o processo de duplicação dos módulos divididos e flip-flops e atualize o conteúdo de seus flip-flops até completar a seção FAQ inteira.

Isso é tudo. Agora você tem uma seção moderna de FAQ usando o módulo Toggle para consolidar suas perguntas e respostas.

module toggle divi.gif

Agora que você já viu o módulo rocker em ação, mergulhe em TODAS as suas configurações nas seções abaixo. Fornecemos uma visão geral detalhada do que você encontrará em cada guia dos parâmetros do módulo e uma explicação do que cada um está fazendo.

Os parâmetros de conteúdo do módulo Toggle

parâmetros flip-flops divi.png

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

A aba de conteúdo do módulo de alternância é organizada nos seguintes grupos de parâmetros (que também se alternam!).

texto

É aqui que você pode adicionar o título e o conteúdo da alternância.

estado

Você pode escolher se deseja ou não que seu botão apareça aberto ou fechado por padrão com essa configuração.

contexto

Aqui, você pode alterar a cor de fundo quando o flip-flop estiver aberto e a cor de fundo quando estiver fechada. Você também pode facilmente torná-los iguais, definindo a opção de cor de fundo. Há também a opção de definir ou baixar uma imagem de fundo.

Rótulo de administração

Por padrão, seu módulo de alternância aparecerá com uma tag que diz "Alternar" no gerador. A guia Admin permite que você altere essa tag para fácil identificação.

Os parâmetros de design do módulo rocker

design de opção toggle wordpress.png

Os parâmetros de design do módulo de alternância foram agrupados nas listas suspensas a seguir na guia Design.

ícone

É aqui que você pode alterar a cor do ícone de alternância.

texto

Aqui você pode definir a cor para texto de alternância aberto e fechado.

Texto do título

Aqui você pode ajustar a fonte do texto do título, peso, tamanho, cor, espaçamento, altura da linha e mais.

corpo de texto

Aqui você pode ajustar a fonte, peso, tamanho, cor, espaçamento, altura da linha e muito mais.

fronteiras

Aqui você pode optar por usar uma borda. E se você optar por usar uma borda, também poderá selecionar sua cor, alterar sua largura e escolher seu estilo.

espaçamento

Na área Espaçamento, você pode adicionar preenchimento personalizado à parte superior, direita, inferior ou à esquerda da escala. Você também pode alterar esses valores para desktops, tablets ou dispositivos móveis.

Configurações avançadas do módulo de alternância

parâmetro de flip-flop divi.png

Na guia Avançado do seu módulo flip, você pode adicionar um ID e uma classe css exclusivos. Você também pode adicionar css personalizado a vários seletores css predefinidos (e pré-selecionados) no módulo de cursor de vídeo da lista suspensa css personalizada. Por fim, na lista suspensa de visibilidade, você pode ajustar a visibilidade do seu módulo em telefones, tablets e desktops.

Isso é tudo para este Tutoriel, Espero que ajude você a usar melhor o módulo Divi Toggle.

Outros tutoriais Divi

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
17 ações
ação8
chilrear3
Enregistrer6
Whatsapp