Adding a Logo to Your Site's Footer [Classic]

Katherine Ramirez Updated by Katherine Ramirez

Welcome to our Placester Hacks series. Placester Hacks are Placester-approved tricks and workarounds that allow you to accomplish some customizations that may not seem possible with the current toolsets included in Placester’s products. Keep in mind that these hacks are generally more advanced than standard setup instructions. We recommend only using them if you’re familiar with HTML and website editing.  

This Placester Hacks article will discuss adding images to the footer of your site.

Adding a logo to your site's footer

By default, each Placester theme includes some information in the footer such as your office address. Office information can be edited within Site Settings > Site Info. Please refer to our site info article for a full overview.  

Here's an example of what the footer looks like on the Plymouth theme:

footer1.png

While you do have the built-in option to add a logo to the header of your site and choose from a set of pre-loaded certifications to add to the footer of your site, we've found that some agents have additional logos or certifications that they'd like to include in the footer. While there is not currently a way to upload images directly into the footer, we have come up with these instructions for adding image HTML as a workaround.

 

Please note that the below instructions involve using image HTML, which is somewhat advanced as far as editing goes. 

Image HTML

To use image HTML in your footer, you'll need to locate an image source URL. This means your image must be hosted on a server, whether it's your Placester site or another site you own.

We've found that the easiest way to obtain an image URL is by using the HTML editor in Pages within your site editor. This is essentially a hack that allows you to upload an image and grab a direct link to it without publishing the page/image.

First, go to Pages and then click on the + to add a new page.

revad1.png

Note that you won't actually be saving a page here, so go ahead and use the Default page template to start. Select the image icon within Page Content to upload an image to the page.

https://gyazo.com/3e016e5a0948532c109ae50ebbf46238

  After the logo is selected, you can change the size of the logo so it will fit nicely in the footer.  We usually recommend that the width of the logo is 30% of the Page Width.  

https://gyazo.com/7dbb7b66b9c58a0d260bc5a569a53c92

Once you have added the image, click the HTML editor icon. This will allow you to see the source code for your embedded image. It will look very similar to what you see below. You might notice the word "Amazon" within the link - this is because Placester sites are hosted on Amazon Web Servers, so you're getting the direct link to the image on our servers. Be sure to copy the whole code, beginning with <img src and ending with >.

 

https://gyazo.com/f56022ea582aa77f44cbf92e8a3d4795

Adding the HTML to Site Info

You will now want to copy this code and proceed to Site Settings > Site Info.

form1.png

The best place to add the HTML is in Office Details the Zip code box directly after the Zip. This is because the address is always displayed in your footer, and the zip code is the final field in the address. If you add the code after the address, it'll show up after your address.

revad2.png

Paste the HTML into the zip code box after your zip code. Once you have added the HTML, it's important that you add <div> to the beginning and end of the code you have entered. This will separate the image from the office address text and eliminate any formatting problems.  There may be a <br> or break at the end of the HTML. Make sure this is removed and replaced by a <div>.  Once you have done this, The HTML should look similar to this.  

<div><img src="https://inception-app-prod.s3.amazonaws.com/ZDU5YmMyZDktMGNmZi00ZmEyLWIwOTQtY2NiNDcyNTIzNzYy/content/2017/05/placester1-2.png"><div>

You can then hit save.  To see the image in the footer, click on View Live Site and scroll down to the bottom of the page.  Your logo or certificate will appear directly below your office address. 

footer2.png

Keep in mind that this is a workaround for uploading an image to the footer. For this reason, there aren't options to move this around or control the formatting much further. You are welcome to adjust the sizing of the image using width and height attributes within the HTML.

Need More Help?

If you have additional questions about adding images to your footer, let our support team know at support@placester.com.

 

How did we do?

Adding a Google Maps location to your Contact page [Classic]

Adding Google Tag Manager [Classic]
#

Let experts do it for you

Visit our creative services marketplace to get on-demand help, on-time and on-budget.

Browse all Services
#

Are you looking for something different?

Didn't find an answer to your questions? Our support team is ready to help you.

Contact Support