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 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 are the section of the homepage that we can edit with this special tool.
How To Find The Editor
Click on the Web & IDX tab from your main navigation on the left-hand side.
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
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 far beyond the scope of what the Inside Real Estate 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
The plan for this demo will be to link the tiles to custom pages that have been created for a kvCORE 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.
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 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.
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.
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, we will replace with the custom page link (highlighted.)
The "Multi-Family" text will be replaced with the name of the custom page.
The number of listings counter will be deleted and replaced with a subtitle that describes the page that is being linked.
After making those edits, this is the result.
We replaced the text for 'Multi Family' within the 'category-title' <span> tags.
To remove the listings counter, we 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 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 we replaced some text and 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. 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 firstname.lastname@example.org!