Buy me a coffee

Add a Section to top of Portfolio (Use Not Linked Page)

Add A Section To Top Of Portfolio Use Not Linked Page 05 Min

By default, you can edit each portfolio page and add a section to the top, but if you need to add the same section to the top of all pages, you can follow these steps:

#1. First, you add a Blank Page in Not Linked with Name/URL:

  • Name: Portfolio Top Section
  • URL: /portfolio-top-section

Add A Section To Top Of Portfolio Use Not Linked Page 0.1 Min

Next, design the page layout to what you want, here is an example.

Add A Section To Top Of Portfolio Use Not Linked Page 01 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 this code to the Portfolio Page Header Code Injection

<div data-wm-plugin="load" data-target="/portfolio-top-section"></div>

Add A Section To Top Of Portfolio Use Not Linked Page 02 Min

#4. Add this code to the Custom CSS box

div.wm-load-container {
  display: none;
}

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

#5. Add this code to the Portfolio Page Header Code Injection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
document.addEventListener('wmSectionLoader:loaded', ({detail}) => {
  if (detail.target !== '/portfolio-top-section') return;
  $('div.wm-load-container').insertBefore('body.view-item article>section:first-child');
})
</script>
<style>
.wm-load-container+section {
    padding-top: 0px !important;
}
body.view-item div.wm-load-container {
  display: block !important;
}
</style>

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

Result

Add A Section To Top Of Portfolio Use Not Linked Page 05 Min