There are 4 parts to customizing your website:
Part 1: Template
Navigate to the site customizer page on your Agent Dashboard. Or, if you want to customize things for the primary domain, the Broker site customizer .
The template setting has two options (more in the future.) They are "foundation" or "hero"
foundation - The 'legacy' Kunversion template. It is an older design with limited theme options, and no specific homepage customization available.
hero - This is the customize-able template. It offers many more themes and has homepage customization options. (Purple theme shown with default homepage customization.)
You should change your template to Hero regardless of your intention to customize the home page now or later, or never. The hero template is much more modern, and better suited (and capable) for capturing mobile leads.
Part 2: Theme
The theme drop down menu allows you to change the primary colors used on each template. It ONLY affects the color. There is no way to specify a custom color, currently.
Part 3: YouTube Background & other options
Videos do not play on mobile sites, to save bandwith.
As you change options here, use the Save+Preview button to see what the options affect if you're unsure. Nothing will be activated for the public unless you click 'Activate.'
When using the 'hero' template, you may specify a background youtube video, that will play behind the header elements, graphics, and search bar on the home page. The YouTube ID comes after the ?v= in the URL of youtube.com.
For example: https://www.youtube.com/watch?v=BH6ASDeGW8c
The ID needed is: BH6ASDeGW8c
Do not include anything before or after the alphanumeric characters. Many times when you are looking at YouTube links they can be quite messy. You only want the portion after v= and before any other characters such as & , #, etc.
The ID here would be: cmAMGJm-bwU
Toggle Settings: These settings can generally be played around with. Just use the Save + Preview Button at the bottom of the list to observe the effects.
Use Large Background Image - This options makes the main image on your K+ site take up the entire height of the screen. So, if you are using a large image, depending on the ratio of the image this may be better suited to what you want.
Use Dark Background Image - This option adds a dark overlay to the header image on the website. It's useful so that the text on top of the image is more readable. Depending on the type of picture, you may want this on or off.
Hide Agent Image on Homepage - From the Agent Perspective, if you preview your changes you will see your headshot front and center. If you do not want it showing, use this option to control it.
Use Square Agent Cover Image - On your subdomain, do you want your portrait on your home page to be square in shape?
Hide Office Name on Homepage - Same principle as Agent Image, except it references the company name that shows on the header image instead of a photo.
Use Primary Color for Header - The header is the very top bar on your site, but not on the home page. Depending on what kind of logo you have, you may need a colored header to fix this issue. For example, if your logo is white, it will be lost in the header, so you would need to use the primary color there to avoid it getting lost.
Use Black Color for Header - Same concept as primary color for header. The bar that your logo is in can be black instead of your primary color or white.
Use Full Width Custom Area - In Part 4 we cover in detail the "custom area" of the homepage where the HTML of it may be edited. Depending on your design goals, you may want the custom area to be as wide as the viewport/screen as opposed to being contained within the boundaries of the hero template.
Hide Chat Widget - If you are not using a custom chat program on your site, or if you are not using the built in Facebook messenger chat, you can remove it completely.
Homepage Listing Widget 1/2/3 - Widgets display below the 'Custom Area' of your home page. They are basically listing carousels that you can set using these options. Note- Sold Listings will link to the Sold Listings you post to your dashboard, they are not sold listings from the MLS.
(an example of a widget, 'My Listings' shown.)
Once you have your basic options configured, you can preview them using the save+preview button, and when you are satisfied, click Activate before proceeding.
Part 4: Site Editor (Hero Template Only)
The Site Editor will allow you to modify the most prominent section of the body of the homepage. It does not allow you to edit other pages or other sections of the homepage. This is to ensure that the site functionality remains accessible and has a high engagement/conversion rate for site visitors, while still allowing you to make it your own space.
Here is an illustration of what the site editor can affect. The head is known as the upper portion of the website that contains all of your navigation, site logo, search options, and other essential elements or functions. The editable region is just below it.
Part 4a: Default Customization
By default, the editable region has a masonry tile layout that automatically pulls the total results from a few basic searches. The number of listings automatically populate. Once you opt to customize the tiles, it will no longer automatically populate the number of listings. Even the smallest edit to the default area will disconnect that functionality.
If at any point the tiles are edited, and you wish to revert to the default tile functionality, you may do so very easily, by using the 'Clear Customization' button. It will instantly revert any customization to the default tiles, with their default functionality. (There is no wait)
Part 4b: Advanced Customization of 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 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 Kunversion website. Before beginning, I created the custom pages. To keep things simple, these are links to searches, but of course your links can be anything from anywhere.
Step 2: Editing
Clicking on 'Open 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. If you are going to be proficient at making sure you make the best edits, you must learn to edit things in source code mode.
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.
If you attempt to modify the tiles without </> mode, the editor will not understand accurately how to interface with the intricacies of the layout of the elements on the page. I'll show you a trick that will make your life way easier, and you'll learn a couple of new things along the way.
Step 3: Playing with fire
Click on the </> button:
Right-Click anywhere in the editable region, and click 'Select All.'
Copy it. You can right click again or press ctrl+C.
Then, 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:
Now, you can kind of see how things are laid out. If you are already familiar with HTML, you should appreciate the layout that this beautifier tool provides!
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 our custom page link (highlighted)
The "Multi Family" text we will replace with the name of our custom page.
The Number of Listings counter, which now no longer works since we are customizing our page, can be replaced by something else. In your case you may wish to delete the subtitle entirely.
We end up with this:
We will edit the other tiles accordingly to complete our project.
Once your edits are complete, copy all of the content in notepad++, and return to codebeautify.
In the left box, once again, you're going to paste your neatly formatted code, and in the middle, click on the "minify" button.
This is an important step as it reduces the overall size of your webpage.
Copy your minified code...
And return to the site editor. You're going to click the </> code button again if you closed this page earlier.
DELTE everything in the box, and paste your modified code that you copied from the minifier.
You can click the </> button again to review your handiwork, and click the save button!
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!
