How to Use the Autobidder Design Editor

Complete Guide to the Autobidder Design Editor

Getting Started: The Design Page Overview

When you open the Design Editor in Autobidder, you’ll notice two main sections:

• Components
• Themes

The Themes tab is a great place to start when setting up your quote tool for the first time. It lets you apply a base color scheme and typography quickly.
However, once you start customizing individual elements in the Components tab, you’ll likely spend most of your time there for fine-tuned adjustments.

Step 1: Understanding the Components Panel

The Components section allows you to modify how each interactive part of the quote builder looks — including buttons, input fields, drop-downs, and cards.

Here’s a breakdown of what you can edit and how it impacts your final design.

1. Service Selector

This is the very first thing customers see when interacting with your quote tool. It’s where they choose which service they’re interested in — for example, House Washing, Roof Cleaning, or Gutter Cleaning.

In the editor, you can adjust:

• Background Color (default and active)
• Border Color
• Shadow
• Hover State

Each service card also includes an icon, but those are set when creating or editing your service offerings, not inside the design editor.

Pro Tip:
Use your business brand colors for the service selector so it feels native to your website. For instance, if your logo uses green, make your active state or border match that green tone.

2. Text Input Fields

Next are the Text Inputs — the fields where customers might enter values such as square footage, linear feet, or number of windows.

Here’s what you can adjust:

• Border width and color
• Background color
• Corner radius
• Shadow
• Font size and color

When previewing your design, you can navigate to a service that uses text fields (like House Washing) to see your updates in action. Try experimenting with border thickness and shadows to make your inputs stand out without feeling bulky.

Design Tip:
Keep these fields consistent with your dropdowns and multiple-choice buttons for a cohesive look.

3. Dropdown Menus

Dropdowns let users select from preset options (like building size or roof type).

You can:

• Copy hex codes from your text inputs to match colors
• Adjust height and border thickness
• Add shadows for depth

For best results, match the dropdown’s border and background to your input fields. This ensures uniformity and keeps your calculator looking professional.

4. Multiple-Choice Buttons

These appear when users can pick from a small number of predefined answers, for example, “Single Story” vs. “Two Story.”

You can edit:

• Default Background & Border
• Active Background & Border
• Hover States

Keep all your selection components under one color theme (for example, green active states and white backgrounds). A mismatched color palette across components makes your calculator look messy and inconsistent.

5. Question Cards

Each question in the quote sequence is contained within a Question Card. This defines the layout and background of each step.

Editable properties include:

• Border color, width, and radius
• Background color
• Shadow depth

You can even remove the border completely by setting its color to match the background — a clean and modern look for most websites.

6. Action Buttons

The Action Button is what users click to move to the next step or submit their quote. This is one of the most important design elements since it drives conversions.

You can customize:

• Background color
• Hover color
• Text color
• Button width and height
• Font weight

Keep this button prominent and on-brand. A consistent green or blue button color typically signals trust and action.

Step 2: Customizing Your Typography

Once your components look great, move to the Themes section to set up your font and text colors.
Here, you can define:

• Primary Text Color
• Font Family (e.g., Georgia, Poppins, Roboto, etc.)
• Font Size & Weight
• Heading and Input Font Styles

If you’re using a light background, darker text colors will improve readability. Likewise, if your website uses a dark background, lighter fonts will create a clean, modern contrast.

Experiment with different font families and sizes until your design matches your brand’s voice.

Step 3: Previewing Your Design in Real Time

Autobidder’s Design Editor updates dynamically, meaning you can preview changes instantly within your website environment. This ensures your quote tool always blends seamlessly with your site.

If something feels off, adjust colors, padding, or borders, and then click Save to apply your new look. A quick refresh will show you exactly how it appears to customers.

Step 4: Design Best Practices

To create a polished and consistent visual experience:

1. Stick to two or three main brand colors.
2. Keep typography consistent across headings, inputs, and buttons.
3. Use shadow and border effects subtly — less is often more.
4. Test your design on mobile devices to ensure readability and ease of use.
5. 
   

Final Thoughts

The Autobidder Design Editor gives you complete control over the look and feel of your instant quote tool. Beyond its functionality, this flexibility ensures that your quoting system enhances your website’s professional image and builds customer trust.

Take time to experiment, align your design with your brand colors, and preview how it fits naturally into your site. The better it looks, the more confident customers will feel engaging with your business.

If you have any questions about customization, reach out to Autobidder support — we’re happy to help.