Add a Logo or Image to Your Footer

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


How to add images or logos to the bottom of a website

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:

  1. <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 and Edit Social Icons in the Footer

      You can add social icons to your footer so that visitors have easy access to all your social media outlets. Add social icons to footer 1. Select the Content tab in the gray navigation bar, and then select Footer on the right-hand side of your pages, ...
    • 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 ...
    • Image Tool Tabs

      Our Image Collection allows you to edit image information with great detail. Each image has a Details, SEO, and Tags tab that allows you to modify the information for surface-level information, as well as SEO-level information. Here are a bit more ...
    • Social Media Icons in Navigation

      The liveBooks website editor allows users to easily and seamlessly integrate social media outlets to their website. To add them to the navigation area, follow these instructions: 1. Select “Content” tool in the gray navigation bar. 2. Select “Add New ...
    • Add Image Information and Meta Data to Photos

      Note: Image file metadata (from photoshop, lightroom, etc) does not auto-import into the image’s Title, Description, Tags or Photo Credit fields of the image details. This data must be manually entered via the website editor. Adding information to ...