Ya habrás visto que la plantilla Divi para WordPress no permite personalizar el diseño de los títulos de los Widgets, además dicho todo de paso el diseño que viene por defecto es bastante austero.
DESCUENTOS DIVI / ELEGANT THEMES
Vamos a ver cómo dar un diseño más vitoso a los títulos de los widgets del blog de wordpress con diferentes tipos de bloques y colores y a la barra de búsqueda. Yo ya lo he implementado en mi blog y lo cierto es que queda más vistoso.
Existen dos maneras de añadir un blog con Divi. Una es a través de un módulo tipo “barra lateral” y otros es directamente asignado la página del blog en los ajustes de WordPress. Vamos a ver un código único que nos sirva para las dos opciones.
Estos diseños de los widgets también nos servirán para que haya una separación más visual entre los diferentes widgets de la barra lateral o sidebar de WordPress.
En los apartados 1,2 y 3 te mostraré tres tipos diferentes de diseño del título de los widgets y la barra de búsqueda. Elige uno de los tres, el que más te guste y descárgate su código CSS.
1.- DISEÑO DE TÍTULOS DE WIDGET TIPO RECTÁNGULO CON LA PLANTILLA DIVI Y WORDPRESS
El primer tipo de diseño de título de widgets es el de forma de rectángulo.
Títulos de los widgets de WordPress en forma de rectángulo
Desde el siguiente botón puedes descargar el código CSS que vas a necesitar. Más adelante te mostraré donde debes añadirlo y que más cosas debes realizar.
DESCARGAR CÓDIGO
Para modificar el color de fondo o background y el color del texto, abre el archivo CSS con un editor de código como Notepad++ u otro y modifica:
- Color de fondo: Modifica el color #fc5a20 por el color de fondo que quieras
- Color del texto: Modifica el color #fff por el color que quieras para el texto.
2.- DISEÑO DE TÍTULO DE LOS WIDGETS EN FORMA DE RECTÁNGULO CON ESQUINAS REDONDEADAS.
Ahora vamos a ver un diseño muy similar al anterior pero con las esquinas redondeadas.
Widgets WordPress en forma de rectángulo con esquinas redondeadas
Desde el siguiente botón puedes descargar el código CSS que te va a hacer falta. Más adelante te explicaré que tendrás que hacer con él.
DESCARGAR CÓDIGO
Como en el caso anterior si quieres modificar el color de fondo o el color del texto deberás abrir el código con un editor de código como Notepad++ u otro y editar el código que te he pasado.
- Color de fondo: Modifica el color #336699 por el color de fondo que quieras
- Color del texto: Modifica el color #fff por el color que quieras para el texto.
3.- DISEÑO DE TÍTULO DE WIDGET WORDPRESS CON LÍNEA DE SUBRAYADO CON LA PLANTILLA DIVI
Vamos a ver un diseño de título de widgets consistente en poner una línea horizontal de color bajo el título con la misión de destacarlo.
Título de Widget wordpress subrayado con línea de color
En el siguiente botón puedes descargar el código para el efecto de título de Widget subrayado. En los siguientes apartados te explicaré cómo utilizarlo.
DESCARGAR CÓDIGO
Si quieres modificar el color de la línea de subrayado y los colores del botón tendrás que editar el código y modificar:
Color de la línea de subrayado: para modificar dicho color debes editar la línea
border-bottom: 3px solid #e33067; (no olvides el “;”)
Y cambiar el color #e33067 por el color que quieras
Para modificar el color de fondo del botón de la barra de búsqueda tendrás que modificar la línea:
.option-1, .widget_search #searchsubmit {background-color: #e33067;}
Y sustituir el color #e330067 por el color que quieras (no olvides el “;”)
Si lo que quieres es modificar el color de borde de la barra de búsqueda, deberás editar la línea de código:
.option-1, .widget_search input#s {border: 1px solid #e33067;}
y sustituir el color #e33067 por el que quieras (no olvides el “;”)
4.- AÑADIR LA CLASE AL MÓDULO DE BARRA LATERAL DEL DIVI BUILDER
Este punto solo será necesario realizarlo si has creado la barra lateral a través del módulo “barra lateral” del Divi builder.
Si por el contrario, no has utilizado el módulo de barra lateral para implementarla te puedes saltar este paso.
En caso de que si lo hayas utilizado, debes acceder a la página donde hayas añadido el módulo tipo “barra lateral”.
A continuación haz clic sobre el botón de configuración del módulo “barra lateral” y haz clic en la pestaña “CSS Personalizado”.
En el campo “Clase CSS:” escribe: option-1
Añadir clase option-1 al módulo barra leteral de divi builder
A continuación pulsa el botón “Guardar y Salir” y actualiza la página.
5.- AÑADIR EL CÓDIGO CSS PARA LA VISUALIZACIÓN DE LOS TÍTULOS DE LOS WIDGETS
Ahora debemos añadir el código que nos hemos descargado. Tienes que elegir uno de los tres que te he mostrado (no puedes usar los tres al mismo tiempo). Elige uno entre los apartados 1,2 y 3.
Ahora existen dos posibilidades diferentes. Que estés usando un tema hijo o child theme o que no lo estés haciendo.
5.1.- CASO DE ESTAR UTILIZANDO UN CHILD THEME O TEMA HIJO
En caso de estar utilizando un child Theme o tema hijo, abre tu cliente FTP y conéctate con el hosting.
A continuación ve a: “public_html/wp-content/themes/divi-hijo” y edita el archivo “style.css”.
Abre el código que te has descargado con un editor de código como Notepad++ u otro. Copia el código e incluyelo en el archivo style.css.
Nota: El código nunca se debe poner encima de la línea @import url(«../Divi/style.css»);
Añadir código al archivo style.css del child theme
5.2.- CASO DE NO ESTAR UTILIZANDO UN CHILD THEME O TEMA HIJO
Si no estás utilizando un child theme o tema hijo, la forma más fácil será que vaya a “panel de administración > opciones del tema >”
En la pestaña “General” baja hasta la parte inferior de la página y pega el código en el campo titulado: “CSS personalizado”.
Añadir código CSS a la plantilla para dar diseño a los widgets de wordpress
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
Muy bien, explicado me ha servido de mucho. Muchas gracias.
Hola Renato.
Me alegro que te haya gustado el pot. Me gustaría también invitarte, si es posible, a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Cursos sobre Divi, Astra Pro, Elementor, Flatsome, Cursos sobre Woocommerce, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.
excelente tutorial, pero tengo una consulta. ¿cómo puedo reducir el espacio entre widgets con codigo css?
Buenas Emil,
Usa las opciónes del apartado «separación» (margen personalizado y relleno personalizado) presentes en todos los módulos, filas y secciones de Divi
Muchas gracias Joaquin, me ha sido de gran utilidad. Un saludo.
Hola, Muchas gracias por tu tutorial!
Me ha sido de gran ayuda pero me ocurre un problema, al añadir el código me desaparece el sombreado que tenía aplicado a toda la caja del módulo de la barra lateral y ahora la sombra solo aparece en el recuadro del título. Porque puede estar pasando esto?
También se me quedan líneas de texto del sidebar en blanco.
Un saludo
Buenas,
Es posible, que el código entre en confrontación con algún plugin o código que hayas añadido para personalizar la barra lateral
Hola Joaquin, Gracias por tu articulo, muy interesante.
Tengo una duda con las pestañas del Divi, y es que no logro hacer que cada titulo de cada pestaña sea un H. Tienes alguna sugerencia al respecto?
Gracias
Buenas,
Lo que hay en el post son reglas CSS que modifican la apariencia estética, pero no la estructura. Para eso tendrías que buscar algún tipo de plugin que modificara los títulos de los widgets permitíendote elegir el tipo de título a añadir
Hola quisiera cambiar los Títulos del los Witget por Imágenes sea PNG o JPG
Buenas Luis,
No hay ninguna opción en WordPress para cambiar los títulos de los widgets por imágenes.
Hola espero que estés bien!! gracias por el articulo; tengo un problema con divi ya que no responde a la hora de cambiar los estilos de botón, no hace caso en absoluto cuando le pongo un color, en lo que es la tienda en la zona de inicio todo bien, pero cuando elijo el producto para hacer el pago los botones la zona del background si esta en el color deseado pero las letras siguen azul como lo trae el tema divi predeterminadamente. el carrito lo logre modificar con un ccs pero el resto no se como modificarlo.
Muchas gracias un saludo
Hola,
los botones que comentas dependen de woocommerce y no de divi.
Para modificar los colores tendrás que tirar de algún plugin o modificando los CSS
Hola, Joaquín, gracias por compartirnos estos tips, quisiera saber si es posible añadir módulos en los wigdets en especial para el pie de pagina, ya que el pie de pagina lo diseñe con el constructor, pero en la sección del blog no quiero hacer uso del constructor, asi que si se pudiera trasladar el diseño de estos modulos como widgets estaria genial, o de donde saco el código para pegarlo como widget html o de texto
Gracias
Hola Wilson,
no es posible añadir módulos de Divi a los widgets de manera natural, pero creo que hay algún plugin para que te permita hacer algo así.
Échale un vistazo a este plugin e infórmate si es lo que necesitas:
Divi widget Builder
Un saludo
Hola, Joaquín, gracias por el aporte. Me ayudó a personalizar más mi sitio. Un dato curioso es que pude aplicar el css sin tener que ir al FTP, aunque uso un tema hijo de Divi, y no el original. Es decir, no es necesaria esa vía. Solo usas la función de Custom CSS; y listo.
Por cierto ¿sabes cómo personalizar la zona de comentarios de los post? Saludos.
Hola Omar,
si claro hay varias vías para modificar el archivo style.css, no hay que hacerno necesariamente vía FTP. A ver si no dentro de mucho creo un post con dos puntos claves en los comentarios. Reducir la separación horizontal entre el los diferentes comentarios de cada hilo y reducir el botón.
Un saludo
Hola Joaquin.
Interesante post!
Valdría esto mismo para extra? No se como cambiar el sidebar en extra:(
Gracias!
Hola Ana,
no lo he probado en la plantilla EXTRA,
Aquí te dejo un post donde indica como modificar el color de fondo en los títulos de los Widgets con la plantilla Extra-> Color Fondo títulos Widgets Extra
Un saludo
Mil mil gracias Joaquin;) Lo he probado y funciona!
Es una pena que extra no te de más opciones de personalización para el side bar, es una pena, creo que ahí se queda un poco corto.
Un saludo!
Hola Ana,
si, a ver si la plantilla EXTRA pronto añade la básica funcionalidad de personalizar el diseño de los widgets
Un saludo
Buenos días. Muchas gracias por tus aportes. Me podrías ayudar con lo siguiente:
Cree una pagina web llamada Blog en la cual tengo dos columnas. La primera de 3/4 donde incruste el modulo de blog y en la otra de 1/4 donde tengo incrustado una barra lateral personalizada con el plugin WooSidebars. El funcionamiento es perfecto pero lo que quiero es cambiar el color de fondo gris por blanco y no he encontrado como hacerlo. Serias tan amable de orientarme.
Muchas Gracias
Hola Mauricio,
con el page builder puedes cambiar el color de fondo en las secciones, en las filas y en algunos de los módulos.
Accede a las opciones de configuración de la sección o la fila y verás la opción de cambiar color de fondo. Si te refieres a un módulo en concreto, es posible que unos tengan la opción de color de fondo y otros no.
Un saludo
Una opción con la que no contaba, interesante y muy bien explicado, muchas gracias!
Hola Javier,
me alegro de verte por aquí
Un saludo