There is a portion of your homepage that is totally customizable and can display almost anything you want to code in with HTML using the homepage editor.

There are lots of different components to your BoldTrail website, many of which are editable. The different pieces include the navigation menu, adding new pages, and changing the background image.

This article will focus on the editable portion of your homepage, meaning the portion of your homepage where you can change the actual code to dictate what kind of buttons or photos or links appear just beneath the background image of your website:

The tiles you see above with their backgrounds and links to different categories of properties are the section of the homepage that we can edit with this special tool.

Click on Web & IDX from the left-hand menu. Then, select Editor from the options at the top.

By default, the editable region has a masonry tile layout (stacked and fitted boxes) that link to different search results/lists of properties. The number of listings automatically populate.

Let's do a basic customization project together.
​
You can read along to see how a plan is executed and get a feel for the editor.

The plan for this demo will be to link the tiles to custom pages that have been created for a BoldTrail website. Before beginning, the custom pages were created.
​
In planning what you want to do, not only will you need the pictures you want to use in your customization, you will also need the links that those pictures will link to.

Here you can see the custom pages that were created. It's going to link to these pages (Chapin Estate, Eastchester, Lawrence Farms, and Shrub Oak) on the homepage.

For the most part, people create custom pages to link to or specific searches.
​
To create a search, perform a search on your site until you are seeing exactly what you want someone who clicks on one of the tiles to see. When you are satisfied, copy the URL to your search results and save it in a text file for easy access later.
​

Clicking on Editor loads the 'WYSIWYG' (what you see is what you get) module on your website:

In this default mode, you can see all of the elements on your page. You can see how they look and how they are positioned. Now, if you delete everything shown, and want to start from scratch in a Microsoft-Word sort of way, that is perfectly fine.
​
You'll see all kinds of controls for paragraphs, spacing, and text color. You can even insert images!

However, in this instance, we want to change how the tiles work. To do that accurately, we are going to use source mode.

You'll notice how difficult it is to change things on the page with the regular wordprocessor buttons in the editor. It's fine for writing text paragraphs, lists, and so on. But, things can get complicated very fast if you try to make edits without editing the source HTML.

Clicking on the source button will show you the markup of the page.

Right-Click anywhere in the editable region, and click 'Select All.'

Copy it. You can right-click again or press   Ctrl  +  C  (cmd  +  C  on mac) 

The next couple of steps will show you how to format this source code to make it easier to work with.

In a new tab, go to a code beautifier site like this one (the rest of this example will use codebeautify.org ).

In the left box on the codebeautify site, paste what you copied:

 Click on 'Beautify' in the middle:

And your nicely formatted code will populate on the right:

Now, copy this formatted code, and let's paste it into notepad++ (the recommended program from the top of this DIY guide on Windows.)

In notepad++, navigate to the 'Language' menu, and select H → HTML

This will make it much easier to see different elements of your code because it color-codes them:

In the following graphic, you will see how the components of the HTML Markup represent the box elements we want to change.

After making those edits, this is the result.

Notes

For more information on tags and what they mean, you can read up a bit on w3schools . Most errors or corrupted/broken HTML are the results of accidentally deleting the wrong tags, forgetting a closing tag, or accidentally deleting quotation marks in your HTML.

Next, we will edit the other tiles accordingly to complete our project. 

Once your edits are complete, copy all of the content in notepad++, and paste it into the site editor code view.

DELETE everything in the box, and paste your modified code that you copied from the notepad.

After pasting your modified code to review your handiwork, click the 'Save' button if it looks right.

After you click 'Save', you will see a "Save Successful" pop-up, and you can close the page. Visit your site in a new tab to make sure everything works properly!

In this walkthrough, some text was replaced and links changed. We did not really change The layout was not altered, and no custom elements were added (such as updating photos). For assistance with that level of customization please review the Advanced DIY article.

Have more questions? Reach out to Support via the blue chat bubble to the right or by emailing support@insiderealestate.com!