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

Overview

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

• Color palette: Configure primary and secondary colors for menus, buttons and interactive elements
• Logo: Upload your brand's logo, which will appear in the site's header
• Slides: Upload up to 3 images for the main banner with custom links

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 showing how your website will look:

• Header: Logo and social media links with primary color borders
• Navigation menu: Bar with primary color and button with secondary color
• Image slider: Banner with the 3 uploaded images and manual navigation (arrows)

The preview updates automatically when you modify colors or upload new images.

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

Secondary Color

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

Example: If you used primary green, you could use secondary orange for contact buttons.

Site images

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 (scaled 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 it to finish uploading (you'll see a loading spinner)
4. The logo will appear immediately in the preview

Preview with zoom: Click on the logo image to see it at full size in a modal.

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: 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, type the internal path (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. Save URLs:
   • Once the URLs for the 3 slides are configured, click "Save Slide URLs"
   • The URLs are saved all together with a single button

Preview with zoom: Click on any slide image to see it at full size.

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

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

How to configure the colors

1. Select colors

For each palette (Primary and Secondary):

1. Click the color picker (color circle)
2. Choose the color from the visual palette
3. Or type 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)

Tip: The system does not validate contrast automatically, so it's important to check the preview to ensure readability.

3. See the real-time preview

At the top of the page you'll see a complete interactive preview that includes:

• Header with your logo and social media colors (primary color)
• Navigation menu with primary color and button with secondary color
• Image slider with the 3 uploaded images

The preview updates instantly as you modify the colors.

4. Save changes

Important: Colors and images are saved separately.

To save colors:

1. Modify 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 and slides upload automatically when you select the file
• The slide URLs are saved with the "Save Slide URLs" button

Note: The "Save" button for colors 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 rely on color alone: Important elements must be identifiable without depending 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: View 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 high-quality logo
• Transparent background (PNG) is preferable
• If your logo is very detailed, consider using a simplified version

For the slides:

• Your own images: Use photos of your own properties to showcase your portfolio
• Image banks: If you need generic images, use banks such as 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", "View 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 changes applied immediately?

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

Images: The logo and slides are shown immediately after uploading them. The slide URLs are applied when saved.

There's no need to republish or wait.

Can I replace existing images?

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

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 previous colors?

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

Are the slide images cropped?

Yes. 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 room for 3 images, but only the ones you upload will be shown on the live site.

Can I customize more elements?

Currently you can customize colors (primary and secondary), logo and 3 slides. More customization options (typography, spacing, footer, etc.) will be available 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 do not have access to this feature
• Consider upgrading to a current plan

Tips

For colors:

• Save the codes: Write down 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 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 landscape-format images with a 16:9 or similar proportion
• Centered elements: In the slides, keep important elements centered to avoid them being cropped
• Descriptive URLs: Use clear URLs such as /contacto or /propiedades instead of complex paths

General:

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