KV Core websites are very plain and lack a personalized touch, this article will help you redesign the widgets to creat a homepage that looks a little better and more to you.
Before we start, remember this is to change the appearance of your widgets on your home page. You can buy the API key from KV Core and use WordPress to change the whole appearance, but if you are like me, I was just trying to make mine look a little better.
To change the widget, it will take a couple of steps one you need to redo some of the code in the widget, which I have taken care of and provided the code below. You just have to swap some things out and paste it in.
First step is to is to find 6 photos that you would like to use as your background photos, they can be of the cities or what ever you want that part to be of. I recommend the size to be 820x475 and you can resize your photos in alot of different programs, I use photoshop cause it is on of the best out there and it honestly isn't that much monthly and really comes in handy.
Second is to host your photos on a site so you can use the url to place in the code, there are alot of hosting sites out there but I use AWS by Amazon, its free and easy to use. All the videos are done by my boyfriend.
Once you have got all your photos hosted, copy them all and put them in your clipboard for later.
Third you will need to create your sqeeze pages or get the url's that you want your widget to go to, remember to copy them to your clipboard so you have easy access to them when you get ready to put them in your code
Now that you have all that ready to go we will need plug that info into your code, open a new clipboard or notes tab and copy and paste the code below
copy from <p to the end </div>
<p style="text-align: center;">
<span style="font-size: 30px;">SEARCH BY AREA</span>
</p>
<!-- /.col-* -->
<div class="col-lg-4">
<div class="category category-vertical m-b-3" style="background-image: url(‘IMAGE YOU WANT TO SHOW’); border-radius:0;">
<a class="category-link" href=“URL TO THE PAGE YOU WANT TO SHOW " style=" border-radius:0;">
<span class="category-content">
<span class="category-title">TEXT OR CITY</span>
<span class="category-subtitle"> Listings</span>
<span class="btn btn-primary" style="background:#181F25;">View List</span>
</span>
<!-- /.category-content -->
</a>
</div>
<!-- /.category -->
</div>
<!-- /.col-* -->
<!-- /.col-* -->
<div class="col-lg-4">
<div class="category category-vertical m-b-3" style="background-image: url(‘IMAGE YOU WANT TO SHOW’); border-radius:0;">
<a class="category-link" href="URL TO THE PAGE YOU WANT TO SHOW" style=" border-radius:0;">
<span class="category-content">
<span class="category-title">TEXT OR CITY</span>
<span class="category-subtitle"> Listings</span>
<span class="btn btn-primary" style="background:#181F25;">View List</span>
</span>
<!-- /.category-content -->
</a>
</div>
<!-- /.category -->
</div>
<!-- /.col-* -->
<!-- /.col-* -->
<div class="col-lg-4">
<div class="category category-vertical m-b-3" style="background-image: url('IMAGE YOU WANT TO SHOW'); border-radius:0;">
<a class="category-link" href="URL TO THE PAGE YOU WANT TO SHOW" style=" border-radius:0;">
<span class="category-content">
<span class="category-title">TEXT OR CITY</span>
<span class="category-subtitle"> Listings</span>
<span class="btn btn-primary" style="background:#181F25;">View List</span>
</span>
<!-- /.category-content -->
</a>
</div>
<!-- /.category -->
</div>
<!-- /.col-* -->
<!-- /.col-* -->
<div class="col-lg-4">
<div class="category category-vertical m-b-3" style="background-image: url('IMAGE YOU WANT TO SHOW'); border-radius:0;">
<a class="category-link" href="URL TO THE PAGE YOU WANT TO SHOW" style=" border-radius:0;">
<span class="category-content">
<span class="category-title">TEXT OR CITY</span>
<span class="category-subtitle"> Listings</span>
<span class="btn btn-primary" style="background:#181F25;">View List</span>
</span>
<!-- /.category-content -->
</a>
</div>
<!-- /.category -->
</div>
<!-- /.col-* -->
<!-- /.col-* -->
<div class="col-lg-4">
<div class="category category-vertical m-b-3" style="background-image: url('IMAGE YOU WANT TO SHOW'); border-radius:0;">
<a class="category-link" href="URL TO THE PAGE YOU WANT TO SHOW" style=" border-radius:0;">
<span class="category-content">
<span class="category-title">TEXT OR CITY</span>
<span class="category-subtitle"> Listings</span>
<span class="btn btn-primary" style="background:#181F25;">View List</span>
</span>
<!-- /.category-content -->
</a>
</div>
<!-- /.category -->
</div>
<!-- /.col-* -->
<!-- /.col-* -->
<div class="col-lg-4">
<div class="category category-vertical m-b-3" style="background-image: url('IMAGE YOU WANT TO SHOW'); border-radius:0;">
<a class="category-link" href="URL TO THE PAGE YOU WANT TO SHOW" style=" border-radius:0;">
<span class="category-content">
<span class="category-title">TEXT OR CITY</span>
<span class="category-subtitle"> Listings</span>
<span class="btn btn-primary" style="background:#181F25;">View List</span>
</span>
<!-- /.category-content -->
</a>
</div>
<!-- /.category -->
</div>
<!-- /.col-* -->
<div class="widgetWrapper col-sm-6">
<div class="widget worth ">
<a href="/sell.php">
<p>WHAT IS MY HOME WORTH?</p>
<div class="btn btn-primary">Find Out More</div>
</a>
</div>
</div>
<div class="widgetWrapper col-sm-6">
<div class="widget blog">
<a href="/blog.php">
<p>LATEST BLOG POST</p>
<div class="btn btn-primary">Read Now</div>
</a>
</div>
</div>
We are almost there, now that you have all that ready to go you can place it in your widget code area.
That is it, hopefully it worked for you like it did for me if you have any questions you can reach out and I will help where I can.
My name is Amy (Maricopa Amy) and I am a local Real Estate agent here in Maricopa AZ, I love meeting new people in the community and helping on all avenues that I can. If you need anything feel free to give me a call or message me. It doesn't have to be real estate related either, I have lived here for 14 years and know a lot about Maricopa, so if you have a question, I will have an answer. Talk to you soon.