Cómo agregar estilos personalizados a los widgets de WordPress (2 formas)

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

Dado que los widgets de WordPress ahora usan el editor de bloques, tienes varias formas de cambiar su apariencia según la cantidad de control que necesites.

Recorreremos primero las opciones integradas y luego te mostraremos cómo agregar estilos completamente personalizados:

1. Usando la Configuración Predeterminada del Bloque

Antes de agregar código personalizado, vale la pena verificar si el bloque ya tiene la configuración que necesitas.

Si vas a la página Apariencia » Widgets y haces clic en un bloque específico, a menudo verás opciones en el panel de configuración del bloque para cambiar colores y tipografía.

2. Agregando una Clase CSS Personalizada

Si la configuración predeterminada no es suficiente, puedes agregar una "clase" específica al widget. Esto actúa como una etiqueta de nombre que te permite apuntar solo a ese widget con tu código personalizado.

Simplemente haz clic en el widget donde deseas agregar estilos personalizados. Luego, desplázate hacia abajo hasta la pestaña ‘Avanzado’ en el panel de Bloque. Desde aquí, puedes agregar una clase de CSS personalizado.

Para este tutorial, escribe latest-articles en el campo. Asegúrate de no agregar un punto (.) al principio del nombre de la clase.

No olvides guardar la configuración de tu widget haciendo clic en el botón ‘Actualizar’.

3. Aplicando tus estilos personalizados

Ahora que le has dado un nombre de clase a tu widget, necesitas agregar el código que le indica a WordPress cómo estilizarlo. Hay dos maneras de hacer esto:

Opción 1: Usando el Personalizador de Temas

Esta es la forma más rápida de agregar código si solo quieres probarlo.

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.

Opción 2: Usando WPCode (Recomendado)

Recomendamos usar WPCode porque guarda tus estilos personalizados incluso si cambias de tema más adelante. También es la forma más segura de agregar fragmentos de código a WordPress.

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.

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, agrega tu CSS personalizado al 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)

Escribir código CSS manualmente puede ser complicado para los principiantes. Un pequeño error podría dañar el diseño de tu sitio, y aprender la sintaxis lleva tiempo.

Si no quieres lidiar con el código, puedes usar CSS Hero. Es un plugin de estilo visual que te permite personalizar tus widgets con una simple interfaz de apuntar y hacer clic.

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.

Preguntas Frecuentes Sobre las Opciones de Estilo en WordPress

Aquí hay algunas preguntas que nuestros lectores han hecho con frecuencia sobre cómo estilizar diferentes elementos en WordPress:

¿Cómo agrego widgets personalizados en WordPress?

Para agregar un widget personalizado, ve a Apariencia » Widgets en tu panel y haz clic en el botón de agregar bloque con el signo más (+). Luego puedes seleccionar cualquier bloque disponible, como texto, imágenes o publicaciones recientes, y colocarlo en tu barra lateral o área de pie de página.

¿Cómo se agregan estilos en WordPress?

La forma más segura de agregar estilos es usando la pestaña CSS adicional en el Personalizador de temas o un plugin como WPCode. Estos métodos te permiten agregar código CSS personalizado sin modificar los archivos principales de tu tema, asegurando que tus cambios no se pierdan durante las actualizaciones.

¿Se puede personalizar un widget?

Sí, puedes personalizar casi todos los aspectos de un widget. Los widgets modernos de WordPress tienen configuraciones integradas para colores de fondo y tipografía. Para un control más avanzado, puedes asignar una clase CSS específica al widget y estilizarlo manualmente con código.

¿Cómo crear un widget de menú personalizado en WordPress?

Puedes agregar un menú personalizado usando el bloque Menú de navegación en tu área de widgets. Primero, crea tu menú específico en Apariencia » Menús, luego simplemente selecciona ese menú del menú desplegable dentro de la configuración del bloque Menú de navegación.

¿Cómo crear un widget personalizado?

Si necesitas una funcionalidad específica que no se encuentra en los bloques predeterminados, puedes crear un widget personalizado escribiendo un plugin o usando una herramienta como WPCode. Sin embargo, si simplemente deseas un diseño personalizado, generalmente puedes lograr esto agrupando bloques existentes y aplicando estilos CSS personalizados.

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.