¿Quieres añadir estilos personalizados a los widgets de WordPress?
El estilo de sus widgets le permite mantener la coherencia de su imagen de marca y resaltar la información importante para sus usuarios.
En este artículo, le mostraremos cómo añadir fácilmente estilos personalizados a los widgets de WordPress sin romper su sitio web.
Le mostraremos tres formas de añadir estilos personalizados a los widgets de WordPress. Puedes elegir la que mejor se adapte a ti.
- Añadir Estilos Personalizados a Widgets de WordPress Usando el Editor de Bloques
- Añadir Estilos Personalizados a Widgets Clásicos en WordPress
- Añadir estilos personalizados a widgets de WordPress usando CSS Hero (sin código)
Antes de empezar, este artículo requiere algunos conocimientos de CSS para que puedas dar estilo a los widgets. También necesitarás añadir CSS personalizado a tu tema de WordPress.
Si prefieres un método sin código en lugar de CSS, puedes omitir el método 3.
Primeros pasos.
Añadir Estilos Personalizados a Widgets de WordPress usando el Editor de Bloques
Los widgets de WordPress utilizan ahora el editor de bloques para añadir widgets y bloques a las áreas preparadas para widgets y a las barras laterales.
Una de las ventajas de utilizar el editor de bloques para widgets es que puedes añadir fácilmente clases CSS personalizadas a cada bloque.
Simplemente ve a la página Apariencia ” Widgets y haz clic en el widget donde quieras añadir estilos personalizados.
A continuación, desplácese hasta la pestaña Avanzado del panel Bloque. Desde aquí, puedes añadir una clase CSS personalizada.
No olvides guardar los cambios al hacer clic en el botón Actualizar.
Ahora, puede añadir CSS personalizado a su tema de WordPress orientado a esa clase de CSS en particular.
Simplemente ve a la página Apariencia ” Personalizador y cambia a la pestaña CSS adicional. Allí verás una vista previa en vivo de tu sitio web con un cuadro para añadir tus reglas CSS.
Nota: Si no puedes ver Personalizador en el menú Apariencia, entonces echa un vistazo a nuestro artículo sobre cómo corregir la falta del personalizador de temas en el administrador de WordPress o utiliza el plugin WPCode para añadir tu CSS personalizado.
Aquí hay algo de CSS básico que utilizamos.
.latest-articles {
background-color:#def4f1;
padding:10px;
}
Después de añadir tu CSS personalizado, puedes obtener una vista previa de tu sitio web para verlo en acción.
El problema de utilizar los widgets del editor de bloques es encontrar el bloque adecuado.
Una corrección más sencilla sería añadir bloques a un bloque de grupo para poder aplicarles estilo de forma conjunta. Puedes leer más acerca de agrupar bloques en nuestra guía sobre cómo usar el editor de bloques de WordPress.
Añadir estilos personalizados a widgets clásicos en WordPress
Este método es para usted si utiliza los antiguos widgets clásicos en su sitio web WordPress.
Para este método, necesitas instalar y activar el plugin Widget Options. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Widget Options es un potente plugin que añade opciones extra a tus widgets de WordPress. Esto incluye la posibilidad de mostrar y ocultar widgets en función del dispositivo de usuario, perfil y otras condiciones.
El plugin también añade una opción para añadir clases CSS personalizadas a tus widgets de WordPress.
Simplemente vaya a la página Apariencia ” Widgets y haga clic en el widget donde desea añadir el estilo personalizado.
En los ajustes del widget, verás una amplia gama de opciones. A partir de aquí, tienes que hacer clic en el icono de engranaje para añadir tu clase CSS personalizada.
Cuando hayas terminado, no olvides hacer clic en el botón Guardar para establecer los ajustes del widget.
Ahora puede añadir reglas CSS personalizadas a su tema utilizando la clase CSS que acaba de introducir. Por ejemplo, hemos utilizado el siguiente CSS en nuestro sitio de prueba.
.latest-articles {
background-color:#def4f1;
padding:10px;
}
Así se veía en nuestro sitio web de prueba.
Aplicación de estilos personalizados a widgets de WordPress con CSS Hero
Uno de los problemas de los dos métodos anteriores es que es necesario escribir código CSS. Sin embargo, no todos los usuarios saben CSS o simplemente no quieren escribir código ellos mismos.
En ese caso, puedes usar CSS Hero. Se trata de un plugin para personalizar el estilo de WordPress que te permite añadir CSS personalizado a tu tema de WordPress sin necesidad de escribir ningún código.
En primer lugar, debes instalar y activar el plugin CSS Hero. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez activado, el plugin añadirá un nuevo elemento / artículo al menú superior de la barra de herramientas del administrador de WordPress.
A continuación, tienes que visitar la página donde puedes ver el widget al que quieres aplicar estilo y hacer clic en el botón CSS Hero de la parte superior.
Esto abrirá la página en la interfaz del editor CSS Hero.
Se trata de un editor en vivo en el que sólo tienes que apuntar y hacer clic en cualquier elemento de tu sitio web y cambiar su estilo.
Sólo tienes que situar el ratón sobre el widget al que quieras aplicar estilo y hacer clic para seleccionarlo.
Después, puedes usar el menú de la izquierda para dar a tu widget el estilo que quieras.
Esto incluye opciones avanzadas de estilo como degradados, tipografía, relleno, márgenes y bordes.
Cuando hayas terminado, no olvides pulsar el botón Guardar para guardar tus ajustes.
Ahora puede obtener una vista previa de su sitio web para ver los cambios realizados.
Esperamos que este artículo te haya ayudado a aprender cómo añadir estilos personalizados a los widgets de WordPress. Puede que también quieras ver nuestra selección de los widgets de WordPress más útiles para todos los sitios web o ver nuestra guía sobre cómo crear un tema de WordPress personalizado desde cero sin escribir código.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Ankush says
The Plugin was really Great but I had a problem…
It doesn’t work when i add custom css….
May be plugin css is overriding my code but.. that really sad…
Hey Wpbeginner.com Team.. Please leave me a reply,]
I You can tell me how to fix it…
Rachael says
I love this plugin but every time I activate it, I have trouble with the gallery widget. It works fine with the plugin deactivated, but if I turn on the plugin, the gallery widget won’t save any images. All of the other widgets work fine. Does anyone else have this issue?
Regina says
Does how to instructional above also also include the ability to customize the font of the widget titles?
Thanks!
terry says
Finally, after failing at trying to decode the jargon I get on inspect, this article told me exactly what I needed.
Thanks
Alex says
I don’t have any classes on widgets.
irfan says
There is extra white space while creating extra widget area for header. Kindly tell us , how to remove this
Thomas says
Hi, I tried to do it manually, inspected the element and its class but it did not work.
I am trying to change the style of a WPform.
Could you help me?
WPBeginner Support says
Hey Thomas,
Please take a look at this guide on how to add custom css to WPForms.
Administrador
daniel says
i have added a widget area to my header using the functions.php and header.php files. i can see the widget ive added on my site but i want to put it next to the menu, any idea how to do this please? i want it to sit to the right hand side of the menu.
WPBeginner Support says
Hey Daniel,
You’ll need to use place the widget code before your menu and then add custom CSS to position it.
Administrador
Deniz Kumru says
It’s my first wordpress theme.I was nervous till found your article.It’s done thank you
ivan says
Why does my layout under widget styles only shows the padding option, without the bottom margin, gutter & row layout option.
Rimi says
hallo
I can not make any changes because it is inactive
Being processed plugin / css / plugin-front.css (inactive),How can I activate pleas
Grace says
Hello, my theme doesn’t have a right sidebar, it came with just a footer widget area, can I use the custom css to add a right sidebar? Please help me, thanks
WPBeginner Support says
No, you will first need to define a widget ready area. Your theme may already have an option to use a sidebar layout. If it doesn’t, then we would recommend you to ask the theme author for support. On the other hand, if you feel confident in your coding skills, then go a head.
Administrador
Mr.T says
I want to change them manually. Am I right that by using widget-number class you actually can’t move them up or down in the widgets area, because their id will change, or it works differently?
Erick says
I have the same question
Correen K says
I was looking for something like this to add some style to my sidebar and stumbled upon the Flexible Posts Widget plugin. I think it’s always nice to have options
Abhishek Prakash says
Will using these many CSS not impact the page speed?
WPBeginner Staff says
Not if you do it right.