DISCLAIMER
In this tutorial, we will assume that you have some understanding of HTML and the basic practices of how to implement it. If you want to take the time to learn HTML, you can start here: w3schools . If not, then it would be best to leave your site as-is, until you can take the time to learn how to tweak it. If you've made edits to HTML and understand things such as closing your tags, and how CSS classes or IDs work, then you're ready to take the plunge into something a little more in-depth. We will be taking the existing styles built into your site and re-purposing them to do something really custom.

Part 1 - How to Add Your Own Pictures

As you are custom-building your home page, there is a specific way to upload pictures to your page so you can grab the URL to insert into your design.

Recommended image sizes:

2 Columns - 540 px wide

3 columns - 350 px wide

4 Columns - 260 px wide

Step 1: Find a Space to Load a Picture

Go into code view:

and delete everything, then click it again to get back to the editor...

...and click on the picture icon, and upload a picture:

Then wait for it to upload.

Step 2: Get/Save Image URL

Once you click and upload your image, go to code view again:

And you will see an image URL (INSIDE the quotes!)

From here you can copy the URL and keep it handy to insert into the appropriate parts of the snippets provided below.

I save mine in a text file, as seen here:

After you obtain your image URLs, you don't have to save the page, just close the whole tab! You don't need to worry about your page looking weird before you make it look weird on purpose😜

Part 2 - Customization DIY

Important Note: It's highly recommended to paste the code samples into a nice text editor like notepad++ for windows, or Chocolat for Mac. The screenshots you see in this DIY with the colored text are in notepad++ in HTML mode.

Design

This is the look we are trying to achieve. To keep things simple, envision this as being divided up into rows. These rows will always stay one on top of another, so no matter how small the screen gets, the page looks correct.

First Row: Header

If you want to use a heading, you can copy this code into your editor, and change the text as well as insert the image link into the src quotes.

After making your edits, open your site editor in BoldTrail, and click the

code button, and paste in your modified code!

After the heading row, you can paste as many additional rows as you want.

What I did in the example above for the 'separator' was to add a simple horizontal rule after the last in the above snippet.

Or, you can skip the heading entirely, and just use however many other rows you want. It's optional.

Second Row, and Beyond: Clickable Areas

Here we want to add areas that we want to be able to let people find. Keep in mind you can link to any kind of search you want. You just need to build your URLs first.

How many images, and what sizes they are depends on how many total search options you want.

Here we will provide you with several options that you can copy & paste into your code. First, copy the snippet you want, then customize it by replacing the background image URL's and such.

Here, you can see I replaced the background image URL, with the URL of an image I uploaded already:

See how I added the CSS style for 'background-image?' You should do the same. Please be very careful of the quotes and formatting! With inline CSS, when setting the background image, the format is:style="background-image: url('imageURLGoesHere');"

Now, also I want people to be directed to a specific search on my site when they click the button. So, I need to go and create that link, and replace the href of our 'category link' anchor:

I perform a search for the results I want and copy everything after the slash. We want to do this to just direct the visitor to a different page on our same site:

Don't forget! Mind the quotes or you break it!

href="link"

Row Snippets

Now that you can see what to edit, here are all the different snippets we have pre-built for you. Copy and paste at will!

Each one of these snippets can be used as many times as you need. So, if you need 12 boxes, they can be four rows of three or 3 rows of four. Just paste them after one another for each row you need.

So, to be clear:

Copy a Snippet, and paste it into the editor.
Insert your image URLs.
Make sure you didn't delete or paste over any quotes.
Change out Text. category-title = What shows on the tile. btn-primary = what shows on the button.
Paste in additional snippets and modify them, one after the other in your editor. At the end of each snippet, just start a new line and paste into the next section. Each row/box, etc. has HTML comments to help you see where they begin and end.
Once all your sections are modified, copy everything in the editor.
Open your site customizer. Click the code button.
Paste in your modified code.
Click Save

When using images in these rows, always make sure they are no more than a few hundred px wide, and all the same, height to avoid spacing issues. The images will adapt to the space they are given, so in order to achieve a specific look, you might have to play with the sizing. So long as all the images in one row are the same height, it will look okay.

Recommended image sizes:

2 Columns - 540 px wide

3 columns - 350 px wide

4 Columns - 260 px wide

If you upload large images, your site will load more slowly, meaning fewer leads. So keep them as small as possible!

4 columns, With Rollover Button

(when you mouse over the image, a button is revealed.)

<div class="row center-block">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="category" style=""><a class="category-link" href="" target="_blank"> <span class="category-content"> <span class="category-title">Area</span> <span class="category-subtitle"> <span class="btn btn-primary">View Listings</span> </span> </span> </a></div>
</div>

<div class="col-xs-12 col-sm-6 col-md-3">
<div class="category" style=""><a class="category-link" href="" target="_blank"> <span class="category-content"> <span class="category-title">Area</span> <span class="category-subtitle"> <span class="btn btn-primary">View Listings</span> </span> </span> </a></div>
</div>

<div class="col-xs-12 col-sm-6 col-md-3">
<div class="category" style=""><a class="category-link" href="" target="_blank"> <span class="category-content"> <span class="category-title">Area</span> <span class="category-subtitle"> <span class="btn btn-primary">View Listings</span> </span> </span> </a></div>
</div>

<div class="col-xs-12 col-sm-6 col-md-3">
<div class="category" style=""><a class="category-link" href="" target="_blank"> <span class="category-content"> <span class="category-title">Area</span> <span class="category-subtitle"> <span class="btn btn-primary">View Listings</span> </span> </span> </a></div>
</div>
</div>

3 Columns, With Rollover Button

(when you mouse over the image, a button is revealed.)

<div class="row center-block">
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="category" style=""><a class="category-link" href="" target="_blank"> <span class="category-content"> <span class="category-title">Area</span> <span class="category-subtitle"> <span class="btn btn-primary">View Listings</span> </span> </span> </a></div>
</div>

<div class="col-xs-12 col-sm-6 col-md-4">
<div class="category" style=""><a class="category-link" href="" target="_blank"> <span class="category-content"> <span class="category-title">Area</span> <span class="category-subtitle"> <span class="btn btn-primary">View Listings</span> </span> </span> </a></div>
</div>

<div class="col-xs-12 col-sm-6 col-md-4">
<div class="category" style=""><a class="category-link" href="" target="_blank"> <span class="category-content"> <span class="category-title">Area</span> <span class="category-subtitle"> <span class="btn btn-primary">View Listings</span> </span> </span> </a></div>
</div>
</div>

2 Columns, With Rollover Button

(when you mouse over the image, a button is revealed.)

<div class="row center-block">
<div class="col-xs-12 col-sm-6">
<div class="category" style=""><a class="category-link" href="" target="_blank"> <span class="category-content"> <span class="category-title">Area 5</span> <span class="category-subtitle"> <span class="btn btn-primary">View Listings</span> </span> </span> </a></div>
</div>

<div class="col-xs-12 col-sm-6">
<div class="category" style=""><a class="category-link" href="" target="_blank"> <span class="category-content"> <span class="category-title">Area 5</span> <span class="category-subtitle"> <span class="btn btn-primary">View Listings</span> </span> </span> </a></div>
</div>
</div>

4 Columns, Clickable Images

(simple non-rollover action. Good for images that have text already stamped on top.)

3 columns, clickable images

(simple non-rollover action. Good for images that have text already stamped on top.)

That's it! You have everything you need to insert whatever rows you want and upload the images you need to make them look good.

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

(Keywords: website editor, site editor, homepage editor, advanced, widget)

[BoldTrail] Website Homepage Editor

[BoldTrail] Advanced Email Editor Overview

[BoldTrail] Page Editor