Las Opciones de Posición de Divi permiten mover los elementos de la página independientemente de los límites de su contenedor padre.

Las Opciones de Posición de Divi te brindan un control detallado sobre la posición de cada elemento en tu página.

Las opciones de posición permiten mover elementos sin estar limitados por los límites del contenedor padre.

Puedes diseñar encabezados y banners fijos, collages de imágenes dinámicos y efectos interesantes de superposición con las opciones de posición de Divi.

Cómo acceder a las Opciones de Posición de Divi

• Haz clic en el ícono de engranaje para abrir la ventana modal de Configuración del elemento.

• Ve a Avanzado → Posición.

Por defecto, todos los elementos tienen la posición relativa (por defecto) asignada.

Cómo funcionan las Opciones de Posición

• Por defecto (estático)

• Relativo

• Absoluto

• Fijo

Por defecto (Estático)

Los elementos posicionados estáticamente permanecen dentro del flujo normal u orden de los elementos en la página.

Como otros elementos posicionados, no se ven afectados por las propiedades superior, inferior, izquierda y derecha, por lo que no se aplican valores de desplazamiento a los elementos con posición estática.

Índice Z - Controla la posición del elemento en el eje Z. Los elementos con un número de índice Z más alto se mostrarán sobre los elementos con valores más bajos.

Relativo

La posición del elemento es relativa a sí mismo. Esto significa que puedes asignar propiedades de desplazamiento superior, derecha, inferior e izquierda para mover el elemento sin desplazar los elementos vecinos.

• Origen del desplazamiento - Determina desde qué esquina se calcula el desplazamiento del elemento. Los ajustes verticales y horizontales variarán según este origen.

• Desplazamiento vertical - Ajusta la posición del elemento hacia arriba o abajo desde su ubicación inicial, que puede variar según el origen del desplazamiento.

• Desplazamiento horizontal - Ajusta la posición del elemento hacia la izquierda o derecha desde su ubicación inicial, que puede variar según el origen del desplazamiento.

• Índice Z - Controla la posición en el eje Z, los elementos con índice Z más alto se muestran arriba.

Absoluto

Los elementos con posición absoluta actúan como si flotaran en la página. No están restringidos por los límites de su contenedor padre y se posicionan respecto al contenedor padre más cercano que tenga posición.

Cuando un elemento tiene posición absoluta, se elimina del flujo de su contenedor padre, y el contenedor colapsa como si no tuviera contenido.

• Ubicación - Ajusta la ubicación inicial del elemento dentro de su contenedor padre. Puedes ajustar más la posición usando los controles de desplazamiento.

• Desplazamiento vertical - Ajusta la posición hacia arriba o abajo desde la ubicación inicial, según el origen del desplazamiento.

• Desplazamiento horizontal - Ajusta la posición hacia la izquierda o derecha desde la ubicación inicial, según el origen del desplazamiento.

• Índice Z - Controla la posición en el eje Z.

Fijo

Esta posición permite crear elementos fijos como encabezados o banners flotantes que permanecen visibles al desplazarse por la página.

Los elementos con posición fija salen del flujo normal de la página y no ocupan espacio real dentro de la misma.

• Ubicación - Ajusta la ubicación inicial del elemento dentro de su contenedor padre. Puedes ajustar más la posición usando los controles de desplazamiento.

• Desplazamiento vertical - Ajusta la posición hacia arriba o abajo desde la ubicación inicial, según el origen del desplazamiento.

• Desplazamiento horizontal - Ajusta la posición hacia la izquierda o derecha desde la ubicación inicial, según el origen del desplazamiento.

• Índice Z - Controla la posición en el eje Z.

Usa Anclas Arrastrables para Reposicionar Elementos en la Página

Esto te permite arrastrar los módulos, filas y secciones de la página para cambiar su posición. Al reposicionar el elemento, sus desplazamientos X e Y se ajustan dentro de la configuración del módulo.

Como con todas las configuraciones de Divi, los controles de desplazamiento X e Y pueden ajustarse de forma independiente en escritorio, tableta y teléfono móvil, permitiéndote usar las opciones de posición para crear diseños responsivos.

Consejos y Buenas Prácticas para Usar las Opciones de Posición en Divi

Las Unidades de Longitud Relativas Responden de Forma Diferente

Un módulo de Divi con posición relativa y un desplazamiento horizontal del 50% moverá el módulo horizontalmente una cantidad igual al 50% del ancho del contenedor padre (o columna).

Mantén los Elementos Importantes al Frente y Centrado Mientras Desplazas

Los elementos fijos pueden posicionarse en cualquier lugar dentro de la ventana del navegador y permanecerán fijos en esa ubicación mientras haces scroll en la página.

Puedes fijar cualquier elemento; algunos usos comunes incluyen encabezados fijos, formularios flotantes para captación de suscriptores, botones adhesivos, avisos importantes y más.

Crea Encabezados Fijos Personalizados en el Constructor de Temas

Construye Banners, Botones y Formularios Flotantes

Si quieres que algo importante esté siempre accesible para tus visitantes, puedes fijarlo en la ventana del navegador para que siempre esté a un clic de distancia.

Apila Elementos para Crear Divertidos Efectos de Superposición

Sigue Aprendiendo

• Entendiendo y Usando la Posición Relativa en Divi

• Guía para Entender y Usar la Posición Fija en Divi

• Guía para Entender y Usar la Posición Absoluta en Divi

• Cómo Usar las Opciones de Posición de Divi para Crear Agrupaciones de Imágenes

• Cómo Crear un Encabezado Fijo con las Opciones de Posición de Divi

• Cómo Crear un Collage Interactivo de Imágenes Usando las Opciones de Posición de Divi

• Cómo Construir una Barra Lateral Fija y Responsiva con Enlaces de Anclaje y Desplazamiento Suave en Divi

• Cómo Crear una Barra de Pie de Página Fija para Tu Tema Divi

• Cómo Crear Barras de Pie de Página Adhesivas para Móviles en Divi