Colocar un widget flotante en el tema DIVI sin plugins

12 de mayo - 2021

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.

Suscríbete:

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.

Generador de temas en DIVI

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 área para widget flotante en el tema DIVI
Crear una nueva área para widgets

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".

Crear nueva plantilla para todas las entradas

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.

Configurar sección especial en el Generador de temas
Configurar sección especial en el Generador de temas

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.

colocar el widget flotante en el tema DIVI
Configuración de módulos para mostrar las entradas

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.

Configuración de las opciones del widget flotante en el tema DIVI
Opciones del módulo flotante

¿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.

widget flotante en el tema DIVI
Efecto del widget flotante

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

0 comentarios

Enviar un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Mi canal de Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Azon Press

Esta web funciona gracias a:

Anuncio - WordPress Gestionado de SiteGround - Potente pero simple de usar. Haz clic para aprender más. Descuento directo DIVI -  10 por ciento