Uma das páginas de destino exclusivas que oferecemos como membros vitalícios e novos clientes da Black Friday é a impressionante página de destino de Venda de software. Esta página de destino o surpreenderá com seus divisores de seção exclusivos e maquetes de alta qualidade. Neste artigo, mostraremos como usar o recurso de conteúdo dinâmico do Divi para adicionar tabelas dinâmicas de preços a ele!

Se você é um cliente vitalício atual ou se comprou uma nova conta ou fez um upgrade durante a nossa Promoção da Black Friday, você pode baixar este layout agora mesmo.

Obtenha a página inicial exclusiva da Black Friday Software Sale

Antes de entrar neste caso de uso, você precisará colocar suas mãos na página inicial exclusiva da Black Friday Software Sale, que você pode obter ao se tornar um novo membro Elegant Themes, atualizar sua conta existente ou já ser um membro vitalício conosco. Se você realmente já é um membro vitalício, pode fazer login em nossa área de membros e baixar todas as nossas páginas de destino exclusivas aqui. Todos os outros precisarão usar o botão abaixo para comprar ou atualizar antes de seguirem com o resto do nosso tutorial.

Reivindique o acordo antes que desapareça!

Usando como criar tabelas de preços dinâmicas com Divi

No restante desta postagem, presumiremos que você tirou proveito de nosso negócio da Black Friday ou que já é um membro vitalício e tem acesso à página inicial de vendas de software da Black Friday

Depois de fazer o download da nova página inicial de venda de software de nossa área de membros, você pode assistir ao vídeo abaixo para ver como é fácil de configurar. Também encorajamos você a seguir este tutorial para preparar seu site para novas personalizações.

Neste caso de uso, vamos mostrar como criar tabelas de preços dinâmicas com Divi e o plugin Advanced Custom Fields gratuito. Criar tabelas de preços dinâmicas é ótimo se você tem um cliente que altera os preços das assinaturas com frequência e deseja permitir que eles próprios alterem sem acessar o Divi. Isso ajudará você a garantir que eles não bagunçam nada na própria página, ao mesmo tempo em que podem alterar o preço, a descrição e o nível de assinatura de um determinado pacote.

Antevisão

Antes de mergulharmos nisso, vamos dar uma olhada rápida no resultado final.

Vamos começar!

Instale o plugin de campos personalizados avançados

A primeira coisa que você precisa fazer é instalar o plug-in Campos personalizados avançados em seu site WordPress acessando Plug - ins> Adicionar novo> Procurando o plug-in e instalando-o .

Criar Novo Grupo de Campo

Depois de ativar o plugin, você pode começar. Adicione um novo grupo de campo.

Nome + Localização

Dê um nome ao seu novo grupo de campo. Lembre-se de que, ao final desta parte do tutorial, você terá três grupos de campos (igual ao número de tabelas de preços), portanto, certifique-se de nomeá-los corretamente. Altere também as configurações de localização deste grupo de campos.

Adicionar Campo de Nível de Sócio

É hora de começar a adicionar campos! Precisaremos de três no total. Adicione um campo de nível de associação usando as seguintes configurações:

• Rótulo do campo: Nível 1 de sócios
• Nome do campo: Membership_level_1
• Tipo de campo: Selecione
• Escolhas: adicionar conteúdo de sua escolha

Adicionar campo de descrição de membro

Continue adicionando um campo de descrição de associação.

• Rótulo de campo: Descrição de membro 1
• Nome do campo: membership_description_1
• Tipo de campo: Texto

Adicionar campo de preço

O último campo de que você precisa é um campo de preço.

• Etiqueta do campo: Preço 1
• Nome do campo: price_1
• Tipo de campo: Texto

Duplicar grupo de campos duas vezes e ajustar o nome e os campos ao número da tabela de preços

Um grupo de campo é igual a uma tabela de preços em nossa página. Agora que terminamos o primeiro, podemos prosseguir e cloná-lo duas vezes para garantir que temos grupos de campo suficientes para corresponder ao número de tabelas de preços em nossa página.

Alterar o número de todos os campos dentro do grupo

Cada um dos campos dinâmicos que você cria será mostrado no Visual Builder. Para se certificar de que você sabe a quais informações está vinculando, dê aos grupos de campos duplicados e seus campos um número diferente.

Crie uma nova página usando a página inicial de venda de software da Divi

Na próxima parte deste tutorial, iremos adicionar as tabelas dinâmicas de preços à nossa página inicial de vendas de software. Crie uma nova página usando este layout.

Adicionar conteúdo dinâmico à página

Volte para o back-end desta página e adicione conteúdo dinâmico a cada uma das tabelas de preços.

Adicionar nova linha abaixo da tabela de preços na página

Estrutura da Coluna

Continue ativando o Visual Builder e adicionando uma nova linha aqui:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e altere as configurações de dimensionamento.

• Usar largura de calha personalizada: Sim
• Largura da calha: 1

Espaçamento

Em seguida, vá para as configurações de espaçamento e adicione alguma margem personalizada.

• Margem superior: 100px
• Margem inferior: 100px

Adicionar Módulo CTA à Coluna 1

Conecte o campo de título ao conteúdo dinâmico de nível 1 de associação

O primeiro módulo de que precisaremos na coluna 1 é um Módulo de Chamada para Ação. Vincule o campo de título ao campo Nível 1 de associação que você criou na parte anterior deste tutorial.

Conecte a caixa de conteúdo ao conteúdo dinâmico da descrição 1 do membro

Da mesma forma, conecte a caixa de conteúdo à Descrição de Associação 1.

Cor de fundo

Em seguida, vá para as configurações de fundo e altere a cor de fundo do Módulo CTA.

• Cor de fundo: #ffffff

Imagem de fundo

Adicione também uma imagem de fundo sutil. Você poderá encontrar a seguinte imagem de plano de fundo em sua Biblioteca de mídia depois de enviar a página inicial de venda de software:

• Imagem de fundo: software-sale-13.png

Configurações de texto

Continue indo para as configurações de texto e alterando a orientação do texto do módulo.

• Orientação do Texto: Esquerda

Configurações de texto do título

Para corresponder ao estilo de design da página de destino, faça algumas alterações nas configurações do texto do título também.

• Fonte do título: Rubik
• Peso da fonte do título: leve
• Cor do texto do título: # 4258ff
• Tamanho do texto do título: 40px
• Altura da linha do título: 1,3em

Configurações do corpo do texto

O mesmo vale para as configurações do corpo do texto.

• Fonte do corpo: Rubik
• Peso da fonte do corpo: médio
• Cor do corpo do texto: rgba (0,0,0,0.34)
• Tamanho do corpo do texto: 15px
• Altura da linha corporal: 1,8em

Espaçamento

Adicione um pouco de preenchimento superior a seguir.

• Enchimento superior: 60px

Fronteira

E adicione '8px' a cada um dos cantos superiores do módulo.

Sombra da caixa

Por último, mas não menos importante, adicionaremos uma sombra de caixa sutil para criar profundidade na página.

• Posição vertical da sombra da caixa: 50 px
• Força do desfoque de sombra da caixa: 100 px
• Cor da sombra: rgba (66,88,255,0,2)

Adicionar Módulo de Texto à Coluna 1

Conecte a caixa de conteúdo ao conteúdo dinâmico de preço 1

Vá em frente e adicione um Módulo de Texto logo abaixo do Módulo de Chamada para Ação na coluna 1. Vincule a caixa de conteúdo deste módulo ao conteúdo dinâmico Preço 1.

Cor de fundo

Continue alterando a cor de fundo deste módulo.

• Cor de fundo: #ffffff

Configurações de texto

Modifique as configurações de texto também.

• Fonte do texto: Rubik
• Peso da fonte do texto: leve
• Cor do texto: # 4258ff
• Tamanho do texto: 70px
• Altura da linha de texto: 1em

Espaçamento

Adicione alguns valores de preenchimento personalizados a seguir.

• Preenchimento inferior: 60px
• Preenchimento esquerdo: 40px

Fronteira

Continue indo para as configurações de borda e adicionando '8px' a ambos os cantos inferiores.

Sombra da caixa

Por último, mas não menos importante, dê a este Módulo de Texto uma sombra de caixa também.

• Posição vertical da sombra da caixa: 80px
• Força do desfoque de sombra da caixa: 100 px
• Cor da sombra: rgba (66,88,255,0,2)

Arraste o Módulo do Botão para a Coluna 1

O último módulo de que precisaremos na primeira coluna é um Módulo de botão. Clone um dos Módulos de botão que você pode encontrar na linha anterior e coloque-o na coluna 1.

Alterar espaçamento

Abra as configurações do Módulo de botão e adicione alguma margem personalizada.

• Margem superior: 30px
• Marign inferior: 50px

Clone todos os módulos na coluna 1 e coloque nas colunas restantes

Para economizar tempo, vamos clonar todos os três módulos na coluna 1 duas vezes e colocar as duplicatas nas colunas restantes da linha.

Modificar Módulos na Coluna 2

Módulo CTA

Conecte o campo de título ao conteúdo dinâmico de nível 2 de associação

Precisamos modificar as duplicatas, começando com o Módulo CTA na segunda coluna. Conecte o campo de título ao conteúdo dinâmico de Nível 2 de associação.

Conecte a caixa de conteúdo ao conteúdo dinâmico da descrição 2 do membro

Faça o mesmo com a caixa de conteúdo.

Adicionar fundo gradiente

Adicione um fundo gradiente ao próximo módulo.

• Cor 1: # 6959ff
• Cor 2: # c1bfff
• Direção do gradiente: 15 graus
• Posição inicial: 22%
• Posição final: 95%

Alterar a cor do texto do título

Altere a cor do texto do título também.

• Cor do texto do título: #ffffff

Alterar a cor do corpo do texto

O mesmo vale para a cor do corpo do texto.

• Cor do corpo do texto: #ffffff

Alterar espaçamento

Para colocar esta tabela de preços em particular no centro das atenções, vamos brincar com os valores de espaçamento também.

• Margem superior: -50px (desktop), 0px (tablet e telefone)
• Enchimento superior: 100px

Módulo de Texto

Conecte a caixa de conteúdo ao conteúdo dinâmico do Price 2

Continue abrindo o Módulo de Texto na coluna 2 e vincule a caixa de conteúdo ao conteúdo dinâmico Preço 2.

Mudar a cor do fundo

Altere a cor de fundo deste módulo a seguir.

• Cor de fundo: # 6959ff

Mudar a cor do texto

E mude a cor do texto para branco.

• Cor do texto: #ffffff

Alterar espaçamento

Por último, mas não menos importante, altere os valores de preenchimento personalizado nas configurações de espaçamento.

• Preenchimento inferior: 120px
• Preenchimento esquerdo: 40px

Modificar Módulos na Coluna 3

Módulo CTA

Conecte o campo de título ao conteúdo dinâmico de nível 3 de associação

Precisamos alterar os módulos na coluna 3 também. Vincule o campo de título ao conteúdo dinâmico de Nível 3 de associação.

Conecte a caixa de conteúdo ao conteúdo dinâmico da descrição 3 do membro

O mesmo vale para a caixa de conteúdo.

Adicionar fundo gradiente

Em seguida, adicione um fundo gradiente ao módulo.

• Cor 1: # c87cff
• Cor 2: # ffbcf8
• Direção do gradiente: 18 graus
• Posição inicial: 22%
• Posição final: 95%

Alterar a cor do texto do título

Mude a cor do texto do título para branco.

• Cor do texto do título: #ffffff

Alterar a cor do corpo do texto

Faça o mesmo para a cor do corpo do texto.

• Cor do corpo do texto: #ffffff

Módulo de Texto

Conecte a caixa de conteúdo ao conteúdo dinâmico do Price 3

Continue abrindo o Módulo de Texto na coluna 3 e alterando o conteúdo dinâmico aqui também.

Mudar a cor do fundo

Adicione uma cor de fundo diferente a seguir.

• Cor de fundo: # c87cff

Mudar a cor do texto

Por último, mas não menos importante, altere a cor do texto para branco e pronto! Agora você tem três tabelas de preços totalmente dinâmicas em sua página!

• Cor do texto: #ffffff

Pensamentos finais

Este caso de uso é parte do nosso negócio da Black Friday, onde compartilhamos 6 páginas de destino de edição limitada GRATUITA com clientes da Black Friday e membros vitalícios. Ao se juntar à nossa comunidade empoderada durante esses dias e se tornar um membro, você obterá:

• 25% DE DESCONTO EM TUDO
• Todas as 6 páginas de destino de graça
• Acesso aos nossos fantásticos temas e plug-ins
• Prêmios de bônus

Aproveite a oportunidade e torne-se um membro hoje!