I am wondering how to make a few linked components, for example few colored div elements with linked color so I can easily change one div and make all divs changed in one step.
Exactly! That is working fine right now in BSS, BUT. I also need to use entire page as a template. So I want co duplicate whole .html page and THAN change my div colors with linked components, but ONLY on that duplicated page.
As for now, linked components are linked across whole project, but I need to duplicate page with independent linked components inside each page. So I want to use ONE template page with linked components, duplicate this page and change linked components within the page, but not within the whole project.
Summary:
I will create page-A.html
There will be a few linked elements
I will duplicate this page (page-A-copy.html)
I will change one of the linked element here (page-A-copy.html)
The changes will affect ONLY linked components on this page (page-A-copy.html)
The original (page-A.html) will keep the original linked elements, but not related to page-A-copy.html linked elements
If I understand correctly, you wish every page to have its components linked only within that page? Maybe this will do what you need:
Duplicate page-A.html as page-A-copy.html
On page-A-copy.html, right click each of the linked components and choose “Unlink”.
Delete all but one of these components.
Copy the one remaining component and paste it as linked.
Unfortunately these steps will need to be repeated every time you duplicate the page.
I think we can make this easier in the future. We can add a “Link” option if you make a multi selection of components that are exactly the same. So you will be able to select all components, right click, “Unlink” and then “Link” to turn them into a separate linked group. We could even add a “Relink” option that does both steps, but I doubt users would be able to figure out what it does.
thank you for your message. Unfortunately, I tried to do this way earlier, but with about 20 linked components on each page this way is very time consuming to do it manually. I did it rather via CSS selectors and saved some time, but with linked components it will be much more user friendly as I want to provide those templates to other people which are not much code friendly.
I think it should be something like a Global link and a Local link. Global linked components works on entire project, local linked components work only within a page they are on.
Global linked components are linked to original ones when you duplicate page with them.
Local linked components are not linked to original ones when you duplicate page with them, but stays linked to each other within the new page.
It will be very nice if you decide to add this feature:)
If I’m understanding this correctly, here’s another option:
Create Template page with no linked components to start with
Duplicate any components on the page that you want to have multiple styles for
Always keep one of each of the components on the Template page that you want to use with NO linked component setting, so you can duplicate that as needed.
Alter one of the duplicated components as you want to use on another page and use that to Paste Linked.
This way you have always an Unlinked component to duplicate from so you never have to worry about unlinking 20 components on every page and it serves as a good Template for your components and/or styles.
Hopefully I explained that well, let me know if not or if you need something other than what I’m thinking you need.
thanks for the idea. But in my case, this doesn’t make it easier I think.
Imagine that you have 20 div elements on the page with 20 % padding inside. All are linked. So only thing what i have to do is to change the padding in ONE div. But if I duplicate whole page, I need to use different padding here (because here will be different logos inside those div elements). And as they are all linked, it is not possible to have 20 % padding on the original page and for example 40 % padding on the duplicated one. I have to unlink and relink them manually and thats what causes my problem.
I solved this via CSS, but I want to build solution for non CSS friendly users so they duplicate page, select one random div, and change padding for all elements on that page. But the original page will stay the same.
If there will be Local linked components, user just replace the logos and set the new width here from 60 % to 45 % and affect all the 20 logo previews. Bud the original page will stay with 60 % image width because there are logo with different proportions.
Right after that, the user will duplicate this page again and set logo width to for example 30 % because their logo proportions change to square ones as they replace them with logo symbol:
SO as a user, I only need to replace my logo and set a proper width for one of them. And the changes will affect ONLY logos on particular page. The original page will stay as it is.
Hope this helped to explain my use case:)
There are some real examples:
Page A:
Page A copied and logo (and width of the logo) changed, but they should stay linked inside this page via Local link feature that doesn’t exists now:)
Yeah there is no way to do this at this time where it won’t affect the original page’s links. This is because there really is no “default” page of links in this app. Once you add links, you can link new ones from any of the pages that have that link, it doesn’t have to be from a specific page. So if you change it on any page, it will change all of the links on all pages that are connected to that link.
I can’t see even my idea working well with what you need. I truly don’t know any app that can do what you need really.
The only possible thing you can do is pretty much what Martin suggested. Unlink the component before you make changes to it. That would actually not be hard nor all that time consuming for the end user. Just tell them what to do, it’s a right click and a choice for each component they want to change.
The thing “You” can do to help would be to separate your components as much as possible. In other words, Don’t make the full header into one linked component. Do the logo, then do the nav, etc. all separately, this way they can turn off linked for one part instead of full header, as needed.
That’s about all I can think of that you can do for now. It’s really not as tedious as it sounds, and you can create multiple types of components for them to use and they can just delete the ones they don’t want etc. Shouldn’t be too difficult even for those not real good at website design.
I recorded a video with linked span elements so I can write my title once and it automatically rewrites breadcrumbs etc.
BUT when I copy this page and use it for another logo, it rewrites the original one. Its the same problem as I mentioned above with colors, padding etc.
Is there aby way to prevent linked elements only on a current page please?
As already mentioned, the only way to do that is to remove the link on each of the linked components.
Martin did say they would look into the possibility of adding a way to remove links from all selected components so you don’t have to do it one at a time, but for now that’s all you can do.
Although you would miss any changes made to the linked page, you could also keep a copy of this page you’re unlinking for any future pages you don’t want linked. There aren’t any real great ways around this unfortunately, and it’s pretty much the same in most apps I’ve used that have Linked Components or Library setups etc.
Not sure how that works, so I’ll take your word for it.
For me though, right clicking and unlinking before changing is the current ideal method. Good luck an hope that takes care of your issues until Martin gets the multi component unlinking in.
