Step 1. Find the landing page's header image's width and height dimensions

Right click on the center of the header image, scroll down to "Inspect Element". You should see the dimensions for the header appear underneath the header image. If you don't, simply hover your mouse over the image file in the white area, or the dimensions should appear on the bottom-right.

The dimensions for this header image are 520x380. This means the Google Map or Bing Map we install needs to have a width of 520px and a height of 380px.

---

Step 2. Open weebly's html/css editor

Click on "Design" at the top, then click on "Edit HTML/CSS "in the bottom-left.

---

Step 3. Add HTML Coding

Select the page layout "landing.html" on the left under "Page Layouts". Now scroll down until you find the following HTML code "<div class="wsite-header" ></div>".

Place the orange code within the code above. It should look like this:

​<div class="wsite-header">
<div id="top-main-wrap">  
  <div class="container" >
        {top:content  global="false"} 
   </div>
</div>
</div>

Partial coding courtesy of iwebic.

---

Step 4. Add CSS Coding

Click on "main-style.css" on the left and scroll all the way to the bottom. Add the following code:

#top-main-wrap {
    background: #000000;
}
#top-main-wrap .container {
    background:  none;
    padding:  0;
    width: 920px;
    height:200px;
    color: #fff;
}
#top-main-wrap .container p {}
#top-main-wrap .container a {}
#top-main-wrap .container blockquote {
    font-size:16px;
    font-style:italic;
    padding: 1px 30px 50px 30px;
}
#top-main-wrap .container form .wsite-button {
    margin-top:20px;
}
ul.weebly-content-area {
position: relative !important;
padding: 0px 0 !important;
margin: 0px 0 !important;
width: 100% !important;
}

​​Partial coding courtesy of iwebic.

---

Step 5. Edit css coding

There is only 1 part of the CSS coding from above that you need to edit. The part that needs to be edited is in orange.

#top-main-wrap .container {
    background:  none;
    padding:  0;
    width: 520px; Change this to the header image's width from Step 1.
    height: 380px; Change this to the header image's height from Step 1.
    color: #fff;
}

Click save. The hard work is over and the fun may begin!​

---

Step 6. Drag & Drop the "embed code" Element to the header image

From the left side of the screen, grab the "EMBED CODE" element and drop it in the header image area.

---

Step 7. customize and Grab your map

This is where you need to grab your customized map from either Google Maps or Bing Maps. For this tutorial, we're going to use Google Maps.

For current Google Map customizations, type in the address you'd like your map to show. Then click the settings icon in the bottom-right, click on share and embed map, enter the dimensions of the landing page's header image from Step 1., and then copy the embed code Google provides.

---

Step 8. paste map code in "embed code" element

Now simply head back to your site and paste the code of the customized map -- for this case, Google provided -- into the "EMBED CODE" we dragged and dropped into the header image from Step 6.

---

You're done! Publish your site to see how your map looks!

---

comments powered by Disqus