Adicionar um plano de fundo a uma coluna aumenta sua flexibilidade de design, permitindo que você crie seções visualmente distintas que se alinham com a marca da sua loja. Ajuda a separar o conteúdo de forma eficaz, melhora a legibilidade e destaca elementos-chave.
Como definir o fundo de uma coluna dentro de uma linha?
O GemPages já oferece suporte à configuração de cores de fundo para o Elemento de linha facilmente.
Você pode aproveitar esse recurso para definir planos de fundo para colunas dentro de linhas seguindo os métodos simples abaixo.
Opção 1: Definir fundos aninhando linhas dentro de colunas
Passo 1: No editor, arraste e solte um elemento de linha da barra lateral esquerda. Por exemplo, crie uma linha com três colunas.
Passo 2: Aninhe uma nova linha dentro de cada coluna. Adicione conteúdo a cada coluna conforme necessário.
Passo 3: Clique em cada linha aninhada que você criou na Etapa 2 para abrir suas configurações. Role para baixo até Contexto seção e clique na caixa ao lado de Cor para configuração de cor de fundo.
Observação: Este método é mais adequado quando as linhas aninhadas têm alturas iguais. Se o conteúdo dentro de cada coluna variar em tamanho, isso pode resultar em fundos irregulares.
Opção 2: Definir fundos para colunas usando código personalizado
Este método envolve adicionar código personalizado para definir a cor de fundo de cada coluna individualmente.
Siga esses passos:
Passo 1: Adicione uma linha aninhada dentro de cada coluna. Adicione conteúdo a cada linha aninhada conforme necessário.
Passo 2: Clique com o botão direito do mouse no rótulo do elemento principal da linha e selecione Código personalizado.
Passo 3: Na caixa de diálogo do editor de código, localize o APF guia e adicione o seguinte código personalizado:
[data-component-tag="Col"] {
background-color: #yourdesiredcolor;
}
Substituir #yourdesiredcolor com o código de cor desejado. Por exemplo, use este código de cor #FFBAAD e clique no Economize botão.
Passo 4: Verifique o resultado, salve e publique para ativar suas configurações.
Obrigado por seus comentários