Broker Website Customizer

by admin on March 27, 2017, 5:21 pm

 

There are currently four parts to customizing your template

Part 1: "Template" 

Navigate to the site customizer page on your Broker Dashboard.

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.)

 

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: "Background Video YouTube ID" (hero template only)

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. 

For example: youtube.com/watch?v=cmAMGJm-bwU&list=PLYu7z3I8tdEm5nyZU3a-O2ak6mBYXWPAL&index=4

The ID here would be: cmAMGJm-bwU

 

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 4: 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)

 

 

 

 

Advanced Customization of your page

**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.

  • 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++
  • 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.

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)

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!