Website Builder

The Website Builder is a SolidifyAI skill ($29/month) that lets you create a professional contractor website — no design experience needed. Describe your business and your AI Assistant builds the whole site; then you can fine-tune every detail in a visual editor, or just keep asking the AI. Every change previews in staging before you push it live.

Enable it from the Billing page under Skills.

Two ways to work

You never have to choose — the two work together on the same site:

• Chat with the AI — “Add a testimonials section,” “make the hero background dark green,” “build me a Financing page.” Great for big moves and for anything you’d rather describe than click.
• The visual builder — tap any element on the page and edit it directly: colors, spacing, fonts, layout, and more. Great for precise, hands-on tweaks.

Getting started

Go to Website Builder in the sidebar. If you don’t have a site yet, click Create Site and give it a name. The AI opens automatically — describe your business and it generates a complete, themed website: a design system (colors, fonts, buttons, cards) first, then pages built on top of it, plus a matching header and footer.

The visual builder

Open Website Builder → Builder to edit your site on a live canvas — what you see is exactly what visitors get.

• Select anything — tap a section, a heading, a button, an image. The Properties panel opens with everything you can change for it.
• Edit text in place — tap into any text and type.
• Add — the + Add menu drops in a new section, or individual elements (text, image, button, box, icon) to build custom layouts.
• Undo — step back any change. Guides toggle alignment lines while you position things.
• Ask AI about what’s selected — every Properties panel has an “Ask SolidifyAI about this” box, so you can hand off the selected element to the AI mid-edit.

Phone, tablet & desktop

The device switcher at the top of the canvas lets you preview and edit your site the way visitors see it on each screen. Most styling flows down from desktop automatically, but you can override any property just for phone or tablet — tighten spacing, shrink a heading, stack columns — without touching the desktop version. When you’re editing a phone or tablet override, the panel says so, and any property you’ve changed for that device is marked, so you always know what’s custom. On phones the properties panel has a grip at the top you can drag to resize it and see more of the canvas.

Design & theme

Your whole site shares one design system, so it always looks consistent. Set it by talking to the AI — “Use a navy and gold color scheme,” “set my logo,” “make the buttons pill-shaped” — or open the Theme panel in the builder to adjust it visually.

The theme includes:

• Brand palette — your named colors (primary, accent, and any others). Pick these once and use them everywhere with one tap; change a palette color and every element using it updates at once.
• Typography — heading and body fonts, plus reusable text styles (e.g. “Section heading,” “Eyebrow”) you apply to any text and update in one place.
• Component styles — reusable looks for buttons and cards, so every button matches without restyling each one.
• Layout tokens — site width, section spacing, corner radius, and shadow depth.
• Logo & favicon — upload your logo (and a light version for dark backgrounds), set the header logo size, and a browser-tab icon (one is auto-generated from your colors if you don’t upload one).

Properties — style any element

Select an element and the Properties panel groups everything you can change. You can do all of it by asking the AI too, but the panel is there when you want to nudge something exactly:

• Layout — arrange a box’s contents in rows or columns, set gaps, alignment, and how many columns a grid uses.
• Spacing & size — padding and margins (all sides or one), width, height, max width.
• Typography — font, size, weight, alignment, color, letter spacing, line height.
• Background & effects — solid colors from your palette, gradients, cover photos, subtle grid/dot patterns and radial glows, plus borders, rounded corners, and shadows.
• Position & layering — for advanced touches: overlap elements, pin something, rotate or scale, and control what sits in front.
• Link & interaction — turn a box or button into a link, or a trigger that opens a menu or popup (see Overlays).

Colors everywhere pull from your brand palette, so your site stays on-brand as you edit.

Sections

Every page is a stack of sections, and sections are fully flexible — the AI can build any layout, and you can rearrange and restyle them freely. Add a ready-made section from the + Add menu, or just describe one:

• Reorder — move a section up or down (in the builder, or “move the testimonials above the pricing”).
• Show / hide — hide a section without deleting it, or hide it only on phones.
• Backgrounds & effects — give a section a color, photo, gradient, pattern, or glow.
• Connectors — draw labeled lines between elements to build simple diagrams (great for “how it works” steps).

Layers

The Layers tab in the builder shows your whole page as a tree — every section and the elements inside it. Use it to find and select things quickly on a busy page, reorder them, toggle a layer’s visibility, and move elements around.

Header, footer & menus

Your header and footer show on every page and are fully editable — logo, menu, buttons, columns, and contact info. The menu at the top is built from your pages, and you shape it just by asking:

• Add, remove & reorder links — “Put Pricing before About,” “take Careers out of the menu.”
• Dropdowns — “Group Roofing, Gutters, and Siding under a Services menu.”
• External links — point a menu item anywhere, like a booking page or YouTube.
• Header button & sign-in link — set the “Contact Us” button’s label and destination, and an optional sign-in link.
• Mobile menu — on phones the menu collapses into a tidy slide-in drawer automatically.

Overlays — menus, drawers & popups

Beyond the standard menu, you can add overlays: hover dropdowns, slide-in drawers, and pop-up modals. Create one, fill it with any content, then point a trigger at it — a nav item, an icon, or a button — so tapping it opens the overlay. Handy for mega-menus, a “Book now” popup, or a mobile menu.

Managing pages

Create, rename, and delete pages in the builder’s page menu, or just tell the AI — it also handles the navigation link for you:

• Add a page — “Add a Financing page explaining our payment plans.”
• Page settings — rename, change the URL slug, and set the page’s SEO title and description.
• Delete a page — the menu link is cleaned up automatically. Your home page can’t be deleted — set a different page as home first.

Collections (Projects, Testimonials & more)

A collection is a reusable content type — Projects, Testimonials, Team, Case Studies — with its own fields. Add items once and show them anywhere, without hand-building cards:

• Create a collection — “Create a Projects collection with a cover photo, location, and description.” You can add, rename, or remove fields later.
• Add items — each item gets its own page automatically (e.g. yourdomain.com/projects/oak-street-reroof).
• Show them — feature a few on any page (“show 3 recent projects on the home page”) as a live grid that updates itself, or a full listing page.
• Design the cards — the item card and detail page use editable templates, so all items share one look.

Forms & leads

Add a contact form or a compact lead-capture form to any page. Use the standard Name / Email / Phone / Message layout, or custom fields — text, email, phone, dropdown, checkbox, number, and date (e.g. a “Project type” dropdown, a “Preferred date,” or a “Send me a copy” checkbox). You can also set a custom thank-you message shown after someone submits.

When someone submits, they’re added to your Contacts as a lead, a follow-up task is created, and you get an email. By default the email goes to your account address; set a different notification email in Branding if leads should go elsewhere.

To keep the junk out, every form has built-in spam filtering: bot submissions are always blocked, and suspected marketing solicitations are routed to a Review tab in Contacts (nothing lost) instead of your main list. Toggle the smart filter per site under Website Builder → Spam Filter.

Editing with the AI

Anything above, you can also just say. A few examples:

• “Change my headline to ‘Trusted Roofing in San Diego’”
• “Add a pricing table with three plans and highlight the middle one”
• “Add an FAQ answering the 5 questions customers ask most”
• “Give the services section a dark background”
• “Make the ‘Why homeowners choose us’ section show a photo next to the bullet points”
• “Add a Free Estimate form right in my homepage hero”
• “Add star ratings and dates to my testimonials so they look like Google reviews”
• “Write a service area page covering San Diego, Chula Vista, and El Cajon”
• “Publish my changes to staging” — or “take it live” when you’re ready

Match a look you like

Have a website whose style you love? Share a screenshot with your AI Assistant and say “make my site look like this.” It reads the image, builds a matching theme (colors and fonts), recreates the layout and structure, and fills it in with your business’s content.

It intentionally doesn’t copy the other site’s text, logo, or photos, so you get a polished look inspired by theirs while everything on the page stays yours. (It’ll check before changing colors or fonts you’ve already picked.)

Animations

As visitors scroll, each section can gently animate into view — a subtle slide-and-fade that makes the site feel polished. It’s on by default, and you shape it by asking. The demos below loop so you can see each effect:

You control on/off, speed, stagger (the cascade between sections), distance (how far things slide), and style (smooth, springy, linear, or snappy). For a premium touch, ask for a scroll effect on a standout element — parallax, fade, or scale — that transforms continuously as you scroll. Use it sparingly, one or two per page.

Media

Your Media library holds your logos, photos, and job pictures for use anywhere on the site. Upload from your computer or drop an image into the AI chat and say where it should go — uploads are automatically optimized (resized and converted to WebP) for fast loading. Job photos from your projects are available too, so you can build a portfolio from real work.

SEO & performance

Each page has its own SEO title and meta description — the AI can write these, or set them in page settings. Ask the AI to audit your SEO anytime and it checks every page for missing or over-long titles and descriptions, heading structure, images without alt text, and thin content — then offers to fix what it finds. It can run a performance audit too (heavy images, too many effects, and so on).

Your live site automatically includes Local Business structured data (schema.org markup) telling Google your business name, type, address, phone, service areas, hours, and social links — which helps you appear in the local map results. Set your contact details and the right business type so search engines know your trade:

• “Set my business type to Roofing Contractor”
• “We serve Denver, Boulder, and Aurora” — “our phone is 303-555-0100”

Supported types include General Contractor, Plumber, Electrician, HVAC, Roofing Contractor, House Painter, Locksmith, Landscaping, Moving Company, and more.

Google Analytics — see how many people visit, where they come from, and which pages they read. Tell the AI your Tracking ID: “Add my Google Analytics ID: G-XXXXXXXXXX.” Analytics only fires on the live site, so your own staging visits never pollute your reports.

Blog

Your website includes a full blog — a proven way to rank in local search and answer the questions customers are already Googling. Manage it under Website Builder → Blog. Posts stay a draft until you publish.

Write a post with AI

Click Write with AI, give it a topic, pick a tone and length, and it writes a complete, SEO-friendly draft grounded in your real services and service areas — then saves it for you to review. It won’t invent licenses, prices, or guarantees, and it adds internal links to your own service and city pages.

• “How to tell if your roof needs replacing” — Professional tone, Medium length
• “What to do after storm damage in Kansas City”

Add photos with a storyboard

In the Write-with-AI box you can attach images and direct how each one is used, in order — mark one as the cover, and add a short note for each other photo (“finished ridge cap, use near the results”). The AI places them in that order and writes descriptive alt text. Add from your Media library or upload from your computer.

Write or edit it yourself

Prefer to write your own? Click New Post for a simple visual editor — bold, headings, bullet and numbered lists, links, and images, no code needed. Set the cover image, an excerpt, a target keyword, the SEO meta description, and the author. Every AI draft opens in this same editor. You can also change the look of your blog post and listing layouts — they’re editable templates like the rest of your site.

Publishing & SEO

• Draft posts are only visible to you.
• Publish makes a post live; edit a published post any time and Save changes — updates go live automatically.
• Unpublish pulls a post back to draft.

Every published post gets search-engine structured data, a visible author and date, its own SEO title and meta description, and a clean URL at yourdomain.com/blog/your-post.

Staging vs. live

Every change goes to your staging site first — a private preview that looks exactly like the live site but is never indexed by search engines, so Google never sees unfinished work. When you’re happy, push to your live site on your own domain (e.g. yourcompany.com), where it’s fully public and SEO-enabled. You can publish from the builder’s Publish button or ask the AI (“publish my changes,” “take it live”).

To connect your domain you’ll add DNS records at your registrar (GoDaddy, Namecheap, etc.) — the AI gives you the exact records when your site is ready. This workflow means you can experiment freely without any risk of breaking what’s already live. A walkthrough video of the full staging-to-live process is in the Resources menu.