Bloco zero

Neste artigo, vamos explorar como usar blocos zero para criar sites com designs personalizados. Veremos como funciona o editor de blocos e demonstraremos como adicionar e editar elementos.

Criar um site usando o Bloco Zero no campo Mavibot é uma maneira rápida e conveniente de criar um site profissional sem nenhum conhecimento de programação. Não hesite em experimentar, personalizar o design e adicionar conteúdo para tornar seu site único e bem-sucedido.

O Bloco Zero é um editor de design web totalmente personalizável dentro do Mavibot. Ele permite criar designs exclusivos para blocos individuais ou para todo o site sem nenhuma restrição.

Como adicionar o bloco

Para adicionar o Bloco Zero à página, clique no botão "+" na barra de ferramentas de edição.

Depois de clicar no botão "+", o menu "Adicionar um novo bloco" aparecerá à direita.

Selecione o "Bloco Zero" e prossiga para a edição.

Há um menu de configurações do bloco.

Altura do conteúdo

Você pode usar este campo para alterar o tamanho do bloco. O valor padrão é 550px.

Dimensionamento da área da grade

Ele é usado para adaptar o design do site a diferentes tamanhos de tela.

Ele vem desativado por padrão, mas você também pode selecionar "autoescalar pela largura da janela".

Configurações de fundo

Você pode escolher a cor de fundo usando uma ampla paleta de cores. Mova o controle deslizante até o tom desejado, clique no círculo e selecione a cor desejada. Você também pode inserir o código do tom.

Você pode adicionar um arquivo de fundo nos formatos SVG, PNG, JPG ou GIF. O tamanho do arquivo não deve exceder 30 MB.

Exemplo 1. Adicionando um arquivo JPG.

O alinhamento padrão da imagem é definido como Centralizado Centralizado. Você pode selecionar uma posição diferente na lista ou selecionar a posição manualmente clicando no ícone à direita.

Exemplo 1. Exibição padrão da imagem na posição Centralizado Centralizado.

Exemplo 2. Exibição da imagem na posição Superior Esquerda. A posição padrão de "comportamento" é definida como "rolar", você pode selecionar a posição "fixa". Quando você altera a posição, o fundo se desloca.

Adicionando elementos

Clique no botão "Adicionar elemento" à esquerda. Há camadas na parte inferior do botão, e você pode alterá-las entre si sobrepondo um elemento ao outro.

O botão Adicionar elemento cria uma nova camada com o elemento selecionado:

Cada item abre seu próprio menu de configurações.

Clique no botão "Salvar" após configurar o item.

Texto

Você pode adicionar um elemento com conteúdo de texto.

Exemplo de adição de texto a um bloco

Você pode usar fontes padrão ou escolher as suas próprias. Você também pode alterar a cor do texto, o espaçamento entre linhas, o tamanho das letras e a distância entre elas, a posição do texto no bloco, ajustar a capitalização do texto e muito mais:

Imagem

Para adicionar a imagem desejada, baixe o arquivo do sistema. Para isso, clique no ícone de download. Você também pode adicionar uma imagem inserindo um link para ela no campo apropriado. Cole a URL da imagem desejada e escolha como ela será aberta: em uma nova janela ou em uma nova página.

Você pode ajustar sua posição na página após inserir a imagem. Escolha como ela será posicionada em relação à borda esquerda ou direita, ou coloque-a no centro. Você também pode ajustar a transparência da imagem e outras configurações de exibição, como desfoque ou arredondamento.

Exemplo de adição de uma imagem a um bloco

O fundo pode ser alterado a qualquer momento.

Figura

Você pode adicionar uma forma ao bloco (por padrão, ela é um retângulo). Nas configurações, você pode selecionar outra forma: círculo ou linha. Você também pode personalizar a forma como desejar: alinhar, adicionar efeitos, alterar a cor, o fundo, o estilo, etc.

Configurações da figura:

Exemplo de adição de uma forma a um bloco

Botão

Para adicionar um botão, clique em "Adicionar item" e selecione "Botão":

Na seção de configurações, você pode personalizar a aparência do botão de acordo com o seu gosto. Escolha um estilo, cor, fundo, nível de desfoque e outras opções. Você também pode alterar a fonte, a cor e o tamanho do texto no botão.

Para que o botão fique ativo, você precisa adicionar um link para a página desejada nas configurações do item, na seção Botão. Ao clicar no botão, o link será acessado.

Para ver se o botão está funcionando, você precisa salvar as alterações, fechar as configurações do bloco e ir para a prévia do site.

Vídeo

Você pode usar esta ferramenta para adicionar qualquer vídeo e configurar sua exibição no bloco.

Você pode adicionar vídeos de vários recursos ao bloco zero:

Para isso, basta selecionar exatamente onde o vídeo está localizado (Youtube, Vimeo ou MP4) e, em seguida, colar a URL no campo de links.

Você também pode adicionar vídeos do armazenamento de arquivos. Para isso, copie o link do vídeo no armazenamento de arquivos:

Depois selecione o tipo de vídeo MP4 nas configurações do item "Vídeo":

E cole o link do vídeo do armazenamento de arquivos.

Dica

Este elemento permite adicionar uma dica com qualquer conteúdo. Você pode editar o item como preferir nas configurações.

Você pode tornar a dica semitransparente e posicioná-la sobre o texto, fundo ou imagem:

Quando você passa o mouse sobre a dica (na página do site, NÃO no modo de edição), algum texto será exibido:

Não se esqueça de salvar as ações concluídas nas configurações usando a função "Salvar".

Galeria

Você pode adicionar um novo elemento ao bloco zero da mesma forma que os anteriores:

O Mavibot adiciona duas imagens por padrão. Mas você também pode enviar as imagens de que precisa para a galeria por conta própria. Para isso, vá até a camada da galeria (o botão da camada fica à esquerda da tela ou clique diretamente na imagem).

Nas configurações do elemento, usando as funções disponíveis, você pode, se necessário, alinhar a galeria em relação à borda esquerda ou direita ou ao centro. Você também pode mover um item mantendo pressionado o botão esquerdo do mouse e clicando no item.

Além disso, você pode ajustar a transparência, a rotação e outros efeitos das imagens para tornar a exibição da galeria no bloco mais interessante.

Há duas opções de tamanho de imagem na galeria: "cover" — a largura total da imagem e "contain" — com bordas.

Exemplo 1. Tamanho da imagem - "cover"

Exemplo 2. Tamanho da imagem - "contain".

O recurso de loop permite passar automaticamente da última imagem da galeria para a primeira sem precisar rolar pelas anteriores. Se o recurso de loop estiver desativado, precisamos usar manualmente as setas para voltar à primeira imagem.

Você também pode selecionar a velocidade de rolagem das imagens e a reprodução automática para rolar pela galeria automaticamente.

Nas configurações dos botões da galeria, você pode alterar a cor, a forma (torná-los triangulares ou em forma de setas), a posição, o tamanho e outros parâmetros.

Nas configurações, você também pode ajustar a moldura da galeria, seu estilo, arredondamento, além de adicionar sombras e outros efeitos.

Acordeão

O elemento universal do bloco Acordeão é uma solução gráfica conveniente para um site em forma de lista de notas de texto com elementos suspensos:

O Acordeão é fácil de integrar ao seu site e personalizar de acordo com suas necessidades: ele pode ser adaptado a qualquer exigência.

Para adicionar um item ao bloco, abra as configurações do bloco universal. Você verá "Acordeão" na lista de itens disponíveis.

Para aplicar os parâmetros de estilo desejados a um elemento, você precisa clicar nele. Depois disso, o construtor de parâmetros "Acordeão" aparecerá à direita, assim como para os outros elementos do bloco zero.

Depois de clicar na seta, uma janela pop-up com informações aparecerá na tela, por exemplo, com a resposta a uma pergunta:

Para fazer alterações no texto de um elemento, clique duas vezes com o botão esquerdo em um elemento existente no modelo criado. Você pode alterar o texto na lista suspensa da mesma forma.

Depois de selecionar o texto para editar, as configurações de texto aparecerão na parte superior da tela, semelhantes às usadas em qualquer editor de texto.

Neste menu adicional de texto, você pode alterar configurações da fonte, como espessura, inclinação, altura e outras.

Agora vamos ao menu à direita das configurações básicas do item. Você também pode alterar a fonte aqui: escolha cor, saturação, capitalização, transparência, além de adicionar sua própria fonte e outras opções.

Nas configurações do Acordeão, você pode adicionar mais perguntas, respostas etc. Você precisa clicar em Adicionar:

Você também pode alterar o design da pergunta e da resposta, torná-las mais arredondadas, deixar o fundo transparente, ajustar a mudança de fundo ao passar o mouse sobre a pergunta ou resposta, organizar a moldura em um determinado estilo e outros parâmetros — tudo depende da sua imaginação e preferências.

No Bloco Zero, você pode combinar vários elementos para criar um estilo de site único e memorável. Isso permitirá surpreender seus clientes com soluções de design originais.

Depois de concluir o trabalho na página, você precisa adaptá-la a diferentes tamanhos de tela.

Formulário

O elemento "Formulário" do Bloco Zero permite que você use o formulário de coleta de solicitações onde realmente for necessário. Você poderá coletar solicitações e contatos exatamente onde o usuário estiver mais envolvido, sem precisar exibi-lo em um formulário separado.

Para adicionar um formulário ao bloco zero, clique em "+Adicionar item" e, em seguida, selecione "Formulário" na lista suspensa que se abrir.

O bloco "Formulário" aparecerá como botões em mensageiros aos quais você pode adicionar perguntas e alterar os botões:

Para adicionar perguntas ao formulário, por exemplo, na forma de "Digite o e-mail", "Descreva sua pergunta" e similares, você precisa clicar no botão "Configurar perguntas" no menu de configurações à direita:

Depois crie suas perguntas no formulário:

O resultado pode ser o seguinte:

Você pode adicionar a caixa de seleção "Concordo com a política de tratamento de dados pessoais":

Você também pode editar os botões de mídia social:

E personalizar o título e o subtítulo do formulário.

Clique duas vezes no campo de texto; depois disso, você poderá inserir o texto necessário, além de alterar a fonte, negrito, cor do texto etc.:

Para mais informações sobre os tipos de campos de pergunta, consulte o artigo "Respostas do Fórum".

reCAPTCHA

Para instalar o reCAPTCHA, você precisa especificar um par de chaves (chaves pública e secreta) nas configurações gerais do site e ativar a verificação do recaptcha no bloco zero no formulário de coleta de dados.

Você pode escolher qualquer serviço que forneça proteção de site usando captcha. Nesta seção, veremos como instalar um captcha do Google.

Etapa 1. Obtendo as chaves

Primeiro, você precisa preencher as informações básicas para receber as chaves: selecione os tipos de captcha; adicione o domínio do site no qual você planeja instalar a proteção. Em seguida, clique em "Enviar".

Etapa 2. Inserindo as chaves

Depois disso, você verá um par de chaves que precisa copiar e colar nas configurações da página do site no MaviBot. Para isso:

1) Encontre o botão de configurações da página do site no painel superior:

2) Vá para as configurações de informações básicas:

3) Nas configurações de informações básicas, insira os valores do par de chaves que você recebeu anteriormente:

Etapa 3. Ative o reCAPTCHA no bloco zero.

Vá até o bloco zero em que você instalou um formulário de coleta de dados, ou para o bloco zero em que você planeja criar um formulário reCAPTCHA:

Clique no item "Formulário" no bloco zero para abrir a barra de menu à direita.

Descrevemos como criar um formulário de coleta de dados e editá-lo na seção "Formulário" acima.

Em seguida, encontre os botões para ativar o reCAPTCHA:

Ative o reCAPTCHA (se necessário, você pode ativar avisos em inglês):

Depois salve as configurações.

Pronto! Agora você sabe como ativar o reCAPTCHA no Bloco Zero.

Como adaptar a página no bloco zero foi descrito no artigo de mesmo nome.