Como redimensionar blocos no WordPress

O Gutenberg Block Editor, apresentado oficialmente no WordPress 5.0, oferece aos usuários a oportunidade de personalizar totalmente o conteúdo e os sites do WordPress. Não mais restringido pela necessidade de criar em uma ferramenta WYSIWYG como o TinyMCE Classic Editor, Gutenberg fornece blocos individuais para cada elemento do conteúdo do post ou da página. Com controle sobre as configurações de cada bloco específico, os usuários podem criar o conteúdo do WordPress com mais facilidade do que nunca. E uma das maneiras mais simples de fazer com que os designs se destaquem é levá-los além das configurações padrão. Então, vamos ver como redimensionar blocos no WordPress para que você possa começar a pensar (e projetar) fora da caixa.

A maior parte do redimensionamento no editor de blocos ainda está restrita à área de conteúdo do site devido à natureza responsiva dos blocos. Se você configurou a área de conteúdo da sua página para largura total, estará trabalhando dentro desse espaço. Se você tem uma área de conteúdo de postagem definida para 580px ou 1200px, por exemplo, você trabalhará lá. Os métodos que estamos usando para ensiná-lo a redimensionar blocos no WordPress são todos baseados na ideia de que você permanecerá dentro das fronteiras de qualquer contêiner de bloco em particular.

Como redimensionar blocos no editor

Alguns - mas não todos - blocos têm opções de redimensionamento integradas. Esses são os mais fáceis de redimensionar por razões óbvias. Dependendo do bloco, no entanto, as opções de redimensionamento estarão em locais diferentes.

Exemplo # 1: O Bloco de Imagem

Clicar no bloco abrirá o menu de contexto e as opções de redimensionamento aqui são, na verdade, opções de espaçamento. No entanto, os alinhamentos de largura ampla e largura total alterarão o tamanho do bloco de imagem para a largura do contêiner (largo) ou para a largura de toda a página (completa).

Você também pode redimensionar o bloco de imagem usando as configurações de bloco na barra lateral direita. A seção de tamanho da imagem apropriadamente chamada tem várias opções com as quais você pode redimensionar o bloco.

O WordPress tem uma lista suspensa para redimensionamento rápido e você pode escolher predefinições de miniatura , médio , grande e tamanho total. Selecionar o tamanho total irá variar em seu tema, se ele realmente é exibido totalmente ou se ajusta à área de conteúdo.

Você também pode ajustar especificamente a largura e a altura em pixels. Abaixo disso, você pode ajustar por porcentagem. A porcentagem é baseada no valor numérico nos campos de largura e altura . Não é o tamanho de imagem predefinido que você selecionou no menu suspenso.

E, finalmente, você pode clicar na própria imagem para abrir uma borda azul com âncoras circulares brancas . Você pode arrastá-los para redimensionar o bloco.

Você simplesmente clica e arrasta em qualquer uma das âncoras para dimensionar a imagem. Isso ajustará o tamanho nos campos de altura e largura no menu de configurações de bloco.

Exemplo # 2: O Bloco de Eventos

Para o Bloco de Eventos, as configurações de redimensionamento estão apenas no menu de contexto do próprio editor. (O Bloco de Eventos é um plugin separado da Automattic que você instalará e não faz parte do editor principal do Gutenberg.)

Como algumas das opções de bloco de imagem, as opções de redimensionamento aqui são tecnicamente opções de espaçamento. Mas as duas opções são Align Center e Wide Width. Você pode escolher um para ser centralizado no contêiner ou ter toda a largura da tela.

Ajustar a altura do bloco no próprio editor é meio complicado, mas funciona. Se você simplesmente clicar em Enter / Return no campo de bloco vazio, poderá expandir a altura inserindo blocos de parágrafo vazios extras.

É uma solução menos do que ideal. Mas é rápido e funciona em apuros - especialmente devido à ausência de uma opção real de ajuste de altura para o Bloco de Eventos.

Exemplo 3 #: usando colunas para redimensionar blocos no WordPress

Se o bloco que você precisa redimensionar não vem com opções de redimensionamento em seu painel de configurações ou menu de contexto, usar as colunas do editor de bloco é outra maneira de redimensionar qualquer bloco. Basta pesquisar o bloco de colunas pressionando qualquer um dos botões + para adicionar um novo bloco.

No bloco de colunas, você pode adicionar quaisquer outros blocos que desejar. Nas opções de pesquisa, também aparecem Padrões do editor de blocos. Esses são modelos que você pode inserir em sua postagem ou página com conteúdo já dimensionado e colocado, esperando que seu conteúdo substitua o espaço reservado.

Desde o início, o bloco Colunas permite que você escolha o tamanho da própria coluna. Ele é dividido em 6 orientações diferentes, cada uma com uma porcentagem diferente da página usada para colunas individuais.

Essas não são as únicas configurações que você pode usar. Você pode usar o botão azul + dentro do bloco para adicionar uma nova coluna a qualquer ponto. Cada coluna individual tem seu próprio painel de configurações no qual você pode ajustar a largura dela sozinho por porcentagens.

Pode ser necessária alguma experimentação para obter o dimensionamento correto para o seu projeto. No entanto, quando terminar, você pode ter algum conteúdo bem projetado e bem espaçado em sua página inicial. Lembre-se de que quaisquer colunas vazias que você tiver no editor de bloco também aparecerão como vazias no front end.

Ajustando a largura, o posicionamento e o número de colunas diferentes, seus blocos podem ser redimensionados e posicionados de quase todas as formas.

Precisa de mais opções de dimensionamento? Considere um construtor de páginas mais avançado

Percebemos que alguns desses métodos para redimensionar blocos podem parecer limitadores. Se você achar que eles são muito limitados para você, pode ser hora de procurar um construtor de páginas mais avançado.

Nosso próprio Divi, por exemplo, tem opções de dimensionamento e transformação para cada módulo (bloco) que fornecem muito maior controle sobre a forma, tamanho e espaçamento do que é possível em Gutenberg. A maioria dos criadores de páginas avançados também o faz, portanto, se você achar que as opções de Gutenberg são muito limitantes, verificar algo como Divi pode ser o melhor próximo passo.

Como redimensionar blocos no WordPress usando CSS

Cada bloco possui uma seção CSS no painel de configurações em Configurações avançadas . Juntamente com quaisquer outras configurações avançadas específicas de bloco, cada uma tem um campo para Classes CSS adicionais . Você pode atribuir quaisquer seletores que desejar a este bloco individual, quer eles já existam em seu site ou se você os criar especificamente para este bloco.

Normalmente, sugeriríamos usar CSS IDs em vez de Classes para blocos individuais, mas isso não é suportado pelo editor de bloco (por padrão, pelo menos). Portanto, você desejará apenas usar várias classes para acompanhar os blocos individuais em vez de IDs. As classes destinam-se realmente a cobrir grandes categorias de tipos de elementos, enquanto os IDs destinam-se a elementos individuais. Nesse caso, sugerimos o uso de uma convenção de nomenclatura clara para manter as coisas em ordem no seu código.

Independentemente disso, você simplesmente inserirá a classe no campo de texto. Não inclua o ponto / ponto antes do nome da classe neste campo .

Agora, você deve navegar até Aparência - Personalizar e encontrar a seção CSS adicional na parte inferior. Escreva ou cole o código CSS para redimensionar o bloco de acordo com sua preferência.

Sugerimos evitar o uso de medidas em pixels (px) porque são absolutas. De preferência, você usará vw (largura da janela de visualização) , vh (altura da janela de visualização) ou % (porcentagem) para ajustar o bloco. Cada um deles será dimensionado em referência ao dispositivo e / ou outro conteúdo ao seu redor.

.block-1 {
	height:35vh;
	max-height:50vh;
}

.block-2 {
	width: 100vw;
}

.block-3 {
	max-width:80vw;
}

Lembre-se de que % evw / vh também são diferentes, embora funcionem de maneira semelhante. Todos eles funcionam em porcentagens, mas essas são relativas a diferentes âncoras.

A medição percentual é em relação ao container no qual o elemento está contido. Portanto, se a seção ou linha em que o elemento se encontra não vai para as bordas da tela, mesmo definindo a largura: 100% não atingirá os limites.

Usar vh / vw , no entanto, como eles são relativos à janela de visualização do próprio dispositivo, não aos elementos do site. Usando altura: 80vh , você sempre pode garantir que esse bloco ocupe 80% da altura da tela, independentemente de ser exibido em um dispositivo móvel, desktop ou tablet.

Conclusão

O editor de blocos do WordPress oferece aos usuários um grande número de opções de personalização que antes não estavam disponíveis (isto é, dentro do próprio editor). Saber como redimensionar blocos no WordPress é essencial para poder utilizar o editor de blocos em toda a sua extensão. E com a edição de site completo agora em seu repertório, essa é uma habilidade que só será mais útil com o passar do tempo.

Quais são algumas dicas e truques que você pode compartilhar sobre o redimensionamento de blocos no WordPress?

Imagem apresentada por artigo por 3rieart / shutterstock.com