Hacer una columna sticky en Avada

Problemática

Avada permite hacer sticky a los contenedores, pero al menos hasta la versión 7, no tiene nada que las columnas sean sticky a nuestra necesidad.

Si que se puede hacer con el sidebar del blog, pero si por cualquier casualidad el diseño lo exige en otra sección de nuestra web, no hay opciones predefinidas para hacerlo.

Por ello se va a explicar los pasos a seguir para hacer una barra lateral «pegajosa» o sticky en Avada.

Ejemplo del problema resuelto

Lo primero de todo, ilustrar lo que se va a conseguir.

Texto aleatorio #1

Texto aleatorio #2

Texto aleatorio #3

Texto aleatorio #4

Texto aleatorio #5

Proceso

En el caso del ejemplo, internamente, en Avada tenemos lo siguiente:

Se trata de un contenedor con varios elementos y uno de ellos, es el que vamos a hacerlo sticky, en este caso el bloque 1/4.

Por ello, debemos ir a los ajustes de ese bloque, situando el ratón encima de él y haciendo pinchando en la opción de ajustes.

Acudir hasta casi el final para localizar la opción «CSS Class» e introducir la clase sticky (o el nombre que tu quieras)

Ahora, guarda los cambios.

Queda introducir el siguiente CSS.

Dónde introducir este CSS

Para no modificar la propiedad #boxed-wrapper en toda nuestra web, te propongo que uses alguna clase CSS única para que el CSS solo «afecte» a la página donde debe estar esa columna sticky.

En Avada, en donde tengas esta columna, puedes utilizar la siguiente opción e introducir ahí el CSS.

Otras consideraciones

En el ejemplo, la columna fija queda a la derecha, sin embargo, si la pones a la izquierda, puede ser que tengas problemas con el responsive.

Debes usar una media query, similar a:

Tan solo debes modificar el valor de 1023px y poner el punto de ruptura correspondiente de tu web.

Conclusión

Con un poquito de habilidad y CSS se puede conseguir que una columna se quede fija en Avada, consiguiendo un diseño atractivo.

Fuentes: ThemeFusion