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.

Múltiples modos de posicionamiento

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.
Controles de coordenadas perfectos en píxeles

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 elementadorPosicionamiento de complementos maestros
PrecioGratisGratis
Tipos de posiciónPredeterminado, Absoluto, FijoPredeterminado, Estático, Relativo, Absoluto
CompensacionesUno horizontal y otro verticalArriba, derecha, abajo, izquierda y desde el centro
Tipo de posición por dispositivoNoSí
Trabaja enWidgets y contenedoresWidgets, contenedores, secciones y columnas
Permanece en la pantalla mientras se desplazaSí, con FijoNo

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.

  1. Asegúrese de que la extensión de posicionamiento esté activada en el panel de complementos maestros.
  2. Coloque la imagen y el widget de la insignia en el mismo contenedor.
  3. Seleccione el contenedor, vaya a Avanzado > Posicionamiento y establezca el Tipo de posición en Relativo.
  4. Seleccione la insignia, establezca el tipo de posición en absoluto, luego establezca la parte superior y la derecha en 10px.
  5. Establezca el índice Z de la insignia en 2 para que permanezca encima de la imagen.
  6. 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.

Visor de plantillas
Facebook
Gorjeo
WhatsApp
Copiar enlace
Compra ahora
Colección de zapatos
Colección de zapatos

Preguntas frecuentes para el posicionamiento

Conozca las consultas más frecuentes que tienen los usuarios sobre Posicionamiento y encuentre respuestas en un solo lugar.
¿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.

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.

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.

Master Addons Extensión Glassmorphism para Elementor: tarjetas de vidrio esmerilado con el control Blur Value configurado en 20px

Vidriomorfismo

Inicio Extensión de Glassmorphism Elementor gratuita: Efecto del vidrio esmerilado en un solo cambio El Glassmorphism es el esmerilado...
Ver detalles
Extensión Master Addons Container Extras para Elementor: contenedor con un límite de ancho máximo de 1400px, con controles de ancho máximo, alto máximo, ancho mínimo y alto mínimo

Extras de contenedores

Inicio Elementor Container Controles de ancho y alto máximo Container Extras es un maestro gratuito...
Ver detalles
Extensión de patrones de complementos maestros para Elementor: héroe con el estilo Purple Gradient Grid Left, tres estilos de patrones más y el panel Habilitar patrón

Patrones

Inicio 70+ Patrones de fondo de Elementor gratuitos Patrones es una extensión de complementos maestros gratuita que agrega...
Ver detalles
Extensión de duplicador de páginas/publicaciones de complementos maestros para Elementor: enlace de fila de duplicador MA en la lista de páginas de WordPress que crea una página de inicio - borrador [duplicado #128]

Duplicador de publicaciones/páginas

Inicio Duplicar páginas y publicaciones de Elementor en un clic Publicación/Duplicador de páginas es un maestro gratuito...
Ver detalles
Extensión de la barra de progreso de lectura de complementos maestros para Elementor: barra azul llena al 42% en la parte superior de una página de política de privacidad, con configuraciones de habilitar, colocar, altura y llenar color

Barra de progreso de lectura

Inicio Agregue una barra de progreso de lectura en WordPress (Elementor) La barra de progreso de lectura es gratuita...
Ver detalles