É fácil aumentar sua lista de e-mails usando o módulo de assinatura de newsletter oferecido pelo tema WordPress Divisão Este módulo suporta integração MailChimp , Aweber et Feedburner.
Como adicionar um módulo de assinatura de boletim informativo à sua página
Antes de adicionar um módulo de e-mail à sua página, você deve primeiro entrar no Divi Builder. Uma vez o Tema Divi instalado em seu site, você notará um botão Use o Divi Builder acima do editor de postagem 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. Em seguida, 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.
Depois de entrar no Visual Builder, você pode clicar no botão cinza de adição para adicionar um novo módulo à sua página. Novos módulos só podem ser adicionados dentro das linhas. Se você está começando uma nova página, lembre-se de adicionar uma linha à sua página primeiro. Temos ótimos tutoriais sobre como usar os elementos de linha e seção do Divi.
Localize o módulo optin email 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 depois clicar em "Enter" para pesquisar e adicionar automaticamente o módulo optin! Assim 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 .
Configurando contas de email
Antes de usar o módulo de email optin, 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 e-mail, ele aparecerá nas configurações do módulo sempre que você editar um módulo de e-mail em seu site.
Para adicionar um novo provedor de e-mail, primeiro selecione seu provedor de e-mail na lista Selecione um provedor . Em seguida, clique no botão adicionar para vincular o módulo à sua conta de e-mail. Divi atualmente oferece suporte a três provedores: MailChimp, AWeber e Feedburner.
Vincule sua conta do AWeber
Antes de usar este módulo com AWeber, você deve primeiro conectar sua conta 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á levado a uma página onde será solicitado a entrar em sua conta AWeber. Faça login para gerar sua chave de API.
Em seguida, copie e cole a chave no campo Chave de API nas configurações do módulo, clique no botão Enviar .
Sua conta foi vinculada e você pode escolher sua lista de e-mail no menu suspenso Listas de AWeber .
Vincule sua conta MailChimp
Antes de usar o módulo com MailChimp, você deve primeiro conectar sua conta 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 vai aparecer. Copie e cole sua chave de API no campo e pressione o botão Enviar . Sua conta foi vinculada e você pode escolher sua lista de e-mail no menu suspenso Listas de MailChimp .
Você pode localizar sua chave API MailChimp em sua conta MailChimp.com. Faça login e vá para a página de seu perfil. Procure na categoria Extras e encontre o link chaves de API . aqui estão alguns informação adicional sobre como encontrar sua chave de API.
Exemplo de caso de uso: adicionar uma postagem de inscrição ao final de uma postagem de blog
Um lugar comum para adicionar um formulário email optin está logo abaixo do conteúdo da sua mensagem.
Para este exemplo rápido, vou mostrar como é fácil inserir e estilizar um módulo de e-mail Optin em uma postagem de blog usando o Visual Builder.
Usando o Visual Builder, adicione a seção padrão com uma linha de 1/2 coluna (2 colunas) abaixo da seção que contém o conteúdo da postagem.
Como este exemplo será uma oferta de e-book com o optin, adicione um módulo de imagem à coluna da esquerda e carregue uma imagem do livro. Defina o alinhamento da imagem para "Centro" e defina a largura máxima da imagem para 300px.
Em seguida, adicione o módulo Optin Email à coluna da direita.
Atualize as configurações de email do Optin da seguinte maneira:
Opções de conteúdo
Título: "Novos assinantes obtêm uma cópia gratuita do meu e-livro" Texto do botão: "Inscrever-se" Conteúdo: "Uma história envolvente que o deixará no limite da sua cadeira." Provedor de serviços: [selecionar provedor de serviços] Selecione o título da lista ou do fluxo
Opções de design
Cor de fundo do campo: # f1f1f1 Cor de fundo: #ffffff Cor da borda do foco: SIM Cor da borda: # 02b875 Cor do texto: Escuro Orientação do texto: Cabeçalho central Fonte: PT sem cabeçalho Tamanho da fonte: 35px Altura da cabeça: 1.3em Tamanho da fonte do corpo: 18px Preenchimento personalizado: 20px à direita, 20px Estilos à esquerda Usar botão personalizado para: SIM Tamanho do texto Botão: 26px Cor do botão de texto: #ffffff Cor de fundo do botão: # 02b875 Largura da borda do botão: 2 Cor da borda do botão: # 02b875 Espaçamento da letra do botão: 1px Adicionar ícone do botão: Sim Ícone do botão: [adicionar ícone]
Isso é tudo. Se você quiser melhorar seus formulários de inscrição, você pode usar Florescer, a opção de email Divi e o plug-in de geração de leads especialmente desenvolvido para ajudá-lo a aumentar sua lista de mala direta.
Opção de conteúdo do módulo de email Optin
Na guia de conteúdo, você encontrará todos os elementos de conteúdo do módulo, como texto, imagens e ícones. Tudo que controla o que aparece no seu módulo sempre será encontrado nesta guia.
Título
Insira o título do seu formulário 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 Inscrição.
Provedor de serviço
Aqui você pode escolher qual provedor de lista de e-mails usar. O módulo atualmente suporta integrações MailChimp , Aweber et Feedburner. Selecione seu provedor na lista e prossiga 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 MailChimp para adicionar clientes. Se você não vir nenhuma lista aqui, você precisa se certificar de que a chave da API MailChimp está configurada no ePanel e que você tem pelo menos uma lista em uma conta MailChimp. Se você adicionou uma nova lista, mas ela não aparece aqui, habilite a opção 'Regenerar listas do MailChimp' no ePanel. Não se esqueça de desativá-lo assim que 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 vê uma lista aqui, você precisa se certificar de que Aweber está configurado corretamente no ePanel e que você tem pelo menos uma lista em uma conta Aweber. Se você adicionou uma nova lista, mas ela não aparece aqui, ative a opção 'Regenerate Aweber Lists' no ePanel. Não se esqueça de desativá-lo assim que 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 do Feedburner. Você precisará inserir o título do seu 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 fundo foi habilitada, um preenchimento adicional é adicionado dentro do módulo para separar o conteúdo do texto da borda visível do módulo. Se uma cor de fundo não estiver ativada, o fundo do módulo se tornará transparente e o preenchimento extra será removido.
Cor de fundo
Você pode fazer seu ladrilho de inscrição da cor desejada usando o seletor de cores. Selecione a mesma cor do fundo da seção para criar a aparência de um efeito de largura ou sem bordas.
Etiqueta de administração
Isso mudará o rótulo do módulo no construtor para facilitar a identificação. Quando você usa a visualizaçã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, tamanhos e espaçamentos. Esta é a guia que você usará para alterar a aparência do seu módulo. Cada módulo Divi possui uma longa lista de configurações de design que você pode usar para alterar qualquer coisa.
Cor de fundo do campo de formulário
Le formulário O email optin contém dois campos de entrada para nome de usuário e senha. Você pode usar esta configuração para ajustar a cor de fundo desses campos.
Cor do texto do campo de formulário
O formulário de e-mail de optin contém dois campos de entrada para nome de usuário e senha. Você pode usar essa configuração para ajustar a cor do texto desses campos. Se você ajustou a cor 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 é focalizado com o mouse de um visitante, as cores mudam para indicar claramente qual campo está ativo. Aqui você pode definir a cor de fundo dos campos em foco.
Cor de texto em foco
Quando um campo de entrada é focalizado com o mouse de um visitante, as cores mudam para indicar claramente qual campo está ativo. Aqui você pode definir a cor do texto dos campos em foco.
Use a cor da borda do foco
Se você deseja adicionar borda aos campos de entrada quando eles estão em foco, você pode habilitar esta 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 de fundo for escura, a cor do texto deve ser definida como “Claro”. No entanto, se a cor de fundo for clara, a cor do texto deve ser definida como “Escuro”.
Orientação de texto
Este menu suspenso permite que você especifique a orientação do seu texto para ser 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. Divi vem com dezenas de ótimas fontes fornecidas pelo Google Fonts. Por padrão, Divi usa a fonte Open Sans para todo o texto em sua página. Você também pode personalizar o estilo do seu texto usando negrito, itálico, maiúsculas e opções de sublinhado.
Tamanho da fonte do cabeçalho
Aqui você pode ajustar o tamanho do texto do cabeçalho. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir diretamente o valor do tamanho de texto 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.
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 esta opção.
Espaçamento da letra do cabeçalho
O espaçamento entre 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 do 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 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 à 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.
Fonte do corpo
Você pode alterar a fonte do corpo selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de ótimas fontes fornecidas pelo Google Fonts. Por padrão, Divi usa a fonte Open Sans para todo o texto em sua página. Você também pode personalizar o estilo do seu texto usando negrito, itálico, maiúsculas e opções de sublinhado.
Tamanho da fonte do corpo
Aqui você pode ajustar o tamanho do texto do corpo. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir diretamente o valor do tamanho de texto 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.
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 entre letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra do seu texto, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho do 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 em seu corpo Se você deseja 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 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 1 pixel de largura. Você pode aumentar esse valor arrastando o controle deslizante de intervalo ou inserindo um valor personalizado no campo de entrada à direita do controle deslizante. Suporta unidades de medida personalizadas, o que significa que você pode alterar a unidade padrão de "px" para algo como em, vh, vw etc.
Estilo da beira
As bordas suportam oito estilos diferentes: sólido, pontilhado, pontilhado, duplo, ranhura, crista, sobreposição e início. Selecione o estilo desejado no menu suspenso para aplicá-lo à sua borda.
Margem personalizada
A margem é o espaço adicionado do lado de fora do seu módulo, entre o módulo e o próximo elemento acima, abaixo ou à esquerda e à direita dele. Você pode adicionar valores de margem personalizados a qualquer 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
Infill é o espaço adicionado dentro de seu módulo, entre a borda do módulo e seus elementos internos. Você pode adicionar valores de preenchimento personalizados a qualquer 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
Habilitar esta opção revela várias configurações de personalização de botão que você pode usar para alterar a aparência do botão do 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 se adapta conforme o tamanho do texto aumenta ou 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 de temas. 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 de 2px por padrão. Essa borda pode ser aumentada ou diminuída usando esta configuração. As bordas podem ser removidas inserindo o valor 0.
Cor da borda do botão
Por padrão, as bordas dos botões adotam a cor de destaque do tema, conforme definido no Personalizador de temas. Esta opção permite atribuir uma cor de borda personalizada para o 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 o arredondamento dos cantos dos botões. Por padrão, os botões em Divi têm um pequeno raio de borda que circunda os cantos em 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 entre letras afeta o espaço entre cada letra. Se 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 do 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. Divi vem com dezenas de ótimas fontes fornecidas pelo Google Fonts. Por padrão, Divi usa a fonte Open Sans para todo o texto em sua página. Você também pode personalizar o estilo do seu texto usando negrito, itálico, maiúsculas e opções de sublinhado.
Adicionar um ícone de botão
Desativado, esta configuração irá remover í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 habilitados, você pode usar esta configuração para escolher qual ícone usar em seu botão. Divi tem diferentes ícones para escolher.
Botão de ícone de cor
O ajuste dessa configuração mudará a cor do ícone que aparece no botão. Por padrão, a cor do ícone é igual à cor do texto do botão, mas esta configuração permite que você ajuste a cor independentemente.
Botão de colocação de ícone
Você pode optar por exibir o ícone do botão à esquerda ou à direita do botão.
Mostrar ícone apenas ao passar o mouse sobre o botão
Por padrão, os ícones de botão são exibidos apenas ao pairar. Se você quiser que o ícone sempre apareça, desative esta configuração.
Cor do texto do botão suspenso
Quando o botão é passado por cima do mouse de um visitante, esta cor é 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 é passado por cima do mouse de um visitante, esta cor é usada. A cor mudará da cor de base definida nas configurações anteriores.
Botão de limite de cores em cores
Quando o botão é passado por cima do mouse de um visitante, esta cor é 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 é passado por cima do mouse de um visitante, este valor será usado. O valor mudará do valor base definido nas configurações anteriores.
Botão de espaçamento de notas pontiagudas
Quando o botão é passado por cima do mouse de um visitante, este valor será usado. O valor mudará do valor base definido nas configurações anteriores.
Opções avançadas de Optin por email
Na guia avançada, você encontrará opções que designers da Web mais experientes podem achar úteis, como CSS personalizado e atributos HTML. Aqui você pode aplicar CSS personalizado a qualquer um dos muitos elementos do módulo. Você também pode aplicar classes CSS personalizadas e IDs ao módulo, que podem ser usados para personalizar o módulo no arquivo style.css do seu tema filho.
ID CSS
Insira um ID CSS opcional para usar neste módulo. Um ID pode ser usado para criar um estilo CSS personalizado ou para vincular a seções específicas de sua página.
Classe CSS
Insira as classes CSS opcionais a serem usadas 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 ao seu 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 qualquer um dos componentes internos do módulo. Na seção CSS personalizado, você encontrará um campo de texto onde pode adicionar folhas de estilo CSS personalizadas diretamente a cada elemento. As entradas CSS nessas configurações já estão envolvidas em tags de estilo. Portanto, basta inserir as regras CSS separadas por ponto e vírgula.
visibilidade
Esta opção permite que você controle 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 mods diferentes em dispositivos diferentes ou se quiser simplificar o design do celular removendo certos elementos da página.
Outros tutoriais sobre o WordPress Theme Divi
- sites 5 para uso restaurante Divi tema
- Como adicionar texto em um produto Divi WooCommerce
- Como alterar a cor do menu entre as páginas Divi
- Como personalizar as grades de um blog com Divi
- Como usar o editor Divi papel em WordPress
- Como criar um controle deslizante Divi em tela cheia
- Como mudar a cor dos menus entre as páginas Divi
- Recursos que você provavelmente não conhece sobre o Divi
- Como usar o Divi Builder no WordPress
- Como usar o módulo de rolagem de vídeo Divi
- Como usar o módulo Divi Builder Flip
- Como adicionar um módulo de depoimento no Divi Builder
- Como usar o módulo de texto Divi
- Como criar um controle deslizante no Divi
- Como editar uma função de usuário Divi
- Como usar o módulo Divi Social Media
- Como usar o módulo de loja no tema WordPress Divi
- Como usar o módulo da barra lateral Divi
- Como usar o módulo Divi Price Table
- Como usar o módulo de título das publicações Divi
- Como adicionar um módulo de vídeo do Divi
- Como usar o módulo de navegação do artigo
- Como usar o módulo de pesquisa Divi
- Como usar o módulo de carteira Divi
- Como usar o módulo person no Divi Builder
- Como usar o módulo de carteira com filtro Divi
- Como usar o módulo deslizante de largura total
- Como usar o módulo de imagem do Divi Builder
- Como usar o módulo de navegação de largura total do Divi Builder
- Como usar o módulo da galeria de imagens
- Como usar o módulo de placa de largura total do Divi Builder
- Como usar o módulo de portfólio de largura total Divi
- Como usar o módulo de cabeçalho Divi de largura total
- Como usar o módulo do contador Divi
- Como usar o controle deslizante de artigos no Divi Builder
- Como usar o módulo Divi Email Optin
[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expandido "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] BAIXE O TEMA DIVI [/ vcex_button] [/ width_column] [»vc_column] »1/2 ″] [vcex_button url =" https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials "target =" em branco "layout =" expandido "alinhar =" centro " font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] BAIXAR MODELOS DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
