Estrutura do bloco no

Brizy

Linhas e Colunas no Brizy: entendendo a estrutura dos Blocos

Se você viu as aulas anteriores, então já tem sua página inicial. Para criá-la, utilizamos blocos prontos, já disponíveis no Brizy, o que facilitou bastante o nosso trabalho.

Mas e se você não um bloco que sirva para o seu caso, ou se quiser algo ainda mais personalizado? Será preciso usar sempre os blocos já prontos?

A resposta é: não! O Brizy permite que você crie seus próprios blocos, dando total liberdade para configurar sua página.

Nesta aula vamos aprender o essencial sobre a estrutura dos blocos no Brizy e como modificá-la, para você deixar a página do jeito que quiser. Então, continue lendo e vamos lá!

Linhas, colunas e elementos

Os blocos no Brizy são criados de 3 objetos principais: linhas, colunas e elementos.

Linha (Row)

É o objeto mais alto na hierarquia e ocupa uma posição horizontal. Ela pode ser posicionada diretamente na página ou dentro de uma coluna, e sempre terá ao menos uma coluna (se a única coluna de uma linha for excluída, a linha também será excluída).

Coluna (Column)

São objetos que ocupam uma posição vertical e só podem ser posicionados dentro de uma linha. Ao contrário das linhas, que possuem apenas sua altura ajustável, é possível ajustar tanto a altura como a largura das colunas.

Elementos (Elements)

Se você já assistiu as aulas anteriores, já conhece estes objetos e provavelmente já os manipulou. Eles são objetos que inserimos dentro de linhas e colunas, como botões, texto, imagens, etc.

Adicionando linhas e colunas

Para inserir uma linha:

1. Clique no “+” no canto superior direito;

2. Vá até o fim da lista e posicione o mouse sobre o objeto Row;

3. Clique e arraste a linha para uma posição da página ou para dentro de uma coluna.

Se a linha for inserida diretamente na página, ela ocupará toda a largura da página; se for inserida dentro de uma coluna, ela ocupará toda a largura da coluna.

Para inserir uma coluna:

1. Clique no “+” no canto superior direito;

2. Vá até o fim da lista e posicione o mouse sobre o objeto Column;

3. Clique e arraste a coluna para uma posição da página ou para dentro de uma coluna.

Se uma coluna for inserida dentro de uma linha, ela ocupará toda a altura da linha. Além disso, todas as colunas da linha automaticamente terão a mesma largura.

Configurando linhas e colunas

O menu da linha fica no canto superior esquerdo do objeto. Ao passar o mouse sobre ele, uma borda cinza surgirá ao redor da linha.

No caso da coluna, esse menu fica no canto superior direito, e fica escondido. Passando o mouse sobre a coluna, o menu surgirá, juntamente a uma borda azul ao redor da coluna.

Os dois menus são bem parecidos, e possuem as opções:

Background: permite alterar o fundo do objeto.

Na linha, é possível adicionar uma imagem, vídeo ou mapa;

Na coluna, é possível adicionar uma imagem e configurar o efeito de Hover.

Color: permite alterar a cor de preenchimento, borda ou sombra do objeto (se houver uma imagem, a cor de preenchimento ficará sobre ela).

Link: permite colocar um link para um endereço web ou outra parte da página.

Settings: traz configurações do objeto. Para configurações mais avançadas, clique em more settings.

ATENÇÃO: é possível alterar a altura da coluna na configuração padding, presente em more settings, mas é necessário que a coluna possua algum elemento (texto, botão, etc.).

Duplicate: duplica o objeto e todas as suas características.

Ao duplicar uma coluna, todas as colunas da linha terão a mesma largura.

Add New Column (apenas disponível em colunas): insere uma nova coluna à linha.

Delete: deleta o objeto.

Agora é com você

Agora você já sabe como funciona a estrutura dos blocos e pode deixar seu site ainda mais personalizado. Para informações mais detalhadas sobre linhas, colunas e algumas das configurações avançadas, assista o vídeo acima.

E é claro, não deixe de dar uma olhada em outras aulas do curso para aprofundar ainda mais seus conhecimentos no Brizy! Até mais e bom aprendizado!