Como personalizar o formulário de registo no Bloom?

Procédure

O Divi builder está incluído nos nossos pacotesde alojamento web Wordpress. Se pretender suporte para o DIVI builder, deve subscrever uma licença diretamente no sítio Web Divi do tema Elegent.

Introdução

A LWS oferece 3 plug-ins premium da Elegant Themes (Divi, Bloom e Monarch). Estes são actualizados regularmente. Uma vez cliente da LWS, terá acesso gratuito a estes plugins escolhendo a distribuição 'Divi Builder' ao instalar o Wordpress CMS com o nosso Auto-Installer.

Se tiver um pacote cPanel ou se já tiver instalado o Wordpress com esta distribuição, mas não tiver acesso a todos os temas ou actualizações, informe-nos fornecendo-nos os dados de acesso à área de administração do seu site Wordpress para que um técnico possa atualizar a licença.

Nota: terá de subscrever uma licença Elegant Themes para beneficiar do suporte. A LWS não fornece suporte para estes produtos.

Como é que utilizo as definições de personalização para o meu formulário de registo?

O Bloom vem com uma tonelada de definições de design diferentes, permitindo-lhe ajustar praticamente todos os aspectos do seu formulário de opt-in. Depois de criar um formulário e escolher um modelo básico, será levado para o separador Design, onde pode continuar a ajustar vários aspectos do seu design, como se mostra abaixo.

O Bloom permite-lhe personalizar tudo

Título e mensagem

Aqui pode ajustar o conteúdo do texto que aparece no seu opt-in.

Título do opt-in

Este é o cabeçalho que aparecerá no topo do formulário em letras grandes.

Mensagem de opt-in

Este texto aparecerá por baixo do cabeçalho e utilizará um tamanho de letra mais pequeno.

Os campos de título e mensagem podem ser utilizados para descrever a sua newsletter ou oferta especial. Também podem ser deixados em branco se não pretender incluir qualquer texto no seu opt-in. O título e a mensagem podem ser modificados utilizando o editor de mensagens, que lhe dá a opção de ajustar a cor, o peso e a orientação do tipo de letra.

Definições de imagem

Aqui pode adicionar uma imagem ao seu opt-in, bem como ajustar o local onde essa imagem aparece na caixa de opt-in.

Orientaçãoda imagem

Esta definição afecta o local onde a imagem aparece no seu formulário de opt-in. Pode optar por apresentar a imagem acima ou abaixo, ou à esquerda ou à direita do seu título e mensagem.

URLda imagem

Este é o URL da imagem que gostaria de utilizar na sua caixa de opt-in. Pode introduzir um URL personalizado para um recurso online estático ou pode clicar no botão"Carregar imagem" para carregar a sua própria imagem a utilizar no formulário.

Animação decarregamento da imagem

Pode ser atribuída uma animação de carregamento às imagens. Quando a imagem é carregada pela primeira vez, esta animação ocorre. Pode ser um toque subtil que atrai a atenção dos seus visitantes e os incentiva a ler a sua mensagem e a subscrever a sua lista.

Ocultar imagem no telemóvel

Se estiver preocupado com o tamanho do seu formulário de opt-in no telemóvel, pode optar por desativar a imagem quando navegar no seu sítio Web em dispositivos móveis. Isto irá ocultar a imagem no telemóvel e dar mais espaço para o título, a mensagem e os campos de entrada.

Aqui está um exemplo de dois formulários de opt-in com imagens activadas. Um tem a imagem à esquerda, enquanto o segundo tem a imagem por baixo do texto.

Estilo do opt-in

Estes parâmetros de design afectam todo o formulário de opt-in e constituem um conjunto de estilos gerais para o seu formulário.

Cor de fundo

A cor de fundo do seu opt-in será alterada.

Tipo de letra do cabeçalho

Aqui pode alterar o tipo de letra utilizado para o título do seu opt-in.

Tipo deletra do corpo

Aqui pode ajustar o tipo de letra utilizado para a sua mensagem de opt-in.

Cor do texto

Esta opção altera a cor do cabeçalho e do corpo da mensagem. Pode escolher entre "claro" e "escuro", dependendo da cor de fundo que escolheu. Se tiver escolhido uma cor de fundo escura, certifique-se de que o texto está definido como "claro" para que seja visível. Se a cor de fundo for clara, certifique-se de que a cor do texto é escura.

Estilo de canto

Aqui pode escolher um estilo de canto para o seu op-tin. A seleção de cantos arredondados aplicar-se-á aos cantos arredondados nas extremidades exteriores da caixa de opt-in.

Orientaçãodo rebordo

Aqui pode adicionar um contorno ao seu opt-in. Este contorno pode ser aplicado às 4 margens ou apenas a uma.

Cor dorebordo

Se optou por ter um rebordo no seu opt-in, aparecerá esta opção de cor do rebordo. Aqui pode selecionar uma cor para utilizar na margem do seu opt-in.

Aqui está um exemplo de dois opt-ins cujo estilo foi ajustado. O da esquerda mudou a sua cor de fundo para azul escuro com uma cor de texto clara, enquanto o da direita tem uma cor de fundo branca com texto escuro. O formulário de registo da esquerda não tem contorno, enquanto o da direita tem um contorno completo.

Estilo de margem

Se optou por ter um contorno, pode ajustar o estilo do contorno aqui. Para além de ajustar a cor na secção anterior, também pode ajustar a forma do contorno.

Sólido

Este é o estilo de contorno mais básico e cria um contorno fino e sólido à volta da margem do seu opt-in.

Pontilhado

A borda pontilhada cria uma linha pontilhada em torno da borda externa do seu opt-in.

Traço duplo

O traço duplo é semelhante ao traço sólido, mas acrescenta uma camada sólida adicional, criando o aspeto de um traço duplo.

Incrustação

O contorno embutido cria um contorno de linha sólida, mas, ao contrário do contorno "sólido", este contorno embutido é colocado no interior do opt-in em vez de no bordo exterior.

Letra

Esta opção cria um contorno mais divertido, imitando uma letra clássica.

Configuração do formulário

Estes estilos aplicam-se ao formulário e aos campos de introdução de dados do formulário. Pode ajustar as suas cores, bem como o local onde o formulário aparece na caixa de registo.

Orientaçãodo formulário

Esta opção ajusta o local onde os campos do formulário aparecem na caixa de diálogo de aceitação. Pode optar por apresentar o formulário na parte superior, inferior, esquerda ou direita do seu título e artigo.

Textodo e-mail

Isto ajusta as palavras de substituição utilizadas no formulário de entrada de correio eletrónico.

Texto do botão

Aqui pode ajustar o texto que aparece no botão de subscrição.

Cor do texto dobotão

Aqui pode ajustar a cor do texto utilizado no botão de subscrição.

Eis um exemplo de dois formulários diferentes cujos parâmetros de configuração foram ajustados. O formulário da esquerda tem a sua posição de formulário na parte inferior, enquanto o formulário da direita tem a sua posição de formulário à esquerda.

Estilo do formulário

Estas definições aplicam-se ao formulário atual dentro da caixa de inclusão.

Orientação docampo do formulário

Isto ajusta a forma como os campos de entrada aparecem no próprio formulário. Pode optar por apresentar os seus campos de entrada "em linha" numa única linha ou empilhar os campos uns sobre os outros.

Estilo do canto docampo do formulário

Aqui pode ajustar o estilo do canto do campo, escolhendo entre arredondado ou quadrado.

Cor do textodo formulário

Aqui pode ajustar a cor do texto que aparece nos campos de entrada do formulário. Se estiver a utilizar uma cor de fundo clara, tente utilizar um campo de texto escuro para que o texto seja legível.

Cor de fundodo formulário

Este parâmetro permite-lhe mudar para a cor de fundo do formulário. Esta, em combinação com a cor de fundo do opt-in, constitui as duas cores principais da sua caixa de opt-in.

Cor do botão do formulário (Cor do botão)

Pode ajustar a cor do seu botão de envio aqui.

Aqui está um exemplo de dois formulários diferentes com definições ajustadas. Um tem formulários empilhados, enquanto o outro tem formulários em linha. Em ambos os casos, a cor de fundo do formulário opt-in foi ajustada e o formulário laranja alterou a cor do seu botão para branco.

Estilo do rebordo do formulário

Cada caixa de opt-in tem um contorno que separa o formulário do conteúdo do texto. Aqui pode aplicar estilos diferentes a este contorno, dando à sua caixa de opt-in um toque único.

Texto do rodapé, mensagem de sucesso e CSS personalizado

Estas definições dão-lhe controlo adicional sobre os itens que aparecem quando os formulários são submetidos, bem como a capacidade de adicionar modificações CSS personalizadas a formulários individuais.

Textodo rodapé do formulário

Esta mensagem será apresentada por baixo dos campos de introdução de dados do formulário. Uma utilização comum pode ser a ligação a uma política de privacidade ou a garantia aos seus utilizadores de que não enviará spam nem partilhará as suas informações.

Texto da mensagem de sucesso

Esta é a mensagem que aparece depois de um visitante se ter inscrito com êxito na sua lista de correio eletrónico.

CSSpersonalizado

Aqui pode adicionar CSS personalizadas que se aplicam apenas ao formulário que está a construir.

Vídeo de apresentação dos parâmetros de personalização do seu formulário de registo

Conclusão

Os parâmetros de design do Bloom permitem variações quase ilimitadas, personalizadas de acordo com o seu site. Por isso, agora é consigo ;)

Vemo-nos em breve para um novo tutorial!

Para saber mais sobre o plugin Bloom e como o utilizar

Visão geral das funcionalidades do plugin Bloom

Adicionar uma conta de correio eletrónico ao Bloom

> Ver a nossa secção de ajuda do plugin Bloom