Como usar o bloco de capa do WordPress

O Bloco de Capa do WordPress é interessante. Permite colocar uma imagem, vídeo ou cor sólida no fundo e adicionar blocos de conteúdo ao primeiro plano. Isso significa que você pode colocar blocos sobre outros blocos. Tem mais opções do que a maioria dos blocos. Saber como usar o Cover Block pode melhorar muito o design do seu site.

Neste artigo, veremos o que o Cover Block faz e veremos suas configurações e opções. Também veremos algumas práticas recomendadas de como usá-lo e ver as perguntas mais frequentes.

Como adicionar um bloco de capa à sua postagem ou página

Para adicionar o bloco de capa às suas páginas e postagens, selecione o ícone do bloco no seu conteúdo ou no canto superior esquerdo da página, insira o nome do bloco e selecione-o.

Você também pode digitar / cobrir e pressionar Enter ou selecionar o bloco.

Você terá então um Cover Block em seu conteúdo, onde pode adicionar mídia, como imagens ou vídeo, ou usar cores de fundo e colocar o texto em primeiro plano. Depois de selecionar o conteúdo de sua pasta de mídia ou cor, a opção de texto aparece em primeiro plano.

Eu adicionei uma imagem da minha biblioteca de mídia e adicionei uma legenda sobre a imagem. A legenda é um bloco de parágrafo. Você pode alterá-lo para outros tipos de blocos, incorporar vídeo e muito mais.

Você também pode adicionar vários blocos pressionando a tecla Enter. Selecione um dos seus blocos normalmente.

Você também pode escolher uma das cores pré-selecionadas para o seu plano de fundo.

A cor pode ser usada como uma sobreposição sobre suas imagens.

Configurações e opções do Cover Block

O Cover Block possui duas áreas com configurações e opções. A primeira é a barra de ferramentas da capa. A segunda são as opções do Cover Block na barra lateral direita.

Barra de ferramentas do bloco de capa

Clicar em qualquer lugar no Cover Block abre sua barra de ferramentas.

Alterar o tipo ou estilo do bloco de cobertura

A primeira configuração altera o número de colunas, permite agrupar, alterar para uma imagem e selecionar o estilo padrão ou bordas. Passar o mouse revela uma visualização. Estou pairando sobre a imagem. A imagem exclui os blocos de conteúdo que você tem na sobreposição.

Arraste ou mova

Pegue a ferramenta de arrastar (6 pontos) para arrastar o bloco para onde quiser. A ferramenta Mover permite clicar nas setas para mover o bloco ou texto dentro do conteúdo.

Alinhamento

As opções de alinhamento incluem esquerda, centro, direita, largura ampla e largura total. Esquerda e direita envolvem o bloco com o parágrafo abaixo dele.

Aqui está a imagem em largura total. Isso pode ser usado para criar títulos, dividir seções, etc.

Alterar a posição do conteúdo

Isso seleciona o local do conteúdo. Ele abre uma grade 3 × 3 com pontos. Selecionar um ponto move o conteúdo para esse local na imagem.

Alternar altura total

Isso define a imagem em sua altura total, em vez de redimensioná-la.

Aplicar Filtro Duotônico

Escolha um tom duplo nas opções pré-selecionadas. Um se aplica às sombras e o outro se aplica aos destaques.

Selecione uma cor no controle deslizante para ajustá-la.

Selecione uma cor sob o controle deslizante para escolher uma cor pré-selecionada.

Substituir

Isso abre as opções de mídia para que você possa carregar ou escolher outra imagem da biblioteca.

Opções

As opções do Cover Block incluem:

Ocultar mais configurações - oculta a barra lateral direita.

Copiar - copia o bloco de capa para que você possa colá-lo em qualquer lugar da página ou postagem.

Duplicar - cria uma duplicata do Cover Block e a coloca sob o original.

Inserir antes - adiciona espaço acima do bloco de cobertura para outro bloco.

Inserir depois - adiciona espaço abaixo do bloco de cobertura para outro bloco.

Mover para - permite mover o bloco movendo uma linha azul para cima ou para baixo com as teclas de seta. Pressione Enter e seu bloco será movido para o local da linha azul.

Adicionar aos blocos reutilizáveis - adiciona o bloco aos seus blocos reutilizáveis ​​para que você possa usá-lo em qualquer página ou postagem.

Grupo - adicione o bloco a um grupo para que você possa ajustá-los como uma única unidade.

Remover bloco - exclui o bloco.

Conteúdo do bloco de capa

Selecionar o conteúdo abre outro conjunto de ferramentas apenas para o conteúdo. O padrão é um bloco de parágrafo e inclui todas as opções padrão para as configurações da barra de ferramentas e da barra lateral. Você pode transformá-lo ou adicionar qualquer bloco. Isso oferece muitas opções para o conteúdo.

Selecione a capa

Isso fecha a barra de ferramentas de conteúdo e abre a barra de ferramentas Bloco de capa.

Redimensionar bloco de capa

Redimensione a imagem arrastando o círculo na parte inferior da imagem.

Configurações do bloco de cobertura

As configurações do Cover Block são colocadas na barra lateral direita. Clique no bloco ou na engrenagem para mostrar a barra lateral. Se você selecionar o bloco dentro do conteúdo do bloco, as configurações da barra lateral serão exibidas.

Estilos

Exibe o bloco com ou sem borda. Você também pode definir o padrão para mostrar a borda. Inclui uma visualização para que você possa ver como ficaria antes de selecioná-lo.

Espaçamento

Adicione espaço a todos os lados ou lados específicos. Selecione cada lado individualmente ou vincule-os para ajustá-los todos de uma vez.

Configurações de mídia

Escolha a parte da imagem que é exibida dentro do bloco. Você pode selecionar um fundo fixo (paralaxe), para repetir o fundo se for muito pequeno para a área, e especificar o ponto focal movendo um círculo ou especificando as posições esquerda e superior. Você também pode limpar a mídia daqui. Apenas o Selecionador de Ponto Focal está disponível para vídeos.

Este exemplo mostra o plano de fundo fixo. A imagem permanece no lugar enquanto o texto rola, criando um efeito de paralaxe.

Este é um fundo repetido. É bom para criar padrões interessantes com imagens pequenas.

Dimensões

Especifique a altura em pixels inserindo-a no campo. Isso funciona da mesma forma que a ferramenta de arrastar na parte inferior da imagem.

Sobreposição

O Cover Block tem várias opções para a sobreposição. Selecione uma cor predefinida e escolha sua opacidade. Escolha entre uma cor sólida ou gradiente. Você verá as mudanças em tempo real. Se você optou por mostrar uma cor em vez de uma imagem, você pode alterar a cor aqui. Este exemplo mostra uma cor sólida.

Você também pode escolher uma cor personalizada. Isso abre um seletor de cores onde você pode selecionar a cor dentro da janela, selecionar a escala de cores com um controle deslizante ou inserir os códigos hexadecimais, RGB ou HSL.

A opção gradiente permite selecionar as duas cores que serão exibidas. Escolha entre linear ou radial. Você também pode definir a opacidade das cores. Selecionei radial neste exemplo.

Avançado

Avançado inclui dois campos. O primeiro é uma opção para uma âncora HTML. Isso fornece um endereço da web especial apenas para o Cover Block. O segundo é um campo para adicionar classes CSS adicionais. Isso permite que você crie CSS customizado para estilizar seu bloco. O estilo que você selecionou também aparece neste campo.

Dicas e práticas recomendadas para usar o Cover Block com eficácia

Para imagens, use as configurações de mídia na barra lateral para mostrar a parte da imagem que você deseja exibir.

Use imagens grandes com a opção de largura total para criar títulos de seção.

Mude para várias colunas para o primeiro plano e adicione imagens, texto e botões para criar frases de chamariz.

Use cores de sobreposição e de texto fáceis de ler sobre a imagem ou cor de fundo.

Transforme o bloco em um grupo se quiser controlar a cor da borda.

Use as opções de alinhamento para definir o Cover Block em seu conteúdo ou separá-lo.

Defina as configurações de posicionamento de conteúdo para criar alguns visuais interessantes e chamar a atenção do leitor.

Use Plano de fundo fixo para criar um efeito de paralaxe.

Use imagens pequenas com fundo repetido para criar padrões de fundo interessantes.

Perguntas frequentes sobre o Cover Block

O que é o Cover Block?

Este é um bloco que permite adicionar mídia ou cor ao plano de fundo e outros blocos ao primeiro plano.

O que o torna diferente de outros blocos?

Ele pode conter outros blocos. Você pode adicionar outros blocos ao primeiro plano. Ele cria paralaxe, padrões, etc.

Pode ser transformado em outros blocos?

sim. Ele pode ser transformado em um bloco de imagem. Ele exclui quaisquer outros blocos que você adicionou à sua área de conteúdo.

Para que isso pode ser usado?

Você pode usar o Cover Block para criar um plano de fundo com uma frase de chamariz, usá-lo para criar um título acima de uma seção, criar pôsteres, seções de heróis ou qualquer coisa que você queira ter uma imagem ou vídeo no plano de fundo.

Conclusão

Essa é a nossa visão do Cover Block. Este bloco tem alguns dos recursos mais interessantes e é uma ótima opção para criar cabeçalhos, títulos, CTAs, planos de fundo paralaxe e muito mais. É fácil de usar e pode fazer seu site se destacar mais do que a maioria dos blocos. Sua capacidade de criar visuais interessantes o torna um dos meus blocos favoritos do WordPress.

Nós queremos ouvir de você. Você usa o Cover Block? Conte-nos sobre sua experiência nos comentários.

Imagem em destaque via fourSage / shutterstock.com