How To Edit Custom Code Using Dev Mode & Layers?

Dev Mode and Layers on Wix are essential tools if you’re someone who wants to take a peek at the backend of their website and make some changes.

These functions allow the users and developers to dive deeper and explore further on your website.

One of the significant functions that Dev Mode has is Layers. The Layers page shows you all the elements of your page and selects elements so that you can work with them.

So, how can you use Dev Mode and layers to edit a custom-coded part of your website? Let’s find out.

How To Edit Custom Code Using Dev Mode?

Once you’re on the web page of your website where you want to make the edits, turn on layers so that you can quickly identify the elements. Now, let’s get going.

1. Turn on the Dev Mode

2. You might see the codes popping up in the section below.

3. Turn on Layers under the Tools section on the left.

4. Choose from the elements listed under layers in the layers menu.

5. Select the layer you want to work on

6. To avoid confusion and make the edits clearly, hide the rest of the layers and keep the layer that needs work unhidden.

7. The unhidden layer will pop up. You can make the edits such as changing the text, images, gallery settings, and much more now.

8. Once the changes are made, make sure you unhide the rest of the layers and preview your changes.

Dev Mode & Layers: A Powerful Wix Combination

Dev Mode is a powerful tool Wix has to offer its users.

It allows you to custom code certain elements on your website, even if you’re partially proficient in coding. Wix Velo is a powerful development system within the Wix platform and allows users with a little bit of coding experience to experiment with their codes.

Most of the elements in layers aren’t visible to any naked eye when it comes to layers.

Hence, while developing or making edits to your Wix website, it is always recommended to turn on layers. This lets you keep your edits organized and perfectly aligned with how you want your website to look.

Working With Layers & Elements in Dev Mode

Layers & elements give you a ton of freedom and control over the Editor environment on your Wix website.

The bonus of working with layers is that when you select an element in the Layers panel, it also gets selected in the Properties panel. This enables you to work on the properties of every layer without making too many edits and moving around.

Since most of the elements in the Layers panel are showcased based on the ID you give to them in the Properties panel, you can quickly identify them and sort them out from the rest. Moreover, the added advantage of Dev Mode while using layers also gives you two added benefits:

• It was temporarily hiding an element.

• Highlighting a specific element using the Spotlight element, allowing you to focus on one element at a time

As we saw above, getting acquainted with Dev Mode has its own set of benefits. So, the next time you’re working on the Layers, feel free to turn the Dev Mode on.