Globals following each other?

I have set up Globals for various parts of my web site. There are eight Globals in all as per pic1.
All are Container Components except the Background Component

When I build the first page I am expecting to put each Global on the page in the order I want them and that is what happens.

However, when I go to build the second page and I place the first Global (the Background Global), I find it places on this page all the Globals I placed on the previous page. How do I stop this?

It seems to me that if a Global follows another Global on a page, it sees all these as one large Global. That doesn’t make sense.
Cheers

In my opinion there are 3 main ways to use Globals:

WAY 1: The same Global on multiple pages
When you create a Global all the components of that Global become by default integral parts of the Global, so if you place the Global on multiple pages and then modify its content on one page, those same changes will also be propagated to the instances of the Global present in the other pages.
It is an excellent solution when you want to have the same page section present in multiple pages, because if you need to make a change this will then propagate to all the other pages, without having to manually modify each section.


WAY 2: The same Global on multiple pages but with different content/properties of the components inside it
If you have a Global, which you want to remain structured identically in all the instances you place on the pages (and by “structured” I mean with the same components inside it positioned in the same way) and you only want to change the content/properties of some components inside it, then, for each property you want to change, you must first click the small Unlink icon (see first screenshot). That icon is only present in the components inside a Global and is used to make that instance independent from the Global. So, for example, if you want to change the size of a Text component in a single instance of the Global, you will have to select the Text component and click the Unlink icon of the Size property.
In the same way you can change any other property of the component.
However, all the properties that are changed exclusively in-page are an exception (such as the text content of a Text component, you change the text directly on the page and not from the Inspector panel). For these properties you must open the first section of the Inspector panel Global Overrides and highlight the property you want to modify (see second screenshot).


WAY 3: The same Global on multiple pages with a different structure
If you want to have a different structure, that is, have different components within the same Global positioned on multiple pages, then you must unlink the contents of the Container (Global Overrides section of the Inspector panel). Once the Container is disconnected from the Global, everything you modify inside it (including the addition of new components) will no longer be propagated to the instances of that Global present in the various pages.


CONCLUSIONS:
However, no one is stopping you from merging the three modes into a single Global, and therefore in the same Global you can have identical components on each page, components with only the properties modified and components structured differently.
Also remember that you can go even further, inserting a Global inside another Global.


FEEDBACK FOR @dan
You could consider coloring in a different way from green (for example magenta) those components of a Global to which at least one property has been disconnected. In this way, when we move the mouse hover the Global, it is immediately clear which components have been modified within a Global.


1 Like

Hi Massimo,
Unfortunately your response has missed my point completely. All that you have written, I understand. Perhaps if you reread my post you will discover my issue.
Perhaps one of the Dan’s could venture a thought.
Cheers.

Ops! Sprry.

Ops! Sorry.

Can you show a screenshot of your node browser so we better understand what you are asking??

From what you describe, I understand that to be that you place your globals in the background global, the result of which would update the background global to include all the other globals you have, which would describe the behavior you are seeing. You have changed the background global to include all of them.

Is that the case, or is it something different??

3 Likes

Yes Steve, that is exactly the situation. All the other Globals are INSIDE the Background Component. See Pic1.

I need to put them INSIDE the Background if I want the Background Component to act as a background for the whole page. Perhaps there is another way of achieving this that I am not aware of?

To me a Background should act over the whole page irrespective of the position of other components. That is why it is called a Background. That is how I have experienced a background in other programs. Otherwise BackgroundComponent in Elements is just a fancy way of adding angled backgrounds to a page.
I don’t need a special Background Component since I can create a background out of ANY other components. See pic 2 where I have used an Image. Note the Image is on the same level as all other Components.


Mind you it is a bit tricky setting the AspectRatio Settings to achieve this. See Pic3.

In Elements it seems for the Background to work over the whole page all other Components must be INSIDE the BackGround Component.

I don’t see the intuitiveness of calling it a Background.
Cheers.

Before you place anything else in the Background component, you need to click the global override button in the component settings, that way you won’t change the global.

Once you set it to override, you can add what you want, without changing the global and getting the result that you are seeing.

On my own site, I just have a container that I use for background and a few other settings (set as a Global). I throw that down, then click the override switch and then throw the rest of the page together.

See the post from @Massimo above for a more detailed explanation, particularly Paragraph 2.

Thanks Steve, that works for me.
However, it would be nice if the Background Component Global override switch could be turned on prior to making the Global, so that the override is already on when the Background Component is placed on the page. The idea being that all this is done at first set up and doesn’t have to be remembered to be turned on after placing the Global.
Cheers.

Aloha Paul, you can already simulate something like what you want.

Drag your background global onto a page, then turn on the Global Overrides. Now copy the global and paste it on all of the pages where you want to use it. The Global Override will already be activated so you can now go ahead and add your content.

This is something I do all the time with globals so I don’t accidentally change the global if I forget to turn on the override.

1 Like

Thanks Robin. Good technique. Much appreciated.
Cheers, Paul

1 Like

In the end I found out that I wasn’t wrong at all. :rofl:

3 Likes