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
  • Part 2: Upload the image
  • Part 3: Add the formatting code
  • Part 4: Preview and edit
• Making further edits to your footer image(s)
  • Adding multiple images to your footer
  • Changing the size of your footer images

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:

   <img src="img_icon.jpg" alt="footer logo" style="width:100px;height:100px;">

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 <img src= (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.

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.