Elemento de linha

Sobre o elemento Row

O processo de Elemento de linha é um dos componentes mais essenciais na criação de uma página.

Normalmente, você começa com o elemento Linha para estabelecer a base do seu layout. Você pode organizar várias linhas livremente para estruturar sua página como desejar.

Para layouts de grade mais avançados, que ajudam a garantir que seu conteúdo seja organizado e responsivo em vários tamanhos de tela, você pode aninhar até 12 colunas dentro de uma única linha. 

Depois que sua estrutura estiver definida, você pode facilmente arrastar e soltar elementos como texto, imagens, vídeos e botões na linha. 

Como adicionar um elemento de linha ao GemPages V7?

Passo 1: De acordo com o relatório Painel GemPages, Acesse o PÁGINAS seção, abra uma página existente ou crie uma nova. Você será direcionado para o GemPages Editor.

Passo 2: Verifique a barra lateral esquerda para encontrar o elemento Row. Escolha um layout de linha, depois arraste e solte-o na área de design.

Etapa 3: Clique no elemento para abrir seu painel de configurações na barra lateral esquerda, que se separou em Configurações e Avançado Guias.

Configurar a guia Configurações

traçado

Sob o traçado seção, defina quantas colunas aparecem em uma única linha.

Você pode escolher entre seis layouts predefinidos (1–6 colunas), e cada predefinição divide automaticamente a linha em seções iguais.

Essas colunas funcionam como contêineres onde você pode adicionar diferentes elementos, como imagens, blocos de texto ou botões, para estruturar seu conteúdo.

Largura da coluna

Controle quanto espaço cada coluna ocupa dentro da linha. Você pode definir isso de duas maneiras:

• Taxa de variação: Todas as colunas são distribuídas uniformemente. Arraste o controle deslizante para ajustar a proporção da largura entre elas.
• Ajustar ao conteúdo: A largura da coluna se ajusta automaticamente ao tamanho do seu conteúdo.

Essa flexibilidade ajuda você a criar layouts que se adaptam a diferentes tamanhos de conteúdo e mantêm o equilíbrio na página.

Gerenciamento de colunas

Nesta seção, você pode gerenciar o número e a ordem das colunas dentro da sua linha. Passe o mouse sobre cada coluna da lista para:

• Reorganizar: Alterar a posição da coluna.
• Cópia de: Duplique a coluna e seu conteúdo.
• Excluir: Remover a coluna selecionada.

Esta seção facilita a reorganização ou replicação de blocos de conteúdo sem precisar começar do zero.

Espaçamento entre colunas

Ajusta a lacuna entre colunas para controlar o quão compacto ou espalhado seu layout ficará. Você pode:

• Insira um valor numérico exato ou
• Arraste o controle deslizante azul para alterar visualmente o espaçamento.

O espaçamento adequado ajuda a melhorar a legibilidade e a manter a hierarquia visual entre as colunas.

Dimensões:

Defina o tamanho geral e o preenchimento interno do elemento Row.

• Largura: Define a largura que a linha se estende pela sua página.
• Altura: Define o espaço vertical da linha.
• padding: Controla o espaçamento interno entre a borda da linha e seu conteúdo.

Use essas configurações para manter estrutura e equilíbrio consistentes em todo o seu layout.

Dica: Ajuste a altura das colunas para layouts divididos.

Ao usar uma linha com várias colunas, você pode encontrar casos em que as colunas têm alturas diferentes devido a comprimentos de conteúdo variáveis.

Para que todas as colunas dentro da linha sejam exibidas com a mesma altura:

• Selecione o elemento Linha.
• Vou ao Configurações aba → Dimensões: seção.
• Colocou o Altura opção para completo.

Isso permite que a área de conteúdo à esquerda se estique e corresponda à altura da imagem, vídeo ou banner principal adjacente, criando um layout mais equilibrado e visualmente consistente em todos os dispositivos.

Contexto

Adicione um plano de fundo à sua linha para criar profundidade visual ou destacar seções específicas. O GemPages oferece três tipos de plano de fundo, incluindo:

• Cor: Escolha uma cor de fundo sólida/gradiente usando um código HEX, o seletor de cores ou o seletor de amostras.

• Imagem: Carregue uma nova imagem ou selecione uma da sua biblioteca de mídia.

• Vídeo: Use um vídeo hospedado do YouTube ou Shopify para criar fundos dinâmicos.

Shape

Nesta seção, você pode ajustar a aparência geral da sua linha personalizando-a fronteira, raio de canto e efeito de sombra:

• Fronteira: Adicione ou modifique a borda ao redor da linha. Você pode definir sua espessura, estilo (sólido, tracejado ou pontilhado) e cor para combinar com o estilo da sua marca.
• Corner: Ajusta a raio de canto para tornar as bordas do carrossel arredondadas ou mais nítidas. Por exemplo, valores maiores criam um visual mais suave e moderno.
• Shadow: Aplicar um sombra projetada para dar ao seu carrossel uma sensação de profundidade e separação visual do fundo da página. Você pode ajustar a sombra compensar, borrão e cor para efeitos sutis ou dramáticos.

Alinhar coluna

Ajuste o alinhamento vertical de todas as colunas da linha. Escolha entre:

• Alinhar superior: Alinhe todo o conteúdo no topo da linha.
• Centro Vertical: Centralize todo o conteúdo verticalmente.
• Alinhar Inferior: Alinhe todo o conteúdo na parte inferior.
• Distribuir espaçamento vertical: Distribua uniformemente o espaço entre as colunas.

Use esta configuração para garantir que seu conteúdo permaneça equilibrado e visualmente consistente em todos os dispositivos.

Configurar a guia Avançado

Para uma personalização mais avançada, navegue até a guia Avançado e siga as instruções em Este artigo.

Melhores práticas para o elemento Row

Utilize colunas de forma eficaz

O elemento Row é ideal para criar layouts multicolunas. Você também pode aninhar linhas adicionais dentro de colunas para criar designs de grade mais complexos.

Caixas de conteúdo de design

As linhas são especialmente eficazes para criar seções de depoimentos ou áreas de conteúdo semelhantes. Você pode usar o elemento Row para criar caixas de conteúdo adicionando fundos e preenchimento. Para conteúdo de largura total, considere usar imagens de fundo como as do Hero Banners. 

Garanta espaçamento consistente

Em uma linha, organize seu conteúdo com uma largura máxima de 1200 px para garantir uma aparência uniforme em todos os tamanhos de tela, de dispositivos pequenos a monitores grandes.

Melhore a capacidade de resposta

Aproveite a flexibilidade para ajustar a posição, a ordem e a largura das colunas para diferentes tamanhos de tela. Isso garante que seu design se adapte perfeitamente e permaneça visualmente atraente em todos os dispositivos.

Para obter instruções passo a passo sobre como tornar seu design responsivo em vários dispositivos usando GemPages, consulte as diretrizes detalhadas em Este artigo.

Perguntas Frequentes

1. Como posso definir uma cor de fundo para uma coluna?

Atualmente, esse recurso não está disponível. Para contornar isso, você pode adicionar CSS personalizado. Clique no elemento, vá para a aba Advanced e insira seu código CSS na caixa CSS Class. Ou você pode entrar em contato com nossa equipe de suporte do GemPages para obter mais assistência.

2. Como crio uma linha de 5 colunas?

Você pode criar uma linha de 5 colunas selecionando o layout de 5 colunas nas configurações de linha. Como alternativa, você pode usar o Elemento carrossel para um efeito semelhante.

3. Como faço para excluir uma coluna de uma linha?

Para excluir uma coluna em um elemento Row, siga estas etapas:

• Selecione a linha que contém a coluna que você deseja excluir.
• Na barra lateral esquerda, encontre a seção de coluna.
• Clique no ícone da lixeira ao lado da coluna que você deseja remover.

4. Como duplico uma linha?

Você pode duplicar uma linha clicando com o botão direito nela e selecionando Duplicar, ou usando atalhos de teclado:

• No Windows: pressione Ctrl + C para copiar e Ctrl + V colar.
• No macOS: pressione Comando + C para copiar e Cmd+V colar.

5. Como adicionar 8 colunas em uma linha?

Actualmente, o o número máximo de colunas é 6 por linha no GemPages V7 (conforme mostrado no Configurações painel > traçado). Se precisar de mais de 6, você pode fazer isso aninhando outro elemento Row dentro de uma das colunas existentes.

6. Posso adicionar borda ou preenchimento a cada coluna dentro de uma linha?

Atualmente, não é possível ajustar individualmente as bordas ou o espaçamento entre colunas. O estilo das bordas está disponível apenas no nível da coluna. Nível de linha (debaixo de Shape seção), e o acolchoamento pode ser aplicado no Nível de linha tão bem.

Se você precisar de formatação específica para cada coluna, entre em contato com nossa equipe de suporte do GemPages para obter mais assistência.

7. Como adiciono mais linhas a uma página?

Para adicionar mais linhas, abra o Editor GemPages e arraste o elemento Linha da barra lateral esquerda para a área de design.

Observe que o número de linhas que você pode adicionar pode ser afetado pelos limites da seção. Para obter mais detalhes, consulte este artigo: Limite de Seção do Shopify.