O layout de alvenaria é um estilo popular e moderno. Você pode usá-lo facilmente no site do editor de blocos. O bloco GutenKit Advanced Masonry ajuda com todos os recursos e funções necessários para projetar um estilo de alvenaria semelhante ao Pinterest em seu site WordPress.

Siga este documento para aprender como adicionar um layout de alvenaria ao site do editor de blocos. 

Como usar o bloco de alvenaria avançado GutenKit #

Vamos examinar diferentes partes do bloco GutenKit Advanced Masonry.

Adicionar itens de alvenaria #

Depois de entrar no bloco de alvenaria avançado GutenKit, ele é carregado com três itens de alvenaria por padrão. Você pode adicionar mais clicando no “Adicionar itens de alvenaria" botão. Dentre esses itens, você pode adicionar qualquer tipo de bloco. 

Observe que quando você adiciona um bloco a um item de alvenaria, todas as configurações de bloco ficam disponíveis. 

Configurar projeto de alvenaria #

Abra as configurações de bloqueio e comece a partir do Guia Conteúdo.

Guia Conteúdo

• Escolha o estilo: Selecione um estilo entre Alvenaria e Grade.
• Numero de colunas: Defina o número de colunas.
• Espaço entre: ajuste o espaço entre as colunas.
• Mostrar filtro por categoria: ative este botão de alternância para mostrar o nome da categoria.

Design de alvenaria de estilo #

De Guia Estilo, focaremos na parte de customização dos itens de alvenaria e itens de filtro.

Guia Estilo

Item

• Preenchimento: euAumente o espaço dentro dos itens de alvenaria.
• Raio da Fronteira: ajuste o arredondamento da borda do item de alvenaria.

As configurações a seguir são aplicadas no estado normal e de foco.

• Tipo de plano de fundo: escolha um tipo de plano de fundo entre cor sólida e gradiente.
• Fronteira: escolha uma cor para a borda e altere seu estilo e espessura. 
• Sombra da caixa: Clique no ícone de edição para obter todas as configurações de sombra da caixa.

Filtrar item

• Alinhamento: ajuste o posicionamento dos itens da categoria de filtro para a esquerda, centro e direita.
• Espaço entre: defina a lacuna entre os itens da categoria de filtro.
• Tipografia: obtenha todas as configurações de personalização de tipografia para o nome da categoria de filtro.

Os seguintes recursos podem ser ajustados para os modos Normal, Hover e Ativo. Aqui, o modo ativo refere-se à seção de alvenaria atual exibida no seu display ou quando você clica nela.

• Cor da fonte: altere a cor da fonte da categoria de filtro.
• Fundo: Escolha um estilo de fundo entre cor sólida e gradiente.
• Fronteira: obtenha configurações de borda como cor, espessura e estilo.
• Sombra da caixa: dá um efeito de sombra à borda do fornecedor.
• Preenchimento: Ajuste os espaços entre os 
• Raio da Fronteira: define a redondeza da borda da categoria de filtro.

Invólucros de filtro

• Espaçamento Inferior: Abra espaço entre o conteúdo da alvenaria.
• Tipo de plano de fundo: Escolha um tipo de plano de fundo entre cor sólida e gradiente.
• Preenchimento: Crie espaço ao redor da categoria de filtro.
• Raio da borda: Ajuste a redondeza da borda.

É isso! Você acabará projetando um design de alvenaria impressionante e responsivo em seu site de editor de blocos.