Cómo añadir clases CSS adicionales a bloques en WordPress
Tiempo de lectura: 3 minutosAñadir clases CSS adicionales a los bloques de WordPress es la forma más sencilla y limpia de personalizar el diseño de tu sitio web sin tocar código complicado. Solo necesitas un clic en el editor y listo: control total sobre colores, espaciados, animaciones y más.
¿Alguna vez quisiste que un botón sea más grande, que una columna tenga fondo redondeado o que un texto destaque solo en móvil? La solución está en las clases CSS adicionales del editor de bloques (Gutenberg). Te lo explico paso a paso.
¿Por qué necesitas añadir clases CSS adicionales?
Los temas de WordPress ya traen estilos básicos, pero muchas veces no alcanzan. Con clases extra tú decides exactamente cómo se ve cada bloque sin crear archivos nuevos ni instalar plugins pesados.
Es rápido, no rompe nada al actualizar el tema y funciona perfectamente con cualquier tema bloque.
Paso a paso: cómo añadir una clase CSS a cualquier bloque
- Abre la página o entrada en el editor de WordPress.
- Haz clic sobre el bloque que quieres modificar (un párrafo, imagen, botón, columna…).
- En la barra lateral derecha busca el apartado Avanzado (si no lo ves, haz clic en los tres puntitos arriba a la derecha y activa “Panel de ajustes”).
- En el campo Clases CSS adicionales escribe el nombre de tu clase (sin el punto). Ejemplo: mi-boton-rojo
- Actualiza o publica la página.
¡Ya está! Ahora solo falta crear el estilo en tu tema.
Dónde poner el código CSS una vez que tienes la clase
Tienes tres opciones fáciles y seguras:
- Apariencia → Personalizar → CSS adicional → (la más recomendada para principiantes)
- En tu tema hijo (si usas uno) en el archivo style.css
- Con un plugin ligero como “Simple CSS” o “Custom CSS Pro”
Ejemplo real de código que puedes copiar y pegar:
CSS
.mi-boton-rojo {
background-color: #e74c3c !important;
padding: 20px 40px !important;
border-radius: 50px !important;
font-size: 18px !important;
transition: all 0.3s;
}
.mi-boton-rojo:hover {
background-color: #c0392b !important;
transform: scale(1.05);
}
Tip 1: Usa varias clases en el mismo bloque
Puedes poner varias separadas por espacio: boton-grande sombra-suave animacion-lenta Así reutilizas estilos en todo el sitio.
Tip 2: Clases según el tamaño de pantalla
Crea clases solo para móvil o escritorio:
CSS
/* Solo se aplica en pantallas menores a 768px */
@media (max-width: 767px) {
.ocultar-en-movil { display: none !important; }
.texto-grande-movil { font-size: 32px !important; }
}
Y añades la clase ocultar-en-movil al bloque que quieras esconder en celulares.
Tip 3: Clases automáticas con “block styles”
Algunos temas y plugins ya traen estilos predefinidos. Por ejemplo el bloque de botón tiene estilos como “Relleno”, “Contorno”… pero tú puedes crear los tuyos propios registrando “block styles” en functions.php (nivel avanzado).
Ejemplos reales que puedes usar hoy mismo
- Fondo degradado solo en una sección: clase degradado-azul
- Tarjeta con sombra y borde redondeado: clase tarjeta-elevada
- Texto con animación de entrada: clase animar-fade-in
- Espaciado extra entre columnas en móvil: clase gap-movil-40
Conclusión
Añadir clases CSS adicionales a los bloques es la herramienta más potente y sencilla que tienes en WordPress para que tu sitio quede exactamente como lo imaginas. No necesitas ser programador: un clic + unas líneas de CSS y listo.
Empieza hoy mismo con un solo bloque y verás lo fácil que es. En menos de 5 minutos tendrás un diseño 100% personalizado.
FAQs sobre CSS en WordPress
¿Se pierden las clases si cambio de tema?
No, las clases que añades en el bloque quedan guardadas en la base de datos. Solo pierdes el estilo si el nuevo tema no tiene ese CSS.
¿Puedo usarlas con Elementor o Divi?
En la mayoría de los casos sí, porque los bloques nativos de WordPress siguen funcionando dentro de esos constructores.
¿Y si uso Full Site Editing (FSE)?
Funciona exactamente igual, incluso mejor, porque puedes crear tus propias plantillas de bloques con clases reutilizables.
