7 | Editor de Bloques de Gutenberg / HOME – Servicios II
En este vídeo se completa el bloque de servicios, uno de los elementos más visuales de la home, y se aprovecha para explicar un detalle técnico con mucho recorrido práctico: el formato SVG. El bloque de servicios de este tema permite editar cuatro elementos por cada servicio: una imagen, un icono, un titular y una pequeña descripción.
Se empieza subiendo las fotografías correspondientes (por ejemplo, la imagen del spa) y comprobando cómo el propio diseño ajusta automáticamente la altura para mantener las cuatro tarjetas de servicio proporcionadas entre sí. La parte más didáctica llega con los iconos: al subir un icono descargado de un banco de iconos gratuito, este aparece en blanco en lugar de en negro, su color original.
La explicación es clave para entender cómo funciona la personalización visual en WordPress: el icono se descarga en formato SVG, un formato vectorizado (a diferencia de un JPG o PNG, que son mapas de píxeles) que permite que el propio sistema de la web aplique automáticamente el color de la paleta definida para el sitio. Esto significa que no hace falta editar manualmente el color de cada icono uno por uno; el tema hereda el color corporativo directamente.
Aun así, se muestra la alternativa manual, por si en algún momento se quiere forzar un color distinto: entrar en la plataforma de descarga, editar el icono y descargarlo ya en el tono elegido. Con este conocimiento se repite el proceso para cada servicio: atención de habitaciones, recepción 24 horas y suite de lujo, combinando siempre una imagen relacionada con un icono que resume la idea (una campana para el servicio 24 horas, por ejemplo).
El resultado final muestra una coherencia visual notable entre los cuatro bloques, aunque se reconoce abiertamente que el servicio de spa destaca por tener una paleta más cálida frente al resto, más neutro.
Esta autocrítica es valiosa desde un punto de vista de identidad de marca: la consistencia cromática entre secciones refuerza el reconocimiento visual y evita que la página transmita una sensación de collage improvisado, algo especialmente importante cuando la propuesta de valor se apoya en pocos elementos pero muy cuidados.
Seguro que te gustaría aprender más
