Para elegir los colores que se verán en su Sitio Web Express Básico (plantilla) debemos dirigirnos a Sitio Web > Diseño o Sitio Web > (servicio de hosting) dentro de la tarjeta de configuración del sitio web habrá un botón que dice “editar diseño”
Vista general
Esta página te permite configurar la identidad visual completa de tu sitio web:
- Paleta de colores: Configurá colores primarios y secundarios para menús, botones y elementos interactivos
- Logo: Subí el logo de tu marca que aparecerá en el header del sitio
- Slides: Subí hasta 3 imágenes para el banner principal con enlaces personalizados
Los cambios se aplican automáticamente y podés ver un preview en tiempo real antes de guardar.
Disponibilidad: Esta función requiere un plan actual (Website, Pro+, Business). No está disponible para planes con Legacy Hosting.
Preview en tiempo real
En la parte superior de la página encontrás un preview interactivo que muestra cómo se verá tu sitio web:
- Header: Logo y enlaces a redes sociales con bordes del color primario
- Menú de navegación: Barra con color primario y botón con color secundario
- Slider de imágenes: Banner con las 3 imágenes subidas y navegación manual (flechas)
El preview se actualiza automáticamente cuando modificás colores o subís imágenes nuevas.
Paletas de colores
Color Primario
El color primario se utiliza para los elementos principales de navegación:
| Elemento | Uso |
|---|---|
| Color de fondo | Barra de navegación superior, menú principal |
| Color de texto | Texto y enlaces dentro de los elementos con fondo primario |
Ejemplo: Si tu marca usa verde, configurá el color primario como verde y el texto como blanco para garantizar legibilidad.
Color Secundario
El color secundario se utiliza para elementos interactivos y llamadas a la acción:
| Elemento | Uso |
|---|---|
| Color de fondo | Botones, enlaces destacados, elementos de acción |
| Color de texto | Texto dentro de botones y elementos con fondo secundario |
Ejemplo: Si usaste verde primario, podés usar naranja secundario para los botones de contacto.
Imágenes del sitio
Logo
El logo aparece en el header superior del sitio web (antes del menú de navegación).
Características:
- Formatos aceptados: JPG, PNG, WEBP
- Tamaño máximo: 5MB
- Dimensiones recomendadas: Alto máximo de 64px (se escala automáticamente)
- Fondo transparente: Recomendado para logos en PNG
Cómo subir el logo:
- Hacé clic en "Subir Logo" (o "Reemplazar Logo" si ya existe uno)
- Seleccioná el archivo desde tu computadora
- Esperá que termine de subir (verás un spinner de carga)
- El logo aparecerá inmediatamente en el preview
Vista previa con zoom: Hacé clic sobre la imagen del logo para verla en tamaño completo en un modal.
Slides del banner
El slider muestra 3 imágenes en rotación manual en la parte superior del sitio (debajo del menú).
Características de cada slide:
- Formatos aceptados: JPG, PNG, WEBP
- Tamaño máximo: 5MB cada uno
- Dimensiones recomendadas: Ancho de al menos 1920px para pantallas grandes
- Proporción: Las imágenes se recortan para cubrir el espacio (mantienen proporción original)
Cómo configurar los slides:
Para cada uno de los 3 slides:
- Subir imagen:
- Hacé clic en "Subir Slide X" (o "Reemplazar Slide X")
- Seleccioná la imagen desde tu computadora
- Esperá la confirmación de subida exitosa
- Configurar URL de enlace:
- En el campo "URL del Link", escribí la ruta interna (ej:
/contacto,/propiedades) - Verás la URL completa generada automáticamente debajo del campo
- Podés hacer clic en el enlace verde para probarlo en una pestaña nueva
- En el campo "URL del Link", escribí la ruta interna (ej:
- Guardar URLs:
- Una vez configuradas las URLs de los 3 slides, hacé clic en "Guardar URLs de Slides"
- Las URLs se guardan todas juntas con un solo botón
Vista previa con zoom: Hacé clic sobre cualquier imagen de slide para verla en tamaño completo.
Navegación del slider: El preview muestra flechas laterales para navegar entre los 3 slides manualmente (sin rotación automática).
Tip: Si un slide no tiene imagen, el preview mostrará un placeholder gris con el texto "Slide 1/2/3".
Cómo configurar los colores
1. Seleccionar colores
Para cada paleta (Primaria y Secundaria):
- Hacer clic en el selector de color (círculo de color)
- Elegir el color desde la paleta visual
- O escribir el código hexadecimal directamente (ej:
#FF5733)
El código hexadecimal se actualiza automáticamente cuando seleccionás un color desde la paleta.
2. Ajustar contraste
Es fundamental que el color de texto tenga buen contraste con el color de fondo:
- Fondos oscuros → Usar texto claro (blanco o gris muy claro)
- Fondos claros → Usar texto oscuro (negro o gris muy oscuro)
Tip: El sistema no valida el contraste automáticamente, por lo que es importante revisar el preview para asegurar legibilidad.
3. Ver preview en tiempo real
En la parte superior de la página verás un preview interactivo completo que incluye:
- Header con tu logo y colores de redes sociales (color primario)
- Menú de navegación con color primario y botón con color secundario
- Slider de imágenes con las 3 imágenes subidas
El preview se actualiza instantáneamente a medida que modificás los colores.
4. Guardar cambios
Importante: Los colores y las imágenes se guardan por separado.
Para guardar colores:
- Modificá los colores deseados
- Hacé clic en "Guardar" (dentro de la sección "Configuración de Colores")
- Confirmá la acción en el diálogo de confirmación
- Los cambios se aplican inmediatamente al sitio web
Para guardar imágenes:
- El logo y los slides se suben automáticamente al seleccionar el archivo
- Las URLs de los slides se guardan con el botón "Guardar URLs de Slides"
Nota: El botón "Guardar" de colores solo está habilitado cuando hay cambios sin guardar.
Recomendaciones de diseño
Accesibilidad
Para garantizar que tu sitio sea accesible para todos los usuarios:
- Contraste mínimo: Usar una relación de contraste de al menos 4.5:1 entre texto y fondo
- No usar solo color: Los elementos importantes deben ser identificables sin depender únicamente del color
Identidad de marca
- Consistencia: Usar los mismos colores que tu marca utiliza en otros materiales
- Simplicidad: No usar más de 2-3 colores diferentes para mantener coherencia visual
- Pruebas: Ver el sitio completo después de guardar para verificar que todos los elementos se vean bien
Herramientas útiles
Podés usar herramientas online para:
- Colores: Verificar contraste de colores (ej: WebAIM Contrast Checker), generar paletas complementarias
- Imágenes: Comprimir imágenes (TinyPNG, ImageOptim), remover fondos (Remove.bg), redimensionar (Photopea)
Imágenes profesionales
Para el logo:
- Usá tu logo oficial en alta calidad
- Fondo transparente (PNG) es preferible
- Si tu logo es muy detallado, considerá usar una versión simplificada
Para los slides:
- Imágenes propias: Usá fotos de tus propias propiedades para mostrar tu portafolio
- Bancos de imágenes: Si necesitás imágenes genéricas, usá bancos como Unsplash o Pexels (verificá licencias)
- Calidad profesional: Evitá imágenes pixeladas o de baja calidad
- Mensaje claro: Cada slide debe comunicar algo específico (ej: "Contactanos", "Ver propiedades", "Tasaciones gratis")
Casos de uso comunes
Marca con un solo color
Si tu marca usa un solo color (ej: azul):
- Primario: Azul oscuro + texto blanco
- Secundario: Azul más claro + texto blanco
Marca con dos colores
Si tu marca usa dos colores (ej: verde y naranja):
- Primario: Verde + texto blanco
- Secundario: Naranja + texto blanco
Marca minimalista
Si preferís un estilo minimalista:
- Primario: Negro + texto blanco
- Secundario: Gris oscuro + texto blanco
Preguntas frecuentes
¿Los cambios se aplican inmediatamente?
Colores: Sí, una vez que guardás los colores, se aplican de forma inmediata.
Imágenes: El logo y los slides se muestran inmediatamente después de subirlos. Las URLs de los slides se aplican al guardar.
No es necesario republicar ni esperar.
¿Puedo reemplazar imágenes existentes?
Sí. Si ya tenés un logo o slides subidos, podés hacer clic en "Reemplazar Logo" o "Reemplazar Slide X" para subir una nueva imagen. El archivo anterior será reemplazado automáticamente.
¿Qué pasa si subo una imagen muy grande?
El sistema rechazará archivos mayores a 5MB. Si tu imagen supera este tamaño, deberás reducirla usando herramientas de compresión de imágenes antes de subirla.
¿Puedo volver a los colores anteriores?
No hay función de "deshacer" automática. Si querés volver a una configuración anterior, deberás anotar los códigos de color antes de hacer cambios o recordar los valores anteriores.
¿Las imágenes de los slides se recortan?
Sí. Las imágenes se ajustan para cubrir todo el espacio del slider manteniendo su proporción original. Esto significa que pueden recortarse los bordes superior/inferior o izquierdo/derecho dependiendo de la proporción de la imagen.
Recomendación: Usá imágenes horizontales con los elementos importantes centrados.
¿Qué pasa si uso colores con mal contraste?
El sistema no te impedirá guardar colores con bajo contraste, pero tu sitio podría ser difícil de leer. Siempre revisá el preview antes de guardar.
¿Tengo que subir exactamente 3 slides?
No. Podés subir 1, 2 o 3 slides. Si no subís ninguno, el slider mostrará placeholders grises. El slider siempre tiene espacio para 3 imágenes, pero solo las que subas se mostrarán en el sitio real.
¿Puedo personalizar más elementos?
Actualmente podés personalizar colores (primario y secundario), logo y 3 slides. Más opciones de personalización (tipografía, espaciado, footer, etc.) estarán disponibles en futuras actualizaciones.
¿Por qué no veo esta opción?
Si no ves la página de diseño o aparece un mensaje de "Acceso Restringido":
- Verificá que tu plan incluya personalización de diseño (Website, Pro+, Business)
- Los planes con Legacy Hosting no tienen acceso a esta función
- Considerá hacer upgrade a un plan actual
Tips
Para colores:
- Guardá los códigos: Anotá los códigos hexadecimales de tus colores de marca para uso futuro
- Colores web-safe: Usá colores que se vean bien en todas las pantallas
- Probá antes de confirmar: Usá el preview para experimentar con diferentes combinaciones antes de guardar
Para imágenes:
- Logo con fondo transparente: Usá PNG con transparencia para que se adapte mejor al header blanco
- Optimizá el peso: Comprimí las imágenes antes de subirlas para mejorar la velocidad de carga del sitio
- Dimensiones del logo: Un logo de 200-400px de ancho es suficiente (se escalará automáticamente)
- Slides horizontales: Usá imágenes en formato horizontal (landscape) con proporción 16:9 o similar
- Elementos centrados: En los slides, mantené los elementos importantes centrados para evitar que se recorten
- URLs descriptivas: Usá URLs claras como
/contactoo/propiedadesen lugar de rutas complejas
General:
- Revisá en dispositivos: Después de guardar, verificá cómo se ve el sitio en diferentes dispositivos
- Consistencia visual: Asegurate de que los colores del logo y los slides combinen con la paleta de colores elegida
Esta funcion está unicamente disponible para Sitio Web Express