In email options, field names within square brackets can be used as placeholders which will be replaced when the form is submitted, ie: [email_address]. For more information check out our Form Placeholders doc.

Watch the Notifications section of the How To Use Avada Forms by clicking on the video below.

Or for a short step by step example of setting up an auto-reply notification, watch the Avada Short below.

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.

To use this feature, you will need Avada 7.11.10 and above. It is available in both the Live Editor and the backend Builder. It works, as usual, through the right click context menu. This feature copies data to the OS clipboard, using the clipboard API which is the standard method of copying data between websites.

Different browsers have different approaches to this because of security management. On WebKit browsers, such as Chrome and Safari, cross-domain copying and pasting will usually work out of the box, meaning nothing has to be activated in the browser settings.

If you want, you can enable or disable copying permissions by clicking on the site information icon in the address bar, and resetting the Clipboard permission.

When you want to copy, the current browser window and tab have to have focus on page load. Usually, that will be automatically the case, when you load the editor. In some cases though, you could have dev tools open and do something there, then click reload through the keyboard shortcut. In that case the browser considers devtools to have focus and not the page window.

When you load a site in one of the editors for the first time after installing 7.11.10 or up, you will see a popup, asking for your consent for text and images to be copied to the clipboard. Just allow that, and this will be stored for that website, so you don’t have to do this again.

If you want, you can enable or disable copying permissions by clicking on the site information icon in the address bar, and resetting the Clipboard permission.

In Firefox however, it’s a bit different, as here, the clipboard API has to be enabled. In order to do so, just type about:config in the address bar. A risk warning will appear – just accept it.

Then type asyncClipboard in the search bar, which will yield 3 settings. ClipboardItem and readText will likely already be set to true by default, so one would expect that the feature is auto-activated.

But testing.asyncClipboard also needs to be set to true, and this is false by default. So just click the toggle icon for the value to be set to true. Once this is done, copying and pasting will work, after you reload your page.

So once your browser is on board, you can just copy and paste as normal. Below on one domain, I have right clicked on the container icon and selected Copy.

And then on another I have right clicked and selected Paste Before. The container is then pasted into the page. The differences you see here are due to the color variables and fonts being different on the two sites.

Let’s start with what is the simplest strategy, that also uses minimal content in the header. This is simply to have a logo and a mobile menu on all screen sizes. The easiest setup for this is two one half columns, one with an Image Element displaying the logo, and the other with a minimized version of the Menu Element. Examples of this are the Barber prebuilt, the photography light prebuilt, and the music prebuilt.

If we look at the barber prebuilt, there is also a WooCommerce Cart icon next to the main hamburger menu icon, but there is ample room on all screen sizes for the content to stay as it is.

But even here, there are responsive options as play. In this prebuilt, the designer has in fact used different column sizes on all three different screen sizes, which has the effect of controlling the size of the logo, as it is an SVG logo and can scale without loss of quality.

A different approach is to make completely different headers for large screens and medium/small screens. The e-bike prebuilt for example, uses two containers for large screens and another one entirely for smaller screens, using conditional rendering to control which ones get used where.

This approach can also be seen on the Energy prebuilt. On this prebuilt, the header container that renders on desktop devices, via device type rendering logic, is completely different to the header container that renders on tablets and phones.

One of the most common approaches to responsive header design however, is to simply have the main Menu Element collapsing to a mobile menu on either medium or small screens. This can be seen on many of the prebuilts, including the Classic, Restaurant, Taxi, Creative, and Wedding prebuilts, as well as many others. This is a solid strategy and works in almost all situations.

Here on the Wedding prebuilt, the header is in fact at the bottom of the screen, due to a full screen Avada Slider being added above it in the page options, but only on large screens.

With medium screens and below, the header is back at the top, and the menu has reduced to a mobile menu instead.

This approach can also be taken with side headers. Prebuilts like the Cafe, agency and Resume do this, with a side header on desktop, reverting to a top iconised header on smaller screens.

This is achieved by setting the Header Position to Left in the Layout Section options of the header layout section, and setting the Side header breakpoint to medium.

So on medium screens, the header reverts to the top, and via the menu element, the mobile breakpoint set on the mobile tab kicks in and the menu collapses to a mobile menu.

A more complex strategy that generally also includes the above method is when items progressively disappear as the screen size gets smaller, and potentially also change size and order.

A couple of examples of this are the Financial Advisor, Pet Supplies and Retro Prebuilts. This is usally achieved with the visibility option on the column holding the element.

If we look at the Retro prebuilt as an example, on desktop there is only one header with five separate elements visible, but on medium screens, there are only three, and on small screens, just two.

Finally, another great strategy, which is also seen on the Retro prebuilt, as well as on quite a few of the more recent prebuilts, is the use of an Off Canvas to use as the primary navigation in responsive situations. This approach can be found on the Investment, Corporation, Business, and Magazine prebuilts just to name a few.

On the Magazine prebuilt for example, on large screens there is a main menu, and an icon triggering an off canvas as well. But when we view the site on a smaller screen, the main menu disappears, and the off canvas now also acts as the main navigation.

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!