¿No hay una manera de construir widgets de WordPress más vistosos y completos que los widgets que vienen por defecto en WordPress con los diseños establecidos por las plantillas?

Claro que sí.

Vamos a ver cómo usar el Divi builder (constructor de la plantilla Divi, mi favorita) para crear un widget que podremos colocar en la barra lateral o en el footer. Es decir, vamos a utilizar el Divi builder para construir widgets o incluir el Divi builder en los widgets de WordPress

IR Mega guía de la plantilla Divi

DESCUENTO DIVI 20%

 

En el siguiente post, veremos cómo fijar el widget para que quede flotante o fijo cuando se haga scroll en la página

 

 

 

suscripción 10€/mes cursos joaquin barberá horizonweb

VER CURSOS

 

 

1.- Cómo construir un widget personalizado en WordPress personalizado con Divi

 

Para construir un widget personalizado con Divi vamos a utilizar la biblioteca de Divi. Crearemos un diseño y luego lo incrustaremos en un widget de texto.

Para construir el widget iremos a: “Divi > Biblioteca de Divi

A continuación, haremos clic en “add New” (Añadir nuevo”) para añadir un nuevo diseño. Nos aparecerá una ventana emergente, donde tendremos que poner un nombre y elegir un tipo de diseño.

 

i.- Nombre: este nombre no aparecerá, es simplemente para diferenciar este diseño de otros

ii.- Tipo de diseño: elegiremos la opción: “Diseño” (Layout). Nota: si no se te despliegan las opciones, haz primero scroll y luego dale al selector.

 

nombre del diseño y tipo para el widget

Poner título y elegir tipo de diseño para el diseño que luego incluiremos en un widget

 

A continuación, haremos clic en enviar consulta.

 

En este post puedes ver todos los módulos que incluye el Divi builder: Módulos Divi Builder

 

 

2.- Personalizar contenido y diseño del widget con el constructor de Divi

 

Ahora, puedes proceder a utilizar cualquier elemento del page builder de Divi para crear tu widget personalizado (secciones, filas y cualquier módulo)

En el ejemplo que yo he realizado para mi web, he construido un diseño para un widget compuesto de un módulo imagen + módulo separador + 4 módulos anuncio + 1 módulo botón.

 

Ejemplo estructura de widget con el page builder de Divi

Diseño de Widget de ejemplo realizado con el Divi builder

 

Así sería cómo se ve en el constructor visual. Aunque hay elementos que no parecen centrados, tenemos que tener en cuenta que la anchura disponible para los widgets del sidebar es pequeña y por tanto los elementos se centrarán de manera automática.

 

diseño widget con visual builder

Visión del diseño de widget realizado con el builder visual, el resultado final será diferente al que se aprecia

 

 

NOTA: En un principio se debería poder utilizar el Divi builder tipo backend y el tipo visual, pero lo cierto es que en mi caso concreto, en una de las webs no he podido utilizar el constructor visual para crear el diseño del widget. Supongo que ser irá solucionando este tema en próximas actualizaciones de Divi

 

 

3.- Cómo añadir widget personalizado con el Divi builder al sidebar o footer

 

Una vez realizado el diseño del widget personalizado con la plantilla Divi, es el momento de colocar dicho widget en el sidebar.

 

Aprende a añadir un widget de últimas entradas con imagen en miniatura: Widget de últimas entradas

 

Realmente, lo que vamos a hacer es incrustar o embeber el diseño que hemos creado en un widget de texto e incluir dicho widget en la barra lateral o sidebar.

Para ello, lo que debemos hacer es copiar el número o id asociado al diseño que hemos realizado y que se muestra en la URL cuando estamos viendo la página del diseño (NO con el constructor visual)

 

Cómo saber el ID del diseño creado para el widget

En el ejemplo el ID sería 6982

 

Ahora, accederemos a la página de gestión de widgets situada en: “Apariencia > Widgets”.

Arrastraremos un widget de texto a la barra lateral o sidebar, tras hacer clic en la pestaña de HTML escribiremos el siguiente código:

A continuación, guarda el widget.