标签： widgets-and-sidebars

Avada Widget Options

Widgets can be styled via the ‘Avada Widget Options’ button and can be applied to every widget available. Please continue reading below to know more about the widget styling options.
IMPORTANT NOTE: When using the new Widget Element, the Design tab contains the equivilant options. See more on the Widget Element doc.How To Use Avada Widgets OptionsStep 1 – Navigate to the Appearance > Widgets section.
Step 2 – Simply drag and drop the widget you’d like to add into your chosen widget area. Another way of adding widgets to widget area is by clicking the widget and choosing from the list of the widget areas that will show up. Then, just click Add Widget button.
Step 3 – Click the ‘Avada Widget Options’ button. Every widget available has this ‘Avada Widget Options’ button, see an example of the Recent Comments widget on the screenshot below. Please refer to the below post to know more about each of the options.
Step 4 – Make the necessary selections. Then, click ‘Save’ button.
Step 5 – Don’t forget to save the widget too.
Avada Widget OptionsIMPORTANT NOTE: These options apply to the widget container, not the actual widget.Display Widget Title – Choose to enable or disable the widget title. Specifically useful for the WordPress default widget titles.
Padding – Controls the padding for the widget container.
Margin – Controls the margins for the widget container.
Background Color – Controls the background color for the widget container.
Background Radius – Controls the background radius for the widget container.
Border Size – Controls the border size for the widget container.
Border Style – Controls the border style for the widget container. Choose between None, Solid, Dotted, or Dashed.
Border Color – Controls the border color for the widget container.
Divider Color – Controls the color of dividers in this widget container. Leave empty for the Theme Options default value or no dividers when using the vertical menu widget.
Content Align – Controls the content alignment for the widget container. Choose between Inherit, Left, Right, or Center. Inherit means it will inherit alignment from its parent element.
Mobile Content Align – Controls the mobile content alignment for the widget container. Choose between Inherit, Left, Right, or Center. Inherit means it will inherit alignment from it’s parent element.
Learn More About Widgets Here

Creating Custom Widget Areas

Avada allows you to create an unlimited number of custom widget areas. These widget areas can be assigned to several areas of the site such as the sidebars, footer columns, sliding bar columns, mega menu columns, or placed anywhere on a page using the Fusion Builder Widget Area Element. To learn more about the differences between pre-made and custom widget ready areas, please refer to this article. Please follow the steps below to understand how to create a custom widget area.
How To Create A Custom Widget AreaStep 1 – Navigate to Appearance > Widgets and click the ‘Add New Widget Area’ button. Give it a name then save it. You can add as many widget areas as you need.
Step 2 – Once created, you’ll see your new widget area on the right side.
Step 3 – On the left side, you will see all the widgets you can use.
Step 4 – Simply drag and drop the widget you want into your widget area. You can then customize the widget to your liking.
Step 5 – You can rearrange the order of widgets on a widget area by simply dragging the widgets to place.
Step 5 – Make sure you click the ‘Save’ button to save the widgets added to your widget area.

Flickr Widget

Most of the widgets that come with Avada are the default WordPress widgets do not require any setup. Some of our custom Avada widgets have various options, but all are self explanatory. However the Flickr widget is unique in that they require account setup to display correctly. Please read below for information no how to set each of the Flickr widget.
How To Setup The Flickr WidgetStep 1 – Go to the Appearance > Widgets in your admin section.
Step 2 – Find the Flickr widget and drag it to a sidebar or footer column of your choice.
Step 3 – Click on “Get Your Flickr ID” link, http://idgettr.com
Step 4 – Then enter your username in place of username in the field and click “Find” and it will generate your ID.
Step 5 – Copy and paste the new ID into the corresponding field of the Flickr widget in the admin section.
Step 6 – The default API key will already be filled in and it will work, but if you wish you can also generate your own by clicking the “Flickr App Garden” link.
Step 7 – Make sure you click Save, then you’re all done!

Pre-made vs Custom Widget Areas

Avada includes 5 areas of the theme that are widget ready (which means they can display widget areas). Some of these areas already have pre-made widget areas for you to add widgets into, such as the Footer Widget Areas, the Sliding Bar Widget Areas, and the Blog Sidebar. Other areas do not have pre-made widget areas and can display both pre-made widget areas, or any custom widget area you create.
Read below for further information on the differences between pre-made and custom widget areas, and the 5 Widget Ready Areas in Avada.
Pre-Made vs Custom Widget AreaPre-Made Widget Area – Pre-made widget areas are already created widget areas for certain areas of the theme. Therefore, you don’t need to create a widget area for them, you can simply add widgets to the pre-made widget areas directly. The footer columns and sliding bar columns both have pre-made widget areas based on the number of columns you choose to display. You can set how many columns to display for the footer in the Avada > Options > Footer panel, and in the Avada > Options > Sliding Bar panel for sliding bar.
Custom Widget Area – Custom widget areas are widget areas you can create yourself in the Appearance > Widgets tab on your WordPress admin panel. These custom widget areas can be assigned to sidebars, mega menu columns and the Avada Builder widget element. In addition, sidebars, mega menu columns and the Avada Builder Widget Element areas can also take pre-made widget areas if you wish.
The 5 Widget Ready Areas in AvadaFooter Columns – Footer columns have pre-made widget areas based on the number of footer columns you choose in the Avada > Options > Footer panel. See our Adding Footer Widgets article for more information.Sliding Bar Columns – Sliding bar columns have pre-made widget areas based on the number of sliding bar columns you choose in the Avada > Options > Sliding Bar panel. See our Setting Up The Sliding Bar article for more information.Sidebars – You can assign widget areas to both single and dual sidebars. See our Assigning Sidebars article for more information.Mega Menu Columns – You can assign widget areas to mega menu columns. See our Using The Mega Menu article for more information.
Fusion Builder Widget Area Element – You can assign any widget area to any page or post using the Fusion Builder Widget Area element. Simply add the element to your page, then select the widget area you wish to display from the dropdown menu. See our Widget Area Element article for more information.

Sidebar Responsive Order

IMPORTANT NOTE: This feature is only available in Avada 5.7 or higher.Sidebar Responsive Order in Theme OptionsWith Avada 5.7 and up, we have a useful feature to better control sidebars when in responsive mode.
Via the Sidebar Global Options, found at Avada > Options > Sidebars > Sidebar Styling, you can now set the Sidebar Responsive Order. This allows you to choose the order of the main page Content, as well as the Sidebar 1 and Sidebar 2 content, when in responsive mode. For example, you may wish to reorder the options, so that Sidebar 1 content is always displayed above normal content in responsive mode. This is achieved by a simple drag and drop interface. The settings are directly connected to the Sidebar Responsive Breakpoint, as found at Avada > Options > Responsive > Sidebar Responsive Breakpoint, so you can fine tune exactly when they kick in.
Sidebar Responsive Order in Page OptionsAs well as setting the global order of Sidebars in responsive mode in the Global Options, there is also the option to override this on a page by page basis, by choosing the responsive order in the Avada Page Options, as shown below.

Sidebars In Avada

Sidebars are vertical columns for displaying information, separate from the main content of the web page. Avada offers both single and dual sidebars. Sidebars can be assigned both globally (same sidebars sitewide) or individually (different sidebars per page or post). The Avada Website Builder includes a powerful set of options to achieve this. Please read below to understand where sidebars can be used and how to assign them both globally and 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 Widgets Documentation.OverviewGlobal Sidebars vs Individual Page Sidebars
Sidebar Areas
How To Apply Global Sidebars
How To Force Global Sidebars

How To Apply Individual Sidebars Using Avada Page Options

Single, Dual or No Sidebars
Sidebar PositionSticky Sidebars
Sidebars In Avada Live,Global Sidebars vs Individual Page SidebarsGlobal 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.
IMPORTANT NOTE: Should you need to set a different sidebar for specific pages/posts at some point, then the recommended setup would be to set global Sidebars in the Theme Options, and leave the “Force Global Sidebars” option set to Off. For all pages/posts that should use the sidebars set in Theme Options, make sure the sidebars are set to “Default” in the Page Options. For the pages/posts you want an individual override, set the sidebars to what you prefer in the Page Options.767,635 Businesses Trust Avada
Get Avada767,635 Businesses Trust Avada
Get Avada767,635 Businesses Trust Avada
Get Avada,Sidebar AreasThere 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.
IMPORTANT NOTE: The WooCommerce Product and Archive / Category Pages, Events Calendar, and bbPress/BuddyPress options will appear only if the WooCommerce, The Events Calendar, and the bbPress plugins are installed and activated, respectively.Pages – All page templates except for the ‘100% Width’ page template.Portfolio Posts – Single post pages that are created for all portfolio posts.Portfolio Archive / Category Pages – All archive/category pages created for portfolio posts.Blog Posts – Single post pages that are created for all blog posts.Blog Archive / Category Pages – All archive/category pages created for blog posts.Search Page – The search results page that displays when a search is performed.WooCommerce Products – Single post pages that are created for all WooCommerce products.WooCommerce Archive / Category Pages – All archive/category pages created for WooCommerce products.Events Calendar – All single post pages created for Events Calendar.bbPress/BuddyPress – Any forum/topic post that is created using the bbPress plugin.,How To Apply 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 > 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.
IMPORTANT NOTE: Category and Archive pages do not have this option because they do not have individual page options like other pages.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.,How To Force Global SidebarsThere 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.,How To Apply Individual Sidebars Using Avada Page OptionsIf 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.
IMPORTANT NOTE: Sidebars options in Avada Page Options will be hidden if the ‘Force Global Sidebars’ option is set to ON, so you must deactivate it for your individual sidebars to appear. For example, if you’d like to assign individual sidebars for specific pages, then the ‘Force 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 – 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, #000000.
Step 5 – Once finished, click the ‘Save Draft’ or ‘Publish’ button 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.
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 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.
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 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.,Sidebars in Avada LiveWith 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.

Sticky Sidebars

With Avada 5.2 and up, you have the option to enable sticky sidebars on your Avada website. When the Sticky Sidebar is enabled, the sidebar will scroll with the content as the viewer moves down the page. Once the bottom of the sidebar enters the viewport, it will become stationary and stay in place as the viewer scrolls down to the bottom. If the sidebar is already shorter than the content of the page, it will begin as a sticky sidebar and remain fixed on the screen as the viewer scrolls down the page.
For more information on Widgets Sections and Sidebars in Avada, see our post on Assigning Widget Areas to Sidebars.
Enabling Sticky Sidebars Site WideYou can enable the Sticky Sidebar feature for all sidebars on your site globally, through the Avada Global Options. You’ll find this setting in Avada > Options > Sidebars > Sidebar Styling. You can enable the Sticky Sidebar effect for “Sidebar 1”, “Sidebar 2” or select “Both” to have the effect on both right and left sidebars when using a dual sidebar layout.
Enabling Sticky Sidebars Per Post or PageIf you want to have a variation for a post or page from how your site’s sidebar behaves globally, you can use the Avada Page options to make adjustments that will affect only that post/page. These settings will override whatever you have set in your global options.
To find these settings, open the editor of the post or page you’re working on, and then navigate to the Avada Page Options (at the bottom of the page with Avada Builder, and in the Sidebar in Avada Live). Check under the Sidebar tab to find the Sidebar’s settings.
Select Sidebar 1: This setting is where you can choose which Widget Area to assign to the page’s sidebar. Details on the differences between Widgets and Widget Areas can be found here.Select Sidebar 2: This is optional and can be used to select the Widget Area for your page’s second sidebar, if you’re doing a dual sidebar layout.Sidebar 1 Position: This is where you can select the position of the primary sidebar. Choose between Left, Right or Default which will use your Global Options setting.Sticky Sidebars: This is where you can select which Sidebars on the page will be sticky when scrolling. Choose None if you want to have your sidebar(s) behave normally. Choose Default if you want to have the global behavior as set in the Global Options. Choose between Sidebar 1 or Sidebar 2 to be sticky respectively. Choose Both for both sidebars in a dual sidebar layout to be sticky.

Twitter Widget

The Twitter widget is available to use on any Sidebar, Widget Area or Widget shortcode. The Twitter widget comes in 3 styles, the Twitter Preconfigured Style (Deprecated), Twitter Style, and the Avada Style. Each style has it’s own setup instructions and options. Continue reading below to learn more about the new Twitter widget and the available styles.
IMPORTANT NOTE: The Twitter Widget’s ‘Twitter Preconfigured Style’ option is deprecated due to Twitter’s recent update. This style will be removed in an upcoming version update.Twitter Widget StylesTwitter Preconfigured Style – This style is deprecated and will be removed in an upcoming version update.. This style will only work if you’ve already created a twitter widget using Twitter’s old Widgets Configurator.
Twitter Style – This style will only import your tweets. You have to set the different options found under this style to customize your Twitter widget.
Avada Style – This is the classic Avada style. It requires you to create a new app via http://apps.twitter.com/. You will then be requested to enter a few Keys and Access Tokens.
How To Use ‘Twitter Preconfigured Style’ StyleIMPORTANT NOTE: The ‘Twitter Preconfigured Style’ option is deprecated and will be removed in an upcoming version update.This style was specifically for Twitter’s old Widgets Configurator page. It’s now been replaced with the Twitter Publish page. For the time being, you can continue using this style, if you’ve already created a widget using Twitter’s old Widgets Configurator page.
How To Use ‘Twitter Style’ StyleStep 1 – Navigate to the Appearance > Widgets tab on your WP Admin Sidebar.
Step 2 – Add a new Twitter Widget into your chosen Widget Area.
Step 3 – In the ‘Widget Style’ option, select Twitter Style.
Step 4 – Enter your Twitter Username into the provided field, then customize the widget’s styling as you’d like.
Step 5 – Once finished, click ‘Save’.
How To Use The ‘Avada Style’ StyleStep 1 – Navigate to https://developer.twitter.com/en/apps and sign in with your Twitter account.
Step 2 – Once you’ve logged in, click the ‘Create New App’ button.
Step 3 – Fill out the required fields. You can leave the ‘Callback URL’ field empty.
Step 4 – Don’t forget to check the ‘Yes, I agree’ checkbox in the Developer Agreement window. Then click the ‘Create Your Twitter Application’ button.
Step 5 – In the top section, click the ‘Key and Access Tokens’ tab. Then you will see the Consumer Key and Consumer Secret. To receive your Access Token and Access Token Secret, click on the ‘Create My Access Token’ button.
Step 6 – Copy and paste each of those items along with your Twitter username into the corresponding fields in the Twitter widget in the Appearance > Widgets tab.
Step 7 – Once finished, click ‘Save’. Please wait 10 minutes for the changes to take effect. This is due to Twitter’s cache.

Widgets vs Widget Areas

It’s very important to understand the difference between a widget and a widget area. Please see the below information to help understand the difference between the two.
Widget – A WordPress Widget is a small block that performs a unique function. Avada includes several custom widgets such as the Avada Twitter widget, Avada Social Links, or the Avada Recent Work widget. In addition, there are several default widgets that WordPress includes such as Recent Posts or Recent Comments, and additionally, other plugins can add their own widgets. Widgets can go inside a widget area, and with Avada 6.2 and up, can also be placed and edited directly on the page using the new Widget Element.
Widget Areas – A Widget Area is a container that holds widgets. Avada includes 2 pre-made widget areas (footer columns, sliding bar columns) and also allows you to create custom Widget Areas which can be applied to the 5 widget-ready areas of the theme. It’s a great way to customize your site.

Adding Widgets To Widget Areas

In addition to the default widgets WordPress offers, Avada also includes a wide array of custom widgets. Third party plugins, such as WooCommerce, The Events Calendar etc, may also add useful widgets.
All widgets are found in the Appearance > Widgets tab, accessed from the WordPress dashboard. There are various customization options and fields for each individual widget. You can add as many widgets as you want to a widget area. Please read below for information on how to add widgets to widget areas, and watch the video for a visual overview.
How To Add Widgets To Widget AreasYou can add widgets to any widget areas displayed on the right hand side of the Widgets page. Before you can add widgets to custom widget areas, you must, of course, first create the custom widget areas. To learn how to create custom widget areas, please see our Creating Custom Widget Areas article. Once that’s done, you can then assign widgets. Each widget has their own options, which you can customize once you assign them to a widget area.
Step 1 – Navigate to the Appearance > Widgets to access the list of widgets and widget areas. The left hand side shows all the widgets you can use. The right hand side shows all the different widget areas you can add widgets to.
Step 2 – Simply drag and drop the widget you’d like to add into your chosen widget area on the right hand side.
Step 3 – To rearrange widgets in a widget area, just drag and drop the widgets into the order you’d like. Alternatively, you can click on the Widget, choose the Widget Area you’d like to assign it to from the dropdown list, and then click on Add Widget.
Step 4 – When finished, make sure to click the ‘Save’ button in the widget editing box to save your changes.
IMPORTANT NOTE: Once you’ve created widget areas and added widgets to them, you can then assign them to different areas of your site. Please see our Assigning Widget Areas article.Widgets Area Overview