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
• Tipografía: Elegí la familia tipográfica de todo el sitio entre un catálogo de Google Fonts
• Llamados a la acción: Hasta 3 bloques destacados en la home, cada uno con su propio texto y botón
• 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 tu home completa, del encabezado al pie:

El preview se actualiza instantáneamente cuando modificás colores, cambiás la tipografía, encendés un llamado a la acción o subís imágenes nuevas — todo antes de guardar.

Paletas de colores

Color Primario

El color primario se utiliza para los elementos principales de navegación:

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:

Ejemplo: Si usaste verde primario, podés usar naranja secundario para los botones de contacto.

Tipografía

Elegís una familia tipográfica para todo el sitio desde un catálogo curado de Google Fonts.

Cómo elegirla

1. Abrí el selector "Familia tipográfica"
2. Recorré la lista: cada opción se muestra en su propia tipografía, así ves cómo se lee antes de elegirla
3. Elegí una y mirá la muestra tipográfica que aparece debajo

La muestra está siempre visible y cambia al instante con tu elección:

Aa                                    Playfair Display
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
abcdefghijklmnñopqrstuvwxyz
0123456789 áéíóú àãç ÁÉÍÓÚ
&@#$€ .,;:!¡?¿ ()[]/ +=—«»

Incluye ñ, acentos y signos de apertura a propósito: no todas las familias los soportan bien, y así lo ves acá y no en tu sitio publicado.

La vista previa de arriba también cambia, así ves la tipografía aplicada sobre tu diseño real antes de guardar.

Volver a la tipografía original

El selector tiene una ✕ a la derecha. Al usarla, el campo queda vacío y tu sitio vuelve a la tipografía original de tu plantilla (la que tenía antes de que existiera esta opción).

Guardar

El botón "Guardar" de esta sección se habilita sólo cuando hay un cambio sin guardar. La tipografía se guarda por separado de los colores y de las imágenes.

Llamados a la acción

Son hasta 3 bloques destacados que aparecen en tu home, pensados para que el visitante haga algo: pedir una tasación, vender, escribirte.

Cada bloque es independiente: tiene su propio interruptor y su propio texto. Podés usar sólo uno, dos o los tres.

No están los tres juntos: caen repartidos a lo largo de la home, separando bloques de contenido. Eso decide cuál te conviene usar:

Los campos de cada bloque

Encender y apagar

Cada bloque tiene un interruptor Visible / Oculto. Al encenderlo, aparece al instante en la vista previa de arriba, en su posición real dentro de la home.

Opciones del enlace del botón

Esta es la parte más flexible: el botón puede llevar a una página tuya, abrir WhatsApp, iniciar una llamada o abrir el correo.

Cómo se arma el número de WhatsApp

El número va pegado, sin +, sin espacios, sin guiones y sin el 0 ni el 15: código de país + característica + número.

tel: — importante antes de usarlo

Qué conviene hacer:

• Si tu público llega mayormente desde el celular (lo habitual en inmobiliarias), tel: funciona bien.
• Si querés que funcione siempre, en cualquier dispositivo, usá WhatsApp (https://wa.me/...): abre la app en el celular y WhatsApp Web en la computadora.
• Escribí el número también en el título o la descripción del bloque. Así, aunque el clic no haga nada, el visitante puede leerlo y marcarlo a mano. Es la red de seguridad más simple.
• Otra opción segura: apuntá el botón a /contacto, donde el visitante tiene el formulario y todos tus datos juntos.

Enlaces que el sistema no acepta

Por seguridad de tus visitantes, el enlace debe ser una ruta interna, una dirección http/https, un tel: o un mailto:. Cualquier otra cosa se rechaza al guardar y vas a ver el campo marcado en rojo con el detalle.

Un error frecuente: escribir wa.me/5491122334455 sin https:// adelante. No alcanza — tiene que ser la dirección completa.

Guardar

Los 3 bloques se guardan juntos con el botón "Guardar" de esta sección, que se habilita cuando hay cambios y todos los enlaces son válidos.

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:

1. Hacé clic en "Subir Logo" (o "Reemplazar Logo" si ya existe uno)
2. Seleccioná el archivo desde tu computadora
3. Esperá que termine de subir (verás un spinner de carga)
4. 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:

1. 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
2. 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
3. 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):

1. Hacer clic en el selector de color (círculo de color)
2. Elegir el color desde la paleta visual
3. 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)

3. Ver preview en tiempo real

En la parte superior de la página verás el preview interactivo completo de tu home, del encabezado al pie (ver la sección Preview en tiempo real).

Se actualiza instantáneamente a medida que modificás los colores, así que podés probar combinaciones sobre el diseño real antes de guardar.

4. Guardar cambios

Importante: Cada sección se guarda por separado — colores, tipografía, llamados a la acción e imágenes tienen su propio botón "Guardar". Guardar una no afecta a las otras.

Para guardar colores:

1. Modificá los colores deseados
2. Hacé clic en "Guardar" (dentro de la sección "Configuración de Colores")
3. Confirmá la acción en el diálogo de confirmación
4. 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?

Hoy podés personalizar colores (primario y secundario), tipografía, llamados a la acción, logo y 3 slides. Más opciones (espaciado, footer, secciones adicionales) se van sumando 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 /contacto o /propiedades en 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