Como usar blocos abertos
Os blocos abertos permitem organizar elementos livremente, sem as limitações de grade dos blocos padrão. Você pode criar banners, seções interativas, conteúdos promocionais ou qualquer layout personalizado.
Por exemplo, você pode sobrepor uma imagem a uma forma ou criar um banner promocional com um botão exatamente onde precisar.
Vamos ver como adicionar um bloco aberto e organizar os elementos nele.
Adicione um bloco
No criador de sites, clique em + Adicionar bloco e selecione Bloco aberto na barra lateral.
Posicione elementos
Para adicionar widgets, clique em + e selecione um widget.
Por padrão, os novos elementos aparecem no canto superior esquerdo do bloco. Para reorganizá-los, clique e arraste no espaço de trabalho.
Para posicionar os elementos com mais precisão nos eixos vertical e horizontal, use as guias de alinhamento. Ao arrastar um elemento na área de trabalho, guias aparecem para mostrar o alinhamento com outros elementos ou bordas do bloco.
Para mover os elementos com precisão, use as setas do teclado. Pressione uma seta para mover o elemento selecionado em 1 pixel. Para mover mais rápido, segure a tecla Shift e pressione uma seta.
Para redimensionar um elemento, arraste a borda correspondente. Ao movê-lo, você verá o número de pixels na borda do bloco.
Para alterar o ângulo de rolagem, clique no ponto verde e, sem soltá-lo, arraste para a esquerda ou direita. Ao girar, você verá o ângulo de rotação em graus.
Você também pode definir os parâmetros exatos de posicionamento no painel das configurações do elemento à direita.
Personalizar a exibição dos elementos
Você também pode alinhar e organizar elementos dentro de um bloco aberto usando os controles. Clique no ícone de lápis do elemento selecionado para acessar as opções:
| Ponto de ancoragem | Fixa o widget a uma borda ou canto específico do bloco aberto.
Escolha Esquerda ou Direita para o posicionamento horizontal e Superior ou Inferior para o posicionamento vertical. |
|
| Alinhamento | Posiciona o widget em relação às bordas ou ao centro do bloco aberto. Defina o deslocamento X e Y em pixels a partir do ponto de ancoragem. | |
| Organização | Define a ordem das camadas do widget quando vários elementos se sobrepõem. Você pode trazer o widget para frente, enviá-lo para trás, avançá-lo ou recuá-lo. | |
| Z-index | Define um valor personalizado de camada para o widget.
Widgets com valores mais altos aparecem na frente. |
|
| Rotação | Define o ângulo de rotação do widget em graus. | |
| Largura | Define a largura do widget em pixels. | |
| Altura | Define a altura do widget em pixels. | |
| Ocultar widget em | Oculta o widget nos tipos de dispositivo selecionados.
As opções incluem: Desktop, Tablet e Mobile. Você pode selecionar cada opção de dispositivo de forma independente. |
|
| Animação | Adiciona uma animação de entrada quando o widget aparece na tela durante a rolagem.
Ative a opção para configurar o Tipo de animação, a Posição da animação e a Velocidade da animação. |
Você também pode usar o ID exclusivo do widget para criar links âncora ou aplicar estilos e scripts. Certifique-se de que cada ID seja único em toda a página.
Última Atualização: 02.06.2026
ou