Establecer fondo para la columna dentro de la fila

Agregar un fondo a una columna mejora la flexibilidad de diseño, lo que le permite crear secciones visualmente diferenciadas que se alinean con la marca de su tienda. Ayuda a separar el contenido de manera eficaz, mejorar la legibilidad y resaltar los elementos clave.

¿Cómo establecer el fondo para una columna dentro de una fila?

GemPages ya admite la configuración de colores de fondo para el Elemento Fila fácilmente. 

Puede aprovechar esta función para establecer fondos para columnas dentro de filas siguiendo los métodos simples a continuación.

Opción 1: Establecer fondos anidando filas dentro de columnas

Paso 1: En el editor, arrastre y suelte un elemento Fila desde la barra lateral izquierda. Por ejemplo, cree una fila con tres columnas.

Paso 2: Anide una nueva fila dentro de cada columna. Añada contenido a cada columna según sea necesario.

Paso 3: Haga clic en cada fila anidada que creó en el paso 2 para abrir su configuración. Desplácese hacia abajo hasta Fondo sección y pulsa el cuadro junto a Color para la configuración del color de fondo.

Nota: Este método es más efectivo cuando las filas anidadas tienen la misma altura. Si el contenido de cada columna varía de tamaño, puede generar fondos desiguales.

Opción 2: Establecer fondos para columnas mediante código personalizado

Este método implica agregar código personalizado para establecer el color de fondo de cada columna individualmente. 

Siga estos pasos:

Paso 1: Añade una fila anidada dentro de cada columna. Añade contenido a cada fila anidada según sea necesario.

Paso 2: Haga clic derecho en la etiqueta del elemento principal de la fila y seleccione Código Personalizado.

Paso 3: En el cuadro de diálogo del editor de código, localice el CSS pestaña y agregue el siguiente código personalizado:

[data-component-tag="Col"] {

  background-color: #yourdesiredcolor;

}

Reemplace #yourdesiredcolor con el código de color que desees. Por ejemplo, usa este código de color #FFBAAD y pulsa el botón Guardar .

Paso 4: Verifique el resultado, guárdelo y publíquelo para que sus configuraciones estén activas.