Advanced Hero Customization

by admin on June 1, 2017, 10:05 pm
This DIY pertains to customizing your hero template Kunversion site.

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 make 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 classes or ID's 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 Kunversion site and re-purposing them to do something really custom.

How to add 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.

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!

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:

Remember to delete the code when you're done...

...you don't have to save the page once you have your image URLs! So, you don't need to worry about your page looking weird before you make it look weird on purpose. ;-) 

Customization DIY

...finally! Let's get to the meat and potatoes.

Important note: I would highly recommend pasting 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. For more infomation, you can check out the advanced HTML editing guide Here.

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: Heading

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 Kunversion, and click the </> code button, and paste in your modified code!

<!--Heading Row--->
<div class="row">
	<div class="col-xs-12 text-center">
		<img src="#" class="center-block fr-fic fr-dii">
		<div style="border-bottom:1px solid #000">
			<h3 style="display:inline-block;padding:15px;">Text Goes Here</h3>
		</div>
	</div>
<p>&nbsp;</p> </div> <!--End Heading Row-->

After the heading row, you can paste as many additonal rows as you want. Or, you can skip the heading entirely, and just use how ever 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 replaced the word link with the URL? You should do the same. Please be very careful of the quotes! There must be quotes surrounding the URL.

Now, also I want people to be directed to a specific search on my Kunversion 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 the a different page on our same site:

.....and paste it in:

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:

  1. Copy a Snippet, and paste into editor.
  2. Insert your image URLs.
  3. Make sure you didn't delete or paste over any quotes.
  4. Change out Text. category-title = What shows on the tile. btn-primary = what shows on the button.
  5. 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 in the next section. Each row/box, etc. has html comments to help you see where they begin and end.
  6. Once all your sections are modified, copy everything in the editor. 
  7. Open your site customizer. Click </> the code button.
  8. Paste in your modified code.
  9. 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 acheive 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 snippet

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

<!-- 4 Column Rollover Row -->
<div class="row center-block">
	<!--Box 1-->
    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="category" style="background-image: url('link');">
			<a class="category-link" href="index.php?link#rslt">
				<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>
	<!--End Box 1-->
	<!--Box 2-->
    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="category" style="background-image: url('link');">
			<a class="category-link" href="index.php?link#rslt">
				<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>
	<!--End Box 2-->
	<!--Box 3-->
    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="category" style="background-image: url('link');">
			<a class="category-link" href="index.php?link#rslt">
				<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>
	<!--End Box 3-->
	<!--Box 4-->
    <div class="col-xs-12 col-sm-6 col-md-3">
        <div class="category" style="background-image: url('link');">
			<a class="category-link" href="index.php?link#rslt">
				<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>
	<!--End Box 4-->
    
</div>
<!-- End 4 Column Row -->

 

3 columns, with rollover button

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

<!-- 3 Column Rollover Row -->
<div class="row center-block">
	<!--Box 1-->
    <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="category" style="background-image: url('link');">
			<a class="category-link" href="index.php?link#rslt">
				<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>
	<!--End Box 1-->
	<!--Box 2-->
    <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="category" style="background-image: url('link');">
			<a class="category-link" href="index.php?link#rslt">
				<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>
	<!--End Box 2-->
	<!--Box 3-->
    <div class="col-xs-12 col-sm-6 col-md-4">
        <div class="category" style="background-image: url('link');">
			<a class="category-link" href="index.php?link#rslt">
				<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>
	<!--End Box 3-->
</div>
<!-- End 3 Column Row -->

 

2 columns, with rollover button


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

<!--2 Column Rollover Row-->
<div class="row center-block">
	<!--Box 1-->
    <div class="col-xs-12 col-sm-6">
        <div class="category" style="background-image: url('link');">
			<a class="category-link" href="index.php?link=#rslt">
				<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>
    <!--End Box 1-->
	<!--Box 2-->
    <div class="col-xs-12 col-sm-6">
        <div class="category" style="background-image: url('link');">
			<a class="category-link" href="index.php?link=#rslt">
				<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>
    <!--End Box 2-->
</div>
    <!-- End 2 Column Rollover Row-->

 

4 columns, clickable images.

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

	<!-- 4 Column Clickable Images -->
<div class="row center-block">
	<!--Image 1-->
    <div class="col-sm-3">
		<a href="#">
		<img src="#" style="width:99%" class="fr-fic fr-dii">
		</a>
	</div>
    <!--End Image 1-->    
    <!--Image 2-->
    <div class="col-sm-3">
		<a href="#">
		<img src="#" style="width:99%" class="fr-fic fr-dii">
		</a>
	</div>
    <!--End Image 2-->  
    <!--Image 3-->
    <div class="col-sm-3">
		<a href="#">
		<img src="#" style="width:99%" class="fr-fic fr-dii">
		</a>
	</div>
    <!--End Image 3--> 
	<!--Image 4-->
    <div class="col-sm-3">
		<a href="#">
		<img src="#" style="width:99%" class="fr-fic fr-dii">
		</a>
	</div>
    <!--End Image 4--> 
</div>
<!-- End 4 Column Clickable Images -->

 

3 columns, clickable images.

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

	<!-- 3 Column Clickable Images -->
<div class="row center-block">
	<!--Image 1-->
    <div class="col-sm-4">
		<a href="#">
			<img src="#" style="width:99%" class="fr-fic fr-dii">
		</a>
	</div>
    <!--End Image 1-->    
    <!--Image 2-->
    <div class="col-sm-4">
		<a href="#">
			<img src="#" style="width:99%" class="fr-fic fr-dii">
		</a>
	</div>
    <!--End Image 2-->  
    <!--Image 3-->
    <div class="col-sm-4">
		<a href="#">
			<img src="#" style="width:99%" class="fr-fic fr-dii">
		</a>
	</div>
    <!--End Image 3--> 
</div>
<!-- End 3 Column Clickable Images -->

 

 

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.