To choose the colors that will appear on your Basic (template) you need to go to Website > Design or Website > (hosting service). Inside the website settings card there will be a button that says "edit design".

Overview

This page lets you set up the complete visual identity of your website:

• Color palette: Set primary and secondary colors for menus, buttons and interactive elements
• Typography: Choose the font family for the entire site from a Google Fonts catalog
• Calls to action: Up to 3 featured blocks on the home page, each with its own text and button
• Logo: Upload your brand's logo, which will appear in the site header
• Favicon: Upload the icon that identifies your site in the browser tab
• Slides: Upload up to 3 images for the main banner, each with its link and, if you want, text on top
• Footer: Indicate who is responsible for the agency

Changes are applied automatically and you can see a real-time preview before saving.

Availability: This feature requires a current plan (Website, Pro+, Business). It is not available for plans with Legacy Hosting.

Real-time preview

At the top of the page you'll find an interactive preview that shows your complete home page, from the header to the footer:

The preview updates instantly when you change colors, switch the typography, turn on a call to action or upload new images — all before saving.

Color palettes

Primary Color

The primary color is used for the main navigation elements:

Example: If your brand uses green, set the primary color to green and the text to white to ensure legibility.

Secondary Color

The secondary color is used for interactive elements and calls to action:

Example: If you used green as the primary color, you can use orange as the secondary color for the contact buttons.

Typography

You choose one font family for the entire site from a curated Google Fonts catalog.

How to choose it

1. Open the "Font family" selector
2. Scroll through the list: each option is shown in its own font, so you can see how it reads before choosing it
3. Choose one and look at the type sample that appears below

The sample is always visible and changes instantly with your choice:

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

It deliberately includes ñ, accents and opening marks: not all font families support them well, so you see it here and not on your published site.

The preview above also changes, so you can see the typography applied to your real design before saving.

Return to the original typography

The selector has an ✕ on the right. When you use it, the field is left empty and your site returns to the original typography of your template (the one it had before this option existed).

Save

The "Save" button in this section is only enabled when there is an unsaved change. Typography is saved separately from colors and images.

Calls to action

These are up to 3 featured blocks that appear on your home page, designed to get the visitor to do something: request an appraisal, sell, write to you.

Each block is independent: it has its own switch and its own text. You can use just one, two or all three.

They are not all together: they are spread throughout the home page, separating content blocks. That determines which one is best for you to use:

The fields of each block

Turning on and off

Each block has a Visible / Hidden switch. When you turn it on, it appears instantly in the preview above, in its real position within the home page.

Button link options

This is the most flexible part: the button can lead to one of your pages, open WhatsApp, start a call or open email.

How the WhatsApp number is built

The number goes together, without +, without spaces, without dashes and without the 0 or the 15: country code + area code + number.

tel: — important before using it

What you should do:

• If your audience mostly arrives from mobile (the usual for agencies), tel: works well.
• If you want it to always work, on any device, use WhatsApp (https://wa.me/...): it opens the app on mobile and WhatsApp Web on the computer.
• Write the number also in the title or description of the block. That way, even if the click does nothing, the visitor can read it and dial it manually. It's the simplest safety net.
• Another safe option: point the button to /contacto, where the visitor has the form and all your details together.

Links the system does not accept

For the safety of your visitors, the link must be an internal route, an http/https address, a tel: or a mailto:. Anything else is rejected when saving and you'll see the field marked in red with the detail.

A frequent mistake: writing wa.me/5491122334455 without https:// in front. It's not enough — it has to be the full address.

Save

The 3 blocks are saved together with the "Save" button in this section, which is enabled when there are changes and all the links are valid.

Site images

Each image you upload has two buttons: Replace, to put another one, and Remove, to go back to the one your design comes with. Removing never leaves the spot empty.

Logo

The logo appears in the top header of the website (before the navigation menu).

Characteristics:

• Accepted formats: JPG, PNG, WEBP
• Maximum size: 5MB
• Recommended dimensions: Maximum height of 64px (it scales automatically)
• Transparent background: Recommended for PNG logos

How to upload the logo:

1. Click "Upload Logo" (or "Replace Logo" if one already exists)
2. Select the file from your computer
3. Wait for the upload to finish (you'll see a loading spinner)
4. The logo will appear immediately in the preview

Zoom preview: Click on the logo image to see it at full size in a modal.

Favicon

The favicon is the tiny icon that identifies your site in the browser tab, in bookmarks and on the phone's home screen when someone saves your site.

Upload whatever image you have: we convert it. You don't need to prepare it or know what format each browser requires.

We recommend a square image, which is the proportion browsers use to display the icon. We accept any other: it's a recommendation, not a requirement.

• Accepted formats: JPG, PNG, WEBP
• Maximum size: 5 MB
• What we do with it: we convert it to a 512 × 512 pixel PNG, which is what all browsers use

How to upload it:

1. Click "Upload Favicon" (or "Replace Favicon" if you already have one)
2. Select the file from your computer
3. Wait for the upload to finish

If your image is not square it is not cropped: it fits in completely and centered, and the leftover space is transparent. You won't lose a single piece of your logo.

That's why we recommend the square proportion, and it's worth knowing why. The browser displays the favicon inside a very small square, so an elongated image looks perfect but tiny:

If you upload a very elongated image we warn you at the moment, so you can change it if you want.

The only thing you should choose well is WHICH image you upload. The favicon is shown at the size of a letter, so a logo with the entire name becomes illegible because it's small. What works best is the symbol or the initial of your brand.

Banner slides

The slider shows 3 images in manual rotation at the top of the site (below the menu).

Characteristics of each slide:

• Accepted formats: JPG, PNG, WEBP
• Maximum size: 5MB each
• Recommended dimensions: Width of at least 1920px for large screens
• Proportion: The images are cropped to cover the space (they keep their original proportion)

How to configure the slides:

For each of the 3 slides:

1. Upload image:
   • Click "Upload Slide X" (or "Replace Slide X")
   • Select the image from your computer
   • Wait for the successful upload confirmation
2. Configure link URL:
   • In the "Link URL" field, write the internal route (e.g.: /contacto, /propiedades)
   • You'll see the full URL generated automatically below the field
   • You can click the green link to test it in a new tab
3. Write the text over the photo (optional):
   • Title over the image: the large text. Each line you write appears on a separate line, so you can build a title of two or three lines
   • Secondary text: a smaller phrase, below the title
   • They are optional and independent: you can put just the title, just the secondary text, both or neither
   • If you leave them empty, the photo is shown clean, with nothing on top
4. Save:
   • Once the 3 slides are configured, click "Save Slide URLs"
   • That button saves the URLs and the texts of the 3 slides together

How the text looks: it appears centered over the photo, with a soft dark veil behind it. The veil is there so it reads well over any image, even a very light one.

Zoom preview: Click on any slide image to see it at full size.

Slider navigation: The preview shows side arrows to navigate between the 3 slides manually (no automatic rotation).

Tip: If a slide has no image, the preview will show a gray placeholder with the text "Slide 1/2/3".

Footer

The details that appear at the end of all the pages of your site.

Responsible party

A free line to indicate who is responsible for the agency. It is shown in the footer, above the address, with its icon.

What to write: whatever you want to be read, exactly as is. Normally the name of the responsible party and their license:

Responsable Juan Pérez — Matrícula 1234

It's a free field on purpose: what each agency is required to report changes depending on the province and the professional board, so instead of giving you fixed boxes we let you write the full phrase.

If you leave it empty, the line does not appear and the footer is not left with a gap. You can delete it whenever you want: you erase the text and save.

How to configure the colors

1. Select colors

For each palette (Primary and Secondary):

1. Click on the color selector (color circle)
2. Choose the color from the visual palette
3. Or write the hexadecimal code directly (e.g.: #FF5733)

The hexadecimal code updates automatically when you select a color from the palette.

2. Adjust contrast

It's essential that the text color has good contrast with the background color:

• Dark backgrounds → Use light text (white or very light gray)
• Light backgrounds → Use dark text (black or very dark gray)

3. See the real-time preview

At the top of the page you'll see the complete interactive preview of your home page, from the header to the footer (see the Real-time preview section).

It updates instantly as you change the colors, so you can try combinations on the real design before saving.

4. Save changes

Important: Each section is saved separately — colors, typography, calls to action and images each have their own "Save" button. Saving one does not affect the others.

To save colors:

1. Change the desired colors
2. Click "Save" (inside the "Color Settings" section)
3. Confirm the action in the confirmation dialog
4. The changes are applied immediately to the website

To save images:

• The logo, favicon and slides upload automatically when you select the file
• The URLs and texts of the slides are saved together with the "Save Slide URLs" button

Note: The colors "Save" button is only enabled when there are unsaved changes.

Design recommendations

Accessibility

To ensure your site is accessible to all users:

• Minimum contrast: Use a contrast ratio of at least 4.5:1 between text and background
• Don't use color alone: Important elements should be identifiable without relying solely on color

Brand identity

• Consistency: Use the same colors your brand uses in other materials
• Simplicity: Don't use more than 2-3 different colors to maintain visual coherence
• Testing: See the complete site after saving to verify that all elements look good

Useful tools

You can use online tools to:

• Colors: Check color contrast (e.g.: WebAIM Contrast Checker), generate complementary palettes
• Images: Compress images (TinyPNG, ImageOptim), remove backgrounds (Remove.bg), resize (Photopea)

Professional images

For the logo:

• Use your official logo in high quality
• A transparent background (PNG) is preferable
• If your logo is very detailed, consider using a simplified version

For the favicon:

• Use the symbol or the initial of your brand, not the logo with the entire name: it's shown at the size of a letter
• Square is the recommended proportion, although we accept any other
• If your logo has a lot of detail, a simplified version reads better at that size

For the slides:

• Your own images: Use photos of your own properties to show your portfolio
• Image banks: If you need generic images, use banks like Unsplash or Pexels (check licenses)
• Professional quality: Avoid pixelated or low-quality images
• Clear message: Each slide should communicate something specific (e.g.: "Contact us", "See properties", "Free appraisals")

Common use cases

Brand with a single color

If your brand uses a single color (e.g.: blue):

• Primary: Dark blue + white text
• Secondary: Lighter blue + white text

Brand with two colors

If your brand uses two colors (e.g.: green and orange):

• Primary: Green + white text
• Secondary: Orange + white text

Minimalist brand

If you prefer a minimalist style:

• Primary: Black + white text
• Secondary: Dark gray + white text

Frequently asked questions

Are the changes applied immediately?

Colors: Yes, once you save the colors, they are applied immediately.

Images: The logo, favicon and slides are shown immediately after uploading them. The URLs and texts of the slides are applied when you save.

There is no need to republish or wait.

Can I remove an image I uploaded?

Yes. Each image you uploaded has a Remove button next to the replace one.

Removing does not leave your site without that image: it returns it to the one your design comes with, or to the Mapaprop one if your design doesn't have one. It's the way to undo an upload and go back to how it was before. You can upload another whenever you want.

Can I replace existing images?

Yes. If you already have a logo, a favicon or slides uploaded, you can click "Replace Logo", "Replace Favicon" or "Replace Slide X" to upload a new image. The previous file will be replaced automatically.

In the case of the favicon, if you replace it and still see the previous one in the tab, it's the browser's memory and not an error on your site: refresh the page with Ctrl + F5.

What happens if I upload a very large image?

The system will reject files larger than 5MB. If your image exceeds this size, you'll need to reduce it using image compression tools before uploading it.

Can I go back to the previous colors?

There is no automatic "undo" function. If you want to go back to a previous configuration, you'll need to note the color codes before making changes or remember the previous values.

Are the slide images cropped?

Yes. The images are adjusted to cover the entire slider space while keeping their original proportion. This means the top/bottom or left/right edges may be cropped depending on the image's proportion.

Recommendation: Use horizontal images with the important elements centered.

What happens if I use colors with poor contrast?

The system will not prevent you from saving colors with low contrast, but your site could be hard to read. Always check the preview before saving.

Do I have to upload exactly 3 slides?

No. You can upload 1, 2 or 3 slides. If you don't upload any, the slider will show gray placeholders. The slider always has space for 3 images, but only the ones you upload will be shown on the real site.

Can I put text over the banner photos?

Yes. Each slide has two optional fields below the photo: Title over the image and Secondary text. They are saved with the same button as the URLs.

The text appears centered over the photo, with a soft dark veil behind it so it reads well over any image. If you leave both fields empty, the photo looks clean, with nothing on top.

Each line of the title is shown on a separate line: if you write three lines, the title ends up in three lines.

Can I customize more elements?

Today you can customize colors (primary and secondary), typography, calls to action, logo, favicon, 3 slides and the footer responsible party. More options (spacing, footer, additional sections) are added in future updates.

Why don't I see this option?

If you don't see the design page or a "Restricted Access" message appears:

• Check that your plan includes design customization (Website, Pro+, Business)
• Plans with Legacy Hosting don't have access to this feature
• Consider upgrading to a current plan

Tips

For colors:

• Save the codes: Note the hexadecimal codes of your brand colors for future use
• Web-safe colors: Use colors that look good on all screens
• Test before confirming: Use the preview to experiment with different combinations before saving

For images:

• Logo with transparent background: Use PNG with transparency so it adapts better to the white header
• Optimize the weight: Compress the images before uploading them to improve the site's loading speed
• Logo dimensions: A logo 200-400px wide is enough (it will scale automatically)
• Horizontal slides: Use images in horizontal (landscape) format with a 16:9 or similar proportion
• Centered elements: In the slides, keep the important elements centered to avoid cropping them
• Descriptive URLs: Use clear URLs like /contacto or /propiedades instead of complex routes

General:

• Check on devices: After saving, verify how the site looks on different devices
• Visual consistency: Make sure the colors of the logo, favicon and slides match the chosen color palette

Show Biography and Hours

Two switches that decide whether your company's information is shown on the site. You'll find them in Website > Design, further down from the images.

Where the text is loaded

Both pieces of data are written in My Company, not on this screen: My agency details. Here you only decide whether they are published or not.

If you haven't loaded the data yet

You can activate the switch anyway. Below, a notice will appear reminding you that it's still missing, with the link to do it.

What happens if I leave them off

Nothing breaks. Both come off by default, so a site that is already published does not change its appearance. Turning them off later doesn't erase the text either: it just stops being shown.

Show Branches

Shows the contact cards of your branches on the site: name, address and phone of each office. You can show them all or choose which ones.

The responsible party in the footer

The Responsible party field (further up, in Footer) has no switch: if you load it, it's shown; if you leave it empty, the line doesn't exist. It's legal identity, not a contact detail, and that's why it goes only in the footer — it doesn't appear on the contact page.