¿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
ÍNDICE - CÓMO PERSONALIZAR WIDGET DE WORDPRESS CON DIVI
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.
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.
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.
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.
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
Una vez realizado el diseño del widget personalizado con la plantilla Divi, es el momento de colocar dicho widget en el sidebar.
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)
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.
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
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.
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.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Buenas sabes que creo todo perfecto! pero a la hora de colocar el shotcode no me funciona! Que podra ser?
Buenas Carlos.
Por lo que veo en los comentarios en youtube, ya has conseguido crear el widger con el page builder de Divi
¿verdad?
Muy buen post, gracias por compartirlo
saludos
Nicolás
Hola Joaquin,
estoy empezando a hacer una web con divi y me surge algo que no me gusta.
Al pasar el raton por una imagen hace un efecto que querría eliminar .
Sabes como podría eliminar este efecto ?
Gracias y un saludo
Buenas,
Me imagino que estás usando el módulo imagen del constructor ¿no?
Si, en las paginas así lo hago.
También me sucede en las categorias en woocommerce y ahi no utilizo el constructor de divi pero también me hace ese efecto las imagenes
Buenas,
Imagino que te refieres al efecto que al poner el ratón sobre una imagen (realizada con el módulo imagen del cosntructor) aparece una capa superpuesta y el icono «+». Esto solo ocurre cuando la imagen tiene un enlace, y se puede suprimir. En el módulo imagen, en la pestaña Diseño hay un apartado denominado «Capa superpuesta» y un selector denominado: «superposición de imagen». Tienes que poner el selector en «apagado»
Ohh , Joaquin muchas gracias,
De las paginas esta solucionado.
Lo que no consigo es quitarlo de las imágenes de la categoría de producto ya que estas no están editadas con divi
Buenas,
No hay opciones de personalización con Divi de la página de categorías de Woocommerce.
Consulta al soporte de Divi, a ver si te pueden dar alguna solución para este caso.
Muchas gracias por todo,
Un saludo
Yo también adoro Divi, es el mejor. A mí me costó descubrirlo, pero si cuando estás dentro de la biblioteca, creando tu módulo le das al botón usar constructor visual, si puedes editarlo como cualquier otra página. La presentación es un poco diferente, pero sirve para su propósito. Un saludo.
Gracias por tu aportación Eli
Un saludo