Layout - Coluna

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

{width="600" modal="regular"}

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.

{width="600" modal="regular"}

No canto superior esquerdo do grupo de colunas, clique na ferramenta 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.

{width="600" modal="regular"}

Passe o mouse sobre a borda entre duas colunas.

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

{width="600" modal="regular"}

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).

{width="600" modal="regular"}

Passe o mouse sobre a coluna que você deseja remover para exibir a caixa de ferramentas e escolha o ícone Remover ( {width="20"} ).

{width="600" modal="regular"}

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.

{width="600" modal="regular"}

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 ( {width="20"} ).

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

  {width="600" modal="regular"}

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

Clique no ícone Fechar Tela cheia ( {width="20"} ) no canto superior direito do espaço de trabalho e clique em Save no canto superior direito.

Passe o mouse sobre a coluna para exibir a caixa de ferramentas e escolha o ícone Configurações ( {width="20"} ).

{width="600" modal="regular"}

Altere as configurações de Appearance conforme necessário.

• Escolha a configuração de alinhamento que determina a posição da coluna em relação ao seu contêiner.

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  Opção	Descrição
  Full Height	A coluna estende a altura total do contêiner.
  Top Aligned	A coluna é alinhada na parte superior do seu contêiner.
  Centered	A coluna está centralizada no meio do container.
  Bottom Aligned	A coluna é alinhada na parte inferior do seu contêiner.

• Se necessário, insira o Minimum Height para a coluna. Por exemplo, você pode definir a altura mínima para corresponder à altura de uma imagem de plano de fundo.

• Se você definir a altura mínima, defina o Vertical Alignment para controlar a posição dos contêineres de conteúdo adicionados à coluna (Top, Center ou Bottom).

Altere o plano de fundo do conteúdo da coluna.

• Background Color - Especifique a cor escolhendo uma amostra, clicando no seletor de cores ou inserindo um nome de cor válido ou um valor hexadecimal equivalente. Essa configuração determina a cor de fundo da coluna.

• Background Image - Se necessário, use as ferramentas fornecidas para escolher uma imagem de plano de fundo a ser aplicada à coluna:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Ferramenta	Descrição
  Upload	Faz upload de um arquivo de imagem do seu computador local para a galeria e o aplica como a imagem de plano de fundo para a coluna.
  Select from Gallery	Solicita que você escolha uma imagem existente da galeria como a imagem do plano de fundo para a coluna.
  {width="25"}	Permite que você arraste a imagem para o bloco da câmera ou navegue até a imagem no seu sistema de arquivos local.

• Background Mobile Image - Se necessário, use as mesmas ferramentas para escolher uma imagem de plano de fundo diferente para ser usada para exibição em dispositivos móveis.

• Background Size - Altere esta configuração para determinar como a imagem do plano de fundo é dimensionada em relação à largura da coluna:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Opção	Descrição
  Cover	A imagem de plano de fundo cobre a largura total da coluna.
  Contain	A imagem de fundo é limitada à largura da área de conteúdo.
  Auto	Aplica o tamanho de plano de fundo padrão especificado na folha de estilos do tema atual.

• Background Position - Altere esta configuração para determinar o ponto de ancoragem da imagem em relação à coluna. Opções: Top Left, Top Center, Top Right, Center Left, Center, Center Right, Bottom Left, Bottom Center ou Bottom Right

• Background Attachment - Altere esta configuração para determinar como a imagem de plano de fundo se move em relação à página de rolagem:

  table 0-row-2 1-row-2 2-row-2 layout-auto
  Opção	Descrição
  Scroll	A imagem de fundo é sincronizada para se mover para baixo conforme a página rola.
  Fixed	(Não disponível para dispositivos móveis) A imagem de plano de fundo não se move conforme o contêiner rola pela imagem e é fixa na posição de plano de fundo especificada.

• Background Repeat - Se quiser repetir a imagem de fundo para preencher o espaço, altere esta configuração Yes.

Atualize as configurações de Advanced ​conforme necessário.

• Para controlar o posicionamento horizontal dos contêineres de conteúdo adicionados à coluna, escolha um Alignment:

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  Opção	Descrição
  Default	Aplica a configuração padrão de alinhamento especificada na folha de estilos do tema atual.
  Left	Alinha os contêineres de conteúdo na borda esquerda do contêiner de coluna, com permissão para qualquer preenchimento especificado.
  Center	Alinha o contêiner de conteúdo no centro do contêiner de coluna, com permissão para qualquer preenchimento especificado.
  Right	Alinha o contêiner de conteúdo na borda direita do contêiner de coluna, com permissão para qualquer preenchimento especificado.

• Defina o estilo Border, que é aplicado aos quatro lados do contêiner de coluna:

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
  Opção	Descrição
  Default	Aplica o estilo de borda padrão especificado pela folha de estilos associada.
  None	Não fornece nenhuma indicação visível das bordas do contêiner.
  Dotted	A borda do contêiner aparece como uma linha pontilhada.
  Dashed	A borda do contêiner aparece como uma linha tracejada.
  Solid	A borda do contêiner aparece como uma linha sólida.
  Double	A borda do contêiner aparece como uma linha dupla.
  Groove	A borda do contêiner é exibida como uma linha com ranhura.
  Ridge	A borda do contêiner aparece como uma linha estriada.
  Inset	A borda do contêiner aparece como uma linha interna.
  Outset	A borda do contêiner aparece como uma linha de saída.

• Se você definir um estilo de borda diferente de None, conclua as opções de exibição de borda:

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  Opção	Descrição
  Border Color	Especifique a cor escolhendo uma amostra, clicando no seletor de cores ou inserindo um nome de cor válido ou um valor hexadecimal equivalente.
  Border Width	Insira o número de pixels para a largura da linha de borda.
  Border Radius	Insira o número de pixels para definir o tamanho do raio usado para arredondar cada canto da borda.

• (Opcional) Especifique os nomes de CSS classes da folha de estilos atual para aplicar ao contêiner de coluna.

  Separe vários nomes de classe com um espaço.

• Insira valores, em pixels, para que Margins and Padding especifique as margens externas e o preenchimento interno da coluna.

  Insira cada valor correspondente no diagrama do container da coluna.

  table 0-row-2 1-row-2 2-row-2 layout-auto
  Área de contêiner	Descrição
  Margins	A quantidade de espaço em branco aplicada à borda externa de todos os lados do container. Opções: Top / Right / Bottom / Left
  Padding	A quantidade de espaço em branco aplicada à borda interna de todos os lados do contêiner. Opções: Top / Right / Bottom / Left

Quando terminar, clique em Save para aplicar as configurações e retornar ao espaço de trabalho Page Builder.