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.

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

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.

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.

Como adicionar uma fonte personalizada

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

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

Passo 1. Encontre a fonte desejada

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

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:

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

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

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

Passo 6. Clique "Salvar":

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

Configurações de fundo

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

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

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

Um vídeo pode ser adicionado do armazenamento

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

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

Posição 100%; tamanho 100%; sem repetição

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

Repetição da imagem

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

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.

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.

Configurações de exibição

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:

O raio da borda é indicado em pixels - px.

Altura da seção

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.

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

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

Efeito de aparecimento acionado pela rolagem

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.

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:

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.

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.

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.

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.

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.

Por padrão, a seção é exibida em dispositivos de qualquer tamanho.

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

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

• 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á.

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

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

Tempo de aparecimento

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