标签： widgets-and-sidebars

Assigning Widget Areas To Sidebars

Avada offers both single and dual sidebars. Sidebars can be assigned globally (same sidebars sitewide) or individually (different sidebars per page or post). Avada includes a powerful set of options to achieve this. Please read below to understand where sidebars can be used and how to assign them globally or individually.
IMPORTANT NOTE: Sidebars are containers that accept widget areas. You must first create a widget area and assign widgets to it before you can assign it to a sidebar. To learn how to create widget areas and assign widgets, please refer to our Widget and Sidebar category linked here.Global Sidebars vs Individual Page SidebarsGlobal Sidebars – Global sidebars will override the individual sidebar options set in the Avada Page Options. You can enable global sidebars for each different sections of your site such as pages, portfolio posts, blog posts and the search results page. Use this when you want every page to show the exact same sidebar. Global sidebar options can be found in the Avada > Options > Sidebars panel.
Individual Sidebars – If global sidebars are disabled, then you can use individual sidebars when you want a unique sidebar or no sidebars on a page or post. Individual sidebars can be assigned in the Avada Page Options of each page or post.
Global Sidebar AreasThere are 10 sections of your site where you can enable global sidebars. Some of these areas require the respective plugins to be installed and activated. Continue reading below to learn about each section.
IMPORTANT NOTE: The WooCommerce Product and Archive / Category Pages options will appear only if the WooCommerce plugin is installed and activated. The same goes for the Events Calendar Posts and the bbPress Pages options. The Events Calendar plugin and the bbPress plugin must be installed and activated for those options to appear.Page Templates – All page template except for the ‘100% Width’ page template.Portfolio Posts – Single post pages that are created for all portfolio post.Portfolio Archive / Category Pages – All arch/cat pages created for portfolio posts.Blog Posts – Single post pages that are created for all blog post.Blog Archive / Category Pages – All arch/cat pages created for blog posts.WooCommerce Products – Single post pages that are created for all Woo products.WooCommerce Archive / Category Pages – All arch/cat pages created for products.Events Calendar Posts – All single posts pages created for Events Calendar posts.bbPress Pages – Any forum/topic post that is created using the bbPress plugin.Search Page – The search results page that displays when a search is performed.How To Assign Widgets To Global SidebarsBefore 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 > Sidebar 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 page templates, then go to the Options > Sidebars > Pages sub-panel.
Step 2 – You can enable global sidebars by setting the ‘Activate Global Sidebar’ option to On. This options is often misunderstood. What this option does is force the chosen sidebars on ALL instances of the relevant custom post type. For example, this will override pages where you had previously set different sidebars via the Avada Page Options. As a result of turning this option on, the Sidebars options in the Avada Page Options will be disabled. If you have never individually overridden sidebar settings on individual pages, there is no need to activate this option. The sidebars widget areas chosen in the next step will show on all pages where the Sidebars options are left at default in the Avada Page Options.
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 None.
Step 4 – 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 5 – Once finished, press the ‘Save Changes’ button.
IMPORTANT NOTE: Category and Archive pages do not have this option because they do not have individual page options like other pages.How To Assign Widgets To Individual Sidebars Using Avada Page OptionsIf you don’t want to use global sidebars and would rather assign a specific sidebar for specific pages, then you can do so using our Avada Page Options which is located in every page or post you create.
IMPORTANT NOTE: You must have Global Sidebars deactivated for your individual sidebars to appear. For example, if you’d like to assign individual sidebars for specific pages, then the ‘Activate Global Sidebars’ option under the Options > Sidebars > Pages panel must be set to Off.Step 1 – Create a new page or post or edit an existing one.
Step 2 – In Avada Builder, scroll below the main content field and find the Avada Page Options box. In Avada Live it’s one of the three tabs on the sidebar, located from the Toggle Sidebar link on the Toolbar. Here you will 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, #000000.
Step 5 – Remember to save your changes.
Single, Dual or No SidebarsAvada 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. Continue reading below for more information.

Single Sidebar – To achieve a single sidebar, assign a widget area to the ‘Sidebar 1’ option, then set the ‘Sidebar 2’ option to No Sidebar.

Dual Sidebars – To achieve dual sidebars, assign a widget area to both ‘Sidebar 1’ and ‘Sidebar 2’ options.

No Sidebars – To disable sidebars, select No Sidebar for both ‘Sidebar 1’ and ‘Sidebar 2’ options. The page will be full width.
IMPORTANT NOTE: The ‘Side Navigation’ page template can have dual sidebars. Sidebar 1 will be placed underneath the side navigation set, Sidebar 2 will be placed on the opposite side.Sidebar PositionAvada offers a sidebar position option for Sidebar 1, this can be chosen globally in the Avada Global Options or individually per page or post. The Avada Page Option overrides the Avada Global Option. Note, when set to Default the Avada Page Option is pulling from the Avada Global Options.
IMPORTANT NOTE: The sidebar position option only works with Sidebar 1. If using dual sidebars, Sidebar 2 will be placed on the opposite side of Sidebar 1. For the Side Navigation page template, the sidebar position option will affect the side navigation side, and Sidebar 2 will be placed on the opposite side.Sticky SidebarsWith Avada 5.2 and up, you 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.

Assigning Widget Areas

In Avada, you can create your own custom Widget Areas and also use our pre-made ones. Once you have populated the Widget Area of your choice with your widgets, it can be assigned to a Widget Ready Areas. To learn more about adding widgets to a Widget Area please see our corresponding doc: Adding Widgets to Widget Areas.
You can think of a Widget Ready Area as part of a page that is specifically there to display Widget Areas which have been created in Appearance > Widgets of your WordPress dashboard. Avada comes with five Widget Ready Areas. These are the Footer columns, Sliding Bar columns, Sidebars, Mega Menu columns, and the Avada Builder Widget Area Element.
The Footer columns and Sliding Bar columns Widget Ready Areas automatically have their corresponding pre-made Widget Areas assigned and display in fixed parts of the page. These will be displayed in ascending order on the front-end.
The Sidebars and Mega Menu columns Widget Ready Areas also display in fixed parts of the page, but these can have either pre-made or custom Widget Areas assigned to them. So, besides any of your custom Widget Areas you could for example also display Footer Widget 1 area in a sidebar.
Finally, the Widget Area Element is the most flexible one. It can be placed in any part of the page via the Avada Builder and can have any Widget Area assigned to it, either pre-made or custom.
Continue reading below for detailed instructions on how to assign or add Widget Areas to each Widget Ready Area, and watch the video for a visual overview.
Footer ColumnsYou can enable footer columns and select how many to display by going to the Avada > Options > Footer panel. You can display up to 6 columns on your footer. Please follow the link below to read more about assigning widgets to the footer.
Read Our ‘Adding Footer Widgets’ ArticleSidebarsSidebars are containers that accept widget areas. You can enable sidebars on different sections of your site in the Avada > Options > Sidebars panel, or on the Fusion Page Options on each page or post.
Read Our ‘Assigning Widget Areas To Sidebars’ ArticleSliding Bar ColumnsYou can enable sliding bar columns and select how many to display by going to the Avada > Options > Sliding Bar panel. You can display up to 6 columns. Please click the button below to read more about assigning widgets to the sliding bar.
Read Our ‘Sliding Bar Setup’ ArticleWatch the ‘How To Use The Sliding Bar’ VideoMega Menu ColumnsYou can enable the mega menu in the Appearance > Menus tab on your WP admin panel. You can have up to 6 columns on your mega menus. Please click the button below to read more about how to assign widgets areas to your mega menu.
Read Our ‘Using The Mega Menu’ ArticleAvada Builder Widget Area ElementYou can use the Avada Builder Widget Area Element to add widget areas to any page or post you create. You can use the widget area element with any of the column elements to format the page. Please click the button below to learn more about the widget area element.
Read Our ‘Widget Area Element ‘ Article

Avada Facebook Page Plugin Widget

One of the widgets added to the WordPress Widgets page when Avada is installed is the Avada: Facebook Page Plugin widget. This widget allows you to display your Facebook Timeline directly on your site.
Facebook have made some changes to how this is achieved, and now requires each user to create an APP ID, for the Facebook Widget to display correctly on your website. Please continue reading below for more information on how to set this up.
Adding And Configuring The WidgetThere are two ways to add this widet into your site content. The first is the traditional method, of adding the Widget to a Widget Area, like a Footer, Blog Sidebar etc. Once you add it to the desired Widget Area, you need to configure it for it to appear on the page. The first step is to add the URL for the Facebook page you want to display, and most of the other options are very simple, such as choosing what to display.
But to get the widget to disaply correctly, the most important field to fill out is the Facebook App ID. As can be seen in the screenshot below, there is a link at the top of the widget to some instructions on how to do this.
The second way is adding the Widget directly to the page using the Widget Element. This can be added anywhere in your content, and the configuration options are exactly the same as in method one.
How To Create A Facebook APP IDThe next step is to create a Facebook App ID to add to the widget.
Step 1 – Go to this link. If you’re not logged in to Facebook, you’ll be met with a login screen. If you are, you’ll see what is displayed in the first screenshot below.
Step 2 – As seen in the screenshot below, from here you can simply add a name for your App, and then click Create New Facebook App ID.
Step 3 – A dialog will appear where you need to add a contact email. Click Create App ID, and complete the Security Check.
Step 4– Add your website URL in the bottom section and click Next.
Step 5 – At the bottom of the page you will see a Next Steps section. To find your App ID, click the Skip To Developer Dashboard link.
Step 6 – You will be redirected to the app’s dashboard. Here you will find your App ID. Copy this and paste it into the Widget.

Avada Vertical and Horizontal Menu Widgets

Released back in Avada 5.3, the Avada Vertical and Horizontal Menu widgets give you greater flexibility in how to manage and control menu options for your site. The Vertical Menu Widget ‘Menu Type’ option allows you to choose between ‘Custom Menu’ and ‘Vertical Menu’ types, and the Horizontal Menu Widget ‘Alignment’ option gives you left/center/right alignment choices. Vertical and horizontal menus gives your site greater flexibility and navigation options at your visitors fingertips.
IMPORTANT NOTE: If you want to set up side navigation on your site, we recommend using the Avada: Vertical Menu Widget instead of the Side Navigation Page Template, as this will be deprecated in a future version of Avada.Overview
Avada: Horizontal Menu Widget: This section covers the information on how to use the Horizontal Menu Widget.

Avada: Vertical Menu Widget: This section covers detailed information on how to use Vertical Menu Widget and how to set up a side navigation menu.

Side Navigation Template: This section covers the information on how to set up a side navigation using the Side Navigation Template. (This option will be deprecated in a future version of Avada.),Avada: Horizontal Menu WidgetThe 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.
Configuring The Horizontal Menu WidgetUsing The Widget ElementStep 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.
Adding The Widget To A Widget AreaStep 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.
Note: To set a horizontal menu in your footer, check this doc: Horizontal Menu in Footer Widget Area, or discover the new Footer Builder in Avada Layouts.767,637 Businesses Trust Avada
Get Avada767,637 Businesses Trust Avada
Get Avada767,637 Businesses Trust Avada
Get Avada,Avada: Vertical Menu WidgetWith 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.
Configuring The Vertical Menu WidgetUsing The Widget ElementStep 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.
Adding The Widget To A Widget AreaStep 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.
Using A Custom Menu in the Avada: Vertical Menu WidgetThe 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. With Avada 5.7 and up, 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.
Using A Vertical Menu in the Avada: Vertical Menu WidgetIf 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.,Side Navigation TemplateAvada 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.
IMPORTANT NOTE: The ‘Side Navigation’ page template will be deprecated in a future version of Avada. We have replaced it with an improved and more flexible solution, the Avada: Vertical Menu widget. This new widget offers the same features but with greater flexibility. It works with the WP menu system. Please utilize this new method instead of the page template which will eventually be removed.How To Create A Side Navigation PageStep 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.