Crear sitios de WordPress nos ha enseñado que los pequeños detalles marcan grandes diferencias. El estilo personalizado de los widgets puede transformar sitios web buenos en excelentes.
En WPBeginner, hacemos que cada elemento funcione en conjunto. Tomemos nuestros widgets de barra lateral, por ejemplo.
Hemos personalizado su apariencia para resaltar recursos importantes y hacer que se integren perfectamente con el diseño de nuestro sitio. Esto nos ayuda a generar confianza con millones de visitantes.
En esta guía, compartiremos los métodos más sencillos para personalizar los estilos de los widgets de WordPress. Aprenderás técnicas para que tus widgets se vean profesionales y se integren perfectamente con tu tema.
¿Por qué agregar estilos personalizados a los widgets de WordPress?
Por defecto, los widgets de WordPress usan el estilo de tu tema, que podría no coincidir siempre con tus objetivos de diseño. Agregar estilos personalizados te da más control sobre cómo se ven y se sienten tus widgets.
Aquí te explicamos por qué vale la pena personalizarlos:
- 🎨 Coincide con tu marca: Los estilos personalizados te permiten alinear los colores, fuentes y espaciado de los widgets con la marca de tu sitio para una apariencia más cohesiva.
- 👓 Mejora la legibilidad: A veces, el diseño predeterminado del widget no es fácil de leer. El estilo puede ayudar a mejorar los tamaños de fuente, el contraste o la alineación para una mejor experiencia de usuario.
- 🌟 Destaca contenido importante: ¿Quieres que tus publicaciones recientes, llamadas a la acción o información de contacto destaquen? CSS personalizado puede hacer que esos widgets sean más llamativos.
- 🧹 Limpia diseños desordenados: Si un widget se ve demasiado abarrotado o fuera de lugar, los estilos personalizados ayudan a optimizar su apariencia e integrarlo más fluidamente en tu diseño.
- 🧩 Crea diseños únicos: Los estilos personalizados abren posibilidades de diseño, como convertir un widget de texto básico en un cuadro promocional con estilo o alinear varios widgets en una cuadrícula.
En resumen, estilizar tus widgets te ayuda a ir más allá del aspecto predeterminado y crear un sitio web más pulido y profesional.
Dicho esto, veamos cómo agregar fácilmente estilos personalizados a tus widgets de WordPress.
Te mostraremos 2 formas de personalizar tus widgets de WordPress con estilos personalizados. Puedes usar estos enlaces rápidos para ir al que mejor te funcione:
- Método 1: Estiliza widgets de WordPress con código CSS
- Método 2: Estiliza widgets de WordPress con CSS Hero (sin código)
Nota: Este artículo está destinado a usuarios de temas clásicos. Si usas un tema de bloques, no verás las páginas de Widgets o Personalizador de temas en tu administrador. Tendrás que usar bloques y el editor de sitio completo para personalizar tu tema.
Para obtener más información, consulta nuestra guía completa sobre la edición completa del sitio en WordPress.
Método 1: Estiliza widgets de WordPress con código CSS
Los widgets de WordPress ahora usan el editor de bloques para agregar un nuevo widget y bloque a las áreas de widgets y barras laterales. Eso significa que verá algunas opciones de estilo de bloque para algunos de los bloques predeterminados de WordPress.
Por ejemplo, si va a la página Apariencia » Widgets y hace clic en un bloque predeterminado de WordPress, verá opciones para cambiar los colores y la tipografía del bloque.
Sin embargo, no todos los bloques vienen con estas opciones de widget, especialmente si estos bloques no son predeterminados de WordPress. Afortunadamente, una de las ventajas de usar el editor de bloques para widgets es que puede agregar fácilmente clases CSS personalizadas a cada bloque.
Todo lo que necesita hacer es simplemente hacer clic en el widget donde desea agregar estilos personalizados.
A continuación, debe desplazarse hacia abajo hasta la pestaña 'Avanzado' en el panel de Bloque. Desde aquí, puede agregar una clase CSS personalizada.
No olvides guardar la configuración de tu widget haciendo clic en el botón ‘Actualizar’.
Ahora, puedes agregar CSS personalizado a tu tema de WordPress apuntando a esa clase CSS en particular.
Simplemente ve a la página Apariencia » Personalizar y cambia a la pestaña CSS adicional. Allí, verás una vista previa en vivo de tu sitio web con un cuadro para agregar tus reglas CSS.
Otro método efectivo para agregar CSS personalizado es usar WPCode.
Lo hemos probado exhaustivamente y lo encontramos una de las formas más seguras de integrar código personalizado en tu tema. Si administras numerosos fragmentos de código CSS, WPCode facilita su organización y seguimiento.
Para más detalles sobre sus características y beneficios, no dudes en consultar nuestra reseña de WPCode.
Primero, asegúrate de instalar el plugin WPCode. Para obtener instrucciones paso a paso, puedes leer nuestra guía sobre cómo instalar un plugin de WordPress.
Nota: Puedes usar el plan gratuito de WPCode para este tutorial. Pero si decides pasar a la versión profesional, obtendrás beneficios adicionales como acceso a una biblioteca en la nube de fragmentos de código y lógica condicional inteligente para una mayor flexibilidad en la gestión de tu código.
A continuación, ve a Fragmentos de código » + Agregar fragmento y selecciona ‘Agregar tu código personalizado (Nuevo fragmento)’. Luego, haz clic en el botón ‘+ Agregar fragmento personalizado’.
Ahora, dale un nombre a tu nuevo CSS personalizado. Puede ser algo simple como ‘Estilo de widget personalizado’.
Luego, cambia el Tipo de código a ‘Fragmento de CSS’.
A continuación, procede a agregar tu CSS personalizado en el campo.
Aquí hay algo de CSS básico que usamos:
.latest-articles {
background-color:#def4f1;
padding:10px;
}
Una vez hecho esto, simplemente desplázate hacia abajo hasta la sección Inserción. Asegúrate de que el Método de inserción esté configurado en ‘Inserción automática’ y la Ubicación en ‘Encabezado de todo el sitio’.
Después de eso, activa el botón en la esquina superior derecha hasta que diga ‘Activo’ y haz clic en ‘Guardar fragmento’.
Después de agregar tu CSS personalizado, puedes ver tu sitio web de WordPress en móvil o escritorio para verlo en acción.
Así es como se ve el nuestro en nuestro sitio de demostración de WordPress:
Método 2: Estiliza widgets de WordPress con CSS Hero (sin código)
Un problema con el método anterior es que necesitas escribir código CSS. Sin embargo, no todos los usuarios conocen CSS o simplemente no quieren escribir código ellos mismos.
En ese caso, puedes usar CSS Hero. Es un plugin de estilo personalizado para WordPress que te permite agregar CSS personalizado a tu tema de WordPress sin escribir ningún código.
Puedes aprender más sobre el plugin en nuestra reseña de CSS Hero.
Primero, necesitas 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.
Tras la activación, el plugin agregará un nuevo elemento de menú a la barra de herramientas de administración de tu WordPress en la parte superior.
A continuación, necesitas visitar la página donde puedes ver el widget que deseas estilizar y hacer clic en el botón CSS Hero en la parte superior.
Esto abrirá la página en la interfaz del editor de CSS Hero.
Es un editor en vivo donde simplemente puedes hacer clic en cualquier elemento de tu sitio web y cambiar su estilo.
Simplemente coloca el mouse sobre el widget que deseas estilizar. Luego, haz clic para seleccionarlo.
En este ejemplo, seleccionamos nuestro widget de Búsqueda.
Después de eso, puedes usar el menú de la izquierda para estilizar tu widget como quieras. Esto incluye opciones de estilo avanzadas como degradados, tipografía, rellenos, márgenes y bordes.
En el ejemplo a continuación, cambiamos el tamaño de fuente del widget de Búsqueda de WordPress para que resalte aún más.
También puedes cambiar elementos específicos del widget si es necesario.
Por ejemplo, decidimos cambiar el radio del borde del botón y los campos de búsqueda. De esta manera, se ven más curvos y elegantes.
Una vez que hayas terminado, no olvides hacer clic en el botón ‘Guardar’ para almacenar tu configuración.
Luego, procede a previsualizar tu sitio web para ver tu nuevo diseño de WordPress en acción.
Esperamos que este artículo te haya ayudado a aprender cómo agregar estilos personalizados a los widgets de WordPress. También te puede interesar ver nuestra selección de los mejores constructores de páginas de arrastrar y soltar para WordPress y nuestra comparación de pros y contras entre temas gratuitos vs premium de WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Ankush
El plugin fue realmente genial, pero tuve un problema…
No funciona cuando agrego CSS personalizado…
Tal vez el CSS del plugin está sobrescribiendo mi código, pero… eso es realmente triste…
Hola equipo de Wpbeginner.com… Por favor, respóndanme,
Pueden decirme cómo solucionarlo…
Rachael
Me encanta este plugin, pero cada vez que lo activo, tengo problemas con el widget de galería. Funciona bien con el plugin desactivado, pero si activo el plugin, el widget de galería no guarda ninguna imagen. Todos los demás widgets funcionan bien. ¿Alguien más tiene este problema?
Regina
¿La instrucción anterior también incluye la capacidad de personalizar la fuente de los títulos de los widgets?
¡Gracias!
terry
Finalmente, después de fallar al intentar descifrar la jerga que obtengo al inspeccionar, este artículo me dijo exactamente lo que necesitaba.
Gracias
Alex
No tengo ninguna clase en los widgets.
irfan
Hay un espacio en blanco adicional al crear un área de widget adicional para la cabecera. Por favor, díganos cómo eliminarlo.
Thomas
Hola, intenté hacerlo manualmente, inspeccioné el elemento y su clase, pero no funcionó.
Estoy intentando cambiar el estilo de un WPform.
¿Podrías ayudarme?
Soporte de WPBeginner
Hola Thomas,
Por favor, echa un vistazo a esta guía sobre cómo agregar CSS personalizado a WPForms.
Administrador
daniel
He agregado un área de widgets a mi encabezado usando los archivos functions.php y header.php. Puedo ver el widget que he agregado en mi sitio, pero quiero ponerlo al lado del menú, ¿alguna idea de cómo hacerlo, por favor? Quiero que esté en el lado derecho del menú.
Soporte de WPBeginner
Hola Daniel,
Necesitarás colocar el código del widget antes de tu menú y luego agregar CSS personalizado para posicionarlo.
Administrador
Deniz Kumru
It’s my first wordpress theme.I was nervous till found your article.It’s done thank you
ivan
¿Por qué mi diseño en estilos de widget solo muestra la opción de relleno, sin la opción de margen inferior, canal y diseño de fila?
Rimi
hola
No puedo hacer ningún cambio porque está inactivo
Procesando plugin / css / plugin-front.css (inactivo), ¿Cómo puedo activarlo por favor
Grace
Hola, mi tema no tiene una barra lateral derecha, solo vino con un área de widgets en el pie de página, ¿puedo usar CSS personalizado para agregar una barra lateral derecha? Por favor, ayúdame, gracias.
Soporte de WPBeginner
No, primero necesitarás definir un área lista para widgets. Tu tema puede tener ya una opción para usar un diseño de barra lateral. Si no la tiene, te recomendamos que pidas soporte al autor del tema. Por otro lado, si te sientes seguro con tus habilidades de codificación, entonces adelante.
Administrador
Mr.T
Quiero cambiarlos manualmente. ¿Tengo razón al pensar que al usar la clase widget-number en realidad no puedes moverlos hacia arriba o hacia abajo en el área de widgets, porque su ID cambiará, o funciona de manera diferente?
Erick
Tengo la misma pregunta
Correen K
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
¿Usar tantos CSS no afectará la velocidad de la página?
Personal de WPBeginner
No si lo haces bien.