Cómo Alinear Elementos en GemPages

Por Qué Importa la Alineación de Elementos en GemPages

La alineación adecuada es la base de un diseño de página limpio y fácil de usar. En GemPages, alinear sus elementos, como botones, imágenes, texto o formularios, asegura que su diseño se vea pulido, legible y responsivo en todos los dispositivos.

Cómo Alinear Elementos en GemPages (Guía Paso a Paso)

Para Elementos Individuales

Paso 1: Haga clic en el elemento en el editor.

Paso 2: En la barra lateral izquierda, vaya a la sección Configuración .

Paso 3: Desplácese hacia abajo hasta la sección Alineación . Elija Izquierda, Centro o Derecha.

Para Filas con Múltiples Elementos

Paso 1: Seleccione la Forma para Fila.

Paso 2: En Configuración, elija Alinear columna. Configúrelo en Centro o Distribuir para espaciar los elementos hijos de manera uniforme.

Alineación Avanzada: Configuración de Espaciado y Posición

Para mayor control, use la pestaña Avanzada en la barra lateral.

Use Márgenes para Ajustar el Espaciado

• Vaya a Avanzada > Espaciado.
• Aumente o disminuya los márgenes Superior, Inferior, Izquierdo o Derecho.
• Use márgenes negativos para mover un elemento fuera de su límite normal.

Use Posición para un Control Preciso

• Vaya a Avanzada > Posición.
  Elija entre:
  • Estático (predeterminado)
  • Relativo (desplazado desde la posición original)
  • Absoluto (colocado exactamente dentro de su elemento padre)
  • Fijo (se mantiene en la pantalla al desplazarse)
  • Fija (se adhiere después de desplazarse más allá de cierto punto)

¿Cómo Centrar un Elemento Debajo de Otro?

Si desea que un botón, imagen o cualquier elemento aparezca directamente debajo de otro y permanezca centrado, siga estos pasos:

Paso 1: Añada un elemento Fila de 1 columna

Desde la barra lateral izquierda, arrastre y suelte un elemento Fila de 1 columna en el área de diseño. 

Paso 2: Coloque ambos elementos dentro de la misma columna

Arrastre el segundo elemento (por ejemplo, un botón) justo debajo del primero (por ejemplo, un ícono) dentro de la misma columna.

Paso 3: Alinee cada elemento anidado en la Fila al centro

Haga clic en el elemento Botón para abrir su configuración en el panel izquierdo. Luego, desplácese hacia abajo hasta la sección Alineación y seleccione alineado al centro.

Continúe con el elemento Ícono .

Ahora, el elemento Ícono está centrado debajo del elemento Botón 

Paso 5: Ajuste el espaciado si es necesario

Haga clic en el elemento Fila padre para localizar su panel de configuración. Cambie a la pestaña Avanzado y desplácese hacia abajo hasta la sección Espaciado .

En esta sección, puede establecer un margen superior o margen inferior para crear la distancia correcta entre elementos según lo deseado.

De esta manera, puede crear fácilmente diseños como un botón centrado debajo de texto o una imagen debajo de un encabezado, asegurando que todo se vea equilibrado en todos los dispositivos.

Preguntas Frecuentes

1. ¿Puedo centrar un elemento directamente debajo de otro en GemPages?

Sí. Coloque ambos elementos dentro de la misma columna, luego configure la alineación de cada elemento en Centro. Si es necesario, use margen superior o margen inferior en la configuración Avanzado para ajustar el espaciado.

2. ¿Cómo alinear múltiples elementos de manera uniforme en una fila?

Seleccione la fila que contiene sus elementos. En la pestaña Configuración , elija Alinear columna y configúrelo en Centro o Distribuir. De esta manera, todos los elementos hijos se espacian uniformemente a lo largo de la fila.

3. ¿Cuál es la diferencia entre alineación y posición en GemPages?

La alineación define cómo se colocan los elementos en relación con su contenedor (izquierda, centro, derecha), mientras que la Posición brinda un control más preciso (Estático, Relativo, Absoluto, Fijo, Adhesivo).