So what’s different about a Local Development Environment. Well, just about everything. In our context, this is simply a local Avada install that can be registered, so you can add plugins, import prebuilts, run the Setup Wizard, and generally play with and explore Avada.

This is set up on your computer, and is a development sandpit so to speak, where you can play and explore without the content ever being intended to go live.

With a single license of Avada, you can not only run your live site but it also supports an associated staging site for your convenience. How you use the Staging Site is of course up to you.

For example, if you see a particular design feature on one of the prebuilts, you can just import that prebuilt, and see how it’s built. With Cross domain copying, you can even just copy and paste the feature to your live site.

Another huge benefit is being able to use the Avada Setup Wizard. You can create a new site and explore how the Setup Wizard creates multiple Layouts and Layout sections, how it creates and populates WooCommerce shop pages, and how it uses a range of post cards to display the dummy content on the features selected. This alone is a solid reason to have a local development area.

So in a nutshell, a local development area gives you the freedom to fully explore and learn the ins and outs of what Avada can do. You can’t easily do these things on a live site or a staging site.

In many ways, its good to have all three. A live site, a staging site, and a local development area. In that way you can have your live site, a gold standard method for updating, and a local environment to explore and learn.

Let’s look at the Editor User Role to see what options can be set. The same options are on all user roles; the only difference is what options are enabled.

The Editor role has the most access of all the user roles. As can be seen below, only access to the Avada Global Options, the Avada Prebuilts (Avada > Website) and Avada Studio is off by default.

With most sections you can enable or disable dashboard access, as well as enabling or disabling the Backend or Live Builder, as well as the Page Options.

With this powerful tool at your disposal, you can set your user access permissions to whatever you like, protecting the integrity of your website.

There are a few typical places you will need to use Z-index when building a website. A common example would be anytime you have overlapping content, like images. Menus are another common example where a Z-index can really come in handy. This could be a sticky menu, a mobile menu, a drop-down sub-menu, or mega menus. In all these situations, we want the menus to be on top. Let’s use these as examples as to what the Z-index can do.

In the example below, there are two images in a column, and I have overlapped them by manipulating the margin values on the second image. The later in the DOM, the higher the element’s stacking, and so the second image is above the first. But with a Z-index value, you can decide which image should be on top.

So if we edit the first image and head to the design tab, we can set a z-index of say 100.. and it is now on top. The number just has to be high enough to place the element above the other one. See below for more on the Z-index numbers.

As noted before, there are many situations with menus where using a Z-index can come in handy. Whether it’s a sticky menu or a container holding a menu with dropdown menus, the concept is the same.

With menus, the best strategy is to make sure the container holding the menu is above everything else. For example, with this header layout section shown below, there are both submenus and mega menus, and we always want them to be above the content below.

So here, we just go to the holding container, and on the design tab, set a very high Z-index to ensure the container, and its content, stay on the top.

So here, we just go to the holding container, and on the design tab, set a very high Z-index to ensure the container, and its content, stay on the top.

When it comes to the number you use for a Z-index, there are no arbitrary rules. A negative value will place content below anything that has a higher value, and a very high value will place the content above everything else. Theoretically, you could use a value of 1 to place something above something else that has a value of 0. But in reality, there are a lot of elements in the dom, and it’s perhaps easiest to use a standard numbering system.

One way to do it is to add the z-index in steps of 100. This gives plenty of room for values in between in case you later have to add another element above one item, but below another.

Another method, when wanting to add something to the very top is to use a very high number like 9999, as an ‘absolute top ever value’. In the end, you just need a higher value than the content you want to be below it, so just experiment your way forward.

OK, that’s the Z-index in Avada. Go wild!