I have a component that has a link element in there. I want to change the link URL in all my instances to various different URL’s, but no matter what I do, changes I make to the instance using the builder are not reflecteded in the front end. it just keeps referencing the main component and does not behave as an instance.
I was doing some troubleshooting, heres two quick videos with explanations:
In short by text:
I couldn’t reproduce issue with lightbox of components, if you can try again and if you run into problem, we can see what is an issue.
You shouldn’t load 3rd party scripts or css files through embed on your page, iframes are fine.
When tag has two classes, one on main component, and one added to instnace of component. In this case ‘color-dark’ which was set on important, and then on instnace if you set ‘color-red’ which is also important, deciding factor which one is stronger is which one is newer in the system. So I gave you a explantion how you can style color through attribute in this case.
Links are by default display:inline, so they don’t respect width property until set to block or something else.
Let me know if you have any more questions, and sorry for delay with answer
Thanks a lot for this super in depth response @Pakic. All clear.
I did figure out what was going wrong with the components and the changing of the link url. It is that when I select a component, let’s say it is the 2nd instance of that component that appears in the page, what happens is that on the left in the layers panel it scrolls up to the 1st instance of the component. If I then click on a layer by name on the layers panel, I am now editing the 1st instance and not the 2nd instance that I thought I was editing.
The behaviour of scrolling up to the 1st instance of the component was confusing to me and I think it makes it fiddly to edit components.
You can see that behaviour in this video I recorded: