Global Content in page body on every page. How to and sample file - UPDATED FOR GLOBAL PAGE

General Discussion
1

Hi all, I had a situation where I needed to add small contact form on every page, or most pages in the body of the page for a large website. The situation I have is that it could change from time to time, if it does then I have to change it manually on every page.

I know there has been discussion and asking about global content in page body, so I thought I’d share the solution I’ve come up with to deal with this, it may be useful for folk until global content is implemented in Blocs in the future.

Basically, you create a bloc of content in the footer and hide it. You then add a div container wherever you want in your body and it will display the hidden content from the footer there.

These are the steps:

  1. Add bloc in footer, set padding to none across all breakpoints, start Small it will cascade up to all breakpoints.

  2. Add Div Container in the bloc. Add content in this Div.

  3. Add a class to this Div, in this case it is global-content-1, in this class set Visibility to hidden when finished.

  4. Add a Bloc and Div in the body of your page. Give this Div a unique ID that will not be used elsewhere. In this case it is content-display-1

  5. Add a bloc in the footer. Again add padding across all breakpoints as none.

  6. Add a code widget in this bloc.

  7. Copy and paste the javascript in to this code widget.

Javascript:

<script>
document.addEventListener("DOMContentLoaded", function() {
  const globalBloc = document.querySelector('.global-content-1');
  const placeholder = document.querySelector('#content-display-1');

  if (globalBloc && placeholder) {
    placeholder.innerHTML = globalBloc.innerHTML;
  }
});
</script>

Remember if you go mad with global content, it is loading on every page in the footer and just hidden so will increase your page size.

I might try looking at whether I can get the global content to go on it’s own non-indexed page and be brought in so it isn’t heavy on the footer, but for the moment this works for me.

Sample file with this I’ve just knocked up to demonstrate below.

Enjoy

Ben

Global Content Test.bloc (119.3 KB)

2 Likes
2

Have you tried creating a PHP file with the info you want & then calling it with a PHP Include script… presumably through Code Widget?

<?php include("contentYouWant.php"); ?>
1 Like
3

That’s a cracking idea, I’ll give that an experiment also. Thanks.

In fact that might be a solution to a different problem I have with an interactive iframe that I’m wrestling with and content I’m trying to trigger from an external source…

4

I’ve updated this significantly, the global content is now on a seperate non-indexed page. In the sample file the page is in the menu so you can get to it, but ordinarily you don’t have it in the menu.

The global content bloc is no longer in the footer, so makes each page lighter, instead it calls it in from the what will be hidden content page.

The code widget for the javascript doesn’t go in the footer on every page, only in the page where you want to use the global content, again make all pages lighter.

You can modify the code to use different blocs of content.

True global content straight out of the tin using Blocs IDs and a bit of javascript.

Edit away with the global content Bloc on the global content page and try different things.

Global Content Page Test V2.bloc (209.8 KB)

1 Like
5

Thank you, @SpookyDoo :smiley:
I am always in learning mode, so I can’t wait to have some fun trying to figure this out.

1 Like