Colocar un widget flotante en el tema DIVI sin plugins

Hay banners con publicidad, formularios o contenido interesante que es importante que el usuario de la página lo tenga siempre delante. Para conseguir este propósito, lo mejor es colocar un widget flotante en el tema DIVI dentro de la barra lateral, al final de todos los elementos, siendo el último en aparecer pero que nunca desaparece en el momento de hacer scroll, ya que lo vamos a fijar en la ventana. Esta acción la podemos crear con el tema Divi sin necesidad de instalar plugins adicionales.

Fijar widget flotante en el tema Divi al hacer scroll

Si hay algo que me encanta de Divi o Extra, es la cantidad de opciones que podemos utilizar sin tener que recurrir a complementos secundarios.

Dispone de módulos para cubrir las principales necesidades de cualquier sitio web, garantizando la completa integración de los elementos y actualizándose en bloque de una vez sin tener que estar pendientes de diferentes desarrolladores. Pero hay otra parte menos visible que también nos ayudará a no tener que contar con código de terceros.

En este caso concreto vamos a crear y colocar un widget flotante que se fije al hacer scroll y que no entorpezca al resto del contenido superponiéndose a otros elementos.

Comprar DIVI ahora

¿Qué necesitas para empezar con DIVI?

Antes de que algún despistado siga leyendo, para conseguir este efecto es necesario tener instalado Divi, Extra o el plugin Divi Builder.

Estos pasos básicos te ayudarán a comprender mejor el funcionamiento del Generador de temas de DIVI:

1. Si aún no lo has hecho, instala y activa el Tema DIVI.
2. Accede al "Generador de temas" y añade una nueva cabecera, un cuerpo o un pie de página global.
3. Elije la opción "Construir desde cero" y empieza a crear tu nuevo sitio.

Ahora ya estás en disposición de continuar el tutorial y aprender cómo crear un widget flotante.

Añadir las zonas que contendrán los widgets

Voy a crear un widget flotante en el tema DIVI a través del "Generador de temas", para mostrar una barra lateral sólo cuando se visualizan las entradas, el resto de páginas estáticas como la Home o la página de Contacto y otras tendrán su propio diseño.

El "Generador de temas" permite crear diferentes plantillas para diferentes secciones personalizadas, si quieres que la barra lateral con el widget flotante en el tema DIVI aparezca en más sitios puedes crear todas las plantillas que quieras, asignándolas a que tipo de páginas afectarán, pero eso ya es otra historia.

Accedemos a la pestaña "Apariencia > Widgets" de la administración de WordPress y generamos una nueva zona o área de widgets, que yo llamaré "widget flotante" (podéis poner el nombre que queráis). Aquí añadiremos el widget (o widgets) que queremos que se muestre fijo en la pantalla.

El resto de widgets los colocaremos en zona de la barra lateral.

Crear una plantilla global para las entradas

Desde el "Generador de temas" agregamos una nueva plantilla y la asignamos a todas las entradas, a continuación, picamos en "Guardar".

El siguiente paso es añadir un cuerpo personalizado construido desde cero. Al iniciarse el constructor se inserta automáticamente una sección regular, que no nos vale en esta ocasión. Hay que crear una sección especial, que contenga un espacio para añadir la barra lateral, y eliminar esta.

La configuración de los módulos va a ser la típica de cualquier artículo, pero podéis variarla a gusto, los módulos necesariamente obligatorios son los siguientes:

• Título de la publicación - Recoge el título y los metadatos de la fecha, autor y categoría junto con la imagen principal.
• Publicar contenido - Añade en cada artículo que visualicemos el contenido correspondiente a dicho artículo.
• Comentarios - En el caso de aceptar comentarios, es necesario añadir este módulo para mostrar el formulario.

En la zona de los widgets añadimos dos módulos de barra lateral, uno para mostrar los widgets generales y otro en el que seleccionamos el área de widgets que hemos creado antes en la administración, donde colocaremos el widget flotante en el tema DIVI.

Añadir las opciones al widget flotante en el tema DIVI

Ya solo queda configurar el comportamiento que tendrá el módulo del widget flotante. Picando en la rueda de las opciones del módulo, seleccionamos la pestaña "Avanzado" y nos desplazamos hasta la sección de "Scroll Effects".

Como en este caso no tiene ningún sentido crear un widget flotante en los dispositivos móviles, sólo crearemos el widget flotante en el tema DIVI en el apartado de escritorio. Para eso hay que seleccionar el icono que representa un monitor.

La configuración dependerá de cada caso, pero os puede servir de referencia la siguiente:

• Sticky Position:
  • Desactivar en Tabletas y Móviles.
  • Posición - Stick to Top.
• Stycky Top Offset:
  • Margen superior - 20px.
• Bottom Sticky Limit:
  • Posición - Body area

La última opción es por si tenemos un footer muy grande poder evitar que se solapen los elementos.

¿Te parece útil esta característica? Yo si lo creo, puedes ver como funciona en la siguiente animación. Esta explicación es muy genérica y seguramente tendrás que adaptarlo a tu web con alguna opción más, pero el resultado es muy bueno.