Add an Image or Logo to Your Footer

Add an Image or Logo to Your Footer

If you are looking to add an image to your website's footer - such as the logo of your company, awards you have received, or any professional organizations you belong to - you can do so by following the steps below.

 

Adding an image to the footer

Part 1: Add an HTML block to your footer

  1. Select the Pages tab at the top of your Websites app.
  2. On the right-hand sidebar, under Global Content, click on Footer.

  3. Select the (+) button at the bottom of the page.


  4. Select HTML from the menu that appears.

 

Part 2: Upload the image

  1. Once the HTML box is created, click on Insert Image.

  2. Click on the image you'd like to add, or select Click here or drag images here to upload a new image from your computer. Then, click Add Images.

  3. Your image link will populate on the first line of text in the HTML block, as shown in the image below.

 

Part 3: Add the formatting code

  1. Copy the code below. This code contains placeholder text that you will modify later:
    footer logo
  2. Next, paste the code in the second line of your HTML block, as shown below. To create a second line, place your cursor at the end of your image link and press the Enter key.
  3. Delete the placeholder text in between the parentheses ("") following (highlighted in the image below).


  4. Highlight your image link (the text in Line 1 of your HTML block), then right-click (or Control+click for Mac) to Cut the text. Then, Paste your image link in between the parentheses where you deleted the placeholder text.


  5. Click Save at the top of the HTML block.

 

Part 4: Preview and edit

To preview how your logo or image looks, scroll to the top of the page and click Design this content.

The Design panel will open. You can use the settings on the right-hand sidebar to modify your footer's appearance to accommodate the new image(s). For example, under Layout, change the Columns setting to rearrange the layout of the footer items.

If you are satisfied with the placement of the image, click Publish to make the changes live. 

The order of the content on the footer is determined by the order of the content blocks. If you would like to change the position of your image, you can do so by navigating back to the Pages tab by clicking the Pencil icon in the top-right corner of the Design panel. Then, drag the HTML block by clicking and holding the "move" icon on the top-left corner of the block, as seen below:

 

Making further edits to your footer image(s)

Adding multiple images to your footer

You can add additional images to your footer. However, depending on how you want those images to display, you should follow one of the two methods below:

Group icons together

To bunch all of your icons or logos together, you can work within the same HTML block. Simply repeat steps 3-5 with each new image. Make sure you create a new line of text for each image in the block.

Keep icons separate

If you want to place your icons on different sections of the footer, then you will want to create a separate HTML block. Repeat steps 2-5, then drag the HTML blocks to the desired order. 

Screen_Shot_2020-01-13_at_3.19.13_PM.png Screen_Shot_2020-01-13_at_3.15.58_PM.png

 

Changing the size of your footer images

If you want to change the size of the images in your footer or notice that they are sized incorrectly, you can change that by manually changing the height and width in the placeholder text in the HTML block.

 

    • Related Articles

    • Embed a Google Calendar on Websites 360®

      You can share your Google Calendar with your website visitors by embedding an interactive calendar to your website. Visitors can click and save your public calendar events. Note: The function of the Google Calendar is dependent upon third-party code, ...
    • Add an HTML Block

      Note: This article provides steps for code provided by third-party sources. Any troubleshooting with third-party applications should be handled by the application’s support team or your custom developer. You can integrate third-party widgets or ...
    • Edit Your Website's Header & Logo

      The Header & Logo settings in the Design panel lets you manage your website's logo, favicon, and edit the spacing and border of your website's Header. These are Sitewide settings, so any changes you make here will apply to every page on your website. ...
    • Embed a Switcher Video Player on Websites 360®

      You can host monetized, gated, or paywalled video content on your website by creating videos on Switcher. Videos uploaded to Switcher can be placed on your website with an embed code. To get started, sign up for a Switcher account at this link, and ...
    • Add Facebook (Meta) Pixel to Websites 360®

      You can measure the success of your Facebook Ads performance by adding the Facebook Pixel (also known as the Meta Pixel) to your website. Create your Facebook pixel If you have not yet created your Facebook Pixel, then follow these steps. If you ...