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.
Add a new image
Step 1: Navigate to Footer
After logging into your dashboard, navigate to the content Content panel, then click on Footer under the Global Content sidebar.
Step 2: Create a new HTML block
Scroll to the bottom of the page and click on the green (+), then select HTML to create a new HTML block.
Step 3: Upload your desired image
Once the HTML box is created, click on Insert Image. If the image you want is not already in your image library, then select Click here or drag images here. Then, click Add Images.
Your image link will populate on the first line of text in the HTML block, as shown in the image below.
Step 4: Copy this code
First, 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;">
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.
Step 5: Cut and paste image link into code
First, delete the placeholder text in between the parentheses ("") following <img src=. Next, highlight your image link (the text in Line 1 of your HTML block), 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.
Step 6: Save and preview
Click Save. Next, scroll to the top of the page and select Design this content to preview how it looks.
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 Content panel by clicking the Pencil icon in the top-right corner. Then, drag the HTML block by clicking and holding the three lines on the top-left corner of the block, as seen below:
In addition, you can also change the layout of the contents of your footer by adjusting the number of columns on the right sidebar in the Design panel.
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 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.