Seleccionar página

Posición absoluta: guía para comprender esta opción y usar en Divi

Divi ofrece opciones variadas opciones para posicionar un módulo, en total son cuatro tipos. Hoy hablaremos de la posición absoluta y cómo sacarle provecho en Divi.

Por Jefferson M.

Jun 29, 2020

Divi ofrece opciones variadas opciones para posicionar un módulo, en total son cuatro tipos. Hoy hablaremos de la posición absoluta y cómo sacarle provecho en Divi.

Tiempo de lectura estimado: 5 minutos

En la posición absoluta de Divi, el elemento está «fuera de lugar». Es decir, rompe con el flujo normal del documento y no hay espacio creado para el mismo. El elemento estará en cierto modo independiente o flotante, así que será posicionado de forma relativa a cualquier contenedor principal cercano que tenga un valor de posición que no sea estática.

Para agregar un módulo en posición absoluta, debes darle a la columna una posición relativa antes. Dicho de otro modo: libera el elemento de su posición estática y, en cambio, permite que el elemento se mueva en relación con su contenedor principal.

En Divi, las secciones y filas tienen posición relativa por defecto para que puedas agregar elementos o módulos absolutamente dentro de los mismos.

Divi Absolute Position
Imagen: Elegant Themes.

Puntos de ubicación: ¿cómo utilizarlos?

Al seleccionar un punto de ubicación en las opciones del elemento que queremos posicionar, podrás hacer ajustes adicionales en vertical y horizontal. Este manejo de los elementos hace que sea muy fácil ajustar su posición absoluta.

Si seleccionamos el punto de ubicación superior derecho, podremos agregar espacio (escrito en px o usando la barra deslizante) vertical y horizontal que se notará respecto al contenedor. Lo mismo sucederá desde cualquier esquina que seleccionamos.

Divi Absolute Position
Imagen: Elegant Themes.

Cómo usar transform: translate en un módulo con posición absoluta

Cuando seleccionamos un punto medio a la derecha o izquierda, Divi se asegurará de que sin importar el tamaño del elemento, esté perfectamente centrado respecto al contenedor. En el backend tendrá unos valores muy específicos que debes conocer, sobre todo en la opción transform: translate:

position: absolute!important;
top: 50%;
bottom: auto;
left: 0px;
right: auto;
transform: translateY(-50%);

Sabiendo esto, si insertas un solo elemento y quieres hacer ligeras modificaciones, es preferible manejar los márgenes en Divi que modificar estos valores.

Los valores en transform: translate se miden en porcentajes. Medirá el 50% como la mitad o centro del elemento y el 100% equivale a la altura o ancho del módulo insertado. De esta manera no necesitarás saber las medidas exactas del elemento, solo debes ubicarlos en el eje Y o X con los valores que requieras.

Divi Absolute Position

Otras posiciones de Divi

Estática. Es la posición por defecto de cualquier elemento CSS y no responden a las propiedades superior, derecha, inferior e izquierda como otros elementos posicionados.

Relativa. Es la posición por defecto de elementos como filas y secciones. Siguen el flujo normal de la página como los elementos estáticos pero pueden posicionarse utilizando las propiedades superior, inferior, izquierda y derecha. También se pueden colocar utilizando la propiedad Z Index.

Fija. A diferencia de la posición absoluta, que será relativa a un contenedor dentro del flujo de elementos en la página, la posición fija hace que un elemento solo sea relativo a la ventana del navegador o la ventana gráfica. Igual que en la posición relativa, se pueden usar las propiedades superior, inferior, izquierda y derecha y Z Index ayudará a ubicar este elemento por encima de los demás.

Divi no ofrece la posición sticky, donde el elemento se mantiene fijo mientras el usuario navega hasta el final del contenedor, por el riesgo de que se inhiba la funcionalidad del elemento al ser esta función un poco impredecible debido a diversos factores.

Beneficios y aspectos a tomar en cuenta al usar la posición absoluta

  • Es una buena herramienta. Permite agregar elementos a la página sin tener que mover los que ya están, por ende reduce la necesidad de ajustar el diseño anterior.
  • Ayuda a posicionar de forma precisa. Las alternativas a esta opción son los elementos flotantes, agregados con CSS y que pueden ser impredecibles; también podrían usarse los márgenes pero requieren muchísima exactitud para no dejar espacios innecesarios.
  • Buen soporte de navegador. La compatibilidad de la posición absoluta brinda la seguridad de que el diseño se mantendrá como lo planeamos en todos los navegadores.

A tomar en cuenta:

Puede aislarse de otros elementos de la página. Esto haría difícil que el elemento en posición absoluta fluya con los demás elementos de la página, por lo cual es recomendable darle propiedad absoluta a una columna y así evitar tener que agregar esta propiedad a todos los módulos que se quieran agregar, además de tener que hacer ajustes adicionales.

Dificulta la función responsiva. Como los elementos con posición absoluta no están dentro del flujo de los demás elementos, puede tener dificultades para adaptarse a diferentes dispositivos. Para evitar esto, es recomendable usar unidades de longitud relativa como vw o % en vez de píxeles cuando sea necesario.

La posición absoluta te ayudará a organizar y dar uniformidad a ciertos elementos en Divi, por lo cual es bastante útil. ¡Coméntanos qué tal te ha ido con esta función!

¿Quieres aprender a usar Divi de manera profesional?

Conoce nuestro contenido premium y comienza hoy mismo a llevar tu sitio web o el de tus clientes a otro nivel

¿AÚN NO PERTENECES A NUESTRA COMUNIDAD?

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web’s fantásticas con Divi

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

🖐 ¡RECIBE LAYOUTS Y CHILDTHEME GRATIS! 😎

Suscribiendote a esta lista de correo, recibirás algunos de nuestros layouts premium y un childtheme para eCommerce totalmente gratis. Además te enviaremos nuestro resumen de contenidos para que siempre estés enterado/a de nuestras últimas novedades.

¡Perfecto! ¡Gracias! Pronto comenzarás a recibir nuestros recursos gratuitos