# Configurações globais da seção

Todos os blocos usam as mesmas configurações globais para fontes, fundos e exibição, garantindo um estilo visual consistente em todo o seu site, ao mesmo tempo em que permitem que o conteúdo dos blocos seja diferente.

Para configurar as definições globais de qualquer bloco, passe o cursor sobre ele e selecione o **Configurações** botão que aparece.

<figure><img src="/files/103d1af88b38d650af5f0cf927bbf7c97dc5ef9f" alt=""><figcaption></figcaption></figure>

Clique no **Configurações** botão para abrir o menu de configurações da seção global à direita.

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

## Configurações de fonte

Você pode alterar as seguintes configurações:

* Fonte e estilo: a família da fonte, o estilo (Normal ou Itálico) e o peso (negrito).
* Espaçamento: o espaçamento entre letras, a altura da linha e o tamanho da fonte.

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

Para blocos com um campo de Título e um campo de Texto, você tem duas opções de estilo:

1. Aplicar um **estilo de fonte único** a todo o bloco para manter a uniformidade.
2. Ative a alternância **Fonte adicional** opção para definir estilos separados para o Título e o Texto, criando papéis visuais distintos dentro do mesmo bloco.

<figure><img src="/files/5a17ce1c85a5baa3815edf4e1346eb16320bd569" alt=""><figcaption></figcaption></figure>

### Como adicionar uma fonte personalizada

Para adicionar uma fonte personalizada, encontre o botão com o mesmo nome e clique nele:

<figure><img src="/files/0926a0e87b535372d02e5f29d71457f3432deb06" alt=""><figcaption></figcaption></figure>

Você será levado a uma página com uma enorme variedade de fontes diferentes:

<figure><img src="/files/8179aa89610b7df218ced42aed83c11c8cb97f22" alt=""><figcaption></figcaption></figure>

Passo 1. Encontre a fonte desejada

a) Isso pode ser feito usando a barra de pesquisa:

<figure><img src="/files/5aa31295fb52639a1d233a10a58c4a2595ca390e" alt=""><figcaption></figcaption></figure>

Selecione os critérios necessários para a fonte:

* Categoria da fonte
* sans-serif (letras sem serifa)
* serif (letras com serifa)
* handwriting (uma fonte que imita a escrita à mão)
* monospace (fonte monoespaçada ou desproporcional, em que todos os caracteres têm a mesma largura)
* display (fonte decorativa em negrito)
* Suporte a idiomas
* Cirílico
* Latim

b) Para encontrar uma fonte manualmente, role a lista na faixa de formatação.

Passo 2. Clique na fonte selecionada:

Você verá uma janela modal com opções de fonte:

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

Passo 3. Selecione uma opção de fonte marcando a caixa ao lado da que você precisa:

<figure><img src="/files/772edc22b23b7c16d93e4f087f9007e536f9459e" alt=""><figcaption></figcaption></figure>

Passo 4. Clique no **"Adicionar"** botão:

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

As configurações da sua fonte personalizada serão exibidas aqui depois de salvas.

<figure><img src="/files/73d9c5ff40719b374f97b079b2917649a6328bf4" alt=""><figcaption></figcaption></figure>

Passo 6. Clique **"Salvar"**:

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

As fontes adicionadas serão mostradas na mesma lista que as fontes padrão.

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

## Configurações de fundo

<figure><img src="/files/6bb56d00008e65618d052a0948b3d879b290159f" alt=""><figcaption></figcaption></figure>

Personalize o plano de fundo da seção com uma cor sólida, gradiente, imagem ou vídeo.

<figure><img src="/files/4449e353034f20c995d89651cdb342d652fd02ce" alt=""><figcaption></figcaption></figure>

Você pode sobrepor uma cor ou um gradiente sobre uma imagem de fundo.

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

A imagem pode ser adicionada como arquivo ou como um link para a imagem:

<figure><img src="/files/2695280d7091247827eb3c9f2685a1670fbaa3ca" alt=""><figcaption></figcaption></figure>

Um vídeo pode ser adicionado do armazenamento

<figure><img src="/files/95493578f556997c2db1af9e8bbd82c37dafd6ae" alt=""><figcaption></figcaption></figure>

Primeiro, faça o upload do seu arquivo de vídeo para o armazenamento de arquivos.

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

### Configurações da imagem de fundo

**Controle de posicionamento da imagem**

Uma imagem dentro de uma seção é posicionada usando dois parâmetros independentes:

1. **Alinhamento horizontal** (eixo X)
2. **Alinhamento vertical** (eixo Y)

**Especifique a posição** usando uma palavra-chave ou uma combinação:

| Palavra-chave                                    | Efeito                 |
| ------------------------------------------------ | ---------------------- |
| `topo`, `base`, `centro`                         | Alinhamento vertical   |
| `esquerda`, `direita`, `centro`                  | Alinhamento horizontal |
| `base esquerda`, `topo direito`, `centro centro` | Posição combinada      |

**Para um controle preciso**, você também pode usar valores numéricos:

* Porcentagens (por exemplo, `30% 75%`)
* Pixels (por exemplo, `20px 100px`)
* Ou unidades mistas

<figure><img src="/files/2002f292b831fdc1e31ea4fd4f5800edc6356c12" alt=""><figcaption><p>Posição 100%; tamanho 100%; sem repetição</p></figcaption></figure>

**Opções de dimensionamento da imagem**

Você pode controlar as dimensões de uma imagem usando os seguintes métodos:

**1. Defina dimensões personalizadas**

Defina largura e altura usando valores flexíveis.

* **Formato:** `[largura] [altura]`
* **Exemplo 1 (Pixels):** `500px 300px`
* **Exemplo 2 (Porcentagem):** `15% 10%`

**2. Use uma palavra-chave predefinida**

Especifique um único parâmetro para aplicar um comportamento específico de dimensionamento:

* **`contain`** — Ajusta a imagem para caber totalmente dentro da altura da seção, mantendo sua proporção (Exemplo 3).
* **`cover`** — Exibe a imagem nas suas dimensões originais em pixels (Exemplo 4: tamanho original 1268 × 1343 px).

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

**Repetição da imagem**

Esta opção está desativada por padrão. As configurações disponíveis incluem:

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

**Como fixar uma imagem**

Ative este interruptor para definir uma imagem de fundo fixa. Quando ativa, a imagem permanece parada durante a rolagem, permitindo que o conteúdo se mova sobre ela.

<figure><img src="/files/10df2eab9501d471e597c4c86c34fc6ff8ad37ef" alt=""><figcaption></figcaption></figure>

### Cor e gradiente de fundo

Você pode personalizar o fundo da seção com uma cor sólida ou escolher um gradiente entre as opções disponíveis.

<figure><img src="/files/d6ae979cc06eff1eb986e01b3f05d128734fc5e2" alt="" width="563"><figcaption></figcaption></figure>

## Configurações de exibição

<figure><img src="/files/844be5cda0d302bae6f6a807bcb2461e13e1ad26" alt=""><figcaption></figcaption></figure>

Você pode especificar onde esta seção será visível (por exemplo, em quais dispositivos ou plataformas). Por padrão, ela é exibida no site e no Facebook. Usando o menu suspenso, você pode selecionar uma opção de exibição para este bloco, como torná-lo visível apenas no site.

**Raio da borda:**

<figure><img src="/files/2124bf727d887c4b40684951370e83f0082c23d8" alt=""><figcaption></figcaption></figure>

O raio da borda é indicado em pixels - px.

Altura da seção

<figure><img src="/files/49e0c527192a9e3103e655e7f36f8f30104a7121" alt=""><figcaption></figcaption></figure>

A altura da seção pode ser definida usando as seguintes unidades:

* px: pixels (valor fixo)
* vh: altura da janela de visualização (responsiva ao tamanho da tela)

### Largura da seção

Largura de 1 coluna = 106 px

Por padrão, a largura da seção é definida para tela cheia, e o conteúdo é exibido dentro de um layout de 8 colunas.

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

Exemplo 1: o conteúdo é centralizado dentro da seção e ocupa 5 colunas do layout.

<figure><img src="/files/25ea12d7a12fd8d96396ae09963f1b70d7c26993" alt=""><figcaption></figcaption></figure>

Exemplo 2. Uma seção ocupa 8 colunas, com o conteúdo cobrindo toda a largura da seção:

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

**Efeito de aparecimento acionado pela rolagem**

<figure><img src="/files/96b70da8357d3782b8e58b3aa00e8076ac00e45a" alt=""><figcaption></figcaption></figure>

Ative este interruptor para habilitar animações acionadas pela rolagem para o seu conteúdo. Você pode escolher fazer o conteúdo aparecer de baixo, de cima, da esquerda ou da direita.

### Exibição do conteúdo

O conteúdo é exibido horizontalmente e centralizado por padrão. Ele pode ser deslocado para a borda esquerda ou direita da página.

<figure><img src="/files/195f94ca8d0a35e7a51a7d74f3193798b3aca0b8" alt=""><figcaption></figcaption></figure>

Verticalmente, o conteúdo é alinhado ao topo por padrão. Ele pode ser movido para baixo ou centralizado na página.

Para adaptar o texto a telas estreitas de acordo com os estilos da Mavibot, ative este controle deslizante:

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

### Margens (da seção)

#### Margens externas

Você pode usar estes campos para ajustar o espaçamento entre as seções. Por padrão, o preenchimento interno (superior/inferior/esquerda/direita) é definido como 0 px.

<figure><img src="/files/6a0ab1dd80395ce48250cec0ba3b2218593e2172" alt=""><figcaption></figcaption></figure>

Para aplicar margens iguais em todos os lados, insira o valor no campo principal. As margens superior, inferior, esquerda e direita serão definidas automaticamente.

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

Para garantir consistência visual, as margens devem ser configuradas individualmente para cada seção.

#### Margens internas

Use estes campos para ajustar a margem interna da seção. Por padrão, a margem (superior, inferior, esquerda, direita) é definida como 32 px.

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

#### Faixa de visibilidade por dispositivo

A faixa de visibilidade determina em quais dispositivos (por exemplo, desktop, tablet, celular) este bloco será exibido. Essa configuração é definida individualmente para cada bloco.

<figure><img src="/files/5d2aab4fb71e2686a1fbbb246b271131c6350914" alt=""><figcaption></figcaption></figure>

**Por que isso é útil e como funciona?**

Se um bloco (por exemplo, uma capa) fica bom no desktop, mas não no celular, você pode configurá-lo para aparecer apenas em dispositivos com largura de tela de 960 pixels ou mais. Isso garante que o bloco fique visível apenas em visualizações de desktop e oculto em dispositivos móveis.

Depois, você precisa copiar este bloco e personalizar sua aparência especificamente para dispositivos móveis (alterar a foto, o tamanho da fonte etc.). Para este bloco, defina a visibilidade na faixa de 0 a 960 pixels. Essa será a versão móvel do bloco.

Como resultado, a versão para desktop será exibida em computadores, enquanto a versão móvel será mostrada em smartphones e tablets.

A faixa de visibilidade (valores diferentes de parâmetros) é necessária para poder personalizar a aparência da unidade para um dispositivo específico selecionando a resolução. Por exemplo, se o bloco não for exibido bem em um tablet ou em um modelo específico de celular, você pode personalizar sua aparência com base na resolução desses dispositivos.

{% hint style="info" %}
Por padrão, a seção é exibida em dispositivos de qualquer tamanho.
{% endhint %}

#### Exemplo

Configure a primeira seção para dispositivos móveis e tablets

* Crie uma seção
* Defina sua faixa de visibilidade de 0 a 640 px
* Envie uma imagem otimizada para telas pequenas

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

A segunda seção é para PCs (notebooks). Defina a faixa de visibilidade a partir de 641 pixels ou mais.

<figure><img src="/files/74905d56a7e24da69ba58caabd82f51fa3ecfb11" alt=""><figcaption></figcaption></figure>

* Salve suas alterações e prossiga para a página de edição. Para sua conveniência, as configurações de visibilidade da seção serão exibidas lá.

<figure><img src="/files/0804dbc7e821acdbcbcf1ff21b3842cbcc3c7f32" alt=""><figcaption></figcaption></figure>

Para testar como as seções aparecerão em um dispositivo específico, vá para a página de visualização do site. Clique com o botão direito do mouse e clique em "Ver código".

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

Selecione o dispositivo no qual você quer ver como o site ficará.

#### Tempo de aparecimento

<figure><img src="/files/5bcffa1fe82bf6004ffce8cbdf58dec8a25c1380" alt=""><figcaption></figcaption></figure>

Você pode usar este campo para definir o atraso antes de uma seção aparecer, especificado em segundos (s) ou minutos (m).


---

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