Seleccionar página
Compartir contenido

Si quieres posicionar elementos fijos en divi, ahora es más fácil que nunca. Normalmente podíamos conseguir esta funcionalidad mediante la ayuda de algún plugin o bien usando código CSS propio.

Un elemento fijo en nuestro diseño puede resultar útil de cara a la usabilidad y las conversiones de nuestra página desde un número de teléfono hasta un formulario de suscripción. A efectos de hacer este ejemplo sencillo mostraremos un botón con el correspondiente número de teléfono tal y como se muestra en este ejemplo.

elementos fijos en divi

Antes de ver como posicionar elementos fijos en divi, necesitamos aclarar algunos conceptos básicos, si alguna vez has trabajado con CSS esto te resultará muy familiar y puedes saltarte esta sección.

Flujo de objetos para posicionar en una web

Cuando maquetamos una página en divi, sigue el orden normal (como en html), es decir a medida que añadimos elementos (textos, cajas, botones, etc.) estos ocupan su espacio en el documento. En el ejemplo inferior podemos ver el botón ocupando su espacio natural, es decir después de la galería.

elementos fijos en divi

Si queremos cambiar el orden de un elemento y que este ocupe una posición, independientemente del orden del documento, podemos usar las propiedades de posición de ccs (traducidas en el divi como “puesto”). Esto nos permitirá poner el objeto donde queramos.

Propiedades para elementos fijos en Divi

Cuando se trabaja con CSS estas propiedades son muy comunes, en la parte inferior se muestra una descripción de cada propiedad y que nos permite hacer.

posicionado elementos fijos divi con cssPosición Relative (A) Es la posición natural por defecto, el objeto ocupa su lugar y baja con el resto de elementos cuando hacemos scroll con la rueda del ratón.


Posición Absoluta (B)
 Posicionamos el elemento donde queramos, pero no se quedará fijo es decir si movemos la rueda del ratón para hacer scroll sigue el flujo


Posición fija (C)
 diferencia del posicionamiento absoluto podemos poner el elemento donde queramos y además este se quedará en esa posición a pesar de hacer scroll con la rueda del ratón

Profundidad del objeto (Z-Index). Esta propiedad de CSS nos permite apilar un elemento sobre otro, en nuestro ejemplo queremos que el botón con el teléfono siempre quede por encima de los otros objetos, el valor puede ir de 0 hasta prácticamente todo lo que queramos, se suelen usar valores exagerados como 9999.

Para nuestro ejemplo añadiremos un módulo de botón a continuación del último objeto e insertamos su texto y enlace  por ejemplo (sin comillas) tel:914316616.

divi elementos fijos botón

elementos fijos divi

Ahora mediante la pestaña diseño podemos activar las propiedades de formato del botón, elegir color de texto, fondo, tamaño de fuente etc.

divi boton activar formato

divi botón formato

Por último, mediante la pestaña “avanzada”, accedemos a la propiedad puesto, donde elegiremos posicionamiento “fixed”, mediante el icono de “locatión” podemos situarlo en cualquiera de las esquinas (ccordenadas). en nuestro caso haremos click en la esquina superior izquierda.

divi posición fija

A continuación ajustaremos los valores de desplazamiento horizontal, vertical e incrementaremos la profundidad (z-index) a 9999 para que permanezca por encima de otros elementos.

divi valores para botón fijo

Ahora podemos comprobar que funciona correctamente y que cuando hagamos scroll con el ratón nuestro elemento mantiene su posición fija.

Ocultar objetos en la plantilla Divi

Es bastante probable que no queramos que este botón aparezca cuando el usuario esté en su portátil o sobremesa, y para que se muestre solo en móvil, vamos a las propiedades del botón pestaña avanzada, y propiedad visibilidad, donde desactivaremos en que entornos no queremos que se muestre el botón.

ocultar botón en divi

Podemos aplicar esta técnica para todo tipo de objetos (formularios de suscripción, imágenes, cajas de texto, etc..), además al no hacer uso de plugin ahorramos en recursos y hacemos que la carga de la página sea más eficiente. Puedes contactar con nosotros a través del formulario que tienes en esta misma entrada. ¡Puedes ver más técnicas como esta en nuestro blog y cursos de wordpress!

Entradas relacionadas: