Ir para o conteúdo principal

Tutorial Divi: Como usar o módulo Email Optin

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

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

É fácil aumentar sua lista de emails usando o módulo de inscrição em boletim informativo oferecido pelo tema WordPress Divi. Este módulo suporta integração MailChimp , Aweber et Feedburner.

integração mailchimp divi.png

Como adicionar um módulo de assinatura de boletim à sua página

Antes de adicionar um módulo de e-mail à sua página, você deve primeiro acessar o Divi Builder. Depois que o tema Divi estiver instalado no seu site, você verá um botão Use o Divi Builder acima do editor sempre que você cria uma nova página. Clique neste botão para ativar o Divi Builder e acessar todos os módulos do Divi Builder. Depois 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 painel do WordPress.

usar o construtor divi

Depois de inserir o Visual Builder, você pode clicar no botão cinza mais para adicionar um novo módulo à sua página. Novos módulos podem ser adicionados apenas dentro das linhas. Se você iniciar uma nova página, não esqueça de adicionar uma linha à sua página primeiro. Temos ótimos tutoriais sobre o uso de elementos de linha e seção Divi.

email optin.png

Localize o módulo de email optin 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 "optin por email" e clicar em "Enter" para pesquisar e adicionar automaticamente o módulo optin! Depois que o módulo for adicionado, você será recebido 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 .

Configurando contas de email

Antes de poder usar o módulo de email opt-in, você deve primeiro conectá-lo a um provedor de email. Esses provedores podem ser adicionados e gerenciados nas configurações do módulo. Depois de adicionar um novo provedor de email, ele aparece nas configurações do módulo sempre que você edita um módulo de email no seu site.

email optin configuration.png

Para adicionar um novo provedor de email, primeiro selecione seu provedor de email na lista Selecione um provedor . Então clique no botão adicionar para vincular o módulo à sua conta de email. Atualmente, o Divi suporta três fornecedores: MailChimp, AWeber e Feedburner.

Vincule sua conta do AWeber

Antes de poder usar este módulo com o AWeber, você deve primeiro conectar sua conta do AWeber. Para fazer isso, selecione AWeber na lista de provedores e clique no botão Adicionar para iniciar o processo. Depois de clicar no botão Adicionar, você será direcionado para uma página em que será solicitado a entrar na sua conta do AWeber. Faça login para gerar sua chave de API.

faça o login aweber divi.png

Em seguida, copie e cole a chave no campo Chave de API nas configurações do módulo e clique no botão Enviar .

Sua conta agora foi associada e você pode escolher sua lista de e-mails no menu suspenso Listas de AWeber .

Vincule sua conta MailChimp

Antes de poder usar o módulo com o MailChimp, você deve primeiro conectar sua conta do MailChimp. Para fazer isso, selecione MailChimp na lista de provedores e clique em Adicionar. Depois de clicar no botão Adicionar, um campo Chave de API aparecer. Copie e cole sua chave API no campo e pressione o botão Enviar . Sua conta agora está vinculada e você pode escolher sua lista de e-mail no menu suspenso Listas de MailChimp .

Você pode localizar sua chave de API do MailChimp na sua conta do MailChimp.com. Faça login e vá para a sua página de perfil. Olhe na categoria Extras e encontre o link chaves de API . quelques Voici informação adicional sobre como encontrar sua chave de API.

api mailchimp divi.png

Exemplo de caso de uso: Adicionando uma mensagem de inscrição na parte inferior de uma postagem do blog

Um local comum para adicionar um formulário de e-mail optin é logo abaixo do conteúdo da sua mensagem.
Neste exemplo rápido, mostrarei como é fácil inserir e estilizar um módulo de email Optin em uma postagem de blog usando o Visual Builder.

construtor visual divi example.jpg

Usando o Visual Builder, adicione a seção padrão com uma linha de colunas 1 / 2 (colunas 2) na seção que contém o conteúdo da publicação.

Como este exemplo será uma oferta de e-book opcional, adicione um módulo de imagem à coluna da esquerda e faça o upload de uma imagem do livro. Defina o alinhamento da imagem como "Centro" e defina a largura máxima da imagem como 300px.

adicione um módulo de email optin divi.jpg

Em seguida, adicione o módulo Optin Email à coluna da direita.

exemplo email optin tutorial divi.png

Atualize as configurações de email do Optin da seguinte maneira:

Opções de conteúdo

Título: "Os novos assinantes recebem uma cópia GRATUITA do meu E-Book" Texto do botão: "Inscreva-se" Conteúdo: "Uma história cativante que o deixará à beira do seu lugar". Fornecedor de Serviços: [selecione fornecedor de serviços] 
Selecione o título da lista ou do fluxo

Opções de design

Cor do plano de fundo do campo: # f1f1f1 Cor de fundo: #ffffff Cor da borda do foco: SIM Cor da borda: # 02b875 Cor do texto: escuro Direção do texto: Cabeçalho central Fonte: PT Sans Tamanho do cabeçalho da fonte: 35px Altura da cabeça: 1.3em Tamanho da fonte do corpo: 18px Preenchimento personalizado: 20px à direita, Estilos à esquerda 20px Use personalizado para o botão: SIM Tamanho do texto Botão: 26px Cor do botão de texto: # Botão ffffff Cor do plano de fundo: # 02b875 Botão da largura da borda: Botão da borda do 2 Cor: # 02b875 Botão de espaçamento entre letras: 1px Ícone do botão Adicionar: Sim Ícone do botão: [adicionar um ícone]

email ebook example divi configuration.png

Só isso. Se você deseja melhorar seus formulários de inscrição, pode usar Florescer, a opção Divi e-mail e o plug-in de geração de leads projetado especificamente para ajudá-lo a desenvolver sua lista de e-mails.

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]

Opção de conteúdo do módulo de email Optin

Na guia 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 sempre será encontrado nesta guia.

opções de opção de email option content.png

Título

Insira o título do seu formulário de inscrição aqui.

Texto do botão

Especifique o texto do botão de registro aqui.

Conteúdo

Este campo é onde você pode inserir o conteúdo do módulo SignUp.

Provedor de serviço

Aqui você pode escolher qual provedor de lista de discussão você está usando. O módulo atualmente suporta integrações MailChimp , Aweber et Feedburner. Selecione seu provedor na lista e vá para as seguintes opções.

Listas de MailChimp

Se você tiver escolhido MailChimp como provedor, essa opção será exibida. Aqui você pode escolher a lista do MailChimp para adicionar clientes. Se você não vir nenhuma lista aqui, verifique se a chave da API do MailChimp está definida no ePanel e se possui pelo menos uma lista em uma conta do MailChimp. Se você adicionou uma nova lista, mas ela não aparece aqui, ative a opção 'Regenerar listas do MailChimp' no ePanel. Lembre-se de desativá-lo quando a lista for regenerada.

Listagens de Aweber

Se você selecionou Aweber como provedor, essa opção será exibida. Aqui você pode escolher a lista Aweber para adicionar clientes. Se você não vir nenhuma lista aqui, verifique se o Aweber está configurado corretamente no ePanel e se há pelo menos uma lista em uma conta do Aweber. Se você adicionou uma nova lista, mas ela não aparece aqui, ative a opção 'Regenerate Aweber Lists' no ePanel. Lembre-se de desativá-lo quando a lista for regenerada.

Título do Feedburner

Se você selecionou Feedburner como provedor, essa opção será exibida. É assim que você identifica sua conta no Feedburner. Você precisará inserir o título do feed, que pode ser encontrado aqui .

Use a cor de fundo

Se ativado, uma cor de fundo será aplicada ao módulo. Se uma cor de plano de fundo tiver sido ativada, um preenchimento extra será adicionado dentro do módulo para separar o conteúdo do texto da borda visível do módulo. Se uma cor de plano de fundo não estiver ativada, o plano de fundo do módulo se tornará transparente e o preenchimento adicional será removido.

Cor de fundo

Você pode fazer com que o seu bloco de registro fique com a cor desejada usando o seletor de cores. Selecione a mesma cor que o plano de fundo da seção para criar a aparência de uma largura ou efeito sem borda.

Etiqueta de administração

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

Design de seção de e-mail Optin

Na guia Design, você encontrará todas as opções de estilo do módulo, como fontes, cores, dimensionamento e espaçamento. Essa é 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.

módulo de e-mail de design de seção de opção optin.png

Cor de fundo do campo de formulário

O formulário de e-mail optin contém dois campos de entrada para o nome de usuário e a senha. Você pode usar esse parâmetro para ajustar a cor de fundo desses campos.

Cor do texto do campo de formulário

O formulário de e-mail optin contém dois campos de entrada para o nome de usuário e a senha. Você pode usar esse parâmetro para ajustar a cor do texto desses campos. Se você ajustou a cor do plano de fundo do campo do formulário, também pode ajustar a cor do texto para garantir uma relação de cores suave.

Cor de fundo

Quando um campo de entrada é focado com o mouse do visitante, as cores mudam para indicar claramente qual campo está ativo. Aqui você pode definir a cor de fundo dos campos focados.

Cor de texto em foco

Quando um campo de entrada é focado com o mouse do visitante, as cores mudam para indicar claramente qual campo está ativo. Aqui você pode definir a cor do texto dos campos focados.

Use a cor da borda do foco

Se você quiser adicionar uma borda aos campos de entrada quando eles estiverem em foco, você poderá ativar essa opção.

Cor da borda do foco

Ao usar essa configuração, você pode alterar a cor da borda que aparece nos campos de entrada focados.

Cor do texto

Se a cor do plano de fundo estiver escura, a cor do texto deve ser definida como "Claro". Por outro lado, se a cor do plano de fundo estiver clara, a cor do texto deve ser definida como "Escura".

Orientação de texto

Este menu suspenso permite que você especifique a orientação do seu texto para que ele seja justificado à esquerda, centralizado ou justificado à direita.

Fonte de cabeçalho

Você pode alterar a fonte do texto do cabeçalho selecionando a fonte desejada no menu suspenso. O Divi vem com dezenas de fontes grandes, fornecidas 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 em negrito, itálico, maiúscula e sublinhada.

Tamanho da fonte do cabeçalho

Aqui você pode ajustar o tamanho do texto do cabeçalho. Você pode arrastar o controle deslizante de alcance para aumentar ou diminuir o tamanho do seu 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 o 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ê deseja alterar a cor do texto do cabeçalho, escolha a cor desejada no seletor de cores usando esta 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 o tipo de unidade.

Altura da linha do cabeçalho

A altura da linha afeta o espaço entre cada linha do texto do cabeçalho. Se você quiser aumentar o espaço entre cada linha, use o controle deslizante de alcance para ajustar o espaço ou digite o tamanho de espaçamento desejado na linha. 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 o tipo de unidade.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

Fonte do corpo

Você pode alterar a fonte do seu corpo selecionando a fonte desejada no menu suspenso. O Divi vem com dezenas de fontes grandes, fornecidas 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 em negrito, itálico, maiúscula e sublinhada.

Tamanho da fonte do corpo

Aqui você pode ajustar o tamanho do texto do seu corpo. Você pode arrastar o controle deslizante de alcance para aumentar ou diminuir o tamanho do seu 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 o 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ê deseja 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 do texto, 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 o tipo de unidade.

Altura da linha do corpo

A altura da linha afeta o espaço entre cada linha de texto no seu corpo. Se você quiser aumentar o espaço entre cada linha, use o controle deslizante de alcance para ajustar o espaço ou digite 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 o 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 pixel 1. 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 medida 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, pontilhado, duplo, ranhura, crista, embutimento e início. Selecione o estilo desejado no menu suspenso para aplicá-lo à sua borda.

Margem personalizada

Margem é o espaço adicionado à parte externa do seu módulo, entre o módulo e o próximo item acima, abaixo ou à esquerda e à direita dele. Você pode adicionar valores de margem personalizados a um dos quatro lados do módulo. Para remover a margem personalizada, remova o valor adicionado do campo de entrada. Por padrão, esses valores são medidos em pixels, mas você pode inserir unidades de medida personalizadas nos campos de entrada.

Preenchimento personalizado

Preenchimento é o espaço adicionado dentro do seu módulo, entre a borda do módulo e seus elementos internos. Você pode adicionar valores de preenchimento personalizados a um dos quatro lados do módulo. Para remover a margem personalizada, remova o valor adicionado do campo de entrada. Por padrão, esses valores são medidos em pixels, mas você pode inserir unidades de medida personalizadas nos campos de entrada.

Use estilos personalizados para o botão

A ativação dessa opção revela diferentes configurações de personalização de botão 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 à medida que 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 seu tema, conforme definido no Personalizador do tema. Esta opção permite atribuir uma cor de texto personalizada ao botão deste 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 fundo transparente. Isso pode ser alterado selecionando a cor de fundo desejada no seletor de cores.

Botão Largura da Borda

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

Cor da borda do botão

Por padrão, as bordas dos botões mudam para a cor de destaque do seu tema, conforme definido no Personalizador do tema. Esta opção permite atribuir uma cor de borda personalizada ao botão deste 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 no Divi têm um pequeno raio de borda que arredonda os cantos dos pixels 3. Você pode reduzir esse valor para 0 para criar um botão quadrado ou aumentá-lo significativamente para criar botões com arestas 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 alcance 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 o tipo de unidade.

Fonte do botão

Você pode alterar a fonte do texto do botão selecionando a fonte desejada no menu suspenso. O Divi vem com dezenas de fontes grandes, fornecidas 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 em negrito, itálico, maiúscula e sublinhada.

Adicionar um ícone de botão

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

Ícone de botão

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

Botão de ícone de cor

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

Botão de colocação de ícone

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

Mostrar apenas o ícone de foco do botão

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

Cor do texto do botão suspenso

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

Cor do plano de fundo do botão suspenso

Quando o botão é acionado pelo mouse do visitante, essa cor será usada. A cor mudará da cor de 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 de limite de cores em cores

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

Botão do raio da beira do pairo

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

Botão de espaçamento de notas pontiagudas

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

Opções avançadas de Optin por email

Na guia Avançado, você encontrará opções que web designers 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 do seu tema filho.

módulo de e-mail optin

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 da sua página.

Classe CSS

Digite as classes CSS opcionais a serem usadas para este 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 no seu tema filho Divi ou na folha de estilos CSS personalizada que você adiciona à sua página ou site usando o opções de tema Divi ou parâmetros da página Divi Builder.

CSS personalizado

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 as 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ê deseja usar módulos diferentes em dispositivos diferentes ou se deseja simplificar o design para dispositivos móveis, eliminando certos elementos da página.

Outros tutoriais sobre o WordPress Theme Divi

Este artigo contém comentários 0

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
11 ações
ação6
chilrear1
Enregistrer4