4.5CSS personalizado y atributos
Lo esencial en 30 segundos
- El CSS personalizado (Pro) añade código a un elemento/la página, para los casos avanzados no cubiertos por la interfaz.
- Las clases y los atributos personalizados ayudan a dirigir y reutilizar estilos.
- Regla: un complemento, no el modo normal; demasiado CSS disperso perjudica la mantenibilidad.
Hilo conductor — Nadia para un acabado
Nadia quiere un pequeño efecto preciso en un botón que la interfaz no ofrece. En lugar de improvisar, añade dos líneas de CSS dirigidas mediante una clase reutilizable. Resiste la tentación de codificarlo todo: el 95 % del sitio se hace en la interfaz, el CSS sigue siendo la excepción para los acabados.
Última sección del nivel 4 — el toque final, con medida.
1. CSS, clases, atributos
Elementor Pro permite añadir CSS personalizado (pestaña Avanzado → CSS personalizado) en un elemento o para toda la página: útil para un ajuste fino que la interfaz no ofrece. Las clases CSS añadidas a elementos permiten dirigirlos en CSS y reutilizar un estilo. Los atributos personalizados (pares clave/valor) añaden atributos HTML, por ejemplo para una integración de terceros.
Nadia crea una clase "btn-devis" y le aplica su pequeño efecto: reutilizable en todos los botones afectados.
2. Un complemento, no el modo normal
Punto crucial: el CSS y los atributos son un complemento para los casos avanzados — no la forma normal de trabajar. La inmensa mayoría del diseño se hace en la interfaz (Estilo, Avanzado, guía de estilo global).
No abusar: demasiado CSS personalizado disperso hace el sitio difícil de mantener (ya no se sabe dónde está qué). Preferir las clases reutilizables y comentar el código. Nadia mantiene el CSS raro, dirigido y documentado.
🔎 Ejemplo concreto — Un efecto preciso, reutilizable (caso Nadia)
Clase: btn-devis
CSS personalizado (dirigido):
selector:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.15); }
→ Aplicar la clase "btn-devis" a los botones afectados.
→ Reutilizable, documentado, y la interfaz gestiona el resto.Resultado: un acabado preciso, limpio y reutilizable.
Lección: CSS como complemento, mediante clases.
Vocabulario de la sección
- CSS personalizado (Pro)
- Añadir CSS a un elemento o la página para un ajuste fino no cubierto por la interfaz.
Ejemplo sencillo: un efecto de pasar el ratón preciso en un botón.
Lo que no es: estilizarlo todo en CSS cuando la interfaz basta.
Reflejo: CSS solo cuando la interfaz no basta.
- Clases CSS
- Clases añadidas a los elementos para dirigirlos y reutilizar un estilo.
Ejemplo sencillo: clase "btn-devis" aplicada a varios botones.
Lo que no es: copiar el mismo CSS en cada elemento.
Reflejo: estilo reutilizado → clase, no copiar y pegar.
- Atributos personalizados
- Pares clave/valor que añaden atributos HTML (p. ej. para una integración).
Ejemplo sencillo: un atributo requerido por un script de terceros.
Lo que no es: añadir atributos al azar.
Reflejo: atributo si un servicio lo exige.
- Complemento, no modo normal
- El CSS/los atributos sirven para los casos avanzados; lo esencial se hace en la interfaz.
Ejemplo sencillo: 95 % en la interfaz, CSS para el acabado.
Lo que no es: recodificar en CSS lo que la interfaz ofrece.
Reflejo: interfaz primero, CSS como último recurso.
- Mantenibilidad
- Demasiado CSS disperso hace el sitio difícil de mantener.
Ejemplo sencillo: CSS raro, agrupado por clases, comentado.
Lo que no es: trozos de CSS por todas partes, sin lógica.
Reflejo: documentar y centralizar el CSS.
En la práctica — Añadir un acabado CSS con limpieza
- Identifica un ajuste preciso no cubierto por la interfaz.
- Crea una clase reutilizable y aplícale un CSS dirigido.
- Aplica la clase a los elementos afectados (en vez de CSS copiado por todas partes).
- Comenta el CSS y comprueba que lo esencial sigue gestionado en la interfaz.
Guion listo para decir — encuadrar el uso del CSS (20 s)
"Casi todo su sitio está construido visualmente, lo que lo hace fácil de evolucionar. Para dos o tres acabados precisos, añado un poco de código dirigido y documentado — sin abusar, para que el sitio siga siendo sencillo de mantener con el tiempo."
Tranquilizar: el CSS sigue siendo la excepción, el sitio sigue siendo mantenible.
Plantilla para copiar y pegar — nota CSS
NECESIDAD AVANZADA (no cubierta por la interfaz): _______________
CLASE REUTILIZABLE: _______________
CSS (dirigido, comentado): _______________
APLICADO MEDIANTE LA CLASE (no copiado por todas partes): sí / no
LO ESENCIAL SIGUE EN LA INTERFAZ: sí / noAcabado único
Un efecto preciso en un elemento: CSS dirigido, documentado.
Estilo reutilizado
Una clase aplicada a varios elementos similares.
Integración de terceros
Un atributo requerido por un script externo.
Principiante
Quedarse en la interfaz: el CSS vendrá para necesidades avanzadas de verdad.
✓ Buenas prácticas
- Usar el CSS como complemento, no por defecto.
- Preferir clases reutilizables.
- Comentar y centralizar el CSS.
✗ Errores frecuentes
- Recodificar en CSS lo que la interfaz ya hace.
- CSS disperso no documentado.
- Copiar el mismo CSS en vez de una clase.
Puntos clave
- CSS personalizado (Pro) = casos avanzados.
- Clases = dirigir y reutilizar.
- Atributos = exigencias de integración.
- Complemento de la interfaz, documentado y raro.
Reto 48h — aplica mañana
Crea una clase reutilizable con un pequeño CSS dirigido (p. ej. un efecto de pasar el ratón), aplícala a varios botones, comenta el código, y comprueba que el resto del diseño pasa por la interfaz. 20 minutos.
- Uso el CSS como complemento dirigido.
- Creo clases reutilizables.
- Documento y centralizo mi CSS.
Preguntas frecuentes
¿Debo aprender CSS para usar Elementor?
No para lo esencial: el 95 % se hace en la interfaz. El CSS personalizado es un complemento para acabados avanzados; algunas bases ayudan, pero no son imprescindibles al principio.
¿Para qué sirven las clases CSS?
Para dirigir elementos y reutilizar un estilo: se aplica la misma clase a varios elementos en vez de copiar el mismo código por todas partes — más limpio y mantenible.
¿Puede el CSS personalizado plantear problemas?
En exceso y disperso, sí: el sitio se vuelve difícil de mantener. Mantenlo raro, agrupado en clases y comentado; haz lo esencial en la interfaz.
Nadia necesita un pequeño efecto que Elementor no ofrece en la interfaz. ¿Cuál es el buen enfoque?