I have noticed that when I only Globalise the Background Component on a page, everything else on the page becomes Globalised with it.
Are you aware that anything inside the component you convert to a global will be part of that global?
I am wondering if you are converting a component at the root level and therefore anything inside it becomes part of the global. Hard to tell without a screenshot or project — do you have a screenshot or a project you can share?
Hi Ben,
Everything on my page IS inside the Background component (see pic 1) and therefore when I globalise the Background component, everything in it is automatically globalised. I understand that that is what is happening.
But when I take everything out-of the Background component (see pic 2) and place it at the same level as the Background, the Background component does NOT then operate as a background to the whole page at all. So do I assume that for Background component to work over the whole page, everything must be inside it.
This means that I am not able to make a separate Global of just the Background Component without including everything else.
This is indeed strange because I had previously produced a fixed background by another means (see pic 3) which worked very well as a background to the whole page and DIDN"T require all the other bits to be placed inside it. This meant I was able to Globalise my background image separate from the other bits on the page. In short I was able to Globalise only the three bits I wanted (see pic 3): 1. Image, 2. Standard (this was before Menu came along) and 3. Container-Banner.
This is how I thought the Background Component would be designed to work. As it is now, I am not able to Globalise individual bits and include the Background Component
Hi @paulcruice
I’ve recorded a video explaining a little more about how you’d do this with Globals, take a look below:
We also have some more information in the Manual about using Globals.
Hiope that helps!
Dan,
That was very quick and thanks a million. It will take me some time to digest this to see how it all works.
Dan, there is a difference between what you have shown me in your video and what I am using.
For a start I don’t use a Container and fill it with a colour as you have done for a background.
I use the Background Component (on its own) with an image set as my fixed background. Isn’t that what the Background Component is meant for?
This works well but everything else on the page must be inside the Background Component for it to work over the whole page. I expected that any way.
But that means I can’t make a separate Global of the Background Component as everything in it becomes globalised. In essence, I only wanted to Globalise the first three Components as in pic 1, Background, Menu and Container-Banner.
Perhaps the correct way to do all this is to create a Background Component first before adding anything else, then Globalise just it. Then Globalise the other bits I need and add them to the Globalised Background.???
@paulcruice I use this approach for elements like the background you are using as a global. I setup the global, so that it has all of the common components, then I add a container for the unique content. I then override this container in the places where I need to add my unique content. That way it does not get added to all of the globals.
Robin,
I have done as you suggested but can’t get the rest to work the way I assume it works.
So I need to ask you, how do I make one Global of the three separate Components: Menu, Banner, and Text heading as shown in pic 1.
Do I need to put these three in a Container by themselves in order to create one Global of all three?
After this I will have some more questions but I need to solve this first.
Yes, believe you would have to put them inside a container and then convert the container to a global. You could then add the global to each page to get your menu/banner/textheader. You would add the global inside your background component given your page layout. The background could be a global if there is a reason to want to style it in the future across all the pages where you apply it.
I just did a test with the concept and it seems to work no problem. I created a background with a color and set it to “screen” for both the H and V sizes. I then dropped in the global I had created that contained the menu and banner. Finally, I dropped a container into the background below the banner to handle the content of the page.
This is what it looks like, I just threw some random components into the content container.
But I discovered there is a problem with this approach as regardless of how much content you place in the inner container, you can never scroll the page because the background is set to “screen”, it would have to be set to AUTO in order to scroll.
I’m not convinced this is the right way to go, but with Elements you can make it work.