詩語，作者 Avada 文件 - 第 37 頁共 79 頁

Font Awesome Pro Integration

Back in Avada 5.8, we introduced the much-requested feature of Font Awesome Pro integration. If you have opted for a Font Awesome Pro subscription, you can now get access to the full range of FA Pro icons to use on your site.
The Font Awesome Pro subscription includes a lifetime license for the icons and toolkit, plus yearly renewable access to new icons, software updates, services, and hands-on support. Read on for more details!
Enabling FontAwesome ProTo start using Font Awesome Pro, you just need to turn the feature on, and make sure your website is white-listed in your FontAwesome Account.
To start with, navigate to Avada > Theme Options > Advanced > Theme Features, and look for FontAwesome Pro. You can also just search for it in the Options search bar. Turn this to On and Save the Theme Options.
Whitelist DomainThe next step is to whitelist the domain of the website you』ve just added Font Awesome Pro to. Go to the CDN section of your Font Awesome account to do this. You can add up to 30 sites.
Choose Your SubsetsYou can also choose which Font Awesome icon subsets you want to load. You can add Light (Font Awesome Pro only), Solid, Brands and Regular. If you have FontAwesome Pro enabled, and all subsets turned on, you will have 7,020 FontAwesome icons available to you!
FontAwesome v4 CompatibilityThe final FontAwesome options allows you to enable or disable support for FontAwesome 4 icon code format. This is useful in the case where you might have some older FA4 icons handcoded in a site, for example something like:
Copy to Clipboard 1 Without FA4 compatibility, the old icons would not be displayed. If you are sure you don』t have any, you can leave this off.

Page Templates

Avada includes five Page Templates that you can choose from. Each Page Template caters to a specific situation. Page Templates are accessed on the right-hand side of the page in Avada Builder, or in the Settings tab of the Avada Page Options in the Sidebar, in Avada Live.
Page Templates
Default – This page template uses the Site Width that you』ve set in the Avada Global Options.

100% Width – This page template allows you to display parts or all of your content in full browser width. This is a very versatile template, however you can not assign sidebars when using this template. See the separate document on this template.

Blank Page – When you use the Blank Page template, the header and footer will be removed.

Contact – The Contact page template is useful to build a quick Contact Page with a Contact Form and an optional Google Map. If you prefer, you can also build a Contact page manually. For more information, please view the How To Build A Contact Page In Avada video.

Side Navigation – This is the Side Navigation page template. This template will be removed in a future version of Avada. Please see this document for more information.
Learn More About The 100% Width Page TemplateHow To Select A Page TemplateStep 1 – Create a new page or edit an existing one.
Step 2 – On the right side of the page, you』ll find the 『Page Attributes』 box. In Avada Live, you will find this by clicking the Toggle Sidebar Icon on the Toolbar, going to the Avada Page Options Tab, and choosing the Settings sub-tab. Here, all the page options that are on the right hand-side of the page in the back end are listed, including the page templates.
Step 3 – Under the 『Template』 option, choose your desired Page Template from the dropdown field. View screenshot here. To learn more about what each page template is for, please refer to the section above.
Step 4 – Once finished, click 『Save Draft』 or 『Publish』.
Missing Page Templates?IMPORTANT NOTE: In Avada 5.0, we removed the Portfolio and FAQ page templates.With the Avada version 5.0 release, we decided to deprecate the Portfolio and FAQ page templates due to redundancy. To create portfolio or FAQ pages, please use our Portfolio Element and our FAQ Element. These Elements provide more in depth options and flexibility when building your page. If you』d like to read more about this change and why we decided to do this, please click the button below.
Learn More About The Deprecated Portfolio & FAQ Page Templates

How To Use Dynamic Content Options in Avada

From Avada 6.1 and up, you have the ability to utilize dynamic content sitewide. This new Dynamic Content System takes flexibility to a new level.
Denoted by the database icon in the Avada Builder, you can now add a variety of dynamic content to your posts, pages, and other custom post types. The most important benefit of this is how this can transform your design. With this new feature, you could, for example, choose any regular post and recreate a new layout that is truly unique in structure and composition. Read on for more information about this exciting new feature!,Overview
What Is Dynamic Content

Adding Dynamic Content

Case Study #1

Case Study #2,What Is Dynamic Content?Dynamic Content is content that is stored in your website』s database which is then dynamically generated and displayed on a post or page. Possible examples of dynamic content include the website title, tagline and logo, page names, post titles, featured images, post IDs, timestamps and excerpts. Dynamic content can also come from custom content created using custom fields.
The whole point of using dynamic content is that if the content is then updated in the back-end, the content on the front-end is automatically updated to reflect those changes. You can also use a post or page with dynamic content as a template for other posts or pages, as the dynamic content is not specific to that page, but rather is pulling certain items from the database, and so on a different post or page will show different items.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Adding Dynamic ContentYou can add dynamic content in Avada Builder anywhere you see the Database icon:
This is found in options where you can add content. Titles, text blocks, images, content areas in content boxes etc. It』s all about replacing static content with dynamic content. The whole point of dynamic content is that it can pull data directly from your database. So for example, if you give a post a dynamic title, if you update the post name at any point, the title on the page will be updated automatically.
The dynamic content options are contextual, so that on a blog post, portfolio item, or WooCommerce product, you will see options relevant for those specific custom post types, while on an image, you will only have relevant options for images. The dynamic content can also come from custom fields, which opens a world of possibility. So, if you had ACF plugin installed and had set image inputs, they would also be shown as an option for an image.,Case Study 1Let』s look quickly at the Influencer Demo, where Dynamic Content has been added to the blog posts. As we can see here at the top of a blog post there are actually three areas with dynamic content.
The top row is actually a Nested Column Element with a 1/4 – 1/2 – 1/4 layout. In the first column, where we can see the Date, there is a Text Block Element, the content of which is pulling the Post Date. The column next to that is also a Text Block Element, which is pulling from the Post Terms Dynamic Content Type, and is showing Categories. And finally, the large image is the blog post』s featured image, inserted as dynamic content. Let』s have a look at the back end to see how this has been achieved.
Post DateTo add the first area of Dynamic Content, a Text Block Element was used. See below how the Content Area of the Text Block Element has a Database Icon, denoting that Dynamic Content can be used for that option.
As we can see in the screenshot below, the Post Date Dynamic Content Type was chosen, and the Post Published date format was chosen to display. The Format option also controls how the date displays on the post.
Post CategoriesFor the second area of dynamic content, another text block was added, and the Post Terms Type of Dynamic Content was selected, with the taxonomy of Categories. The Separator field was also filled in to control how the various categories are separated on the post. Note how there in an option for the categories to link to a term page, and also fields for Before and After text. This would be static text that would display before or after the dynamically generated content.
Featured ImageFor the image on the post, the Featured Image Dynamic Content type was selected. There are no other Dynamic Content Types for the image field here, but as mentioned earlier, if ACF was installed and an image type registered, that would also show up here.
The beauty with this setup, apart from the fact the content will automatically update if the featured image was changed, or for instance, further categories were added, is that this post content could also be replicated on another post. Then, only the actual post content below the featured image would need to be edited, as the Post Title is being pulled automically with the Page Titlebar, and the date, categories and featured image would all be pulled directly from the new post.
If we look at the back end of the post, we can easily see where this dynamic content is coming from. The post date and time section, the categories and the featured image set here will all automatically show on the page if edited. Also the tags section, while not used in this post, could also be a dynamic content area.,Case Study 2Another simple example of using dynamic content is shown below, where the Featured Image Dynamic Content Type has been added as a background image to a Container. This was added in the BG tab of the Container element, and under the Image tab, the Background Image option was populated with the dynamic content.
This is a brand new feature in Avada, and it will no doubt see further development in future versions. But even as it is, this is a very powerful feature that can be implemented in many different ways. Explore and enjoy! And if you have any issues, remember to submit a support ticket and we will be glad to help you.

Fusion Taxonomy Options For Archives

Archives can be customized with the addition of new Avada Taxonomy Options. Sliders can now be assigned to archive pages as well as header background color, header transparency, page content padding and page title bar options. Please continue reading below for more info.
Avada Taxonomy OptionsOn your archives pages such as Post Categories, Portfolio Categories, etc. (please see list below for the the other taxonomies these options are available for), you can find Avada Taxonomy Options section. See this Avada Freelance Demo example using the Avada Taxonomy Options which was set up via Portfolio > Portfolio Categories > Avada Taxonomy Options.
Slider Type – Illustrated as A. Controls the type of slider to be displayed. Choose between No Slider, LayerSlider, Avada Slider, Slider Revolution, or Elastic Slider.
Select *Slider – Illustrated as B. Controls the unique name of the slider. This option will not show up if you choose No Slider for the 『Slider Type』 option. *This varies depending on the selected slider type.
Slider Position – Illustrated as C. Controls if the slider shows below or above the header. Only works for top header position. Choose between Default, Below, or Above. Default value comes from Theme Options > Header > Header Content > Slider Position.
Page Content Top Padding – Illustrated as D. Controls the top padding of the page content in pixels. Default value comes from Theme Options > Layout > Page Content Padding.
Page Content Bottom Padding – Illustrated as E. Controls the bottom padding of the page content in pixels. Default value comes from Theme Options > Layout > Page Content Padding.
Header Background Color – Illustrated as F. Controls the background color for the header using hex code or rgba value.
Page Title Bar Background – Illustrated as G. Controls an image to use for the page title bar background. This can be set globally from Theme Options > Page Title Bar > Page Title Bar > Page Title Bar Background Image.
Page Title Bar Height – Illustrated as H. Controls the height of the page title bar in pixels. Default value comes from Theme Options > Page Title Bar > Page Title Bar > Page Title Bar Height.
Page Title Bar Mobile Height – Illustrated as I. Controls the height of the page title bar on mobile in pixels. Default value comes from Theme Options > Page Title Bar > Page Title Bar > Page Title Bar Mobile Height.
List of Taxonomies these options are available for:Post CategoryPortfolio CategoryPortfolio TagsPortfolio SkillsEvent CategoryEvent TagsFAQs CategoryProduct CategoryProduct TagTopic TagHow To Hook Avada Taxonomy Options Into Your Own Custom Post TypesIn order to have our taxonomy options added to certain or all taxonomies for a CPT, the fusion_tax_meta_allowed_screens filter can be used. The filter can be hooked on through the functions.php of a child theme or within a plugin.
Usage example:
Copy to Clipboardadd_filter( 'fusion_tax_meta_allowed_screens', 'add_taxonomy_options_to_cpt_taxonomies' );

function add_taxonomy_options_to_cpt_taxonomies( $taxonomies ) {
$taxonomies[] = 'slug_of_my_cpt_taxonomy_1';
$taxonomies[] = 'slug_of_my_cpt_taxonomy_2';

return $taxonomies;
}x 1add_filter( 'fusion_tax_meta_allowed_screens', 'add_taxonomy_options_to_cpt_taxonomies' );23function add_taxonomy_options_to_cpt_taxonomies( $taxonomies ) {4 $taxonomies[] = 'slug_of_my_cpt_taxonomy_1';5 $taxonomies[] = 'slug_of_my_cpt_taxonomy_2';67 return $taxonomies;8}

Page Title Bar Background Parallax Options

Page Title Bar background images can also have a parallax effect applied to them. This causes the Page Title Bar background image to be fixed, and so it doesn』t move as you scroll. An example of this can be seen on the Avada Spa Demo, on any page except the home page.
This option is found under Avada > Options > Page Title Bar > Parallax Background Image, and the option will show when an image is selected as the Page Title Bar background. Set Parallax Background Image to On to use a parallax scrolling effect on the background image. There is also an option for 100% Background Image, to have the header background image display at 100% in width and height according to the window size.
If building your Page Title Bars using Avada Layouts, the Parallax option would be applied to the Container holding the image (Container > Background > Image Tab > Background Parallax Option).

Image Hover Effects

There are several effects you can apply to your images in Avada Builder, and one of these is the Image Hover Effect. You can choose from None, Zoom In, Zoom Out or Lift Up. These are sleek and clean hover effects that will make your images animate dynamically when they are hovered over.
With the Zoom In effect, the image zooms in on mouseover, effectively cropping a small percentage of the image. With the Zoom Out effect, the image starts zoomed in a small amount, and zooms out to reveal the entire image when moused over. With the Lift Up effect, the image gets slightly larger all around on mouseover, as well as having a subtle box shadow applied. Reads of the Avada Documentation will be familiar with this effect, as it』s the default for all images in the documentation.
When these effects are used on images with borders, the Zoom In and Zoom Out effects have no impact on the border, but with the Lift Up effect, the Border enlarges with the image. Try them out for yourself to see how they work! Below is an example of the Lift Up effect at work, both in the image, and on the actual screenshot image, and below that, a list of all the Avada Builder Elements where the 『Hover Type』 option can be used.
IMPORTANT NOTE: Image Hover Effects are different from Image Rollover Effects for blog and portfolio items.
Gallery Element

Image Element

Image Carousel Element

Media Slider Element

Person Element

Recent Posts Element,How To Use The 『Hover Type』 OptionStep 1 – Add any of the Elements listed above to your page.
Step 2 – Find the 『Hover Type』 option and choose the hover effect you』d like to use. It』s typically on the General Tab.
Step 3 – Once finished, save your changes.

Main Menu Highlight Styles

Menus are critical navigational tools on websites, and you want your menu to be appealing and easy to use. This is where Menu Styles can play an important role. Updated with Avada 5.9, there is now an even larger range of menu highlight styles that can be chosen for adding an indicator to your Main Menu items when they are the active link, or when you hover over a menu item. Let』s take a look below for more details on each style choice.
Overview
Top Bar Highlight Style – The highlight bar is a line of variable thickness, added above the menu item on hover or when the menu item is active.

Bottom Bar Highlight Style – The Bottom Bar highlight style was introduced with Avada 5.9. The highlight bar is a line of variable thickness added below the menu item on hover or when the menu item is active, that grows outward from the center of the menu item.

Arrow Highlight Style – The Arrow highlight style was a feature introduced in Avada 5.1. It adds an Arrow below the menu items when active or hovered over. This will also add an arrow to the top of any dropdown menu items.

Background Highlight Style – The Background highlight style was a feature introduced in Avada 5.1. It will add a background color of your choice, and variable height, to the menu item when active or hovered over.

Color Only Highlight Style – The Color Only highlight style was introduced with Avada 5.9. It will add a color of your choice to the menu item text when active or hovered over.

Main Menu Dropdown Indicator – This feature was improved in Avada 5.6, with the option of having an arrow indicator next to both parent and child level menu items. This is available to all main menu highlight styles.

Vertically Position Your Main Menu – You can set your desired main menu height, then use Theme Options to vertically position your main menu in the header as needed.,Top Bar Highlight StyleYou can choose the Top Bar highlight style for your menu items in Avada > Theme Options > Menu > Main Menu. Primarily, there are three settings which affect the Top Bar highlight style. These are shown below.

Main Menu Highlight Bar Size – This setting will change the size of the highlight bar. Note: If you want there to be no special highlight effect other than the font color change, you can now choose the Color Only style.

Main Menu Dropdown Top Border Size – This setting will change the size of the top border of the dropdown menus and mega menus. Note: This is not applicable to side headers.

Main Menu Font Hover / Active Color – This setting is located on the same Theme Options panel in Avada > Theme Options > Menu > Main Menu. However, you』ll need to scroll down to the Typography settings for the menu. There you can set the hover color for the main menu items, which will also act as the color used for the highlight bar.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Bottom Bar Highlight StyleThe Bottom Bar highlight style is similar to the Top Bar Highlight Style, but with the bar underneath. This option features a smooth underline, that grows outward from the center of the menu item. The same settings will affect the positioning and style of the Bottom Bar highlight style. These are shown below.

Main Menu Dropdown Top Border Size – This setting will change the size of the top border of the dropdown menus and mega menus. Note: This is not applicable to side headers.

Main Menu Font Hover Color – This setting is located on the same Theme Options panel in Avada > Theme Options > Menu > Main Menu. However, you』ll need to scroll down to the Typography settings for the menu. There you can set the hover color for the main menu items, which will also act as the color used for the highlight bar.,Arrow Highlight StyleYou can choose the Arrow highlight style for your menu items in Avada > Theme Options > Menu > Main Menu. This effect will not appear for main menu items when using a transparent header background. However, sub-menu items will still have the lower half of the arrow effect.
This style is most effective when a slider, or page Title Bar, or other colored content sits right up to the header, or if the header itself has a colored background or image. If the header is white, and the content directly below the header is white, the arrows will not be able to be seen.
There are several settings which can be used to adjust the positioning and appearance of the main menu when using this effect. These are listed below, along with an explanation of how they affect your menu.

Main Menu Height – This will affect where the arrow starts in relation to the menu』s text. The menu』s text will be centered within its height. So if you set the height to 40px, the menu』s arrow will be roughly 20px below the text. The exact distance can fluctuate based on your specific line-height setting for the menu text. Menu height will also affect the main menu』s position in the header.

Main Menu Arrow Size – These height and width settings will only apply to the actual arrow itself. They will set the starting width of the arrow at its base and the overall arrow height.
IMPORTANT NOTE: For the arrow effect to be noticed coming off the main menu item, your menu height combined with your arrow height will need to be set high enough for the arrow to extend out below the header as seen here.,Background Highlight StyleYou can choose the Background highlight style for your menu items in Avada > Theme Options > Menu > Main Menu. The Background color will cover the whole menu item』s height as set in the Main Menu Height option seen in the example image for this section.
There are several settings which can be used to adjust the positioning and appearance of the main menu when using this effect. These are listed below, along with an explanation of how they affect your menu.

Main Menu Height – The Background highlight style will apply a background color for the active menu item. The colored area will be the total height of your main menu. Therefore, you can adjust the height of the background area with the Main Menu Height setting. A menu height that matches the logo height would look like this. A main menu height of a smaller size (in this example, 32px) would look like this.

Main Menu Highlight Background Color – You can use this setting to change the color for the highlighted background area.,Color Only Highlight StyleThe Color Only Menu Highlight style is very similar to the TopBar and Bottom Bar highlight styles, just without the bar. The main option that affects it is the Main Menu Font Hover Color, as listed below.

Main Menu Font Hover / Active Color – This setting is located on the same Theme Options panel in Avada > Theme Options > Menu > Main Menu. However, you』ll need to scroll down to the Typography settings for the menu. There you can set the hover color for the main menu items, which will also act as the color used for the highlight bar.,Main Menu Dropdown IndicatorIn Avada 5.6 and up, you have the option to choose if you want to have an arrow indicator in both parent and child level menus. In previous versions of Avada, the default was currently set to either just parent or none. This option is available on all main menu highlight styles. To set this, go to Avada > Theme Options > Menu > Main Menu.

Main Menu Dropdown Indicator – This will let you display arrow indicator next to parent level menu items, both parent and child level menu items, or no indicator. See example here.,Vertically Position Your Main Menu Using Theme OptionsRegardless of the menu highlight style that you choose, you』ll likely want the option to set your main menu height and not lose the header』s vertically centered appearance. Here we』ll show you which theme options can be adjusted to get the positioning you like best. Your main menu height will affect the distance between the dropdown menu items and the parent menu, the distance your highlight bar is from the menu item, the highlight background color filled area and the position of your main menu in general.
To adjust your Main Menu』s position in the header, follow these steps:

Step 1 – Set your main menu』s height as you want it to be. This setting is located in Avada > Theme Options > Menu > Main Menu.

Step 2 – Check your frontend with the new menu height to see how your main menu and logo are positioned in the header. If you』ve reduced the menu height, you』ll see that your menu has moved up in the header.
Step 3 – If your logo isn』t already even with your main menu, you can adjust the logo』s position in the header through Theme Options > Logo; then adjust the top and bottom margins as needed.
eg. If your logo is vertically positioned lower in the header, you』ll want to reduce the logo』s top margin. If you have a low menu height, try starting at 10px of top margin and adjusting further as needed. The amount needed will vary depending on your logo image』s and Main Menu』s height.Step 4 – Now that your main menu and logo are evenly positioned with each other, you can change their position in the header through Avada > Theme Options > Header > Header Styling > Header Padding. You can adjust this as needed.
Note: Adding padding will not necessarily change the logo/main menu』s position, but rather, it will change the header』s height as the padding is increased. So if you add 20px of bottom padding to the header, the header』s overall height will increase by 20px and that will be reflected in the lower part of the header.
Review – Now that we』ve positioned our menu as needed, you should notice that: 1) Your dropdown menu and your highlight bar are closer to the parent menu item. And 2), if you are using the Background Highlight style, The Highlight Background color is displayed at its appropriate size.

How To Use Post Cards In Avada

Post Cards are a very versatile feature, released back in Avada 7.3. Basically, a Post Card is a custom layout template for various post types including Blog posts, Portfolio posts, FAQs, Events and WooCommerce products. Using the Post Cards Element, the individual Post Cards can then be displayed in Grids, Carousels, or Sliders in your pages and Layouts. They introduce a massive amount of flexibility to the layout and display of custom post types.
The basic process is that you create a Post Card Library Element via the Avada Library, which can then be applied through the Posts Cards Element on a page, or in an Avada Layout. The easiest way to understand this, is that a Post Card is a type of template, and the Post Cards Element allows you to use a Post Card to display one of the available post types in various ways. Read on to find out more about this interesting feature, and watch the video below for a visual overview.,Creating A Post Card Library ElementThe first step in the Post Cards process is to create the Post Card Library Element. This is done in the Avada Builder Library. To create a Post Card, selecting Post Card as the type of Element, give your Post Card a name, and then click on Create New Element. This redirects you to the back end Avada Builder, but you can also choose Avada Live to build your Post Card. As can be seen below, here I』m going to create a Post Card called Blog Post Card.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Choosing An Avada Studio Prebuilt Post Card DesignOnce you have created your Post Card, you can start building from a blank slate, or you can use one of the Avada Studio Prebuilt Posts Cards. To access these, simply go to the Library by clicking on the Library icon on the Toolbar and choose the Studio tab. There you will find a variety of Prebuilt Post Cards, including Blog, Portfolio and Product Post Cards. These can be used as they are, or can be used as a starting point for your Post Card design. Just click on the Plus symbol on the design you would like to use, and select how you would like it to be inserted (Replace all page content, Insert above current content, or Insert below current content). The Post Card will be then loaded into the Avada Builder.,Designing The Post CardRegardless of whether you have used a Prebuilt Avada Studio Post Card, or you are starting from scratch, the first thing to do is to go to the Post Card Page Options tab, and set the 「View Dynamic Content As」 option to the type of content you will be creating the Post Card for. As can be seen below, this can be a Term (for example, a Category), Post, Product, Event, Portfolio, or an FAQ. As per our example, here I would choose Post, as I want the Post Card to display Blog Posts, and then I』d choose a specific post to display any Dynamic Content.
When first adding Elements to your Post Card, you are met with a Layout Elements tab. This is because Post Cards will be pulling dynamic content into the layout, and so dynamic Layout Elements are a neccesary component. As can be seen in the screenshot below, there are a range of Layout Elements that suit various types of post types. You can, of course, also use any of the Design Elements in your Post Card, like the Title Element with Dynamic Content options.
For this example, I have designed and built a Blog Post Card. As you can see in the first screenshot below, there are six Elements in all. As well as the Elements, I also applied a border radius top and bottom and a background color to the Column itself. At the very top of the Column is a Post Card Image Element. Then there are invisible Separators above and below a Title Element, with Flex Grow set to 1, which will keep the Post Cards the same size if the Titles run to a new line. The Title Element itself has Dynamic Content set to the Page Title. Then there is an instance of the Meta Element, with various options enabled, and finally a Button Element set to Span, with the Dynamic Content option set to Permalink.
In Avada Live, with the Dynamic preview set to a post, the finished Post Card looks like this.,Adding The Post Cards ElementWhen you have finished the Post Card Library Element, you can then use it on a page or in a Layout, using the Post Cards Element. See that document for a full rundown of specific Element options, but basically, this is where you choose how to lay out the Post Card on the page, and which content to use. As an example, I will walk through using the Post Cards Element to display the Blog Post Card Library Element we created above.
There are three tabs on the Post Cards Element. In the General Tab, you decide what Post Card you will be using, the content source and post type, and how it will be ordered etc. Then on the Design tab, you choose the Layout and the Alignment, and other design options, and finally on the Extras tab, you can apply animation to the Element.
For our example, on the General tab, as you can see below, we want to use the Blog Post Card, with a Content Source of Posts, and a Post Type of Posts (if we chose Terms with a Post Type of Posts, it would display the Blog Categories, rather than the individual blog posts themselves).
And in the Design Tab, I would choose to display the Post Cards in a three column Grid, and I』ll also choose Stretch as the Alignment, so the Cards are all the same height. You can see this in action in the second row, where the middle Title stretches over two lines, but the other two posts in the row are the same height.
This Element could then be used on the Blog page as an alternative to the Blog Element, giving you more control over the design and information displayed. And in the same way, you could create individual Post Cards for WooCommerce Products, portfolio posts, FAQ items etc. Post Cards are a great, new, very flexible way to present post types throughout your site.

Option Network Dependencies

Dependent options are options that are shown or hidden according to your current setup. For example, if your site currently has the 『Responsive Design』 setting turned off, then all options related to the Responsive Design setting, such as Responsive Breakpoints, will be hidden from the Theme Options Panel.
This is because these options are now unnecessary to your current setup and will not affect it in any way. This will minimize confusion and errors resulting from incorrect option settings. Continue reading below to learn about dependent options in the Avada Theme Options, Avada Page Options and the Avada Builder Element Options.
Avada』s Option Network DependenciesDependent Options in Avada Theme OptionsDependent Options in Avada Page OptionsDependent Options in Avada Builder Element OptionsAvada』s Option Network DependenciesWhile Avada』s Option Network Dependencies are useful, you may want to see all the option the Avada theme has to offer so you can quickly visualize what』s possible with the theme. If you』d like to turn the dependency feature off, you can do so by following the steps below.
Step 1 – Navigate to Avada > Theme Options > Advanced > Theme Features tab.
Step 2 – On this tab, you』ll find the 『Avada』s Option Network Dependencies』 option. Toggle this option to Off to disable dependent options in all three locations; Avada Theme Options, Avada Page Options, and Avada Builder Options.
Step 3 – Once finished, click 『Save Changes』 and refresh the page.
Dependent Options in Avada Theme OptionsBelow is an example of dependent options in action in the Avada Theme Options panel. When you turn Responsive Heading Typography On, you』ll be able to view all it』s dependent options. When you turn it Off, they will become hidden because they』re no longer necessary.
Responsive Heading Typography DisabledResponsive Heading Typography EnabledDependent Options in Avada Page OptionsBelow is an example of dependent options in action in the Avada Page Options panel. When you select a slider from the 『Slider Type』 option in the Sliders tab, you』ll be able to view all that particular slider』s dependent options.
No Slider Type SelectedAvada Slider Type SelectedDependent Options in Avada Builder Element OptionsBelow is an example of dependent options in action in Avada Builder Elements. When you select an animation type from the 『Animation Type』 option under the Animations tab, you』ll be able to view all the animation』s dependent options.
No Animation Type SelectedBounce Animation Type Selected

Avada Menu Options

The Avada Menu Options are found when editing individual menu items in WordPress Menus (Appearance > Menus). They allow a range of customization to menu items. Read on to discover more about this excellent menu addition, and to see these options in action, watch the video below. It shows the University Main Menu, and how both Theme Options and Avada Menu Options have been used to control the display of the Menu.,Avada Menu OptionsMenu First Level Style – Allows you to make the menu item regular text or a button. Choose between Default Style which is regular text, Button Small, Button Medium, Button Large, Button xLarge. The button styling is determined by the default button styles in Avada > Theme Options > Avada Builder Elements > Button Element;
Icon Select – Allows you to select a Font Awesome icon for the menu item.
Icon/Thumbnail Only – Allows you to optionally show only the selected icon or only the thumbnail image without the menu text, as the menu item. Note: This option doesn』t apply to mobile. Click here for frontend example.
Menu Highlight Label – Allows you to add the label text for the menu item. This text will appear beside the menu text.
Menu Highlight Label Background Color – Allows you to add the background color for your menu highlight label.
Menu Highlight Label Text Color – Allows you to set the menu item』s highlight label text color.
Menu Highlight Label Border Color – Allows you to set the menu item』s highlight label border color.
Modal Window Anchor – Allows you to set the name of a modal element to launch a modal from the main menu on click. For more information on modals, click here!
Avada Mega Menu – Allows you to enable the Avada Mega Menu. Enabling this option will reveal several other Mega Menu specific options.
Mega Menu / Flyout Menu Background Image – Here you can select an image for the mega menu or flyout menu background.
In case of mega menu, if left empty, the Main Menu Dropdown Background Color will be used. Each mega menu column can have its own background image, or you can have one image that spreads across the entire mega menu width. When used in the flyout menu, the image will be shown full screen when hovering the corresponding menu item.
Mega Menu Thumbnail – Allows you to select an image to use as a thumbnail for the menu item. For top-level items, the size of the thumbnail can be controlled in Theme Options > Menu > Main Menu Icons. This option is only available if the Enable Avada Mega Menu option is set to On.
Full Width Mega Menu – Allows you to make the Mega Menu full width. This will be the site width as set in your Theme Options. This option is only available if the Enable Mega Menu option is set to On.
Mega Menu Number of Columns – Allows you to set the number of Mega Menu columns. Choose between Auto or 1 to 6. This option is only available if the Enable Avada Mega Menu option is set to On.
Child Level Menu SettingsThese settings are located in any child level menu item』s Avada Menu Options area.
Icon Select – Allows you to choose a Font Awesome icon for your menu item.
Menu Highlight Label – Allows you to add the label text for the menu item. This text will appear beside the menu text.
Menu Highlight Label Background Color – Allows you to add the background color for your menu highlight label.
Menu Highlight Label Text Color – Allows you to set the menu item』s highlight label text color.
Menu Highlight Label Border Color – Allows you to set the menu item』s highlight label border color.
Modal Window Anchor – Allows you to set the name of a modal element to launch a modal from the main menu on click. For more information on modals, click here!
If the Parent Menu Item has Mega Menu enabled, you will also these the following options in the Child Item Avada Menu Options.
Mega Menu / Flyout Menu Background Image – Allows you to select a background image for the menu or column with Mega Menu or for each menu item with Flyout Menus. When this is set for the Parent level mega menu item, it will be applied as a single background that stretches across all child level menu items. You can also add a background image for each child level mega menu item individually in their menu item settings.
Mega Menu Thumbnail – Allows you to select an image to use as a thumbnail for the menu item. For top-level items, the size of the thumbnail can be controlled in Theme Options > Menu > Main Menu Icons; This option is only available when the Avada Mega Menu option is enabled for the Parent menu item.
Mega Menu Column Width – Allows you enter a percentage value to determine the Mega Menu』s column width. For example, 25%. This option is only available when the Avada Mega Menu option is enabled for the Parent menu item. View additional documentation here.
Mega Menu Column Title – Allows you to toggle the Mega Menu column title on/off. This option is only available when the Avada Mega Menu option is enabled for the Parent menu item.
Mega Menu Widget Area – Allows you to add a widget to the menu item. Second & third level menu items can have a widget area assigned. Note that assigning a widget to a menu item replaces the menu item link and only displays the assigned widgets. Learn how to create widget areas and how to add widgets to it here. Once you』re done creating a new widget area, return to the WordPress menu editor page and select the name of the new widget area in the 「Mega Menu Widget Area」 drop down field. This option is only available when the Avada Mega Menu option is enabled for the Parent menu item.
Avada Special Menu ItemsIn Avada 7.0, some Special menu Items were added to the Menu page, and these all have their own unique Avada menu Option panels. Please see the Avada Special Menu Items page for more information on these.