Blocos

Blocos » Bloco de cobertura

Para proporcionar ao seu post ou à sua página um visual elegante e profissional, você pode adicionar um bloco de cobertura.

Adicionar o bloco de cobertura

Para começar, clique no ícone de inserção +. É possível adicioná-lo rapidamente, digitando “/cobertura” em um novo bloco de parágrafo e depois pressionando Enter.

Use o comando de barra “/cobertura” para inserir uma imagem de capa.

Você encontra instruções detalhadas sobre como adicionar blocos neste link.


Adicionar uma imagem

Depois de criar o bloco, você terá duas opções: Fazer upload e Biblioteca de mídia. A opção Fazer upload permite carregar uma nova imagem do seu dispositivo. Já a Biblioteca de mídia possibilita que você selecione uma imagem que já foi enviada para a Biblioteca de mídia do seu site.


Adicionar texto e outros conteúdos

Agora que você já selecionou a imagem de capa, pode escrever um título sobre ela. Você pode usar essa função, por exemplo, para atribuir um título a uma nova seção de um post ou uma página. Você também pode adicionar outros blocos em cima do bloco de cobertura, como um bloco de botão ou um bloco de parágrafo.


Barra de ferramentas do bloco

Todos os blocos acompanham ícones exclusivos da barra de ferramentas e controles específicos do usuário, que permitem a manipulação do bloco diretamente no editor.

O bloco de cobertura oferece diversas opções na barra de ferramentas.
O bloco de cobertura oferece diversas opções na barra de ferramentas.
Alinhamento

Assim como em muitos outros blocos, você pode alinhar o bloco de cobertura à esquerda, à direita e no centro a partir da barra de ferramentas. Usando o alinhamento à esquerda ou à direita, é possível colocar outro bloco ao lado do bloco de cobertura.

O bloco de cobertura conta também com os alinhamentos Amplo e de Largura total, que são úteis para a criação de efeitos de widescreen e cabeçalhos exclusivos. Essas duas opções só estarão disponíveis se seu Tema for compatível com esse tipo de alinhamento. 

O alinhamento Amplo vai desmembrar a coluna de vinculação, enquanto que o de Largura total ocupará as laterais da largura da página.
O alinhamento Amplo vai desmembrar a coluna de vinculação, enquanto que o de Largura total ocupará as laterais da largura da página.
Posição do conteúdo

Use a opção Posição do conteúdo para definir onde o texto e outros conteúdos serão posicionados na imagem:

Bloco de cobertura – Opção Posição do conteúdo
Mover o conteúdo dentro do bloco usando a Posição do conteúdo
Substituir imagens

Essa é outra opção na barra de ferramentas do bloco de cobertura. A opção Substituir permite que você selecione um novo arquivo de imagem para seu bloco. Use-a se você precisar substituir o arquivo de imagem no seu bloco de cobertura.


Configurações do bloco

Todos os blocos têm opções específicas na barra lateral do editor, além das opções encontradas na barra de ferramentas do bloco. Caso não esteja visualizando a barra lateral, basta clicar no ícone de engrenagem, ao lado do botão Publicar.

As configurações do bloco ficam na barra lateral.
As configurações do bloco ficam na barra lateral.
Estilos

Use os estilos nas configurações do bloco da cobertura para adicionar um efeito de onda à parte superior ou inferior da imagem de capa.

Fundo fixo

Nas configurações do bloco na barra lateral, você verá uma opção para um fundo fixo. Usar um plano de fundo fixo significa que a imagem de capa percorrerá toda a página. Desativar essa opção incorporará a imagem de forma fixa para que ela não role pela página.

Transforme seu bloco de cobertura em uma imagem fixa.
Transforme seu bloco de cobertura em uma imagem fixa.
Seletor de ponto focal

Se a opção de fundo fixo estiver desativada, você verá o seletor de ponto focal. Essa ferramenta permite identificar e destacar o principal ponto de interesse na foto. Clique no seletor para arrastá-lo até o local desejado ou use as porcentagens de posição horizontal e vertical abaixo para defini-lo manualmente.

Dimensões

Você pode definir a altura mínima da imagem da capa (em pixels) para garantir que ela seja exibida pelo menos no tamanho mínimo definido, independentemente do tamanho da tela em que o usuário esteja visualizando a página.

Cor de sobreposição

Usando as opções da sobreposição de cores, é possível adicionar uma sobreposição à imagem de capa. Por padrão, essa sobreposição é cinza e transparente, mas, com as opções de sobreposição de cores, é possível trocar para qualquer outra cor de sua preferência.

Adicione uma sobreposição de cor e defina a opacidade dela.
Adicione uma sobreposição de cor e defina a opacidade dela.
Opacidade

Esse controle deslizante permite que você defina a opacidade da sobreposição da imagem de capa. Mover o controle deslizante na direção do 100 deixará a sobreposição mais escura e opaca, enquanto movê-lo na direção do 0 a deixará mais clara e transparente. Com o controle em 100, a sobreposição fica totalmente opaca e a imagem de capa deixará de estar visível. Com o controle em 0, a sobreposição desaparece completamente, deixando apenas a sua imagem.

Caso adicione um título à sua imagem de capa, recomendamos uma opacidade mediana para que o título fique mais legível.


Vídeo no bloco de cobertura

Seu site tem um plano Premium, Negócios ou eCommerce? Você pode usar um vídeo no bloco de cobertura! Funciona melhor com vídeos no formato .mp4, mas fique à vontade para carregar vídeos de outros formatos. Veja a lista de formatos aceitos nas nossas Perguntas frequentes sobre o VideoPress.

Insira o bloco de cobertura, mas, em vez de escolher uma imagem, adicione um vídeo que você já carregou ou carregue outro diretamente:

Gravação: insira um bloco de cobertura, insira uma imagem da biblioteca de mídia e selecione a guia de vídeo no popup da biblioteca de mídia.

Depois, você pode selecionar o vídeo que gostaria de adicionar e ajustar as configurações de largura do bloco:

Gravação: selecione um vídeo para inserir no bloco e ajuste a largura do bloco.

Agora você pode adicionar textos ou botões ao seu vídeo de capa!


Avançado

Na guia Avançado, você adiciona uma classe CSS ao bloco, permitindo a gravação de CSS personalizado e a estilização do bloco conforme você julgar melhor. Saiba mais.

A seção Avançado permite adicionar uma classe CSS ao bloco.
A seção Avançado permite adicionar uma classe CSS ao bloco.