Seleccionar página

Posición relativa en Divi: Comprensión y uso

La posición relativa de Divi ofrece muchas opciones y combinaciones para lograr un equilibrio perfecto entre los elementos de tu web. Descubre cómo usarla.

Por Jefferson M.

Jul 7, 2020

De los 4 tipos de posiciones que ofrece Divi para un módulo (estática, relativa, absoluta y fija), la posición relativa es quizá la que ofrece más opciones. Ademas puede combinarse para lograr ese punto perfecto de diseño y equilibrio entre los elementos.

Tiempo de lectura estimado: 5 minutos

La posición relativa mantiene un elemento dentro del flujo normal de la página al igual que la posición estática. Sin embargo, seleccionar la posición relativa abre otras opciones para posicionar este elemento: propiedades superior, inferior, izquierda, derecha y el Index Z.

Usos de la posición relativa

Para posicionar un contenedor principal que tiene elementos en posición absoluta

Esta posición permite mantener el flujo del documento porque establecemos un contenedor para los elementos absolutos, lo cual hace que esta opción sea muy popular.

Recordemos que cualquier elemento posicionado de forma absoluta será relativo al contenedor más cercano que tenga, por ende podemos asignarle una posición relativa a este contenedor (ya que un contenedor con posición estática por defecto no está técnicamente «posicionado»).

posición relativa en Divi guia
Imagen: Elegant Themes.

Mover elementos sin afectar otros elementos de la página

La interfaz de usuario de Divi permite arrastrar y posicionar los elementos en tiempo real. Con la posición relativa podemos hacer estos ajustes y movimientos sin afectar los demás elementos.

Superponer elementos con Index Z

Los elementos en posición estática no pueden ser ubicados en el eje Z, así que debemos cambiarlos a la posición relativa, lo cual le permitirá pertenecer al flujo normal del documento. Hacer este cambio nos permitirá usar el Index Z y ubicar elementos superpuestos en caso de necesitarlo.

z index posición relativa divi
Imagen: Elegant Themes.

Para evitar posicionar elementos usando el margen negativo

La posición relativa deja atrás el espacio de su posición original, por ende al agregar un margen negativo, el elemento se moverá junto con su espacio original, por lo cual es recomendable usar los offsets o valores de compensación para ajustar lo que necesites.

si quieres aprender a usar el Theme Builder de Divi, tenemos este tutorial que te puede interesar, con regalo incluido.

Por ejemplo, si añades un margen negativo a una columna de manera que se superponga a la columna de arriba, todas las columnas y su contenido se moverán junto con esta columna de margen negativo.

Cómo usar el valor de compensación (offset)

Para usar el offset solo debes escoger uno que servirá de origen y a partir del cual se moverán los valores vertical y horizontal (en píxeles o usando la barra deslizante) para posicionar el elemento donde quieras mientras esté dentro del contenedor padre.

Si seleccionas como origen el offset superior izquierdo y ajustas los valores en la esquina superior izquierda, conforme añadas espacio vertical y horizontal verás al elemento moverse a la derecha y a hacia abajo. Algo muy similar sucederá dependiendo de qué esquina escojas como referencia para posicionar el elemento.

Diferencias entre la posición relativa y transform translate

Estas dos modalidades ofrecen movimiento al elemento sin afectar los otros en la página. Veamos sus dos diferencia principales.

  • Translate es más adecuado para animaciones y transiciones como el hover, porque ofrece efectos más suaves y fluidos. Usar una posición relativa en un elemento animado podría hacer que el navegador trabaje más.
  • Si estamos utilizando unidades de longitud relativa (como % o vw) para un diseño responsive, estas funcionarán de manera diferente con la posición relativa y transform translate.

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

Imagen: Elegant Themes.

Un módulo Divi con transform translate (eje X) del 50% moverá el módulo horizontalmente la cantidad igual al 50% del ancho del propio módulo.

resultado posición offset
Imagen: Elegant Themes.

En resumen: con la posición relativa el módulo se mueve respecto al tamaño del contenedor, con transform translate se mueve respecto al tamaño del módulo.

Cómo combinar la posición relativa con transform translate

Ya que sabemos la diferencia entre ambas modalidades de posicionamiento, puedes usarlas a tu favor para centrar correctamente un elemento dentro de un contenedor (¡o hacer lo que necesites!).

¿Te gustaría aprender a usar ACF con el contenido dinámico de Divi? Revisa este contenido, te encantará.

Si usas la posición relativa en Divi con un offset fijo arriba a la izquierda y mueves el módulo de forma horizontal (se moverá hacia la derecha) en un 50%, puedes usar la propiedad transform para mover el módulo -50% a la izquierda. Con estas dos modificaciones, el módulo quedaría en el centro sin importar el tamaño del contenedor.

posición relativa en Divi
Imagen: Elegant Themes.
Imagen: Elegant Themes.

Trabajamos esta guía siguiente el post original de ET donde nos explican a detalle está información en inglés.

¿Ya se te ocurre cómo usar esta propiedad de posición? ¡Queremos ver!

Nos leemos en la próxima.

¿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