How to Add Images to the Footer Copyright area

Tutorials  Since: 1.1 Last Updated: Layers ver. 1.2.2 Time to Read: 3 minutes

Adding images to the footer is useful if you want to display a small logo, download link, accepted payments or partner badge next to the copyright text. There are a couple ways to do this depending on where you want the image to appear, and whether you need it linked.

To add images to any of the Footer Widget areas, search for and install the Image Widget plugin.

Difficulty: Easy

  1. Upload your image to your Media Library. When complete, click the Edit link and copy the File URL from the right side
    • Small images work best, no larger than 40px tall
  2. Go to LAYERS → CUSTOMIZE
  3. Click on FOOTER to expand the panel
  4. Add a simple image tag to the Footer Text field. Example:

To link the image, wrap it in a link tag:

Difficulty: Easy

  1. Go to LAYERS → CUSTOMIZE
  2. Click on Footer to expand the panel
  3. Click on Customization to expand the panel and click Select Image in the Background Image option.
  4. Upload or select your image and click Use Image
  5. Select No Repeat and Bottom. This will center your image in the footer text area.

Adjusting position of the image

If you want to manually adjust the position of the background image, click the back button in the Customizer nav and click CSS to expand the panel. Enter the following, then adjust the percentages as desired. The first percentage moves the image left or right, the second moves it up or down, with 100% being the very bottom of the screen. For example, 50% keeps it centered, but moves it up in line with the copyright text.

Difficulty: Moderate

If you are looking for an easy way to get Social Link icons in your footer (or any menu location), Layers Pro allows you to select icons from the Custom Link tab of the Menu customizer (Customize → Menus or Appearance →Menus) The following explains how you can otherwise set custom classes on a menu link and then use CSS to add a custom image.

  1. Go to Appearance → Menus
  2. Edit your footer menu or click create a new menu
  3. Click Screen Options in the upper-right of the screen and ensure CSS Classes and Link Target are checked
    • menu-screen-options
  4. Click the Link panel on the left to expand it, and add your custom link.
  5. On the right side under Menu Structure, expand your link to view the detailed link options
  6. In the CSS Classes field, enter a custom class name, such as my-link . 
    • custom-link
    • Check the Open link in a new window/tab if your link is not to a page on your own site.
  7. Repeat for any other links you wish to add to your footer menu.
    • You only need to add a CSS class for links you want to replace with images.
    • Each class name must be unique.
  8. Under Menu Settings, ensure the Footer Menu is checked and Save Menu when ready
  9. Upload your image to your Media Library. When complete, click the Edit link and copy the File URL from the right side
    • Small images work best, no larger than 40px tall
  10. Go to Layers → Customize
  11. Click on the CSS panel to expand it. The following will walk you through constructing a basic style for setting an image as your link.

To begin, create a basic style with your link’s custom class, then set the background image as your uploaded image.

You’ll probably notice your image is cut off and has the link text overlapping it. Add a line below the background-image line (before the closing bracket!) to set the background-position and background-repeat.

Now set a height for the link so your image sits nicely. This should be equal to the height of the image.

You should have something resembling this:

custom-link1

To get rid of the text, you can either remove it in the link itself in your menu manager, or add a negative text-indent to the style. Negative text indents are considered a hack so it is best to just remove the link label.

Here is an example of this in action with a second normal page link in the same menu.

custom-link2

If you want to keep the link text, but have it sit next to your image, add some padding instead of an indent:

custom-link4