Para elegir los colores que se verán en su Basic (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
• Favicon: Subí el ícono que identifica a tu sitio en la pestaña del navegador
• Slides: Subí hasta 3 imágenes para el banner principal, cada una con su enlace y, si querés, un texto encima
• Pie de página: Indicá quién es el responsable de la inmobiliaria

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

Cada imagen que subís tiene dos botones: Reemplazar, para poner otra, y Quitar, para volver a la que trae tu diseño. Quitar nunca deja el lugar vacío.

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.

Favicon

El favicon es el ícono chiquito que identifica a su sitio en la pestaña del navegador, en los favoritos y en la pantalla de inicio del celular cuando alguien guarda su sitio.

Subí la imagen que tengas: nosotros la convertimos. No hace falta que la prepares ni que sepas qué formato pide cada navegador.

Te recomendamos una imagen cuadrada, que es la proporción con la que los navegadores muestran el ícono. Aceptamos cualquier otra: es una recomendación, no un requisito.

• Formatos aceptados: JPG, PNG, WEBP
• Tamaño máximo: 5 MB
• Qué hacemos con ella: la convertimos a un PNG de 512 × 512 píxeles, que es lo que usan todos los navegadores

Cómo subirlo:

1. Hacé clic en "Subir Favicon" (o "Reemplazar Favicon" si ya tenés uno)
2. Seleccioná el archivo desde tu computadora
3. Esperá que termine de subir

Si tu imagen no es cuadrada no se recorta: entra completa y centrada, y el espacio que sobra queda transparente. No vas a perder ni un pedazo de tu logo.

Por eso recomendamos la proporción cuadrada, y conviene saber por qué. El navegador muestra el favicon dentro de un cuadrado muy chico, así que una imagen alargada queda perfecta pero diminuta:

Si subís una imagen muy alargada te lo avisamos en el momento, para que puedas cambiarla si querés.

Lo único que sí conviene elegir bien es QUÉ imagen subís. El favicon se muestra del tamaño de una letra, así que un logo con el nombre entero se vuelve ilegible por chico. Lo que mejor funciona es el símbolo o la inicial de tu marca.

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. Escribir el texto sobre la foto (opcional):
   • Título sobre la imagen: el texto grande. Cada renglón que escribas aparece en una línea aparte, así que podés armar un título de dos o tres líneas
   • Texto secundario: una frase más chica, debajo del título
   • Son opcionales e independientes: podés poner solo el título, solo el secundario, los dos o ninguno
   • Si los dejás vacíos, la foto se muestra limpia, sin nada encima
4. Guardar:
   • Una vez configurados los 3 slides, hacé clic en "Guardar URLs de Slides"
   • Ese botón guarda las URLs y los textos de los 3 slides juntos

Cómo se ve el texto: aparece centrado sobre la foto, con un velo oscuro suave detrás. El velo está para que se lea bien sobre cualquier imagen, incluso una muy clara.

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".

Pie de página

Los datos que aparecen al final de todas las páginas de tu sitio.

Responsable

Una línea libre para indicar quién es el responsable de la inmobiliaria. Se muestra en el pie, arriba de la dirección, con su ícono.

Qué escribir: lo que quieras que se lea, tal cual. Normalmente el nombre del responsable y su matrícula:

Responsable Juan Pérez — Matrícula 1234

Es un campo libre a propósito: lo que cada inmobiliaria está obligada a informar cambia según la provincia y el colegio, así que en vez de darte casilleros fijos te dejamos escribir la frase completa.

Si lo dejás vacío, la línea no aparece y el pie no queda con un hueco. Podés borrarla cuando quieras: borrás el texto y guardás.

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, el favicon y los slides se suben automáticamente al seleccionar el archivo
• Las URLs y los textos de los slides se guardan juntos 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 el favicon:

• Usá el símbolo o la inicial de tu marca, no el logo con el nombre entero: se muestra del tamaño de una letra
• Cuadrado es la proporción recomendada, aunque aceptamos cualquier otra
• Si tu logo tiene mucho detalle, una versión simplificada se lee mejor a ese tamaño

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, el favicon y los slides se muestran inmediatamente después de subirlos. Las URLs y los textos de los slides se aplican al guardar.

No es necesario republicar ni esperar.

¿Puedo quitar una imagen que subí?

Sí. Cada imagen que subiste tiene un botón Quitar al lado del de reemplazar.

Quitar no deja tu sitio sin esa imagen: lo devuelve a la que trae tu diseño, o a la de Mapaprop si tu diseño no tiene una. Es la forma de deshacer una subida y volver a como estaba antes. Podés subir otra cuando quieras.

¿Puedo reemplazar imágenes existentes?

Sí. Si ya tenés un logo, un favicon o slides subidos, podés hacer clic en "Reemplazar Logo", "Reemplazar Favicon" o "Reemplazar Slide X" para subir una nueva imagen. El archivo anterior será reemplazado automáticamente.

En el caso del favicon, si lo reemplazás y en la pestaña seguís viendo el anterior, es la memoria del navegador y no un error de tu sitio: actualizá la página con Ctrl + F5.

¿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 poner texto sobre las fotos del banner?

Sí. Cada slide tiene dos campos opcionales debajo de la foto: Título sobre la imagen y Texto secundario. Se guardan con el mismo botón que las URLs.

El texto aparece centrado sobre la foto, con un velo oscuro suave detrás para que se lea bien sobre cualquier imagen. Si dejás los dos campos vacíos, la foto se ve limpia, sin nada encima.

Cada renglón del título se muestra en una línea aparte: si escribís tres renglones, el título queda en tres líneas.

¿Puedo personalizar más elementos?

Hoy podés personalizar colores (primario y secundario), tipografía, llamados a la acción, logo, favicon, 3 slides y el responsable del pie de página. 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, el favicon y los slides combinen con la paleta de colores elegida

Mostrar Biografía y Horarios

Dos interruptores que deciden si la información de tu empresa se muestra en el sitio. Los encontrás en Sitio Web > Diseño, más abajo de las imágenes.

Dónde se carga el texto

Los dos datos se escriben en Mi Empresa, no en esta pantalla: Datos de mi inmobiliaria. Acá solo decidís si se publican o no.

Si todavía no cargaste el dato

Podés activar el interruptor igual. Debajo te va a aparecer un aviso recordándote que falta cargarlo, con el enlace para hacerlo.

Qué pasa si los dejo apagados

Nada se rompe. Los dos vienen apagados por defecto, así que un sitio que ya está publicado no cambia de aspecto. Apagarlos después tampoco borra el texto: solo deja de mostrarse.

Mostrar Sucursales

Muestra en el sitio las fichas de contacto de tus sucursales: nombre, dirección y teléfono de cada oficina. Podés mostrarlas todas o elegir cuáles.

El responsable en el pie

El campo Responsable (más arriba, en Pie de página) no tiene interruptor: si lo cargás, se muestra; si lo dejás vacío, la línea no existe. Es identidad legal, no un dato de contacto, y por eso va solo en el pie — no aparece en la página de contacto.