Homesmart Website Builder basics

Homesmart Website Builder is a drag-and-drop editor that lets you change text, images, and layout without writing code. You log into your Homesmart account, click "Edit" on your site, and the editor opens in your browser. From there you can click any element on the page — a headline, a photo, a button — and modify it directly.

The editor works inside your browser window, so you do not need to read software or learn a command line. Changes you make appear on the page as you type or drag. When you are done, you click "Publish" or "Save" to push those changes live to the version people see when they visit your site.

Homesmart is built for people managing small business sites, real estate listings, or local service pages. It assumes you want to change things yourself without hiring a developer, so the interface prioritizes speed over flexibility.

Key Takeaways

  • Log into your Homesmart account, find your site in the dashboard, and click the "Edit" button to open the drag-and-drop editor.
  • Click any text, image, or section on the page to select it, then use the panel on the right side to change colors, fonts, spacing, or content.
  • Drag sections up and down to reorder them, or drag elements within a section to move them left or right.
  • Preview your changes on mobile and desktop before publishing, because layout shifts when the screen gets smaller.
  • Publish your changes when you are ready, and they go live when ready to anyone visiting your site.

Opening the editor and selecting elements

Start by logging into your Homesmart account at the main login page. Once you are in the dashboard, you will see a list of your sites. Click the site you want to edit, then look for a button labeled "Edit" or "Edit Site" — it is usually near the top or in a menu next to your site name.

The editor loads in your browser and shows your site as it appears to visitors. To change something, click directly on it. Click a headline to edit the text. Click an image to swap it out or adjust its size. Click a button to change its label or where it links to. When you select an element, a panel appears on the right side of the screen showing the options you can change for that element.

If you want to select a whole section instead of a single element — for example, a header area with a background image and text on top of it — look for a border or outline around the section and click that border. Homesmart will show you which section you have selected by highlighting it.

Editing text and changing fonts

To change text, click the text you want to edit. A text box appears with your cursor inside it. Delete the old text and type the new text. You can also select part of the text and change just that portion — for example, making one word bold or a different color.

While the text is selected, the right panel shows font options. You can change the typeface by clicking the font dropdown, change the size with the size slider or number field, and adjust the color by clicking the color box. Some Homesmart templates also let you change the font weight (how thick the letters are) and the line spacing (how far apart the lines sit).

If you want to make a link out of text, select the text, then look for a link icon in the right panel or in a toolbar above the text box. Click it and paste or type the URL you want the text to link to. You can link to pages on your own site or to external websites.

Swapping images and adjusting their size

Click any image on your page to select it. The right panel shows image options. To replace the image, look for an "Upload" or "Change Image" button and click it. Your browser opens a file picker where you can select a new image from your computer. Homesmart uploads it and swaps it in.

To resize the image, you can drag the corners or edges of the image itself — grab a corner and pull outward to make it bigger, or pull inward to make it smaller. Dragging a corner keeps the image's proportions the same, so it does not stretch. If you want to crop the image (cut off parts of the edges), look for a crop tool in the right panel, click it, and drag the edges of the crop box to frame the image the way you want.

You can also set the image width and height using number fields in the right panel if you want precise control. Some templates let you add a border, shadow, or rounded corners to images using the styling options.

Reordering sections and moving elements

Sections are the large blocks that make up your page — a header section at the top, a text section below it, an image section, a footer at the bottom. To move a whole section, hover over it until you see a move icon (usually four arrows or a grid icon), then drag the section up or down the page. Drop it in its new position.

To move an element within a section — for example, sliding a headline to the left or moving an image to the right — click the element, then drag it to the new spot. Some templates lock elements to a grid, so they snap into place rather than letting you position them freely. If you want to delete a section or element, select it and look for a delete or trash icon in the right panel or a context menu.

If you accidentally move something, most Homesmart editors have an undo button (usually a curved arrow icon) at the top of the editor. Click it to undo your last change, or click it multiple times to undo several changes in reverse order.

Changing colors, spacing, and other styling

When you select an element, the right panel shows styling options specific to that element. For text, you can change the text color, background color, and text alignment (left, center, or right). For sections, you can change the background color or add a background image, adjust padding (space inside the section), and change the section width.

Buttons and links often have their own styling panel where you can change the button color, text color, size, and shape. Some templates let you add hover effects, so the button changes color when someone moves their mouse over it.

Spacing controls let you adjust margins (space outside an element) and padding (space inside). If a headline is too close to the image below it, select the headline and increase its bottom margin. If text inside a box feels cramped, select the box and increase its padding.

Previewing on mobile and publishing changes

Before you publish, click the preview button (usually an eye icon or a "Preview" label) to see how your site looks to visitors. Most editors show you a desktop view by default. Look for a mobile icon or a dropdown that lets you switch to a phone or tablet view. Homesmart automatically adjusts your layout for smaller screens, but you should check that text is readable, images fit properly, and buttons are straightforward to tap on a phone.

If something looks wrong on mobile, go back to the editor, select the element that needs fixing, and adjust it. Some templates let you hide elements on mobile (for example, hiding a large image so the page loads faster on a phone) or show different content on mobile than on desktop.

When you are satisfied with your changes, click the "Publish" or "Save" button. Homesmart uploads your changes to your live site, and anyone visiting your site will see the new version when ready. There is usually no waiting period — the changes go live right away.

Frequently Asked Questions

Can I undo changes after I publish them?

Yes. Go back into the editor, make the changes you want, and publish again. Your previous version is replaced. Some Homesmart plans show a version history, which lets you see older versions of your site and revert to one if needed — check your account settings to see if that feature is available to you.

What if I want to add a new section to my page?

Look for an "Add Section" or "+" button in the editor, usually between sections or at the bottom of the page. Click it and Homesmart shows you a library of section templates — headers, text blocks, image galleries, contact forms, and more. Click the one you want and it appears on your page. You can then edit the text and images inside it.

Can I change the layout of a section?

It depends on your template. Some sections are locked to a specific layout, while others let you change the number of columns or rearrange elements. Select the section and look in the right panel for layout options. If you do not see any, the section layout is fixed and you would need to delete it and add a different section type.

How do I add a new page to my site?

Look for a "Pages" menu or "Add Page" button in the editor or dashboard. Click it, give the page a name, and Homesmart creates a blank page. You can then add sections and content to it the same way you edit existing pages. The new page appears in your site's navigation menu automatically.

What happens if my site looks different on my phone than in the editor?

Homesmart adjusts layouts for different screen sizes automatically, so mobile and desktop can look quite different. Use the preview tool to check mobile view before publishing. If something looks wrong, select the element in the editor and adjust its size, spacing, or visibility settings. Some elements may need to be hidden on mobile or resized to fit a smaller screen.