Editor de Pop-ups Customizados

Descubra todas as possibilidades que você têm em suas mãos para criar pop-ups atrativos e eficazes!

Wioleta Jednaka avatar
Escrito por Wioleta Jednaka
Atualizado há mais de uma semana

Então você quer criar um pop-up atrativo e que vai prender a atenção dos seus visitantes — mas precisa resolver isso de forma rápida e fácil.

Temos uma boa notícia: isso é possível com o nosso Editor de Pop-ups Customizados!

Clique nos links abaixo para saber mais sobre partes específicas do editor, ou continue lendo para ver tudo o que você pode fazer com esta ferramenta.

NOTA: Este artigo é focado exclusivamente no editor de pop-ups. Se você está procurando mais informações sobre todo o processo de criação de Pop-ups Customizados, CLIQUE AQUI.

Visão geral

Você encontrará o editor de pop-ups no Passo 2 do processo de criação de pop-up customizado, na aba Design.

A interface do editor possui duas partes principais: a seção de conteúdo e configurações à esquerda, e o painel de visualização à direita.

Algumas coisas importantes sobre nosso editor de pop-ups:

  • Todos os pop-ups são responsivos, mas cada versão (desktop e mobile) pode ter configurações diferentes. Você pode conferir como será a aparência de cada versão clicando nos ícones do lado esquerdo do painel de visualização.

  • O editor é WYSIWYG (what you see is what you get — em português, "o que você vê é o que você obtém"). Isso significa que todas as alterações feitas no painel de conteúdo e configurações são refletidas na área de visualização em tempo real.

  • Você encontrará vários templates prontos para serem usados com base em seu objetivo. Mas não precisa ficar limitado a eles, pois os modelos são totalmente personalizáveis ​​para atender às suas necessidades!

Agora que te apresentamos a interface geral, vamos analisar cada parte do nosso editor de pop-ups.

Configurações

Vamos começar na aba de Configurações. Aqui você vai determinar a estrutura geral do seu pop-up, bem como algumas configurações visuais.

Layout

Você pode escolher entre quatro tipos de layout, que vão refletir como as imagens serão exibidas no seu pop-up.

Escolha o layout:

  • Sem plano de fundo – escolha esta opção se não quiser uma imagem em seu pop-up.

  • Plano de fundo – a imagem será exibida ao fundo.

  • Imagem à esquerda – a imagem será exibida à esquerda.

  • Imagem à direita – a imagem será exibida do lado direito.

Faça o upload da imagem:

  • Clique no botão FAZER UPLOAD para carregar uma imagem do seu dispositivo.

    • O tamanho máximo do arquivo é de 2 MB.

Configurações da imagem:

  • Escolha o posicionamento da imagem:

    • Preencher o espaço – a imagem preencherá completamente o espaço disponível.

    • Repetir – a imagem não será redimensionada e será repetida automaticamente vertical e horizontalmente.

    • Centralizar – a imagem será ajustada ao espaço disponível em altura e largura.

  • Proporção da imagem ( 50% / 33% / 25%).

  • Exibir imagem em dispositivos móveis (ON / OFF).

    • Se ON, você poderá escolher entre as posições acima / abaixo / ao lado.

NOTA: O layout reflete sua escolha em relação a uma imagem principal como parte estrutural de seu pop-up, mas também é possível adicionar imagens como elementos, da mesma forma que textos e formulários. Veja as seções abaixo.

Configurações gerais do pop-up

Neste seção você irá determinar os detalhes de design do seu pop-up personalizado.

  • Padding – é o espaço entre a borda externa do pop-up e os elementos internos (p. ex. caixas de texto e formulários).

  • Raio dos cantos – deixe 0px para bordas retas ou aumente o valor para cantos mais arredondados.

  • Largura máxima – a largura máxima que seu pop-up terá em qualquer dispositivo.

    • Para dispositivos móveis, a largura máxima sempre será de 480px.

  • Cor de fundo – a cor de fundo da seção com elementos (texto, formulários, etc)

    • Escolha uma cor pradrão ou adicione uma cor personalizada usando o seletor de cores, código HEX ou valores RGB.

  • Cor de fundo de sobreposição – determina a cor e transparência de toda a área fora do pop-up (que cobre a página).

    • Você pode determinar a intensidade da transparência deslizando o cursor no quadro cinza abaixo do seletor de cores.

  • Sombra do pop-up – escolha um tipo de efeito para a sombra do seu pop-up:

    • Sem sombra;

    • Escura e dura;

    • Clara e dura;

    • Escura e suave;

    • Clara e suave;

    • Retangular.

Botão para fechar

Nesta seção você vai definir o estilo do botão para fechar seu pop-up.

  • Estilo do ícone – selecione uma das opções de ícone.

  • Tamanho do ícone – determine o tamanho do ícone.

  • Cor do ícone – determine a cor do ícone.

  • Posição do ícone - Eixo X – determine a distância entre o botão de fechar e a borda direita do pop-up.

  • Posição do ícone - Eixo Y – determine a distância entre o botão de fechar e a borda superior do pop-up.

NOTA: O ícone de fechamento sempre estará no canto superior direito, independente do tipo de layout escolhido (imagem à esquerda, imagem à direita, plano de fundo ou sem plano de fundo).

Fonte do Google Fonts

Além das fontes padrão disponíveis no sistema edrone, você pode escolher entre as opções predeterminadas pela ferramenta ou selecionar qualquer outra fonte disponível no site Google Fonts.

Como importar uma fonte do Goolge Fonts

1. Na aba Google Fonts selecione a opção Custom;

2. Em uma nova guia, abra a página da família de fontes no Google Fonts. Para este exemplo, estamos usando a fonte Playfair Display.

3. Selecione uma fonte específica na lista. Para este exemplo, vamos escolher a Regular 400.

NOTA: Selecione apenas uma variação na família de fontes.

4. Clique no botão View selected Families no canto superior direito da tela. Isso abrirá uma barra lateral com mais detalhes.

5. Na seção Use on the web, mantenha a opção <link> selecionada e copie o código. Mantenha esta aba aberta!

6. Volte ao editor de pop-up e cole o código na aba Link.

7. Volte para a guia do Google Fonts e copie o código das regras CSS para especificar a seção de famílias.

8. Cole o código na seção Font Family.

9. Pronto! A Google Font personalizada estará disponível quando você adicionar um elemento de texto em seu pop-up.

Conteúdo

Agora vamos para a seção de Conteúdo, que envolve todos os elementos que você pode adicionar ao seu pop-up, como texto, botões e formulários.

Os elementos são apresentados em forma de lista. Se você deseja alterar a ordem da lista – para alterar a posição de um botão, por exemplo – você pode fazer isso arrastando e soltando o elemento na posição desejada.

Os elementos também podem ser excluídos ao clicar no ícone de lixeira. Para duplicar um elemento, é só clicar no ícone com dois quadrados sobrepostos.

NOTA: Os elementos de formulário não podem ser duplicados.

Como adicionar um elemento

Para adicionar um elemento, clique no botão ADICIONAR UM ELEMENTO. Você verá 11 opções divididas em duas seções: Elementos básicos e Elementos de formulário.

Elementos básicos

  • Texto

  • Imagem

  • Espaçador

  • Botão

Elementos do formulário

  • Caixa de seleção

  • Nome

  • Sobrenome

  • Email

  • Gênero

  • Telefone

  • Aniversário

NOTA: Novos elementos serão sempre adicionados ao fim da lista.

Configurações dos elementos básicos

Texto

  • Opções

    • Cor do texto

    • Fonte – escolha Google Font para escolher a fonte configurada na seção "Google Fonts".

    • Tamanho do texto

    • Cor de destaque do texto

    • Altura entre linhas

    • Negrito / itálico

    • Adicionar link

    • Alinhamento do texto

  • Borda

    • Borda geral do texto

    • Cor da borda

    • Estilo da borda (sólida / tracejada / pontilhada)

    • Arredondamento das bordas

    • Opções avançadas (ON / OFF) – permite editar cada lado individualmente

  • Espaçamento

    • Padding geral do texto (espaço vazio ao redor do elemento)

    • Opções avançadas (ON / OFF) – permite editar cada lado individualmente

  • Configurações gerais

    • Cor do plano de fundo

    • Padding geral (espaço vazio ao redor do elemento)

    • Opções avançadas (ON / OFF) – permite editar cada lado individualmente

Imagem

  • Botão "Fazer upload" (tamanho máximo do arquivo = 2 MB)

  • Posição (esquerda / centralizada / direita)

  • Largura da imagem (%)

Espaçador

  • Opções do elemento

    • Altura

    • Largura

    • Cor

    • Posição (esquerda / centro / direita)

  • Configurações gerais

    • Cor do plano de fundo

    • Padding geral (espaço vazio ao redor do elemento)

    • Opções avançadas (ON / OFF) – permite editar cada lado individualmente

Botão

  • Texto do botão

    • Cor do texto

    • Fonte – escolha Google Font para escolher a fonte configurada na seção "Google Fonts".

    • Tamanho do texto

    • Negrito / itálico

  • Opções do botão

    • Cor do botão

    • Largura automática (ON / OFF)

    • Posição (esquerda / centro / direita)

    • Tipo de ação

      • Inscrever – alterar o status do usuário de DESCONHECIDO para INSCRITO

      • Confirmar afiliado – o usuário se inscreve para receber um cupom do “Programa Indique um Amigo”

      • Redirecionar – determinar a URL e se você deseja que ela seja aberta em uma nova aba

      • API – determinar URL de API

  • Borda

    • Borda do botão

    • Cor da borda

    • Estilo da borda (sólida / tracejada / pontilhada)

    • Arredondamento do canto

    • Opções avançadas (ON / OFF) – permite editar cada lado individualmente

  • Espaçamento

    • Padding geral (espaço vazio ao redor do elemento)

    • Opções avançadas (ON / OFF) – permite editar cada lado individualmente

  • Configurações gerais

    • Cor do plano de fundo

    • Padding geral (espaço vazio ao redor do elemento)

    • Opções avançadas (ON / OFF) – permite editar cada lado individualmente

Configurações dos elementos de formulário

NOTA: todos os campos são automaticamente conectados ao Perfil do Cliente do usuário.

Todos os elementos do formulário têm as seguintes opções de configuração:

  • Título do campo (texto acima do campo do formulário)

  • Opções do elemento

    • Texto do campo (texto dentro do campo do formulário)

    • Posição do texto inserido (esquerda / centro / direita)

    • Cor do plano de fundo (cor do campo do formulário)

    • Tornar obrigatório (exceto nome e email, que são sempre obrigatórios)

  • Borda

    • Borda ao redor do elemento

    • Cor da borda

    • Estilo da borda (sólida / tracejada / pontilhada)

    • Arredondamento do canto

    • Opções avançadas (ON / OFF) – permite editar cada lado individualmente

  • Espaçamento

    • Padding geral (espaço vazio ao redor do elemento)

    • Opções avançadas (ON / OFF) – permite editar cada lado individualmente

  • Configurações gerais

    • Cor do plano de fundo

    • Padding geral (espaço vazio ao redor do elemento)

    • Opções avançadas (ON / OFF) – permite editar cada lado individualmente

Alguns elementos do formulário possuem configurações específicas:

  • Gênero

    • Masculino e Feminino são obrigatórios, sendo possível habilitar ou desabilitar as opções "Não quis informar", "Desconhecido", "Outro" (Other) ou "Não binário".

  • Aniversário

    • Dia e Mês são campos obrigatórios, sendo possível habilitar ou desabilitar o Ano.

  • Checkbox

    • É possível habilitar ou desabilitar "Marcado por padrão" e "Altura automática".

Precisa de mais ajuda?

Se você tiver mais alguma dúvida sobre o editor de Pop-ups Customizados, não hesite em nos contatar em hello@edrone.me

Artigos relacionados
Inscrição de Newsletter
Aniversário
Editor Drag 'n' Drop
Pop-up Customizado
Quais objetivos posso alcançar com o Pop-up customizado?
Isto respondeu à sua pergunta?