# Bloco zero

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.

<figure><img src="/files/9a786cceb100943e28881110aa4124791c4448bd" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/2bc1c1610a89346a7bd45921c8cdb342ea9f0fe9" alt=""><figcaption></figcaption></figure>

## Como adicionar o bloco

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

<figure><img src="/files/afb719ba1e3bb45792d60deecdb7d4f543c66e8a" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/4776786289e86b964e6db2be980f3a37604f8e4f" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/faf68fe0acd0a1228d44127a09dfe89c6e746c98" alt=""><figcaption></figcaption></figure>

#### Dimensionamento da área da grade

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

<figure><img src="/files/0dc61d5a60b9a764c818a860ba2ffea40bb5cf58" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/c79b4698f8d59ecf44e111875e72f7c64ce0775e" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/85d2cfd681212e78341688a243901da42571dc70" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/030792aa559dccd850eb819f0e43cc186cb26600" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/8d89d0f10c037754c804865250842d3c0ee57e58" alt=""><figcaption></figcaption></figure>

## 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.

<figure><img src="/files/87cc415448441ae2b5b6d123ead502a0a56a09cd" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/3454944fe76692fd8a1152d58b5d4543e61dac1c" alt=""><figcaption></figcaption></figure>

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

&#x20;Clique no botão "Salvar" após configurar o item.

<figure><img src="/files/b605c8e96ab616e188118f1d0145af83013eb098" alt=""><figcaption></figcaption></figure>

### Texto

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

<figure><img src="/files/7bb423e3fc121fd18ec60a5e4189e4ad0465b925" alt=""><figcaption></figcaption></figure>

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:

<figure><img src="/files/ac29b57e8ef6e5037b9d33df2d149feb62aceded" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="/files/9a8ee2f216abb047be60fad7abe0be246c096a86" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/aa394e199bb318d5c55ceab8d50f2203b62230d4" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/13565ef1a7b12b0464652f06a3829af4f584b2d5" alt=""><figcaption></figcaption></figure>

Configurações da figura:

<figure><img src="/files/361ff0a8bd8f1ff749d83573d509150d7cb12719" alt=""><figcaption></figcaption></figure>

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":

<figure><img src="/files/f6725f9b26cde130bba12c663cc72eae7000ce74" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/cfb0769f3d509cc996ca7a037ec482b1382ac348" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/8d0d2b959519810063ace5a7ba2ca8320d2d1a0e" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/94b335fec0eb3a3c3b72fbf4481fb6addc311cf1" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/034ce96e367ace3b999e190c88883bceafa2194a" alt=""><figcaption></figcaption></figure>

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:

<figure><img src="/files/e33dc615fec71c27b20be97cb862b470ca6c11a0" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/5009cf1436711ec5a2f384877f0307e67843c9fb" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/a9415cdf6bda7e1d1daa12dbcb79f20690c1340b" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/67e113847db883d75af381d603c3ecef46d335b9" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/e900d72cfaf4017fa870a698b3bfc6d49aec9790" alt=""><figcaption></figcaption></figure>

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:

<figure><img src="/files/819e5324153437b442193e143c40a2f66dab3402" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/7c3184b77c13c42d75f6266a23179525547a997f" alt=""><figcaption></figcaption></figure>

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"

<figure><img src="/files/d8950b6daf8155f33841f13db78fd0002923bf35" alt=""><figcaption></figcaption></figure>

Exemplo 2. Tamanho da imagem - "contain".

<figure><img src="/files/a54956202f01bdb0b99d0e3de30c3b08eca43f3b" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/9bd8eec60bb191009de9c969f297acac03a6c2eb" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/04543d8215a9cf5b7dd7c17929608be61a64c888" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="/files/a54701061d0f27857667c63c69b4fc7d4d562128" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/a51100b675b06974e9cd36e9486e8feca58eec5d" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/18b603fd900b5ea56add72644fb86b11384cb668" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/47d8093babbfd6e0946ba4994fcac4cdf4dbed97" alt=""><figcaption></figcaption></figure>

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:

<figure><img src="/files/fa99b1d14019da74a28b085bd4284476bdc67e5f" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/f522708e5c19f341b6bbed1ce4499aefa8e31732" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/8336c6bcfb447b82e3d06bee039f81786653560c" alt=""><figcaption></figcaption></figure>

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:

<figure><img src="/files/543cdbe449635c560972a5e758726d4ed457fb30" alt=""><figcaption></figcaption></figure>

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:

<figure><img src="/files/4e726a0d1508c7361f583453763e47c13eba41c4" alt=""><figcaption></figcaption></figure>

Depois crie suas perguntas no formulário:

<figure><img src="/files/c61762db2c38b3fbb63440a645d17c6781dba66c" alt=""><figcaption></figcaption></figure>

O resultado pode ser o seguinte:

<figure><img src="/files/1a6c4e38ed4f824f1b80b1631ed237d4f1c8324d" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/0f028d876e17f7466282ba61d13c1e15e2aa4cc2" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/d40681b0ae51868b0fc4a9363732bdad7120153d" alt=""><figcaption></figcaption></figure>

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.:

<figure><img src="/files/676fc9ef869c1466085a4dd26c38236017f5e65b" alt=""><figcaption></figcaption></figure>

Para mais informações sobre os tipos de campos de pergunta, consulte o artigo "[Respostas do Fórum](https://docs.salebot.pro/minilendingi-v-socialnykh-setyakh/otvety-form)".

### 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

<figure><img src="/files/6182e96c7f2f1cbcccdeab9607c37beddd7db0c2" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/8c819cb2bbd024d424a364937795cf3b0a8f70f6" alt=""><figcaption></figcaption></figure>

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:

<figure><img src="/files/b3f9b40a440867039211318d31f3e6ccc06bce46" alt=""><figcaption></figcaption></figure>

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:

<figure><img src="/files/0c77543211984dc93d3cc227fbca25d3f5a53f9b" alt=""><figcaption></figcaption></figure>

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:

<figure><img src="/files/1052f370951e8a0095028d7d93459f4dcf78d416" alt=""><figcaption></figcaption></figure>

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](https://docs.salebot.pro/minilendingi-v-socialnykh-setyakh/sekcii-bloki/universalnyi-blok-zero-block#forma)" acima.

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

<figure><img src="/files/14065ff09147b3696cda6908fdd5f0f2bb92aeeb" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/50a7ffbc7c96afdc65c7936fba8512e6f4e64273" alt=""><figcaption></figcaption></figure>

Depois salve as configurações.

{% hint style="success" %}
Pronto! Agora você sabe como ativar o reCAPTCHA no Bloco Zero.
{% endhint %}

{% hint style="info" %}
Como adaptar a página no bloco zero foi descrito no [artigo de mesmo nome](https://docs.salebot.pro/minilendingi-v-socialnykh-setyakh/sekcii-bloki/universalnyi-blok-zero-block/kak-adaptirovat-stranicu-v-universalnom-bloke).
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mavibot.ai/doc/pt/websites/sites/blocks/zero.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.