Elemento Fila

Acerca del elemento Fila

El Elemento Fila es uno de los componentes más esenciales al crear una página.

Típicamente, comenzará con el elemento Fila para establecer la base de su diseño. Puede organizar libremente múltiples filas para estructurar su página como desee.

Para diseños de cuadrícula más avanzados, que ayudan a garantizar que su contenido esté organizado y sea responsivo en varios tamaños de pantalla, puede anidar hasta 12 columnas dentro de una sola fila. 

Una vez que su marco esté configurado, puede arrastrar y soltar fácilmente elementos como texto, imágenes, videos y botones en la fila. 

¿Cómo agregar un Elemento Fila a GemPages V7?

Paso 1: En la pantalla Panel de Control de GemPages, acceda a la Páginas , abra una página existente o cree una nueva. Será dirigido al Editor de GemPages.

Paso 2: Verifique la barra lateral izquierda para encontrar el elemento Fila. Elija un diseño de fila, luego arrástrelo y suéltelo en el área de diseño.

Paso 3Haga clic en el elemento para abrir su panel de configuración en la barra lateral izquierda, que está separado en pestañas de Configuración y  Avanzado .

Configurar la Pestaña de Configuración

Diseño

En la sección Diseño defina cuántas columnas aparecen en una sola fila.

Puede elegir entre seis diseños preestablecidos (1 a 6 columnas) y cada ajuste preestablecido divide automáticamente la fila en secciones iguales.

Estas columnas actúan como contenedores donde puede agregar diferentes elementos, como imágenes, bloques de texto o botones, para estructurar su contenido.

Ancho de columna

Controle cuánto espacio ocupa cada columna dentro de la fila. Puede configurarlo de dos maneras:

• Cambiar Proporción: Todas las columnas están distribuidas uniformemente. Arrastre el control deslizante para ajustar la relación de ancho entre ellas.
• Ajustar al Contenido: El ancho de la columna se ajusta automáticamente al tamaño de su contenido.

Esta flexibilidad le ayuda a diseñar diseños que se adapten a diferentes longitudes de contenido y mantengan el equilibrio en toda la página.

Gestión de columnas

En esta sección, puede gestionar el número y el orden de las columnas dentro de su fila. Coloque el cursor sobre cada columna en la lista para:

• Reorganizar: Cambiar la posición de la columna.
• Copiar: Duplica la columna y su contenido.
• Borrar: Eliminar la columna seleccionada.

Esta sección facilita la reorganización o replicación de bloques de contenido sin tener que empezar desde cero.

Espaciado entre columnas

Ajuste la espacio entre columnas para controlar qué tan compacto o espaciado se ve su diseño. Puede:

• Ingresar un valor numérico exacto, o
• Arrastrar el control deslizante azul para cambiar visualmente el espaciado.

El espaciado adecuado ayuda a mejorar la legibilidad y a mantener la jerarquía visual entre las columnas.

Tamaño

Establezca el tamaño general y el relleno interno del Elemento Fila.

• Ancho: Define qué tan ancho se extiende la fila a lo largo de la página.
• Altura: Establece el espacio vertical de la fila.
• Relleno: Controla el espaciado interno entre el borde de la fila y su contenido.

Utilice estas configuraciones para mantener una estructura y un equilibrio consistentes en todo su diseño.

Fondo

Agregue un fondo a su fila para crear profundidad visual o resaltar secciones específicas. GemPages proporciona tres tipos de fondo, incluyendo:

• Color: Elija un color de fondo sólido/degradado usando un código HEX, el selector de color o el selector de muestras.

• Imagen: Cargue una nueva imagen o seleccione una de su biblioteca multimedia.

• Video: Utilice un vídeo alojado en YouTube o Shopify para crear fondos dinámicos.

Forma

En esta sección, puede ajustar el aspecto general de su fila personalizando sus borde, radio de esquina y  efecto de sombra:

• Borde: Agrega o modifica el borde alrededor de la fila. Puede definir su grosor, estilo (sólido, discontinuo o punteado), y color para que coincida con el estilo de su marca.
• Esquina: : Ajuste el radio de esquina para hacer que los bordes del carrusel sean redondeados o afilados. Por ejemplo, valores más grandes crean una apariencia más suave y moderna.
• Sombra: : Aplique una sombra paralela para dar a su carrusel una sensación de profundidad y separación visual del fondo de la página. Puede ajustar  el desplazamiento, desenfoque y  color de la sombra para efectos sutiles o dramáticos.

Alinear columna

Ajuste la alineación vertical de todas las columnas de la fila. Elija entre:

• Alinear arriba: Alinear todo el contenido en la parte superior de la fila.
• Centro vertical: Centrar todo el contenido verticalmente.
• Alinear abajo: Alinear todo el contenido en la parte inferior.
• Distribuir el espaciado vertical: Distribuir uniformemente el espacio entre las columnas.

Use esta configuración para asegurar que su contenido permanezca equilibrado y visualmente consistente en todos los dispositivos.

Configurar la pestaña Avanzada

Para una personalización más avanzada, navegue a la pestaña Avanzada y siga las instrucciones en este artículo.

Mejores Prácticas para el Elemento Fila

Utilice las columnas de forma eficaz

El elemento Fila es ideal para crear diseños de múltiples columnas. También puede anidar filas adicionales dentro de columnas para crear diseños de cuadrícula más complejos.

Diseñe cajas de contenido

Las filas son especialmente efectivas para crear secciones de testimonios o áreas de contenido similares. Puede usar el elemento Fila para crear cajas de contenido agregando fondos y relleno. Para contenido de ancho completo, considere usar imágenes de fondo como las de los Banners Hero. 

Asegure un espaciado consistente

Dentro de una fila, organice su contenido con un ancho máximo de 1200px para asegurar una apariencia uniforme en todos los tamaños de pantalla, desde dispositivos pequeños hasta monitores grandes.

Mejore la capacidad de respuesta

Aproveche la flexibilidad para ajustar posiciones, orden y anchos de columnas para diferentes tamaños de pantalla. Esto asegura que su diseño se adapte sin problemas y se mantenga visualmente atractivo en todos los dispositivos.

Para obtener instrucciones paso a paso sobre cómo hacer que su diseño responda en varios dispositivos usando GemPages, consulte las pautas detalladas en este artículo.

Preguntas Frecuentes

1. ¿Cómo puedo establecer un color de fondo para una columna?

Actualmente, esta función no está disponible. Para solucionar esto, puede agregar CSS personalizado. Haga clic en el elemento, vaya a la pestaña Avanzado e ingrese su código CSS en el cuadro Clase CSS. O puede contactar a nuestro equipo de Soporte de GemPages para obtener asistencia adicional.

2. ¿Cómo creo una fila de 5 columnas?

Puede crear una fila de 5 columnas seleccionando el diseño de 5 columnas en la configuración de Fila. Alternativamente, puede utilizar el Elemento Carrusel para un efecto similar

3. ¿Cómo puedo eliminar una columna de una fila?

Para eliminar una columna en un elemento Fila, siga estos pasos:

• Elija la fila que contiene la columna que desea eliminar.
• En la barra lateral izquierda, encuentre la sección de columnas.
• Haga clic en el icono de la papelera junto a la columna que desea remover.

4. ¿Cómo puedo duplicar una fila?

Puede duplicar una fila haciendo clic derecho en la fila y seleccionando Duplique , o utilizando atajos de teclado:

• En Windows: presione Ctrl + C para copiar y Ctrl + V pegar.
• En macOS: presione Comando + C para copiar y Comando + V pegar.

5. ¿Cómo sumar 8 columnas en una fila?

Actualmente, la El número máximo de columnas es 6 por fila en GemPages V7 (como se muestra en la Configuración panel> Diseño). Si necesita más de 6, puede lograrlo anidando otro elemento de fila dentro de una de las columnas existentes.

6. ¿Puedo agregar borde o relleno a cada columna dentro de una fila?

Actualmente, no están disponibles los controles de borde o relleno a nivel de columna individual. El estilo de borde solo está disponible en el nivel superior. Nivel de fila (bajo la Forma sección), y se puede aplicar relleno en la Nivel de fila .

Si necesita aplicar estilos específicos a las columnas, póngase en contacto con nuestro equipo de soporte de GemPages para obtener más ayuda.

7. ¿Cómo puedo agregar más filas a una página?

Para agregar más filas, abra el Editor de GemPages y arrastre el elemento Fila desde la barra lateral izquierda al área de diseño.

Tenga en cuenta que el número de filas que puede agregar puede verse afectado por los límites de sección. Para más detalles, consulte este artículo: Límite de Secciones de Shopify.