Cómo Establecer la Posición de Elemento en GemPages

¿Qué Significa "Posición de Elemento" en el Diseño Web?

En diseño web, la posición del elemento se refiere a dónde aparece un objeto (como un botón, una imagen o un bloque de texto) en relación con su contenedor principal o el diseño general. Comprender cómo funcionan los diferentes tipos de posicionamiento le permite crear diseños flexibles y perfectos hasta el último píxel.

Por ejemplo:
Un botón colocado dentro de una columna dentro de una fila puede desplazarse dentro de esa columna, pero solo dentro de su contenedor a menos que se aplique un posicionamiento avanzado. .

Cómo Establecer la Posición de Elemento en GemPages

• Margen: Mueve el elemento y también desplaza los elementos cercanos para mantener el espaciado.
• Posición: Mueve el elemento sin afectar las posiciones de otros elementos.

A continuación se proporcionarán ejemplos de cada caso.

Método 1: Ajustar la Posición del Elemento Usando Márgenes

Los márgenes son la forma más directa de reposicionar elementos en GemPages. Crean espacio alrededor de un elemento y afectan cómo fluye el contenido cercano.

Paso 1:  Haga clic en el elemento cuya posición desea cambiar.

Paso 2: En la barra lateral de configuración, navegue hasta la pestaña Avanzado .

Paso 3: Ajuste los Márgenes in Espaciado: 

• Usa márgenes positivos para agregar espacio alrededor del elemento.
• Usa márgenes negativos posicionar elementos fuera de los límites de su contenedor para lograr diseños únicos.

Si establece un margen superior negativo, el elemento se moverá hacia arriba y los elementos debajo de él también se moverán hacia arriba para llenar el espacio.

Para obtener una guía detallada sobre los márgenes, consulte nuestra Configuración de márgenes Artículo.

Método 2: Establecer la Posición del Elemento Usando la Propiedad Position

Para un control más avanzado del diseño, use la configuración de Posición. Este método le permite colocar elementos sin afectar a otros y le brinda un control preciso sobre el comportamiento del diseño al desplazarse y cambiar el tamaño.

A continuación se explica cómo editar la configuración de posición de un elemento:

Paso 1: Haga clic en el elemento que desea reposicionar.

Paso 2: Volver el avanzado y encuentre la Posición Sección: 

Elija una de las siguientes opciones:

• Estático:
  • Configuración predeterminada; el elemento sigue el flujo normal de la página.
  • No se permiten ajustes de posición personalizados.
• Relativo:
  • Mueve el elemento respecto a su posición original.
  • Ajuste valores personalizados para arriba, Derecha, Inferior o Izquierda para cambiar su colocación.
• Absoluto:
  • Posiciona el elemento en relación con su ancestro posicionado más cercano (por ejemplo, una Fila o Sección).
  • Usa arriba, Derecha, Inferior y Izquierda para colocar el elemento exactamente donde lo desee dentro del elemento que lo contiene.
• Fijo:
  • Mantiene el elemento en una posición fija con respecto a la ventana gráfica.
  • Ideal para encabezados fijos o botones flotantes que permanecen visibles durante el desplazamiento.
• Fija:
  • Actúa como un híbrido de posicionamiento relativo y fijo.
  • El elemento se comporta como relativo hasta que alcanza una posición de desplazamiento específica, entonces se convierte en fijas.