There is a portion of your homepage that is totally customizable and can display pretty much anything you want to code in with HTML using the homepage editor.
There are lots of different components to your kvCORE website, many of which are editable. The different pieces from the navigation menu, adding new pages, changing the background image, etc all have their own instructions which can be found here in the website customization topic.
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 is the section of the homepage that we can edit with this special tool.
How To Find The Editor
Click on Web & IDX in your left hand navigation.
Over on the upper right you will see the button to access the website editor.
When editing website settings, remember to pick or check the appropriate scope you want to work in, if you are an administrator.
Homepage Editor Instructions
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.
Customizing your page
- You should have basic HTML knowledge before customizing your page. Click here to learn HTML fast
- It's highly recommended to download a good text editor such as notepad++ . If you are on Mac, you can use chocolat .
- You may have any third party access your dashboard to customize this section, at your discretion.
- If you are having a third party customize your section, then they will not need much instruction. The code of the page is easily editable using the source code button.
- Plan your modifications. Do you want to just modify the existing tiles? Or do you want to create something completely new?
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.
Please note - If you are not at all tech savvy, it is not recommended to proceed with this guide. Please seek professional assistance from a third party. The topic of HTML coding is very far beyond the scope of what our support staff can assist you with. If you want to attempt it anyway, remember you can always revert back to the default look of the site very easily using the 'Clear Customization' button.
Step 1: Plan
My plan for this demo will be to link the tiles to custom pages I've created for my kvCORE website. Before beginning, I created the custom pages.
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 I created. I'm going to link to these pages (Chapin Estate, Eastchester, Lawrence Farms, and Shrub Oak) on my homepage.
For the most part, people create custom pages to link to, or 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.
Step 2: Editing
Clicking on 'Go To Site 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, 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 and 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 get very weird very fast if you try to make edits without editing the source HTML.
Step 3: Playing with fire
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. We also have a cheat sheet where you can see the components as they are.
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:
Part 4: Making Edits
In the following graphic, you will see how the components of the HTML Markup represent the box elements we want to change.
- The URL to search results, I will replace with my custom page link (highlighted.)
- The "Multi Family" text I will replace with the name of my custom page.
- The number of listings counter I am going to delete and replace with my own subtitle that describes the page I am linking to.
After making those edits, I end up with this.
- I replaced the text for 'Multi Family' within the 'category-title' <span> tags.
- I wanted to remove the listings counter, so I replaced the entire <span> tag within the 'category-subtitle' <span> tags with the text 'Premier Equestrian Property.'
For more information on tags and what they mean, you can read up a bit on w3schools . Most errors or corrupted/broken HTML is the result of accidentally deleting the wrong tags, forgetting a closing tag, or accidentally deleting quotation marks in your HTML.
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 we replaced some text, and we changed some links. We did not really change the layout, or add any of our own custom elements, nor did we change out the photos. That level of customization is covered in our Advanced DIY article.