Agrupe conjuntos de blocos para maior controle sobre o design da página.

Ao criar um layout empilhado, você agrupa vários blocos em um único layout flexível no qual define a ordem, o alinhamento e o espaçamento desses blocos. O layout criado é redimensionado de forma consistente em diferentes dispositivos e tamanhos de navegador.

É possível criar layouts empilhados nas seções do Editor Intuitivo na versão 7.1.

Adicione um layout empilhado

Uma seção do Editor Intuitivo precisa de, pelo menos, dois blocos para criar um layout empilhado. Você pode ter até 30 blocos.

Para adicionar um layout empilhado:

1. Abra o painel de páginas e clique em Editar em uma página.
2. Na seção do Editor Intuitivo, clique e arraste em um espaço em branco para destacar diversos blocos ou mantenha pressionada a tecla Shift e clique nos blocos que deseja empilhar.
3. Clique no ícone Empilhar blocos na barra de ferramentas que aparece. Isso agrupa os blocos destacados em um layout empilhado.

Personalize os layouts empilhados

Para personalizar um layout empilhado:

1. Abra o painel de páginas e clique em Editar em uma página.
2. Clique no layout empilhado e no ícone de lápis.
3. Na aba Design, em Layout, defina o posicionamento e o espaçamento dos blocos no layout empilhado.
4. Em aparência, escolha uma cor de fundo, adicione uma linha de contorno e personalize o raio do canto.
5. Em Transformações, personalize a aparência do layout empilhado com efeitos de transformação.
6. Clique na aba Animações para adicionar animações.

Adicionar um URL de clickthrough a um layout empilhado

É possível adicionar um URL de clickthrough a um layout empilhado, semelhante a URLs de clickthrough em imagens. URLs de clickthrough podem direcionar os visitantes para uma página, um arquivo, um endereço de e-mail ou um número de telefone. Se o layout empilhado incluir outro link em seu layout, como um bloco de botões, os visitantes poderão clicar nesse link normalmente.

Para adicionar um URL de clickthrough a um layout empilhado:

1. Abra o painel de páginas e clique em Editar em uma página.
2. Clique no layout empilhado e, em seguida, clique no ícone de Editar link na barra de ferramentas.
3. Em URL, insira um link ou busque uma página ou arquivo em seu site. Você também pode clicar em URL para ver mais opções.
4. Opcional: ative ou desative Abrir link em uma nova aba. Dependendo do tipo de link, ele pode abrir em uma nova aba mesmo se essa opção estiver desativada.
5. Pressione Enter para salvar o link.

Reorganize os blocos no layout empilhado

Para alterar a ordem dos blocos em um layout empilhado:

1. Abra o painel de páginas e clique em Editar em uma página.
2. Clique duas vezes em um bloco no layout empilhado.
3. Clique e arraste o bloco para a posição desejada. Outros blocos no layout empilhado se deslocarão conforme você arrasta.

Crie layouts empilhados aninhados

Para layouts mais complexos, é possível criar camadas empilhadas dentro de um layout empilhado, que pode conter três camadas adicionais empilhadas dentro dele.

Para aninhar um layout empilhado:

1. Abra o painel de páginas e clique em Editar em uma página com layout empilhado.
2. Clique e arraste em um espaço em branco para destacar vários layouts empilhados ou para destacar um layout empilhado e blocos que não estão nele.
3. Clique no ícone Empilhar blocos na barra de ferramentas que aparece.
4. Opcional: repita esse processo no máximo mais duas vezes.

Personalize os blocos no layout empilhado

Você pode personalizar o conteúdo e o estilo de qualquer bloco individual em um layout empilhado. Algumas configurações, como animações ou cores de fundo, podem entrar em conflito com as configurações do seu layout empilhado.

Para personalizar o conteúdo e o design de blocos individuais no layout empilhado:

1. Abra o painel de páginas e clique em Editar em uma página com layout empilhado.
2. Clique duas vezes no bloco que você deseja editar. Se o bloco estiver em um layout empilhado aninhado, talvez seja necessário clicar duas vezes várias vezes antes que a barra de ferramentas do bloco apareça.
3. Clique no ícone de lápis na barra de ferramentas do bloco e faça alterações no editor.