Add a Logo or Image to Footer

Add a Logo or Image to 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.

 

Add a new image

After logging into your dashboard, navigate to the content Content panel, then click on Footer under the Global Content sidebar.

Screen_Shot_2020-01-13_at_2.32.49_PM.png

 

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.

Screen_Shot_2020-01-13_at_2.34.35_PM.png

 

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.

Screen_Shot_2020-01-13_at_2.59.57_PM.png

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

Screen_Shot_2020-01-13_at_2.38.03_PM.png

 

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. 


Screen_Shot_2020-01-13_at_2.46.17_PM.png

 

First, delete the placeholder text in between the parentheses ("") following . 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.

Screen_Shot_2020-01-13_at_2.51.14_PM.png

 

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.

Screen_Shot_2020-01-13_at_2.59.00_PM.png

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:

Screen_Shot_2020-01-13_at_3.02.33_PM.png

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.

 

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 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.

Screen_Shot_2020-01-13_at_3.21.35_PM.png

 


    • Related Articles

    • 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 easily integrate third-party widgets ...
    • Add Social Icons to Footer/Stylize Icons

      You can add social icons to your footer so that visitors have easy access to all your social media outlets. To do this: 1. Select the Content tab in the gray navigation bar, and then select Footer on the right-hand side of your pages, under Global ...
    • How to Rearrange Items in the Footer

      You can add many footer elements to your website's footer, including your business' contact information or social icons. Additionally, you can add some custom footer elements including an image or third-party widgets such as a review or chat ...
    • Add a Link to an Image

      1. Upload an image to your Image or Image Gallery block. 2. Next to the uploaded image, select the Hyperlink icon. 3. Click the field inside the Link box. A list of all of your web pages will appear, choose one or enter an external URL. 4. Select the ...
    • Edit/Add Content Blocks in Footer

      Certain content blocks are not available within the footer. To see what content blocks are available: 1. Access your Footer under the Content tab (Footer is available under the Global Content sidebar on the right). Here, you can edit your Footer with ...