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

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

Clique no botão Configurações para abrir o menu de configurações globais da seção à 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 único estilo de fonte a todo o bloco para uniformidade.
  2. Ativar a opção Fonte adicional para definir estilos separados para o Título e o Texto, criando funções visuais distintas 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 grande 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 (fonte que imita a escrita à mão)
  • monospace (fonte monoespaçada ou desproporcional, uma fonte em que todos os caracteres têm a mesma largura)
  • display (fonte em negrito para exibição)
  • Suporte de idioma
  • Cirílico
  • Latino

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 botão "Adicionar":

Suas configurações de fonte personalizada serão exibidas aqui depois de salvas.

Passo 6. Clique em "Salvar":

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

Configurações de fundo

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

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

A imagem pode ser adicionada como um 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 de 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
top, bottom, center Alinhamento vertical
left, right, center Alinhamento horizontal
bottom left, top right, center center Posição combinada

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

  • Porcentagens (ex.: 30% 75%)
  • Pixels (ex.: 20px 100px)
  • Ou unidades mistas

Opções de dimensionamento da imagem

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

1. Definir dimensões personalizadas

Defina a largura e a altura usando valores flexíveis.

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

2. Usar uma palavra-chave predefinida

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

  • contain — Redimensiona a imagem para caber inteiramente na altura da seção, mantendo sua proporção (Exemplo 3).
  • cover — Exibe a imagem em suas dimensões de pixel originais (Exemplo 4: tamanho original 1268 × 1343 px).

Repetição da imagem

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

Como fixar uma imagem

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

Cor de fundo e gradiente

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 é visível (ex.: 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 viewport (responsiva ao tamanho da tela)

Largura da seção

Largura de 1 coluna = 106 px

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

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

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

Efeito de aparecimento acionado por rolagem

Ative este interruptor para habilitar animações acionadas por 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 Mavibot, ative este controle deslizante:

Margens (para a 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/esquerdo/direito) é 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 (ex.: desktop, tablet, celular) este bloco será exibido. Esta configuração é definida individualmente para cada bloco.

Por que isso é útil e como funciona?

Se um bloco (ex.: uma capa) é exibido bem 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 seja visível apenas em visualizações de desktop e oculto em dispositivos móveis.

Em seguida, 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. Será a versão móvel do bloco.

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

A faixa de visibilidade (valores de parâmetros diferentes) é 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 de telefone específico, 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
  • Faça upload de uma imagem otimizada para telas pequenas

A segunda seção é para PCs (laptops). Defina a faixa de visibilidade de 641 pixels para cima.

  • Salve suas alterações e vá 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 pré-visualização do site. Clique com o botão direito do mouse e clique em "Exibir código".

Selecione o dispositivo no qual deseja ver a aparência do site.

Temporização de aparecimento

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