Personaliza el Formato del Título de los Widget

Personaliza el formato del título de los widget

Cuando abrimos un blog en lo primero que pensamos es en el diseño. Queremos tener el blog más bonito del mundo mundial y nos metemos en unos berenjenales…ainsss ¡qué valiente es la ignorancia!. Todavía recuerdo cuando cambié el formato del título de los widget de mamá ríe recién migrada a WordPress…¡sin saber apenas ni lo que era un widget! jajajaja. Pero que me puse me puse y vaya que si los cambié JA; fue poco más que el tipo de letra, el tamaño, el color…pero más contenta que unas castañuelas que me sentí cuando vi el resultado y sobre todo que lo había conseguido yo solita jejej.

En la prehistoria de los blogs modificar el código de tu plantilla era lo peor que podías hacer. Además de correr el riesgo de meter la pata hasta el fondo y cargarte el tema, ya eras prisionero para siempre de tu tema puesto que si lo actualizabas perdías todos los cambios que habías hecho…¡y cómo resultaba tan fácil hacerlos!

La solución era crear un Child Theme o Tema hijo para hacer las modificaciones sobre él y no tocar el Tema Padre (algo que yo siempre he visto complicadísimo). O bien instalar algún plugin que ofreciese la posibilidad de introducir código CSS personalizado, como por ejemplo Jetpack o Simple Custom CSS.

Posteriormente fueron los mismos temas los que aportaban esta función. Hasta que ha sido el propio WordPress (desde la versión 4.7) el que ofrece la opción de incluir modificaciones de CSS desde su personalizador y sin necesidad de instalar plugins externos.

También es verdad que las plantillas de ahora son mucho más versátiles, aunque sean gratuitas, permiten hacer más cambios de diseño de tu blog sin tocar nada de código CSS del tema. Aun así, puede que tengas una plantilla más antigua de la que no quieres desprenderte y necesites tuneárla un poco, o igual una que no posibilita ciertos cambios en su diseño.

Vamos a empezar por algo muy sencillo pero que marca la diferencia (esto suena a slogan publicitario jejej). Por ejemplo, cambiar el formato del título de los widget. No es lo mismo un simple título del color que viene por defecto, que un título enmarcado, subrayado, centrado, del color de tu marca, el tipo de letra que te guste…

¿Te animas?…

Cómo cambiar el Formato del Título de los Widget

¿Has visto la forma de los títulos de mis widgets en mamá ríe y en Crea y Gestiona tu Blog? En uno sobre un fondo azul y en el otro están subrayados, algo muy diferente a lo que ofrece el tema por defecto.

Personaliza el Formato del Título de los Widget

¿Cómo los he cambiado? Pues no he tenido más remedio que tocar el código CSS de mi tema. Pero no te asustes, que como te he dicho, ya no es como antes.

Ve a tu EscritorioAparienciaPersonalizar.

Personaliza el Formato del Título de los Widget

Has entrado a Estás personalizando (Nombre de tu blog), Tema activo (Nombre de tu tema). Baja y casi a final del todo verás CSS adicional.

Personaliza el Formato del Título de los Widget

Pincha y entrarás a Personalización CSS adicional. Aquí es cuando te da el patatús…jajajaj.

Personaliza el Formato del Título de los Widget

¿Qué y cómo pongo yo ahí un código que deje los títulos de mis widgets bonitos? Pues como ves aquí abajo. Ah y no olvides darle a Guardar  publicar para lucirlos jejeje.

Personaliza el Formato del Título de los Widget

Tranquilo, que te paso el código 😉

Código CSS para poner los títulos de los widgets sobre un fondo de color

.widget-title {

color: #95b1c0; (color de letra del título)
text-align: center; (alineación del título)
font-family: ‘Open Sans’, Arial; (tipo de letra)
font-size: 25px; (tamaño de letra)
background: #e0ecf5; (color de fondo)

}

Código CSS para poner los títulos de los widgets subrayados

.widget-title {

color: #5D5968(color de letra del título)
text-align: center; (alineación del título)
font-family: ‘Open Sans’, Arial; (tipo de letra)
font-size: 25px; (tamaño de letra)
border-bottom: 3px solid #dd1436; (grosor y color de la linea que subraya)
margin: 0 0 20px; (distancia del la linea que subraya a lo que tiene debajo)
padding: 0 0 20px; (distancia del la linea que subraya a lo que tiene encima)

}

He puesto en color azul mis aclaraciones, de lo que se trata cada cosa y en rojo lo que puedes modificar. Respeta los signos de puntuación, espacios… Como ves el color viene en código hexadecimal, pincha en el enlace y te llevará a una página donde puedes elegirlo y traducirlo al código HTML que solo tendrás que copiar y pegar. El nombre de las fuentes puedes mirarlo en Google font. Las demás propiedades es ir probando y modificando valores.

Te recomiendo que copies ese trozo de código en un Word o Bloc de notas antes de cualquier cambio, para que en caso de borrar algo sin querer, tenerlo en original para poder volverlo a poner tal y como estaba.

Y por favor, no olvides hacer una copia de seguridad antes de cualquier modificación que hagas en el blog por lo que pueda pasar.

También me gustaría dejarte para Descargar 5 Combinaciones de Tipografías y 5 Combinaciones de Colores para que la personalización de tus títulos sea redonda y luzcas un pedazo de blog este verano.

Y para terminar, ¿aun no tienes mi Guía? ¿y a qué esperas para descargarla?

Como ves no es nada difícil personalizar el formato del título de los widget y es un pequeño detalle que marca la diferencia ;). ¿Te animas?

“El diseño nos ha permitido destacarnos, ser distintos y mostrar esa diferencia de manera audaz”-Joe Mansueto

*Post actualizado

22 comentarios en “Personaliza el Formato del Título de los Widget

  1. Olé y olé!! Por fin alguien que me enseña una luz al final del túnel! Soy lo peor en informática, así que esperaré estos post con tus consejos como agua de mayo. hay bastantes cosas que quiero cambiar de mi plantilla pero entre mi torpeza y mi inglés a lo Paco Martínez Soria no me entero de ningún tutorial ( ni con el Google “transleit” en otra pestaña). Así

    • Jajajajaaj no lo tengo yo muy claro, lo mismo nos quedamos las dos atascadas en medio y a oscuras algún día!!!

      Hija, es que los tutoriales ni aunque estén es español, shhhhhhh que no se entere nadie por si se enfadan, pero creo que lo hacena drede para que nadie sepa mñas que ellos…son seres superiores jajajajaj

      Yo tampoco tengo ni idea, pero me encanta, así que pensé, por qué no compartirlo de forma fácil, tal y como yo lo he hecho!!??

      Así que espero que os sirva de algo.

    • Mil de nadas!!! no se si podrás, porque no se cual es tu plantilla, pero cualquier cosa que pueda aclararte, si sé…ya sabes donde encontrarme!!!

  2. ¡Me ha encantado como lo has explicado!

    Yo soy informática pero a la hora de explicar las cosas lo hago de forma bastante técnica así que no me entiende ni el tato jajaja. De hecho tengo una sección en el blog llamada “Utilidades para el blog” donde mi intención era una vez al mes publicar este tipo de cosas pero al final, escribo el post y al leerlo me da la impresión de que nadie lo va a entender así que no lo publico.
    Si necesitas ayuda en alguna cosa de wordpress o redes sociales avísame, yo te cuento como se hace (lo que sepa claro que tampoco soy una superexperta jajaja) y luego tu lo cuentas para que lo entienda todo el mundo 😉 .

    • De verdad crees que se entiende bien!!??

      Perdona que te diga, pero ese es el problema que tenéis todos los entendidos de este tema, que lo explicáis como pa’dentro jajajajaj y no nos enteramos de nada el resto de los mortales…

      Te quiero en mi vida pero yaaaaaaaaaaaaaaa, me nombro tu traductora oficial jajajajajaj

      Gracias por pasarte.

      • Si, es un mal que nos acecha jajaja. Aunque yo a fuerza de que los comerciales del trabajo se me queden mirando con cara de “¿que me estás contando?” intento explicar las cosas de forma más sencilla, pero reconozco que me cuesta bastante.

        Pero ahora solucionado ¡ya tengo mi traductora oficial! 😉

    • Me alegro que te guste, son las cosas que he hecho yo, nada del otro mundo, pero si puedo ayudar a laguien explicándolo de forma sencilla…

      Besossssssssss

  3. Tía, hace años que no toco hojas de estilo, vamos desde que dejé de trabajar en eso, hará… casi 10 años. Y lo tengo olvidadísismo. Esto me va a venir bien para recordar y reaprender. gracias!

  4. Qué profesional pareces, chica… yo te estaba leyendo y me asombraba de lo mucho que sabe la gente y lo tontilla que soy yo para estas cosas…
    Pero bueno, me alegro de que tengas esta nueva sección, así si algún día me decido a cambiarme a .org ya sé donde mirar todos los truquillos jejeje

    • Jajajajaja profesional!!!??? si casi me vuelvo loca haciendo todas estas cosas!!! además se hacerlo porque una vez lo hice, me sacas de esto y nada de nada…

      Claro tienes que cambiarte!!!!por supuesto con mi banner jajajaj tengo que aprovechar!!!

Si te ha servido de ayuda, agradecería que lo compartieras ;)

A %d blogueros les gusta esto: