Seleccionar página

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.

 

Widgets con títulos rectangulares wordpress

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 de wordpress con rectángulos de 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 decorado con línea de color

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

 

asignar clase al módulo barra lateal o sidebar

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 para dar diseño a los títulos de los widgets de wordpress

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 si no usas un child theme

Añadir código CSS a la plantilla para dar diseño a los widgets de wordpress

 

 

Compártelo ya!!
Curso gratis de wordpress y divi

▷LLÉVATE EL CURSO WORDPRESS Y DIVI GRATIS

Aprende a crear una página web con Wordpress y Divi

22 vídeos gratis

Consentimiento

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.

Abrir chat
¿Dudas sobre mis cursos o servicios?
🙋🏻‍♂️** ¿Alguna duda sobre mis cursos o servicios? Soy Joaquín, cuéntame y te ayudo encantado
**Accede a TODOS mis cursos por solo 10 €/mes desde cursotiendaonline.com