The OpenStreetMap Element is a parent and child element, which allows you to place a single, or multiple, pins on a map.

The Children tab contains the individual items, while the other tabs are Parent Options, and affect the whole series of info items. You can start either by adding Child items or customizing the parent options. These cover the functionality and style of the element as a whole.

To edit the child items, go to the Children tab and click the pencil icon to edit the existing item. The Child Item Options Panel appears. The main options here are the longitude and latitude fields, which place the pin on the map. You can also search for a specific address, but the Longitude and latitude will always be the most accurate. When a pin is active, you can also drag its position around the map, and you can customize the pins and add labels and more details.

If you want multiple pins on a map, you can then duplicate existing, or create new, content boxes by clicking on the Clone Item icon, or the + Add Marker button respectively.

On the General tab, you set the size and zoom level of the map, and determine which controls will be available to the user. There is also a Design tab, for further customization, and an Extras tab for Element animation.

Read below for a detailed description of all element options.

The Circles Info Element is fully featured, with five tabs, and each item has three tabs for individual customization. To get a good idea of how to use it, watch the video at the top of the page, but to begin, simply add the Element into your desired column.

The Children tab contains the individual items, while the other tabs are Parent Options, and affect the whole series of info items. This element has a plethora of options.

You can start either by adding Child items or customizing the parent options. These cover the functionality and style of the element as a whole.

To edit the child items, go to the Children tab and click the pencil icon to edit the existing item. The Child Item Options Panel appears. Note that you can override a large number of element options here, customizing the individual items. At the bottom of the Child Options, you will find the Content field, where you add the content for the individual items.

You can then duplicate existing, or create new, content boxes by clicking on the Clone Item icon, or the + Content Box button respectively. Once you have completed your Circles Info Element, remember to save your changes.

Read below for a detailed description of all element options.

The Table Of Contents Element can be added to blog posts, pages, or documentation, as has been done here. It’s simple to configure and might just be that organizational element you were looking for. You could also add it to a Layout Section for it to work automatically on any content displayed by the Layout.

The General Tab is the place to set the Title, accepted headings to use, and any limits the Table Of Contents should use. Then, of course, there is a design tab, so you can customize the typography, margins and padding, and colors of the Table of Contents.

The Animations found in the Extras Tab can also be used to animate the entry of the Table of Contents onto the page, with eleven animations to choose from.

Read below for a detailed description of all element options.

The Stripe Button Element allows you to add a Stripe payment button anywhere on your site. There are two aspects to using this element. Connecting your Stripe account, and adding and customizing the button itself.

The General Tab is the place to set the links, button text, alignment, and other practical options. Here, for example, you can set the Payment Success URL and the Payment Cancel URL, as well as the Button text and alignment.

The next step is to set the Payment options for the Button, including setting the API Mode. See the Stripe Button global options to connect your Stripe account. On this tab, you can also set the product name, price, currency, shipping, tax rate etc.

The next step is to set the Design options for the Button, including the colors and style.

The Animations found in the Extras Tab can also be used to animate the entry of the button onto the page, with seven animations to choose from.

Read below for a description of all element options, and watch the video at the top for a visual overview of using the Stripe Button.

While the Container Element is mostly independent, some of its features do rely on other factors on your site, such as your Site Width and the Page Template used. The Container Element enables the background color, image, or border to span 100% of the site width or the browser width, depending on the Page Template it’s being used on.

Another new feature for Containers and Columns is Responsive Option Sets. You can see the Responsive Icons at the top right in the below image of the Container Element. Just note, that this feature is only available on the new Flexbox Containers, and not on Legacy Containers.

Please see the Responsive Option Sets documentation for specific details of this awesome new feature, but in short, it allows you to change what screen size you want certain option values to be valid for, and allows you to have up to three individual option sets for the included options. You will also see a screen icon on the individual options that are a part of this feature. A simple example of how this feature might be used would be to enable different container margins or column widths on mobile view, as opposed to the tablet or desktop view.

When adding a new page, whether in Avada Builder, or Avada Live, you are always greeted with the Starter Page, as seen below, which leads you into the process of adding a container. Simply click on the Add Container button, and you can then choose from the full range of Container layouts to add to the page. This can be an empty Container, but much more usefully, it can include any combination of Columns as well.

On an existing page with content, adding a new Container is equally simple. As seen below, in Avada Live, you just hover over any Container Controls and click on the Add Container Icon.

In the back-end interface of the Builder, as seen below, the Add Container Button is found at the bottom of every existing Container.

In both cases, this brings up the Select Container dialog, as seen below. Simply select the Container / Column combination you’d like to add and the new Container will be placed directly below the Container you inserted it from.

Once you have added your Container, and have Columns inside it, you can begin to add content via the Avada Builder Elements. But do not neglect to explore the Container itself. It can also play a huge role in your page layout. By editing the Container Options (through the pen icon on the Container toolbar) you access the Container Options, which are very powerful, and can help you achieve a wide range of layout scenarios. Read on below to see the full list of Container options.

Inside the Container Element options, you will find 4 tabs – General, Design, Background, and Extras. Because of the amount of options you can set for the element, we’ve split them into these four logical tabs, so you can easily locate the option you’re looking for. Continue reading below for a full description of each tab, and the options within them.

NB. Please note that the screenshots here show ALL Flex Container options, (achieved in this case by Photoshop magic, but normally by turning the Avada’s Option Network Dependencies options off in Advanced > Theme Features) and so may look different to your initial options panel. This option is on by default and only shows various options when they relevant options are enabled. For more information on this important feature of the Avada Options Network, please see the Avada’s Option Network Dependencies document.