Display / Rename IDs in Studio Editor

Ask the community
,
1

Question:
In the Studio editor, I see that I can select “Display IDs” in the Layers panel, and then I can rename these IDs as I see fit. But it doesn’t appear the IDs are actually changed on the front-end when inspecting. Am I misunderstanding how this should work?

Product:
Wix Studio Editor

What are you trying to achieve:
To better target sections & elements for applying styles, it would be very helpful to have intuitively-named IDs. I know I can add classes, but an ID would give me more specificity and shows up right in the layers panel. So just seems to make sense in certain circumstances.

So I tried renaming a section ID to ‘#hero-section’, and this shows up in the Layers panel. But when I inspect the section in the front end, it still has some random ID applied of ‘#comp-kbgaghri’. Not only is this less intuitive, but it just seems randomly generated, which makes me wonder if it might change arbitrarily at any point, rendering any custom styles invalid.

  • If those IDs don’t get applied to the section or element they’re attached to, what’s the point of them?!? Why would I be able to rename them?!?

NOTE: We are still on the free plan while we build out the site. Could this be the cause?

2

Those IDs are intended for use in Velo and allow for elements to be selected.

For example:

let myElement = $w("#myElement");

You can read more here - https://dev.wix.com/docs/velo/api-reference/$w/$w

In regards to adding CSS to Wix Studio, I’d recommend taking a look at this article which goes into more details - Studio Editor: About CSS Editing | Help Center | Wix.com

3

Hi, thanks for the reply!

That’s too bad that the ID’s are only for javascript reference, and can’t be used for CSS. I think this is a missed opportunity to make things simpler and more intuitive. On many platforms, the ID that javascript would use to target an element would be the same ID that CSS could use, as it would be the rendered ID on the front-end. Seems odd that these ID’s would only be useful in the back-end.

I know I can add similarly-named custom CSS classes to each element, but this is a lot of extra work and seems redundant. Then have to remember to use the ID for JS & class for CSS.

I do have another question (see here) regarding not being able to target specific CSS classes on particular elements.

Thanks for the tips. Trying to get up to speed on best-practices for fully customizing & optimizing things in Wix Studio after decades on other platforms…

4

These are great insights - will be happy to share with the team.

My experience is limited to within Wix Studio/Wix :sweat_smile: but I tend to find my CSS classes apply to multiple elements, whereas my element IDs are unique for each element for use with javascript.

That being said, I can also see how it might be less intuitive.