Ir para o conteúdo principal

Tutorial Divi: Como usar o módulo Rate Tables

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]

É mais fácil do que nunca criar gráficos de preços para seus produtos on-line. Crie quantas tabelas quiser e controle os preços e recursos de cada um com o módulo Rate Tables do seu tema WordPress Divi. Você pode até sugerir um plano específico para aumentar as conversões. Mesmo que o seu módulo inclua várias tabelas de preços, ele será tratado como um único módulo e poderá ser colocado em qualquer tamanho de coluna.

Como adicionar um módulo de tabela de taxas à sua página

Antes de adicionar um módulo de tabela de preços à sua página, você deve primeiro entrar no 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 Use o Visual Builder quando você navega no seu site em primeiro plano, se estiver conectado ao seu painel do WordPress.

Tabelas de Preços do Módulo

Depois de inserir o 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.

divi wordpress price chart.png

Localize o módulo da tabela de preços 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 a palavra "tabelas de preços" e clicar em "entrar" para pesquisar e adicionar automaticamente o módulo de tabela de preços! Depois de adicionar o módulo, você será saudado pela lista de opções de módulos. Essas opções são separadas em três grupos principais: Conteúdo , Projeto et avançado .

Caso de uso: adicionar uma tabela de preços para uma página de produto

Quando você promove seus produtos em uma página de destino, os gráficos de preços podem mostrar de maneira eficiente suas diferentes opções de preços.

Neste exemplo, eu vou adicionar um módulo de tabela de preços para a exibição de três planos de preços (ou tabelas) com um desses planos que se destaca como uma característica plano para aumentar as conversões.

Tabela de preços WordPress divi.jpg

Primeiro, adicione uma nova seção regular à página onde as tabelas de preços devem ser exibidas. Adicione uma linha de largura total (coluna 1) à seção e insira um módulo Tabelas de cálculo de preço na linha.

linha de tabela de preços divi.png

Nas configurações da tabela de preços, na guia Conteúdo, clique em + Adicionar um novo item para adicionar sua primeira tabela.

nova coluna price chart.png

Atualize os parâmetros da tabela de preços da seguinte forma:

Opções de conteúdo

Título: Moeda Pessoal: $ Por: Ano Preço: Botão 69 Texto: Conteúdo da Inscrição:
Acesso a todas as atualizações de temas de perpétua tema premium Suporte -Acesso técnico a todos os -limas beliche plugins do Photoshop -Sem taxa anual
URL do botão: [digite o URL do botão] Background: #ffffff

Opções de design

a cor do texto preço: # 3e51b5 usar estilos personalizados para o botão: SIM texto do botão Cor: cor #ffffff Button: #3e51b5 Largura Knob: 0px

Salvar configurações

gráfico de preços divi wordpress example.png

Agora, duplique a tabela de preços que você acabou de criar duas vezes para ter três tabelas de preços no total.

criação de vários exemplos de tableau.jpg

Para a tabela de preços intermediários, atualize as seguintes opções:

Guia Conteúdo

Título: Desenvolvedor Preço: 89 Conteúdo: Acesso a todos os temas Atualizações de Tema Perpétuo Suporte Técnico Premium Acesso a todos os arquivos em camadas do Photoshop - sem taxas anuais Botão URL: [digite o botão URL]

Guia Design

Cor do texto: #0091ca Cor do botão: #0091ca

Para a terceira tabela de preços, atualize as configurações da seguinte maneira:

Guia Conteúdo

Título: Lifetime Preço: 249 Button Text: Entrar conteúdo: Acesso a todas as atualizações temas de perpétua tema premium acessar o suporte técnico para todas as camadas botão Photoshop plugins Arquivos Nenhuma taxa URL anual: [inserir a URL do botão]

Salvar configurações

Agora retorne às configurações da tabela de preços e atualize o seguinte:

Opções de conteúdo

Cor de fundo da tabela em destaque: #0091ca

Opções de design

Cor da bola: # 3e51b5 Cor da tabela em destaque: #0091ca

resultado da tabela de preços divi.jpg

Salvar configurações

Agora volte e edite as configurações da seção para dar à seção uma cor de fundo de #3e51b5.

Isso é tudo. Agora você tem uma tabela de preços com três opções com a opção do meio definida como um item destacado que se destaca do restante.

tabela de preços opção divi.jpg

Opções de conteúdo para tabelas de preços

Na aba de conteúdo, você encontrará todos os elementos de conteúdo do módulo, como texto, imagens e ícones. Tudo o que controla o que aparece no seu módulo será sempre encontrado nesta aba.

tabela de preços design option.png

+ Adicionar um novo artigo

É aí que você adiciona novas tabelas de preços ao seu módulo. Clicar em "+ adicionar novo item" abrirá uma nova lista de opções de design específicas para essa tabela de preços. Veja abaixo os parâmetros individuais da tabela de preços.

Depois de adicionar sua primeira guia, uma barra cinza aparecerá com o título da tabela de preços na forma de um marcador. A barra cinza também possui três botões que permitem editar, duplicar ou excluir a tabela.

Mostrar bala

Por padrão, os itens nas tabelas de preços são exibidos como listas com marcadores. Se você quiser remover os marcadores da lista de recursos, poderá desabilitar essa opção.

Cor de fundo da tabela em destaque

Cada tabela de preços pode ser "apresentada". As pinturas em destaque são destacadas na linha, o que as distingue das outras opções. Ao usar essa configuração, você pode alterar a cor do plano de fundo somente para as tabelas em destaque.

Cor de fundo do cabeçalho da tabela

Acima de cada tabela de preços está uma área de cabeçalho que inclui o título e subtítulo de sua tabela. Você pode controlar a cor de fundo desta área, independentemente da cor de fundo da tabela principal, selecionando a cor desejada no seletor de cores.

Cabeçalho da tabela em destaque

Cada gráfico de preço pode ser "apresentado". As pinturas em destaque são destacadas na linha, o que as distingue das outras opções. Ao usar essa configuração, você pode alterar a cor do plano de fundo do cabeçalho apenas para tabelas selecionadas.

Cor de fundo

Por padrão, as tabelas de preços têm uma cor de plano de fundo branco. Se você quiser usar uma cor diferente para o plano de fundo do seu gráfico de preços, poderá definir sua cor personalizada aqui usando o seletor de cores.

Rótulo de administração

Isso mudará o rótulo do módulo no construtor para fácil identificação. Quando você usa a exibição WireFrame no Visual Builder, esses rótulos aparecem no bloco do módulo da interface do Divi Builder.

Opções de design de tabela de preços

Na guia Design, você encontrará todas as opções de estilo do módulo, como fontes, cores, tamanho e espaçamento. Esta é a guia que você usará para alterar a aparência do seu módulo. Cada módulo Divi possui uma longa lista de parâmetros de design que você pode usar para alterar qualquer coisa.

array design option.png

alignement

Por padrão, as listas de recursos são alinhadas à esquerda na tabela de preços. Se você quiser alinhá-los, poderá ativar essa opção.

Remova a sombra da tabela em destaque

Por padrão, as tabelas de preços têm uma sombra sutil por trás de cada tabela. Se você quiser remover essa sombra, você pode ativar essa opção.

Artigos da lista no centro

Aqui você pode optar por centralizar os itens listados em sua tabela.

Cor da bola

Por padrão, os marcadores na tabela de preços herdarão a cor de destaque do seu tema. Se você quiser usar uma cor diferente, pode defini-la aqui usando o seletor de cores.

Cor da tabela em destaque

Se você quiser usar uma cor diferente para marcadores nos gráficos de preços, poderá definir essa cor aqui usando o seletor de cores.

Cor do texto do cabeçalho da tabela em destaque

Esta opção controla a cor da cor do texto do cabeçalho da sua tabela. Se você alterar a cor do plano de fundo do cabeçalho da tabela, também poderá alterar essa opção para garantir a legibilidade.

Polícia na liderança

Você pode alterar a fonte do texto do cabeçalho selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhado.

Tamanho da fonte do cabeçalho

Aqui você pode ajustar o tamanho do seu texto de cabeçalho. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor do tamanho de texto desejado diretamente no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

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]

Cor do texto do cabeçalho

Por padrão, todas as cores de texto em Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do texto do cabeçalho, escolha a cor desejada no seletor de cores usando essa opção.

Espaçamento de papel timbrado

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra no texto do cabeçalho, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Altura da linha de cabeçalho

A altura da linha afeta o espaço entre cada linha do seu texto do cabeçalho Se você quiser aumentar o espaço entre cada linha, use o controle deslizante intervalo para ajustar o espaço ou digite o tamanho desejado no espaçamento campo de entrada à direita do cursor. Os campos de entrada suportar diferentes unidades de medida, o que significa que você pode digitar "px" ou "em", dependendo do valor do seu tamanho para alterar o tipo de unidade.

Cor do texto da tabela em destaque

Isso muda a cor do texto do corpo para sua pintura em destaque. Se você alterar a cor do plano de fundo da sua tabela, talvez seja necessário alterar essa opção para garantir a legibilidade.

Fonte do corpo

Você pode alterar a fonte do seu corpo selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhadas.

Tamanho da fonte do corpo

Aqui você pode ajustar o tamanho do texto do seu corpo. Você pode arrastar o controle deslizante de gama para aumentar ou diminuir o tamanho do texto ou insira o valor do tamanho do texto desejado no campo de entrada à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Cor do texto do corpo

Por padrão, todas as cores de texto em Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do seu texto, escolha a cor desejada no seletor de cores usando esta opção.

Espaçamento de letras do corpo

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra em seu texto, use o controle deslizante intervalo para ajustar o espaço ou digite o tamanho espaçamento desejado no campo de entrada à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Altura da linha do corpo

A altura da linha afeta o espaço entre cada linha de texto em seu corpo Se você quiser aumentar o espaço entre cada linha, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho do espaço desejado no campo de entrada localizado à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Cor do texto da legenda da tabela

Isso muda a cor do texto das legendas para sua pintura em destaque. Se você alterar a cor do plano de fundo da sua tabela, talvez seja necessário alterar essa opção para garantir a legibilidade.

Fonte de legendas

Você pode alterar a fonte do texto da sua legenda selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhado.

Tamanho da fonte das legendas ou subtítulos

Aqui você pode ajustar o tamanho do texto do seu sub-cabeçalho. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor do tamanho de texto desejado diretamente no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Cor do texto do sub-cabeçalho

Por padrão, todas as cores de texto Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do texto das legendas, escolha a cor desejada no seletor de cores usando essa opção.

Espaçamento de letras secundárias

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra em seu texto de legenda, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Altura da linha de sub-cabeçalho

A altura da linha afeta o espaço entre cada linha do texto da sua legenda. Se você quiser aumentar o espaço entre cada linha, use o controle deslizante intervalo para ajustar o espaço ou digite o tamanho espaçamento desejado no campo de entrada à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Moeda e Frequência de Moeda

Você pode alterar a fonte da moeda e o texto da frequência selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhadas.

Tamanho da fonte da moeda e frequência

Aqui você pode ajustar o tamanho de sua moeda e seu texto de frequência. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor do tamanho de texto desejado diretamente no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Cor e frequência do texto da moeda

Por padrão, todas as cores de texto Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do seu texto de moeda e frequência, escolha a cor desejada no seletor de cores usando essa opção.

Espaçamento de letras e moedas

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra na sua moeda ea frequência de texto, use o controle deslizante intervalo para ajustar o espaço ou digite o tamanho espaçamento desejado no campo de entrada à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Linha de moeda de frequência

A altura da linha afeta o espaço entre cada linha da moeda e o texto da frequência Se você quiser aumentar o espaço entre cada linha, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo entrada à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Preço de cor em destaque

Isso muda a cor dos preços para sua pintura em destaque. Se você alterar a cor do plano de fundo da sua tabela, talvez seja necessário alterar essa opção para garantir a legibilidade.

Polícia de Preços

Você pode alterar a fonte do texto do preço selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhado.

Tamanho da fonte de preço

Aqui você pode ajustar o tamanho do seu texto de preço. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor do tamanho de texto desejado diretamente no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Cor do texto de preço

Por padrão, todas as cores de texto Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do seu texto de preço, escolha a cor desejada no seletor de cores usando essa opção.

Espaçamento de cartas de preços

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra em seu texto de preço, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Altura da linha de preço

Altura da linha afeta o espaço entre cada linha do seu texto de preço Se você quiser aumentar o espaço entre cada linha, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada localizado à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Use a fronteira

Ativar esta opção colocará uma borda ao redor do seu módulo. Essa borda pode ser personalizada usando os seguintes parâmetros condicionais.

Cor da fronteira

Esta opção afeta a cor da sua borda. Selecione uma cor personalizada no seletor de cores para aplicá-la à sua borda.

Largura da fronteira

Por padrão, as bordas têm uma largura de 1 pixel. Você pode aumentar esse valor arrastando o controle deslizante de intervalo ou inserindo um valor personalizado no campo de entrada à direita do controle deslizante. Unidades de medição personalizadas suportadas, o que significa que você pode alterar a unidade padrão de "px" para outra coisa, como em, vh, vw etc.

Estilo da beira

As bordas suportam oito estilos diferentes: sólido, pontilhado, duplo, sulco, crista, chave e início. Selecione o estilo desejado no menu suspenso para aplicá-lo à sua borda.

Use estilos personalizados para o botão

A ativação dessa opção revela diferentes configurações de personalização para os botões que você pode usar para alterar a aparência do botão no seu módulo.

Tamanho do texto do botão

Essa configuração pode ser usada para aumentar ou diminuir o tamanho do texto no botão. O botão muda conforme o tamanho do texto aumenta e diminui.

Cor do texto do botão

Por padrão, os botões adotam a cor de destaque do tema, conforme definido no personalizador do tema. Esta opção permite atribuir uma cor de texto personalizada ao botão neste módulo. Selecione sua cor personalizada usando o seletor de cores para alterar a cor do botão.

Cor de fundo do botão

Por padrão, os botões têm uma cor de plano de fundo transparente. Isso pode ser alterado selecionando a cor de fundo desejada no seletor de cores.

Largura da borda do botão

Todos os botões Divi possuem uma borda 2px padrão. Essa borda pode ser aumentada ou diminuída usando esse parâmetro. As bordas podem ser excluídas inserindo um valor de 0.

Cor da borda do botão

Por padrão, as bordas dos botões mudam para a cor de destaque do tema, conforme definido no personalizador do tema. Essa opção permite atribuir uma cor de borda personalizada ao botão neste módulo. Selecione sua cor personalizada usando o seletor de cores para alterar a cor da borda do botão.

Raio da borda do botão

O raio da borda afeta a redondeza dos cantos dos seus botões. Por padrão, os botões em Divi têm um pequeno raio de borda que arredonda os cantos dos 3 pixels. Você pode reduzir esse valor para 0 para criar um botão quadrado ou aumentá-lo significativamente para criar botões com bordas circulares.

Espaçamento das letras do botão

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra no texto do botão, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Polícia de Boutton

Você pode alterar a fonte do texto do botão selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhado.

Adicionar ícone do botão

Desabilitado, essa configuração removerá os ícones do seu botão. Por padrão, todos os botões Divi exibem um ícone de seta.

Ícone de botão

Se os ícones estiverem ativados, você poderá usar essa configuração para escolher o ícone a ser usado no seu botão. Divi tem ícones diferentes para escolher.

Cor do ícone do botão

Definir essa configuração mudará a cor do ícone que aparece no seu botão. Por padrão, a cor do ícone é igual à cor do texto de seus botões, mas essa configuração permite ajustar a cor de forma independente.

Colocar o ícone do botão

Você pode optar por exibir o ícone do seu botão à esquerda ou à direita do seu botão.

Mostrar apenas o ícone quando o botão rola

Por padrão, os ícones de botão são exibidos apenas durante a rolagem. Se você quiser que o ícone apareça sempre, desative essa configuração.

Cor do texto no viaduto do botão

Quando o botão é passado pelo mouse de um visitante, essa cor será usada. A cor mudará da cor base definida nas configurações anteriores.

Cor do plano de fundo do botão suspenso

Quando o botão é passado pelo mouse de um visitante, essa cor será usada. A cor mudará da cor base definida nas configurações anteriores.

Botão de limite de cores em cores

Quando o botão é passado pelo mouse de um visitante, essa cor será usada. A cor mudará da cor base definida nas configurações anteriores.

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]

Botão do raio da beira do pairo

Quando o botão é passado pelo mouse de um visitante, esse valor será usado. O valor será alterado a partir do valor base definido nos parâmetros anteriores.

Botão de espaçamento de notas pontiagudas

Quando o botão é passado pelo mouse de um visitante, esse valor será usado. O valor será alterado a partir do valor base definido nos parâmetros anteriores.

Opções de cartão de taxa avançada

Na guia avançada, você encontrará opções que os designers da Web mais experientes podem achar úteis, como atributos CSS e HTML personalizados. Aqui você pode aplicar CSS personalizado a um dos muitos elementos do módulo. Você também pode aplicar classes personalizadas e IDs CSS ao módulo, que pode ser usado para personalizar o módulo no arquivo style.css de seu tema filho.

opções avançadas divi price chart.png

ID CSS

Digite um identificador CSS opcional para usar neste módulo. Um ID pode ser usado para criar um estilo CSS personalizado ou para criar links para seções específicas de sua página.

Classe CSS

Digite as classes CSS opcionais para usar neste módulo. Uma classe CSS pode ser usada para criar um estilo CSS personalizado. Você pode adicionar várias classes, separadas por um espaço. Essas classes podem ser usadas em seu tema filho Divi ou na folha de estilo CSS personalizada que você adiciona à sua página ou site usando as opções de tema Divi ou as configurações da página Divi Builder.

CSS personalizado

O CSS personalizado também pode ser aplicado ao módulo e a um dos elementos internos do módulo. Na seção CSS personalizado, você encontrará um campo de texto no qual é possível adicionar folhas de estilo CSS personalizadas diretamente a cada elemento. As entradas CSS nesses parâmetros já estão agrupadas nas tags de estilo. Então, basta inserir regras CSS separadas por ponto e vírgula.

visibilidade

Esta opção permite controlar os dispositivos nos quais seu módulo aparece. Você pode optar por desativar seu módulo em tablets, smartphones ou desktops individualmente. Isso é útil se você quiser usar módulos diferentes em dispositivos diferentes ou se quiser simplificar o design móvel eliminando determinados elementos da página.

Opções de conteúdo de tabelas de preços individuais

preço de seção individual table.png

Título

O título que você inserir aqui será usado para essa opção de preço (Premium).

subtítulo

A legenda que você inserir aqui aparecerá abaixo do seu título.

Inventar

Digite o símbolo da moeda desejada aqui.

por

Se o seu preço é baseado em uma assinatura, insira o ciclo de assinatura aqui (por exemplo, Ano).

Preço

Digite o valor do produto aqui.

Texto do botão

Especifique o texto do botão aqui.

Conteúdo

Este campo é onde você pode inserir a lista de recursos que vêm ou não vêm com o produto. Separe cada item da lista em uma nova linha e inicie cada linha com um símbolo + ou -. A + especifica uma funcionalidade incluída, enquanto A - especifica uma característica excluída.

URL do botão

Na parte inferior de cada tabela, você pode inserir um botão Chamar para ação inserindo um URL da Web válido nesse campo. Deixe isso e o
Campo de texto do botão vazio se você não quiser ter um botão na tabela de preços.

Cor de fundo

Defina uma cor de fundo personalizada para o seu módulo ou deixe em branco para usar a cor padrão.

Opções de design para tabelas de preços individuais

coluna de preço estilo divi.png

Tornar esta tabela em destaque

Escolha para colocar esta tabela de preços à frente ou não com este menu suspenso. Isso permitirá que a pintura se destaque do resto.

Cor do artigo excluído

Para os itens da sua lista que foram definidos como excluídos usando o símbolo -, você pode ajustar a cor usando essa configuração. Por exemplo, você pode querer alterar a cor para vermelho ou reduzir sua opacidade para indicar visualmente que os itens são excluídos do pacote atual.

Fonte de cabeçalho

Você pode alterar a fonte do texto do cabeçalho selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhadas.

Tamanho da fonte do cabeçalho

Aqui você pode ajustar o tamanho do seu texto de cabeçalho. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor do tamanho de texto desejado diretamente no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Cor do texto do cabeçalho

Por padrão, todas as cores de texto Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do texto do cabeçalho, escolha a cor desejada no seletor de cores usando essa opção.

Espaçamento de letras no cabeçalho

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra no texto do cabeçalho, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Altura da linha de cabeçalho

A altura da linha afeta o espaço entre cada linha do seu texto do cabeçalho Se você quiser aumentar o espaço entre cada linha, use o controle deslizante intervalo para ajustar o espaço ou digite o tamanho desejado no espaçamento campo de entrada à direita do cursor. Os campos de entrada suportar diferentes unidades de medida, o que significa que você pode digitar "px" ou "em", dependendo do valor do seu tamanho para alterar o tipo de unidade.

Fonte do corpo

Você pode alterar a fonte do seu corpo selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhadas.

Tamanho da fonte do corpo

Aqui você pode ajustar o tamanho do texto do seu corpo. Você pode arrastar o controle deslizante de gama para aumentar ou diminuir o tamanho do texto ou insira o valor do tamanho do texto desejado no campo de entrada à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Cor do texto do corpo

Por padrão, todas as cores de texto Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do seu texto, escolha a cor desejada no seletor de cores usando esta opção.

Espaçamento de letras do corpo

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra em seu texto, use o controle deslizante intervalo para ajustar o espaço ou digite o tamanho espaçamento desejado no campo de entrada à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Altura da linha do corpo

A altura da linha afeta o espaço entre cada linha de texto em seu corpo Se você quiser aumentar o espaço entre cada linha, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho do espaço desejado no campo de entrada localizado à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Fonte de legendas

Você pode alterar a fonte do texto da sua legenda selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhadas.

Tamanho da fonte da legenda

Aqui você pode ajustar o tamanho do texto do seu sub-cabeçalho. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor do tamanho de texto desejado diretamente no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Cor do texto da legenda

Por padrão, todas as cores de texto Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do texto das legendas, escolha a cor desejada no seletor de cores usando essa opção.

Espaçamento de letras de legenda

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra em seu texto de legenda, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Altura da linha de legendas

A altura da linha afeta o espaço entre cada linha do texto da sua legenda. Se você quiser aumentar o espaço entre cada linha, use o controle deslizante intervalo para ajustar o espaço ou digite o tamanho espaçamento desejado no campo de entrada à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Moeda e Frequência de Moeda

Você pode alterar a fonte da moeda e o texto da frequência selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhadas.

Tamanho da fonte para moeda e frequência

Aqui você pode ajustar o tamanho de sua moeda e seu texto de frequência. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor do tamanho de texto desejado diretamente no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Cor do texto para moeda e frequência

Por padrão, todas as cores de texto Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do seu texto de moeda e frequência, escolha a cor desejada no seletor de cores usando essa opção.

Espaçamento de letras e moedas

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra na sua moeda ea frequência de texto, use o controle deslizante intervalo para ajustar o espaço ou digite o tamanho espaçamento desejado no campo de entrada à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Moeda e linha de frequência

A altura da linha afeta o espaço entre cada linha da moeda e o texto da frequência Se você quiser aumentar o espaço entre cada linha, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo entrada à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Política de Preços

Você pode alterar a fonte do texto do preço selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhadas.

Tamanho da fonte do preço

Aqui você pode ajustar o tamanho do seu texto de preço. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor do tamanho de texto desejado diretamente no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Cor do texto de preço

Por padrão, todas as cores de texto Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do seu texto de preço, escolha a cor desejada no seletor de cores usando essa opção.

Espaçamento de cartas de preços

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra em seu texto de preço, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Altura da linha de preço

Altura da linha afeta o espaço entre cada linha do seu texto de preço Se você quiser aumentar o espaço entre cada linha, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada localizado à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Use estilos personalizados para o botão

A ativação dessa opção revela diferentes configurações de personalização para os botões que você pode usar para alterar a aparência do botão no seu módulo.

Tamanho do texto do botão

Essa configuração pode ser usada para aumentar ou diminuir o tamanho do texto no botão. O botão muda conforme o tamanho do texto aumenta e diminui.

Cor do texto do botão

Por padrão, os botões adotam a cor de destaque do tema, conforme definido no personalizador do tema. Esta opção permite atribuir uma cor de texto personalizada ao botão neste módulo. Selecione sua cor personalizada usando o seletor de cores para alterar a cor do botão.

Cor de fundo do botão

Por padrão, os botões têm uma cor de plano de fundo transparente. Isso pode ser alterado selecionando a cor de fundo desejada no seletor de cores.

Largura da borda do botão

Todos os botões Divi têm uma borda de 2px por padrão. Essa borda pode ser aumentada ou diminuída usando esse parâmetro. As bordas podem ser excluídas inserindo um valor de 0.

Cor da borda do botão

Por padrão, as bordas dos botões mudam para a cor de destaque do tema, conforme definido no personalizador do tema. Essa opção permite atribuir uma cor de borda personalizada ao botão neste módulo. Selecione sua cor personalizada usando o seletor de cores para alterar a cor da borda do botão.

Raio da borda do botão

O raio da borda afeta a redondeza dos cantos dos seus botões. Por padrão, os botões em Divi têm um pequeno raio de borda que arredonda os cantos dos 3 pixels. Você pode reduzir esse valor para 0 para criar um botão quadrado ou aumentá-lo significativamente para criar botões com bordas circulares.

Espaçamento de letras de botão

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra no texto do botão, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Fonte do botão

Você pode alterar a fonte do texto do botão selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhadas.

Adicione um ícone ao botão

Desabilitado, essa configuração removerá os ícones do seu botão. Por padrão, todos os botões Divi exibem um ícone de seta no foco.

Ícone de botão

Se os ícones estiverem ativados, você poderá usar essa configuração para escolher o ícone a ser usado no seu botão. Divi tem ícones diferentes para escolher.

Cor do ícone do botão

Definir essa configuração mudará a cor do ícone que aparece no seu botão. Por padrão, a cor do ícone é igual à cor do texto de seus botões, mas essa configuração permite ajustar a cor de forma independente.

Colocar o botão do ícone

Você pode optar por exibir o ícone do seu botão à esquerda ou à direita do seu botão.

Mostrar apenas o ícone quando o botão rola

Por padrão, os ícones de botão são exibidos apenas durante a rolagem. Se você quiser que o ícone apareça sempre, desative essa configuração.

Cor do texto no viaduto do botão

Quando o botão é passado pelo mouse de um visitante, essa cor será usada. A cor mudará da cor base definida nas configurações anteriores.

Cor de fundo do botão no viaduto

Quando o botão é passado pelo mouse de um visitante, essa cor será usada. A cor mudará da cor base definida nas configurações anteriores.

Cor da borda no viaduto

Quando o botão é passado pelo mouse de um visitante, essa cor será usada. A cor mudará da cor base definida nas configurações anteriores.

Raio da borda do botão na visão geral

Quando o botão é passado pelo mouse de um visitante, esse valor será usado. O valor será alterado a partir do valor base definido nos parâmetros anteriores.

Espaçamento das letras do botão no viaduto

Quando o botão é passado pelo mouse de um visitante, esse valor será usado. O valor será alterado a partir do valor base definido nos parâmetros anteriores.

Opções Avançadas da Tabela de Preços Individuais

opção avançada divi.png

CSS personalizado

O CSS personalizado também pode ser aplicado ao módulo e a um dos elementos internos do módulo. Na seção CSS personalizado, você encontrará um campo de texto no qual é possível adicionar folhas de estilo CSS personalizadas diretamente a cada elemento. As entradas CSS nesses parâmetros já estão agrupadas nas tags de estilo. Então, basta inserir regras CSS separadas por ponto e vírgula.

Outros tutoriais Divi

Este artigo contém comentários 2
  1. Bom Dia,
    Obrigado por este artigo muito específico e detalhado. Eu sou novo em usar o construtor DIVI e acho que depois de criar minha tabela de preços 3, a visualização móvel é um desastre (colunas 2 extra-estreitas e uma terceira na linha ...).
    Existe uma maneira (diferente de duplicar a tabela e ocultá-la) para definir isso como no Bootstrap, por exemplo (dar uma coluna a largura de 33% na área de trabalho e 100% no celular)?
    Merci pour votre aide.

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
6 ações
ação2
chilrear1
Enregistrer3
Whatsapp