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

 

código incluido en el widget de texto para añadir el diseño del divi builder

Pegar código cambiando el ID o número de identificación del diseño

 

 

4.- El resultado utilizar módulos de divi en un widget wordpress

 

El resultado obtenido es el siguiente que te muestro en la imagen y que puedes ver accediendo a cualquier entrada de mi blog

 

widget diseñado con wordpress y divi

Ejemplo de widget creado con el constructor de Divi

 

En este caso, también he hecho que este widget personalizado sea flotante, fijo o sticky. Es decir, que al hacer scroll en la página, el widget siga fijo (excepto en su tramo final, para que no se solape con el footer)

Pero esto os lo contaré en mi próximo post, que va a tratar exactamente sobre este tema de crear un widget fijo o flotante.

 

Aprende a ocultar widgets en dispositivos móviles: ocultar widgets en móviles

 

 

5.- Modificar diseño de widget construido con el Divi builder

 

En caso de querer modificar el widget que hemos diseñado previamente, será muy sencillo. Simplemente tendremos que ir a: “Divi > Biblioteca de divi”.

A continuación, localizaremos el diseño del widget que queremos modificar y haremos clic en “Editar”.

Los cambios que vayamos haciendo se debe ir viendo de manera inmediata en nuestra web, tras guardar, ya que el diseño ya está insertado en el widget.

 

 

Compártelo ya!!

ACCEDE A TODOS MIS CURSOS POR SOLO 10€/MES

1.- CURSO WORDPRESS (44 Clases)
2.- CURSO DIVI (33 Clases)
3.- CURSO BLOOM + MAILCHIMP (7 Clases)
4.- CURSO SEO (19 Clases)
5.- CURSO BLOG WORDPRESS (32 Clases)
6.- CURSO WOOCOMMERCE (39 Clases)
7.- CURSO FLATSOME WORDPRESS (36 Clases)
8.- CURSO COLORES WEB (9 Clases)
9.- CURSO ANALYTICS (10 Clases)
10.- CURSO GESTIÓN IMÁGENES WEB (15 Clases)
11.- CURSO SEO PARA TIENDAS ONLINE (12 Clases)
12.- ETC. ETC.
*** ADEMÁS TIENES MI SOPORTE VÍA EMAIL***

IR A LOS CURSOS

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.