Posicionamiento de Elementor libre: Posición relativa y absoluta para cualquier elemento
La extensión Posicionamiento en Complementos Maestros es gratuita y agrega un panel de Posicionamiento a la pestaña Avanzado de cada widget, columna, sección y contenedor. Elija Relativo o Absoluto, luego establezca los desplazamientos superior, derecho, inferior e izquierdo en px, em o %, con valores separados para escritorio, tableta y teléfono. Úselo para insignias que se superpongan a una foto, formas que salgan de una sección o etiquetas colocadas en su lugar.
Posicionamiento relativo, absoluto y estático
Elija el tipo de posición que coincida con el trabajo. Relative mueve un elemento desde su lugar normal sin cambiar sus vecinos. Absolute lo coloca en compensaciones exactas dentro del padre ubicado más cercano. Estático y predeterminado mantienen el flujo de página normal. El tipo de posición puede diferir según el dispositivo, por lo que un elemento puede superponerse en el escritorio y permanecer en el flujo de un teléfono.
- Posicionamiento relativo: ajuste la alineación, como mover un ícono unos píxeles hacia la izquierda.
- Posicionamiento absoluto: colocar insignias, formas decorativas o etiquetas en cualquier lugar dentro de una sección.
- ¿necesita algo fijado en la pantalla mientras los visitantes se desplazan? Utilice la opción Fija en la configuración Posición del propio Elementor en widgets y contenedores.
Compensaciones de todos lados, además de desde el centro
Establezca Arriba, Derecha, Abajo e Izquierda en px, em o %, incluidos los valores negativos que empujan un elemento más allá del borde principal. Coloque una insignia “NUEVA” a 10 px de la parte superior y a 15 px de la derecha de una tarjeta de producto. La opción Desde el centro compensa un elemento del centro horizontal de su padre, lo que ayuda con efectos superpuestos centrados.
- Control de cuatro lados: establezca distancias desde los cuatro bordes del padre.
- Desde el centro: posición desde el centro del padre en lugar del borde izquierdo.
- Índice Z por dispositivo: decide qué elemento se encuentra encima cuando las cosas se superponen.
- El panel le advierte que no combine Izquierda y Desde Centro en el mismo elemento.
Configuración de posición del elementador versus posicionamiento de complementos maestros
Ambos son gratuitos y resuelven problemas ligeramente diferentes. Utilice esta tabla para elegir la correcta para un elemento. Para obtener más control del diseño, empareje el posicionamiento con Extras de contenedores, o agregar movimiento con Transforma (Pro).
| Posición del elementador | Posicionamiento de complementos maestros | |
|---|---|---|
| Precio | Gratis | Gratis |
| Tipos de posición | Predeterminado, Absoluto, Fijo | Predeterminado, Estático, Relativo, Absoluto |
| Compensaciones | Uno horizontal y otro vertical | Arriba, derecha, abajo, izquierda y desde el centro |
| Tipo de posición por dispositivo | No | Sí |
| Trabaja en | Widgets y contenedores | Widgets, contenedores, secciones y columnas |
| Permanece en la pantalla mientras se desplaza | Sí, con Fijo | No |
Cómo superponer elementos en Elementor con Posicionamiento
Este ejemplo coloca una insignia de “Venta” en la esquina superior derecha de la imagen de un producto. Los mismos pasos funcionan para formas, iconos y etiquetas.
- Asegúrese de que la extensión de posicionamiento esté activada en el panel de complementos maestros.
- Coloque la imagen y el widget de la insignia en el mismo contenedor.
- Seleccione el contenedor, vaya a Avanzado > Posicionamiento y establezca el Tipo de posición en Relativo.
- Seleccione la insignia, establezca el tipo de posición en absoluto, luego establezca la parte superior y la derecha en 10px.
- Establezca el índice Z de la insignia en 2 para que permanezca encima de la imagen.
- Cambie a la vista de tableta y móvil y ajuste las compensaciones para cada pantalla.
¿Quiere que se pueda hacer clic en toda la tarjeta? Agregar Enlace envolvente al contenedor. Para cualquier cosa que el panel no cubra, escribe tus propias reglas Css personalizado.
Preguntas frecuentes para el posicionamiento
¿en qué se diferencia esto de la configuración de Posición del propio Elementor?
La configuración de posición de Elementor en widgets y contenedores ofrece Predeterminado, Absoluto y Fijo, con un desplazamiento horizontal y otro vertical. La extensión Master Addons agrega relativo y estático, le permite configurar los cuatro lados, agrega un desplazamiento desde el centro, permite que el tipo de posición cambie por dispositivo y también funciona en secciones y columnas clásicas. No incluye fijo, así que utilice la configuración de Elementor para elementos que deben permanecer en la pantalla mientras se desplaza.
Cuando uso el posicionamiento absoluto, ¿a qué se coloca "relativo"?
Un elemento absolutamente posicionado se coloca dentro del padre más cercano cuya posición no es estática. Si ningún padre tiene una posición establecida, las compensaciones se miden desde un padre más arriba en la página y el elemento puede terminar en algún lugar inesperado. Para evitar eso, seleccione primero el contenedor o columna que contiene el elemento y establezca su tipo de posición en Relativo.
¿Funcionará esto correctamente en dispositivos móviles y tabletas?
Sí. El tipo de posición, las cuatro compensaciones, desde el centro y el índice Z, aceptan valores separados para escritorio, tableta y móvil. Un elemento colocado a 100 px desde la izquierda en el escritorio puede caer de la pantalla de un teléfono, así que cambie a las vistas de tableta y móvil y ajuste los números allí. También puede configurar el tipo de posición en estático en el móvil para volver a colocar el elemento en el diseño normal.
¿Puedo usar esto para hacer una sección de forma única o salir de un contenedor?
Sí. Establezca el contenedor en Relativo, coloque una imagen o forma dentro de él, establezca ese elemento en Absoluto y dale un desplazamiento negativo como Izquierda: -50px. El elemento cuelga sobre el borde del contenedor, que es como se construyen la mayoría de los diseños de héroes y cartas superpuestos.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
Duplicador de publicaciones/páginas
