Caixa de ferramentas Coluna

Cada coluna tem uma caixa de ferramentas de opções que aparece quando você passa o mouse sobre o container.

FerramentaÍconeDescrição
Mover Ícone Mover Move a coluna e seu conteúdo para outra posição em relação a outras colunas.
(rótulo)ColunaIdentifica o container atual como uma coluna. Passe o mouse sobre o contêiner da coluna para mostrar a caixa de ferramentas.
Configurações Ícone de configurações Abre a página Editar Coluna, onde é possível alterar as propriedades do container.
Duplicar Ícone duplicado Faz uma cópia da coluna atual.
Remover Ícone Remover Exclui a coluna atual e seu conteúdo.

Grade de colunas

A grade garante que o conteúdo seja alinhado de forma consistente em uma coluna e ajuda a página a ser renderizada corretamente em dispositivos móveis e desktop. Para obter mais informações, consulte a seção Ferramentas Avançadas de Conteúdo da configuração Page Builder.

Divisões de grade em uma linha com uma coluna

No exemplo de duas colunas a seguir, os números entre parênteses (6/12) na borda superior de cada contêiner de coluna indicam o número de divisões de grade em cada coluna e o número total de divisões. Nesse caso, a coluna é a largura de seis unidades de grade de um total de 12.

Divisões de grade na linha com duas colunas

Adicionar uma coluna

  1. No painel Page Builder, em Layout, arraste uma Column ​para o estágio.

    Arrastando uma coluna para o estágio

    O grupo de colunas agora é dividido em duas colunas de igual largura. Cada coluna é um contêiner separado para o conteúdo e tem seu próprio conjunto de opções da caixa de ferramentas.

    Duas colunas iguais

  2. No canto superior esquerdo do grupo de colunas, clique na ferramenta Grade ( Controle de grade ) e ajuste o tamanho da grade conforme necessário.

    O posicionamento do conteúdo na grade ajuda a alinhar o conteúdo de forma consistente e renderiza a página corretamente em dispositivos móveis e desktop. Para obter mais informações, consulte a seção Ferramentas Avançadas de Conteúdo da configuração Page Builder.

    Divisões de grade em duas colunas

Redimensionar uma coluna

  1. Passe o mouse sobre a borda entre duas colunas.

    A borda é realçada e a caixa de ferramentas da coluna selecionada é exibida.

    Borda destacada entre duas colunas

  2. Mantenha pressionado o botão do mouse para mostrar a grade e arraste a borda para uma nova posição na grade.

    A largura de ambas as colunas é ajustada para refletir a alteração. A nova largura de cada coluna aparece após o rótulo, como 4/12 (quatro de 12) e 8/12 (oito de 12).

    Colunas redimensionadas

Remover uma coluna

  1. Passe o mouse sobre a coluna que você deseja remover para exibir a caixa de ferramentas e escolha o ícone Remover ( Remover ícone ).

    Caixa de ferramentas da coluna

  2. Se a coluna tiver conteúdo, clique em OK para confirmar.

    Para acelerar o processo no futuro, você pode ignorar a etapa de confirmação marcando a caixa de seleção Do not show this again.

    O grupo de colunas agora tem uma única coluna (12/12) e grade. Como a grade está disponível somente para colunas, você pode usar essa técnica para mostrar a grade.

    Coluna única com grade

  3. Se desejar que o grupo de colunas estenda a coluna restante até a largura total da linha ou do estágio:

    • Passe o mouse sobre a coluna para exibir a caixa de ferramentas e escolha o ícone Configurações ( Ícone Configurações ).

    • Role para baixo até a seção Advanced ​e defina todos os quatro valores de Padding ​como 0.

      Usando preenchimento zero

    • No canto superior direito, clique em Save para fechar a página Edit Column.

  4. Clique no ícone Fechar Tela cheia ( Fechar tela cheia ) no canto superior direito do espaço de trabalho e clique em Save no canto superior direito.