Buy me a coffee

Gallery Section in Footer

If you want to add Gallery Section in Footer, you can follow these steps. Here I will use a custom plugin.

#1. Create a Page in Not Linked with name/URL

  • Footer Gallery – /footer-gallery

Gallery Section In Footer 01 Min

Next, add a Gallery Section to this page.

Gallery Section In Footer 02 Min

#2. Install this plugin

The plugin will give you some code to add to the Code Injection Header and footer, like this.

Add A Section To Top Of Blog Posts Use Not Linked Page 03 Min

Add A Section To Top Of Blog Posts Use Not Linked Page 04 Min

#3. Add a Code Block to Site Footer (last section) > Paste this code

<div data-wm-plugin="load" data-target="/footer-gallery"></div>

Gallery Section In Footer 05 Min

#4. Add this code to the Custom CSS box

/* fix gap under footer */
.wm-load-container {
    display: none;
}
footer.sections .wm-load-container {
    display: block !important;
}

Gallery Section In Footer 06 Min

#5.1. If you want the Gallery Section to appear above the Footer, use this code to Code Injection – Footer

<script>
document.addEventListener('wmSectionLoader:scriptsLoaded', () => {
  const container = document.querySelector('.wm-load-container[data-target="/footer-gallery"]');
  const footerSection = document.querySelector('#footer-sections')
  footerSection.insertAdjacentElement('afterbegin', container)
});
</script>

Gallery Section In Footer 07 Min

Result:

Gallery Section In Footer 08 Min

#5.2. If you want the Gallery Section to appear under the Footer, just change this text to beforeend

Gallery Section In Footer 09 Min