How to Create a Custom Footer

With OceanWP, you can easily create a custom footer with Elementor or any other page builder for free, and display it on your website.

Follow the below steps to do it.

Did you know?

With OceanWP, you can create as many custom footer templates as you like, and apply them to pages, posts, products and other options individually and totally independently from your Global (Customizer) Footer settings.

This feature is free. See OceanWP Metabox Settings Footer options for more information.

1. Create a New Template

Go to WordPress dashboard and create a template for your footer in your WP Dashboard, OceanWP > My Library (old settings: Theme Panel > My Library), eg, Custom Footer.

Create custom templates for your OceanWP theme using the My Library option

If you're using Elementor to create your custom footer template (or any other template you would like to link through your theme, like a custom header), make sure the template format is using Elementor Canvas.

Set template format to Elementor Canvas

2. Insert Content in This Template

Add any content you want to display in the Footer area.

If you're using Elementor or the page builder you're using supports WordPress widgets, you can use OceanWP legacy widgets like Custom Links, MailChimp,  About me, Contact info, Custom Menu, etc (Appearance > Widgets).

If you are using Elementor and Ocean Elementor widgets (part of the OceanWP Pro Bundle) or OceanWP Elementor widgets from Ocean eComm Treasure Box, you'll have many more dedicated Elementor widgets to use to perfect your custom footer template design (or any other design).

Most importantly, using OceanWP custom Elementor widgets will simplify the entire design process.

3. Apply the Custom Template to the Footer Area

Once you've published the footer template you want to use, it's time to apply it to your website.

Navigate to Appearance > Customize > Footer Widgets and from the Select Template option under the Custom Footer Widgets section, select the template you built in Step 1.

apply custom footer in WordPress

3.1 General Advices for Custom Footer Template Usage

There are a couple of things that might handy to you when using a custom footer template in combination with your OceanWP theme:

  • Fixed Footer: We assume you won't have pages with a merely one sentence on them, so you can leave this feature disabled. This feature will function with the custom footer as well, if really necessary.
  • Parallax Footer Effect: This feature will function with a custom footer template.
  • Footer Columns: this feature will not function with a custom template. Obviously, you'll be choosing the number of columns inside the template alone.
  • Heading Tag: this feature will not function with a custom template. Obviously, you'll be adding heading and textual elements on your own, thus applying the desired H tags to those elements directly.
  • Enable Container: whether you will use the Add Container feature or not, depends on your design. The Add Container option, when enabled, ensures your footer template is exactly the width you chose for your website (see Customize > Site Style & Settings > Site Layout, Main Container Width). In simple words, your custom footer will have side margins (left and right) applied to it.
    • If, for example, on your custom footer template you chose the Boxed option for sections (Elementor example) without adding any custom width to it, you can enable the Add Container option.
    • If, for example, on your custom footer template you chose the Boxed option for sections (Elementor example) but added a width which is wider than your Main Container Width (website settings) or you chose Full Width, you can disable the Add Container option.
  • Padding: you can use this option in combination with your custom footer template. If you already applied padding inside the custom footer template itself, you can set all Padding values to 0 (zero). If you apply Padding, then you also need to ensure you set the Background Color to match the background color of your template.
  • Colors: When using a custom footer template, then only the FW Background option will function. Obviously, you'll apply all other colors (text, links, etc) within the template design directly.

Friendly advice:

Do not use Elementor's Stretch Section option with your templates, as it might cause unnecessary flickering or other effects on page load (like shrink then stretch).

If you want to display the custom footer in Full Width (edge to edge) on your website, just disable the Enable Container option.

That's it!

Happy website building!

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.