To start, just add the element into your desired column.

The General Tab is the place to choose the type of widget you want to add. Select your widget from the drop down box. The widgets you see here will depend on what plugins you have installed and active. When you choose an element, any customizable fields for that widget will appear.

Customize the widget as desired. You can also set Element Visibility in this tab, or add a CSS Class or CSS ID to the instance of the element for further customization with Custom CSS. The next step is to customize the design of the Widget. On the Design Tab, you will find a variety of styling options, from background color, radius, border and alignment options.

Read below for a description of all element options.

Global Sidebars – Global sidebars will set the chosen Sidebars on all examples of the chosen page/post type. You can enable global sidebars for each different post type on your site such as pages, portfolio posts, blog posts, and the search results page. Use this when you want every page of that post type to show the same sidebar. However, please note that you can still override the global sidebar options in the Avada Page Options on individual pages or posts. Global sidebar options can be found in the sub-tabs of the Avada > Options > Sidebars panel.

Individual Sidebars – If global sidebars are not set, then you can choose to have a sidebar or not, on any individual page or post. Individual sidebars can be assigned in the Avada Page Options of each page or post.

Force Global Sidebars For Pages – If the”Force Global Sidebar” option is enabled, it will override the Page Options (Sidebar options in the Page Options will be disabled), and will force the Global sidebars set in the Global Options to be used everywhere for that corresponding post type.

There are 10 areas of your site where you can enable sidebars. Some of these areas require the respective plugins to be installed and activated. Continue reading below to learn about each section.

Before applying a global sidebar for a section of your site, you must first create a widget area, assign widgets to it, then you can assign it to the sidebar you’d like to use as a global sidebar. To learn how to create widget areas, please refer to our Creating Widget Areas article.

Step 1 – Navigate to the Avada > Options > Sidebars panel. Select the sub-panel for the area you’re wanting to assign a global sidebar to. For example, if you want to assign a global sidebar to all of your ‘post’ post types, then go to the Options > Sidebars > Posts sub-panel.

Step 2 – Select the name of the widget area you’d like to display for Sidebar 1 and Sidebar 2. If you only want one sidebar, then set the ‘Sidebar 2’ option to None. NB. You do NOT need to turn Force Global Sidebars on for Global Sidebars to work.

Step 3 – You can also select a position for Sidebar 1. If you’re also using Sidebar 2, it will automatically be placed on the opposite side of Sidebar 1.

Step 4 – Once finished, press the ‘Save Changes’ button.

There is a critical difference between applying Global Sidebars and Forcing Global Sidebars. When you select Global Sidebars, all corresponding post types will show the chosen Sidebars, with the exception of any posts that have had a different sidebar chosen in the Sidebars section of the Avada Page Options.

When you enable Forcing Global Sidebars, this disables the Sidebars tab of the Avada Page Options for the corresponding post type and ALL items of that particular post type WILL show the Global Sidebar or Sidebars chosen in the Global Options.

If you don’t want global sidebars and would rather assign a specific sidebar for specific pages or posts, or you have global sidebars assigned and just want to override a few pages, then you can do so using our Avada Page Options which is located in every page or post you create.

Step 1 – Create a new page or post or edit an existing one.

Step 2 – Scroll below the main content field and find the Avada Page Options box. In this section, you’ll find the Sidebars tab.

Step 3 – Select the name of the widget area you’d like to display for Sidebar 1 and Sidebar 2. If you only want one sidebar, then set the ‘Sidebar 2’ option to No Sidebar.

Step 4 – Select a position for Sidebar 1. If you’re also using Sidebar 2, it will automatically be placed on the opposite side of Sidebar 1.

Step 5 – You can also choose a background color for the sidebar. Simply use the color picker interface or enter the hexadecimal code of the color you’d like to display in the ‘Sidebar Background Color’ option. For example, var(–awb-color8).

Step 5 – Once finished, click the ‘Save Draft’ or ‘Publish’ button to save your changes.

Avada allows for single, dual, or no sidebars. There are two sidebar dropdown fields that allow you to make these selections; Sidebar 1 and Sidebar 2. You can also set the position for Sidebar 1, and Sidebar 2 will automatically be set to the opposite side.

Avada also offers a sidebar position option for Sidebar 1, which can be chosen globally in the Avada Global Options, or individually per page or post. The Avada Page Option overrides the Avada Global Options. Note: when set to Default the Avada Page Option is pulling from the Avada Global Options.

You also have the option to enable sticky sidebars on your Avada site. When Sticky Sidebar is enabled, the sidebar will scroll with the content as the viewer moves down the page. For more information on using sticky sidebars, please see our post here.

With Avada Live, sidebars are managed in the same way, with the only difference being that both the Global and Page Options are available without leaving the page via the Toggle Sidebar Icon.

Also, on any existing Sidebar, you will find three icons when you mouse over the sidebar. The first one – Edit Global Sidebar Options – will take you to the Global Options in the Sidebar, while the second one – Edit Sidebar Options – will take you to the Sidebar tab on the Page Options, and the third Icon – Edit Sidebar Widgets – will open the widgets page in a new tab.

The Horizontal Menu Widget allows you to make a make a normal horizontal menu. This can be added to a page using the new Widget Element, or can be added to a Widget Area, and added to the page in one of the Five Widget Ready Areas in Avada, or by using the Widget Area Element.

Note: This widget will not show child menu items in a dropdown. All menu items will be displayed in a single horizontal menu.

Step 1 – With the Widget Element, the widgets are configured live on the page, when they are added. So, the first step is to add the Widget Element to the column you wish to display your Horizontal Menu.

Step 2 – Select the Horizontal Menu Widget from the Widget dropdown menu. A range of configuration options will appear. Configure the widget as desired. It will pull any normally created WordPress menu. You can create a menu from your Appearance > Menus section.

Step 3 – Use the Design tab for other styling options like alignment, padding, color, etc.

Step 4 – Save the Element/Page.

Step 5 – Remember, you can also configure and style the column or container the Element is in.

Step 1 – Go to Appearance > Widgets section, and drag the ‘Avada: Horizontal Menu’ widget to a widget area.

Step 2 – Select the menu you want to use. It will pull any normally created WordPress menu. You can create a menu from your Appearance > Menus section.

Step 3 – Set the other styling for alignment, padding, color, etc.

Step 4 – Don’t forget to click the Save button.

With the Avada: Vertical Menu widget, you can make a side navigation in two ways: using a Custom Menu type or a Vertical Menu type. See below for more information on these two types.

Step 1 – With the Widget Element, the widgets are configured live on the page, when they are added. So, the first step is to add the Widget Element to the column you wish to display your Vertical Menu.

Step 2 – Select the Vertical Menu Widget from the Widget dropdown menu. A range of configuration options will appear. Configure the widget as you wish.

Step 3 – You can also use the design tab to set styling, such as alignment, padding, color, etc.

Step 4 – Save the Element/Page.

Step 5 – Remember, you can also configure and style the column or container the Element is in.

Step 1 – Go to Appearance > Widgets, and drag the ‘Avada: Vertical Menu’ widget to a widget area.

Step 2 – Set a title for your widget/side navigation. You can choose to leave the Title field empty if you don’t want to display a title for this.

Step 3 – Choose a Menu Type. This has two options: Custom Menu and Vertical Menu. Each option will be discussed in detail below.

Step 4 – Set the other styling for behavior, layout, and font size. Further options are available in the Avada Widget Options.

Step 5 – Don’t forget to hit the Save button.

The Custom Menu option simply allows you to choose an already created WordPress menu. You can create a menu from your Appearance > Menus section.

After you choose Custom Menu in the Menu Type dropdown, select a menu in the Select Menu dropdown. This menu now also displays icons if they have been selected in the chosen Custom Menu.

You can now configure the Widget as you wish.

If you choose the Vertical Menu from the Menu Type option, you need to then select a parent page and this works just like the old Side Navigation page template.

When you choose Vertical Menu in the Menu Type dropdown, simply select a parent page on the Parent Page dropdown. You don’t need to select a menu in the Select Menu Option. The Vertical Menu Type draws the menu from the parent page selected. Both the parent pages and the child pages will appear on this menu. Any child pages of the child pages will show when its parent item is either clicked or hovered over, depending on the option set further down in the widget.

Note: If you have a connected set of pages in your website, you can set one as the parent page and set sub pages to be children of that parent. You can also set pages to be the children of a child page. See the screenshot below, or for more information on this, see How to Set Up Parent and Child Pages in WordPress.

Avada includes a Side Navigation page template that can be used to insert large amounts of content on a single page. You can also set up second level menu items on the Side Navigation page that will collapse by default and expand when the parent level is moused over or clicked, depending on how you set it in Avada Global Options. You create Side Navigation pages in sets. Each set always has to have a Parent page that will show at the top. Then you create additional pages and assign them to the parent page. All the pages assigned to the parent page will make one side navigation set.

Step 1 – Navigate to Pages and click Add New.

Step 2 – Input a new name for your page, then find the Page Attributes box on the right side.

Step 3 – Select Side Navigation from the page template dropdown list and click save.

Step 4 – To add more pages to the side navigation set, create another new page and select your newly made page as the Parent page, and set the Template to Side Navigation.

Step 5 – Choose to have the side navigation set on the left or right side by selecting Left or Right from the Sidebar Position dropdown field in the Avada Page Options box.

Step 6 – Menu order is set alphabetically, change it by inserting a new order for each page in the Order field.

Step 7 – Once you are done, be sure to Publish each of the pages.