Avada 文件

How To Use The Container/Column Filter Options

With the introduction of Avada 6.1, we introduced Filter Options in Containers, Columns and Nested Columns. These filters are similar to the ones found in Photoshop or other editing programs. There are eight filters in all, Hue, Saturation, Brightness, Contrast, Invert, Sepia, Opacity and Blur, and there are options to apply these on both the normal and the hover state of the container or column.
You can apply any or all of the filters concurrently, with complete separation between normal and hover state, and the filters applied on a column work independently, but also in conjunction with filters applied on the parent container (though usually, you』d probably be only applying them to one of them). Filters affect not only the containers and columns, but also the content in them (and the controls for that column or container in the live builder).,View The Theme Feature Page!,Overview
Where To Find Them

The Filters

Examples,Where To Find ThemThe filter options are found under the Extras tab, in Containers, Columns, and Nested Columns. There are eight in all, and they can be applied on both the normal and the hover state of the container or columm. Let』s go through them one at a time to see what they do.
767,631 Businesses Trust Avada
Get Avada767,631 Businesses Trust Avada
Get Avada767,631 Businesses Trust Avada
Get Avada,The Filters
Hue – The Hue Blend Mode preserves the luminosity (brightness) and saturation (the intensity of the color) of the base pixels while adopting the hue (the color itself) of the blend pixels. Hue can be used to change hues in an image while maintaining the tones and saturation of the original. The slider travels the full 360 degrees of the color wheel.

Saturation – The Saturation Blend Mode preserves the luminosity and hue of the base layer while adopting the saturation of the blend layer. The slider is set to 100 by default, and can go down to 0 to fully desaturate an image, and up to 200 to fully saturate the image.

Brightness – The Brightness (luminosity) Blend Mode preserves the hue and saturation of the base layer while adopting the luminosity of the blend layer. The slider is set to 100 by default, and can go down to 0 to fully reduce the luminosity an image, and up to 200 to fully increase the luminosity of an image.

Contrast – The Contrast Blend Mode increases or decreases the contrast in the image, by lightening or darkeing the lightest pixels and lightening or darkeing the darkest pixels. The slider is set to 100 by default, and can go down to 0 to fully reduce the contrast of an image, and up to 200 to fully increase the contrast of an image.

Invert – The Invert Blend Mode inverts all of the colors in the image, making each color its exact opposite color, for example, replacing greens and browns with magentas and blues. The slider is set to 0 by default, and can go up to 100 to fully invert the colors in the image.

Sepia – The Sepia Blend Mode effectively reduces an image to greyscale (black & white) and adds a mid brown color filter over the image, originally designed back in the mid 1800s to warm black and white images.  The slider is set to 0 by default, and can go up to 100 to fully desaturate and apply a sepia tone to the image.

Opacity – The Opacity Blend Mode gradually increases transparency into the image. The slider is set to 100 by default, which is fully opaque, and can go down to 0 to make the image fully transparent.

Blur – The Blur Blend Mode adds a Gaussian blur to the image as the slider is increased. The slider is set to 0 by default, and can up to 50 to fully blur the image.,ExamplesHue Blend Mode – set to 180 degrees on hoverSaturation Blend Mode – set to 0 saturation on hoverBrightness Blend Mode – set to 25 on hoverContrast Blend Mode – set to 150 on hoverInvert Blend Mode – set to 100 on hoverSepia Blend Mode – set to 100 on hoverOpacity Blend Mode – set to 0 on hoverBlur Blend Mode – set to 10 on hover

How To Use The Container & Column Background Options

The Background tab of the Container and Column Elements have had an overhaul with Avada 6.1, and in this document, we will look at the full range of possibilities with background options in these foundational elements. The BG tab (background) has 4 sub-tabs in the Container element – Color, Gradient, Image and Video. The Column Element has the same options, with the exception of the Video tab. Let』s have a look in detail at each of these tabs.,Overview
The Color Tab

The Gradient Tab

The Image Tab

The Video Tab (Containers Only),The Color TabThe Color Tab is unchanged from previous versions and offers a full color picker with an opacity slider, to allow for a full choice of background colors for your container or column. What has changed, however, is how this color can interact with a background image or video. There is now a Background Blend Mode, in the Image Tab section, which allows you to control how the background color or gradient can interact with a background image. More on that later.
Containers, by default, have a transparent background, and columns are empty, but both can have any colour you like, with any level of opacity.
767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada767,645 Businesses Trust Avada
Get Avada,The Gradient TabA Gradient background tab has been introduced with Avada 6.1. With this tab, you can add gradient backgrounds to your Container or Column Element, with a range of options for gradient colors, start and stop positions, type and direction. The gradient colors can also have opacity, just like in the Color tab. The default type is Linear, but you can also choose Radial.
As you can see in the screenshot below, you first choose a Gradient Start Color and a Gradient Stop Color, and then set a Gradient Start Position and a Gradient End Position. This controls how the two colours of the gradient blend. Experiment with these to see how this affects the gradient, but the default values of 0 and 100 give you the smoothest gradient.
If you choose Linear as the Gradient Type, the last option is Gradient Angle, and here you can choose from a full 360 degrees.
If you choose Radial as the Gradient Type, the last option becomes Radial Direction, and here you can choose from Left Top, Left Center, Left Bottom, Right Top, Right Center, Right Bottom, Center Top, Center Center, and Center Bottom.
With these options you can create gradients of almost any type. These gradients also work in conjuntion with the Background Blend Modes, that we will look at in the next tab, Image.,The Image TabThe Image Tab allows you to add an image to the Container or Column background. Images added as backgrounds stretch or shrink to fill the the holding container or column, but containers and columns are a little different in this regard, so let』s look at them individually.
ContainersIt』s important to note that Containers have no height by default, even with a background image added. The only things that affect the height of a container are the content and the padding applied to the container. They do have width however, which on the default template is the Site Width, or if you are using the 100% Width Template, they can be the site width or the full width of the screen. So it』s important that the images added are big enough to show in the container without pixellation. Background images added to containers therefore need to be at least as wide as the site width.
With containers, the image initially shows at the full width of the container, so if the container height grows, whether with content or padding, the full image』s height will eventually be displayed, and then, if the height continues to increase, the full height of the image will remain, and the width will start to crop in as the image has to stretch to fill the container.
ColumnsColumns, on the other hand, increase in size when a background image is added, and by default, show the full background image, so again, it』s important that the images added are big enough to show without pixellation. For example, in a full width column on a site with a Site Width of 1100px, it would be wise for any column background image to also be at least 1100px.
If a column』s height is then incresed past the height of the image, either through padding or content, then again, the full height of the image will be shown and the image』s width will start to crop. Please experiment yourself with background images to make sure you understand the implications when adding background images to containers and columns.
Background Blend ModesWith the new Background Blend Modes, you now have multiple options with blending background colours or gradients with background images. There are 15 Blend Modes to choose from, and these determine how the image and any background color or background gradients will interact with the image. Experiment with these blend modes to see how they interact with the background images. If you use a blend mode, you can also use opacity in your colors to affect the overall effect.
If Background Blend Modes are disabled, however, then a background image will always show on top of a background color, regardless if that background color has opacity or not. (In the past, we automatically set a blend mode of overlay if the alpha of the background color was less than 1). But gradients are a type of background image, and so gradients with opacity will still show as overlays on top of background images.
See the video at the top of the page for visual examples of this.,The Video Tab (Containers Only)The Video Tab can be used to add a video background to a container. Videos of course can be added in many ways, with any of the three video elements, into a container or column, but adding a background video can sometimes be a useful tool.
The mp4 format is the only required file type, although there are two other optional file types for full browser compatability. You can also add a YouTube or Vimeo video instead. You can control the aspect ratio, loop and mute the video, and there is also a field for a fallback preview image for older browsers.
Like images, it』s important to remember that containers have no inherent size, and so don』t automatically resize to a video』s dimension. So the best user case for background videos is for videos that act in a background capacity, rather than being the main content. There are ways to resize the container to closer fit the video, but it』s not really designed for that. See the video at the top of the page for more information on the various ways you can use video backgrounds.

How To Use The Color Picker In Avada

The Color Picker is found throughout Avada, in Global options, Page options and Element options. This is the primary tool for selecting colors throughout the site, and it』s important to understand how it functions. Let』s have a look.
At the very top is a color indicator. If there is no hexadecimal value present beside it, it indicates that the color value is coming from global options. If there is a hexadecimal code, it indicates that it has been added in this instance of the color picker. You can generate hexadecimal codes in graphics programs like Photoshop, and on many websites online.
While it』s an accurate way of selecting colors, you don』t have to enter a hexadecimal code. You can also just drag the hue selector around in the color field, and manipulate the range with the saturation slider and alternatively, the opacity slider. See below for more information on these sliders.
On the right hand side is the Global Color Palette icon. If you click this, you can assign the specific option color to any one of the colors on the Global Color Palette. This ties it in to that position on the Global Color Palette and affords you a powerful way to update colors across your site. See the How To Use The Global Color Palette for more information on this aspect of the Color Picker.,Saturation and OpacityThe Saturation and Opacity Sliders are also very powerful. If you reduce the Saturation slider, your colors will become more pastel. If you reduce the saturation to zero, then your color picker will only display tones, from white to pure black and everywhere in between.
If instead, you reduce the Opacity Slider, the Hexadecimal code will be replaced by an RGBA value. This value notates the Red, Green and Blue values of the color, as well as the Alpha value (opacity). This makes the color picker very powerful indeed, and in this way, you can choose from millions of colors for your website.

How To Use PWA (Progressive Web Apps) With Avada

The Progressive Web App (PWA) is one of the performance based features, added back in Avada 5.8. This provides new caching strategies to the Avada experience, and also allows your users to install your website as an app, for deeper user engagement. Read on to find out more about how to implement and use this exciting new tool.
Installing and Enabling Progressive Web AppIMPORTANT NOTE: To use the Avada Progressive Web App feature, your site must use HTTPS. Also, this is a quickly developing technology, and implementation of some features will vary across platforms and browsers.To enable the Progressive Web App, you first have to install the PWA plugin. To do this, head to Avada > Plugins / Add-ons, and install and activate the PWA plugin. This is a one click process.
Once the plugin has been installed and activated, you can enable PWA and set your options. To do this, head over to Avada > Options > Performance > Progressive Web App. At the bottom you will see the Progressive Web App section, and the Enable Progressive Web App option is the first one. By default, this option is turned off. Select On, and save your theme options to enable the Progressive Web App.
Caching OptionsOnce you have installed and enabled the Progressive Web App, you can choose your preferred caching strategy for each of the file types – Images, Scripts, Styles & Fonts. For specific details of each strategy, please see this Google Document, but basically, the strategies can be summarized like this:

Cache-First strategy file types – File types added in this list will be cached in the browser. Subsequent page requests will use the cached assets. Use this for static assets that don』t change like images and fonts.

Network-First strategy file types – File types added in this list will be cached in the browser. Subsequent page requests will first try to get a more recent version of these files from the network, and fallback to the cached files in case the network is unreachable. If your site』s content gets updated often we recommend you can use this for your content.

Stale-While-Revalidating strategy file types – Any file types added here will be served with a cache-first strategy, and after the page has been loaded the caches will be updated with more recent versions of the selected file types from the network. Use this for assets that may get updated but having their latest version is not critical.
App OptionsWith PWA, it』s also possible for the user to add your website as an app. It must be noted, that this is a developing technology, and the implementation for this feature is different across platforms and browsers. With Android and Chrome, for example, the user will get a prompt to install the site as an app, but on iOS, the feature only works on Safari, and there is no prompt. Users have to choose the Share option and select 『Add to Home Screen』.
The last three options allow you to choose a splash screen logo, select the App Display mode, and the App theme color. Again, implementation of these options are mixed. On iOS for example, fullscreen and minimal-ui won』t work (fullscreen will trigger stand alone, and minimal-ui will be just a shortcut to Safari), nor will the color options.

Splash Screen Logo – a 512 x 512px image that is used when prompting users to install the website as an app, and also in the splash screen that shows when they launch the app. The logo image must be in PNG format.

App Display Mode – If the user installs your site as an app, here you can select how the app will behave. Choose from Fullscreen, Stand Alone, Minimal UI, or Browser.
For more information about these options please refer to this document.

App Theme Color – This allows you to select a color that will be used for the header of your app, as well as the browser toolbar-color on mobile devices.
Clearing Persistent CacheService-worker caches are very persistent, so if you have the PWA plugin enabled, and you are debugging a website, you may want to reset caches from a separate tab in Chrome.
FiltersCopy to Clipboardavada_pwa_filetypes avada_pwa_filetypesFile: Avada/include/class-avada-pwa.php
Description: Used to add new filetypes or to edit existing filetypes that can be used in Avada's PWA
Default Value: Array of arrays with the parent level incides of images, fonts, scripts, styles, which hold the properties of these filetypes.ExamplesAdding a new file-typeThis will add the rules we want, and also make 「PDF」 available in the list of options we can choose from.
Copy to Clipboardadd_filter(
'avada_pwa_filetypes',
/**
* Filter filetypes definitions and adjust their properties.
*
* @param array $filetypes The definitions for the service-worker caches.
* @return array The adjusted filetypes.
*/
function( $filetypes ) {

// Add PDF caching as a new file-type.
$filetypes['pdf'] = array(
'label' => esc_html__( 'PDF', 'Avada' ),
'rule' => '^https://.*.(?:pdf)(?.*)?$',
'args' => array(
'cacheName' => 'fusion_documents',
'plugins' => array(
'expiration' => array(

// Cache 20 files.
'maxEntries' => 20,

// Cache for 1 day (value is in seconds).
'maxAgeSeconds' => 60 * 60 * 24,

// Purge cache when browser quota is reached.
'purgeOnQuotaError' => true,
),
),
),
);

return $filetypes;
}
);​x 1add_filter(2 'avada_pwa_filetypes',3 /**4 * Filter filetypes definitions and adjust their properties.5 *6 * @param array $filetypes The definitions for the service-worker caches.7 * @return array The adjusted filetypes.8 */9 function( $filetypes ) {10​11 // Add PDF caching as a new file-type.12 $filetypes['pdf'] = array(13 'label' => esc_html__( 'PDF', 'Avada' ),14 'rule' => '^https://.*.(?:pdf)(?.*)?$',15 'args' => array(16 'cacheName' => 'fusion_documents',17 'plugins' => array(18 'expiration' => array(19​20 // Cache 20 files.21 'maxEntries' => 20,22​23 // Cache for 1 day (value is in seconds).24 'maxAgeSeconds' => 60 * 60 * 24,25​26 // Purge cache when browser quota is reached.27 'purgeOnQuotaError' => true,28 ),29 ),30 ),31 );32​33 return $filetypes;34 }35);Change properties for existing file-typesCopy to Clipboardadd_filter(
'avada_pwa_filetypes',
/**
* Filter filetypes definitions and adjust their properties.
*
* @param array $filetypes The definitions for the service-worker caches.
* @return array The adjusted filetypes.
*/
function( $filetypes ) {

// Filter the Regex used for images.
$filetypes['images']['rule'] = '^https://.*.(?:png|gif|jpg|jpeg|svg|webp)(?.*)?$';

// Filter how many files will be cached for fonts.
$filetypes['fonts']['args']['plugins']['expiration']['maxEntries'] = 60;

// Filter expiration of caches for scripts & styles.
$filetypes['scripts']['args']['plugins']['expiration']['maxAgeSeconds'] = MONTH_IN_SECONDS;
$filetypes['styles']['args']['plugins']['expiration']['maxAgeSeconds'] = MONTH_IN_SECONDS;

return $filetypes;
}
);23 1add_filter(2 'avada_pwa_filetypes',3 /**4 * Filter filetypes definitions and adjust their properties.5 *6 * @param array $filetypes The definitions for the service-worker caches.7 * @return array The adjusted filetypes.8 */9 function( $filetypes ) {10​11 // Filter the Regex used for images.12 $filetypes['images']['rule'] = '^https://.*.(?:png|gif|jpg|jpeg|svg|webp)(?.*)?$';13​14 // Filter how many files will be cached for fonts.15 $filetypes['fonts']['args']['plugins']['expiration']['maxEntries'] = 60;16​17 // Filter expiration of caches for scripts & styles.18 $filetypes['scripts']['args']['plugins']['expiration']['maxAgeSeconds'] = MONTH_IN_SECONDS;19 $filetypes['styles']['args']['plugins']['expiration']['maxAgeSeconds'] = MONTH_IN_SECONDS;20​21 return $filetypes;22 }23);ResourcesThe PWA plugin on wordpress.org
More about Progressive Web Apps (PWA) from Google

Development of this plugin on GitHub

How To Use Pagination In Avada

Pagination is the process of dividing a long document into discrete pages. There are quite a lot of pagination options in Avada, mostly covering blogs and portfolios, but also search pages, slideshows and third party plugins.
Read on for more information about how to use pagination in Avada, and watch the video for a visual overview.,Overview
Theme Options

Element Options

Third Party Plugin Pagination

Pagination Element

Next Page Element,Theme OptionsPagination options are sprinkled throughout the Theme Options, but a good place to start is the Extra > Pagination page. These are, of course, all Global options, and here you can adjust the stying of pagination throughout your site, including the third party plugins Avada has design integration with, like WooCommerce and The Events Calendar.
You can decide whether the pagination sizing should be based on the box width/height, or on its padding, and there are options for radius, which enables you to make the boxes circular, and things like font size and range.
But there are also pagination options for both the General Blog and Portfolio, as well as the Blog and Portfolio Single Post. One easy way to find all these options is to use the search function in the theme options. Entering 『pagination』 into the search field brings up all almost all results related to pagination throughout the theme.
For the General Blog and Portfolio options, which control the Blog when it is assigned via the Settings > Reading page, and Blog and Portfolio archives, as well as the Search Results Page, there are options to choose between Pagination, Infinite Scroll or the Load More Button.
For the Blog and Portfolio Single posts, there is an option to display the previous/next pagination on the page or not.
For Slideshows, there is an option to show pagination circles below a video slide for the slider element or not, and finally, in the Fusion Builder Elements page, there is an option for controling the default pagination type and separator color when using the Portfolio Element.
A few extra sets of pagination related options are found when searching for 『Load More』. These of course are the Load More Button Styling options found under General Blog, General Portfolio, and the Fusion Builder Elements page for both Blog and Portfolio Elements.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Element OptionsAnd then of course, is the pagination option available when using Elements that can display pagination, such as the Blog and Portfolio Element. This option is called Pagination Type, and can locally override the global default set for the Blog and Portfolio Elements in the Theme Options > Fusion Builder Elements page.,Third Party Plugin PaginationThe Pagination options in the Theme Options also apply to third party plugins such as WooCommerce and The Events Calendar. You will find both page pagination, and also previous/next pagination on single items. And in the Events Element, you will find an option for the type of pagination you would like to use there, just like the Blog and Portfolio Elements.,Pagination ElementIn the Avada Theme Builder, there is also a Pagination Element available for Content Layout Sections. This Layout Section Element allows you to place pagination in your single post layouts, and unlike other Layout Section Elements, can be used twice in the lyaout, to faciliatate having pagination at both the top and the bottom of the page content.,Next Page ElementFinally, there is the Next Page Element. This special Element allows you to split a document up into separate pages, effectively creating your own pagination. This is achieved by inserting the Element between containers on a page (Add Container > Special > Next Page Element). Any content under the inserted Element would then go to a new page, and pagination is shown at the bottom of the pages.
You can use this Element as many times as you like on a document, which would allow you to take a very long document and split it up into however many pages you』d like.
OK, as you can see, there』s probably a lot more to pagination than you thought. But Avada is all about giving you options, and with pagination, it』s no different.

How To Use Full Screen Scrolling Sections

Full Screen scrolling sections were introduced back in Avada 5.3, and offer you a way to combine multiple full height containers into full screen scrolling sections with side navigation. With this tool, you can set up a beautiful one page scrolling website or you can simply add them into any page/post as part of your page content.
See an example below of full screen scrolling sections from the Avada Adventure website. Note the navigational dots along the right hand side. Please continue reading below to know more about this awesome feature.
Check Out the Adventure website!Overview
Full Screen Scrolling Sections: A step-by-step guide on how to use and set up full screen scrolling sections.
How To Customize The Scrolling Navigation: This covers how to customize the scrolling navigation.Anchor Scrolling with 100% Height Scrolling Sections: Information about anchor scrolling with 100% height scrolling sections.
Things To Keep In Mind When Using Full Screen Scrolling Sections: Understand the important drawbacks or disadvantages of using full screen scrolling sections.
Full Screen Scrolling SectionsFull Screen Scrolling or 100% Height Scrolling can be activated via Container Settings. You will need at least 2 consecutive containers that are 100% Height Scroll enabled for this to work. Please follow the steps below to set up your full screen scrolling sections.
How To Set Up Full Screen Scrolling SectionsStep 1 – Open the Container Settings and navigate to General tab.
Step 2 – Set 『100% Height』 option to Yes. 『Enable 100% Height Scroll』 option will show up and set this to Yes.
Step 3 – Save the container.
Step 4 – Follow steps 1-3 for the other containers that you will include in the scrolling section group.
Note: You can set up more than one Full Screen Scrolling section within a page/post. It requires 2+ consecutive containers to form a group that will scroll.
How To Customize The Scrolling NavigationStep 1 – Navigate to Avada > Options > Avada Builder Elements > Container.
Step 2 – Set your preferred colors for 『Container 100% Height Navigation Background Color』 and 『Container 100% Height Navigation Element Color』 options.
Step 3 – Choose if you want to enable or disable 『Container 100% Height On Mobile』 option.
Note: This feature works best when your containers have minimal content. If the container has a lot of content it will overflow the screen height. In many cases, 100% height containers work well on desktop and generally should be disabled on mobile.
Step 4 – Click 『Save Changes』 button.
Note: If you want to change the size of the navigation bullets, for example, please try to use the CSS snippet code below, adjusting the values for the height and width as required. Further customization falls outside the scope of our support. Please see our Theme Customization page for more information.
Copy to Clipboard.fusion-scroll-section-link-bullet {
height: 12px;
width: 12px;
} 1.fusion-scroll-section-link-bullet {2    height: 12px;3    width: 12px;4}Anchor Scrolling With 100% Height Scrolling SectionsAnchor Scrolling is possible with Full Screen or 100% Height scrolling sections. Please click the button below for the detailed documentation on how to set up Anchor Scrolling.
Click Here To Learn More About Anchor ScrollingThings To Keep In Mind When Using Full Screen Scrolling SectionsFull Screen Scrolling sections have its own challenges, and below is a list of some important things to keep in mind:
All content of the scrolling section must fit into the 100% viewport height. Otherwise, if the content is too large, it will be cut off.Mobile Devices are shorter in height so the 『Container 100% Height On Mobile』 option, found on Options > Avada Builder Elements > Container section, can be disabled. The 『Container 100% Height On Mobile』 feature only works when your containers have minimal content. If the container has a lot of content it will overflow the screen height. In many cases, 100% height containers work well on desktop, but will need disabled on mobile.『Mobile Visibility』 or 『Container Visibility』 settings will be disabled. This option will be hidden when 『100% Height』 option is set to Yes.

How To Use Font Awesome Icons with Avada

Font Awesome is the world』s most popular and easiest to use icon set. We have integrated it into Avada, so you can add any of the 1,609 Free Font Awesome Icons to your content. The full set of styling options available allows you to choose any icon size, weight, color, background, rotation, and more. And every icon is 100% full vector, so they look incredibly sharp and are retina-ready!
As well as all the free icons, there is also Font Awesome Pro Integration in Avada, giving you access to 7,000+ Font Awesome Icons through the Avada Builder.,IMPORTANT NOTE: Font Awesome Pro requires an annual subscription. Please check their site for detailed information & pricing.,How To Use Font Awesome Icons with AvadaBefore using Font Awesome Icons in Avada Builder, it』s best to start in the Global Options, as there are several options that affect how Font Awesome Icons are displayed in the Builder.

Font Awesome – Here, you can choose which subsets you want to load. If you have a Font Awesome Pro license, and you can connected it, you can also choose the Light subset, but otherwise you can display the Brands, Regular and the Solid subsets.

Font Awesome v4 Compatibility – Turn this on to enable support for Font Awesome 4 icon code format. You』ll generally only need to enable this is you have hard coded icons in your markup, for example:Copy to Clipboard  1
Font Awesome Pro – Turn this on to connect your Font Awesome Pro license. You will need to whitelist your domain as well.
Accessing Font Awesome Icons in Avada BuilderOnce you』re set up in the options, you can add Font Awesome Icons in any of the Elements that support icons. If you want to add an icon on its own, use the new Icon Element. But icons can also be used in several other elements, including the Alert, Button, Checklist, and Content Boxes Element, to name just a few. In short, anywhere you find the Icon Picker, you will be able to use the Font Awesome Icons in your content.

How To Use Flex Grow On Separators

A new feature, enabled by the addition of Flexbox to Avada, is the use of Flex Grow on Separator Elements. Let』s have a look at what this new option does.
The option is found in the Separator Element, at the top of the design tab. It』s a new Flex option that allows the separator to grow to fill the available space. It』s best explained with an example.
Let』s say we have three Columns in a row, with the parent Container』s Column Alignment option set to Stretch. This allows the Columns to Stretch to the full Height of the Container. Now let』s imagine that each Column has a Title, a Checklist Element, a 20px Separator, and a Button at the bottom. Depending on the number of Checklist items though, the columns would be the same heights, but the buttons would not be aligned at the bottom. It would look something like this.
In the back end builder, the columns would look like this.
You could go to the Column > Content Alignment Option, and see if you could get a better alignment using one of the Space options there, such as Space Around, Space Between, or Space Evenly. But a simpler solution exists, right inside the Separator Element. And that, of course, is Flex Grow.
The option is very simple. By default, it』s set to 0, and so is disabled. But in our situation here, we only need to go into the Separator Element in each Column and change the Flex Grow option to 1. This essentially tells the Separator to grow into the available space. As Flex Grow is implemented in other Elements, other possibilities will arise, using numbers higher than 1. But currently, you don』t need to set it higher than 1, and the Separator will expand into the available space.
This would make our Columns look like this, now with the Buttons aligned along the bottom. That』s Flex Grow!
Read More About The NEw Flex Options In Containers And Columns

How To Use Conditional Element Rendering in Avada

Back in Avada 7.3, we added a new feature called Conditional Element Rendering. Currently, this feature is found in the Column and the Container Elements. In this document, we will look at how it works, and some of the ways in which it can be used. Read on to find out more about this exciting new feature, and watch the video below for a visual overview.,What Is Conditional Element Rendering?Conditional Element Rendering is a form of conditional logic that can determine whether an Element (in this case, the Column or the Container Element, but is also applies for all content within that Column or Container) should be rendered on the page or not. An example of this would be a Column that only displays if a user is logged in, or a Container on a Cart page that does not render if the Cart is empty. There can also be multiple conditions applied for complex situations. There is a significant difference between not rendering an Element and simply hiding it on the page with the Element Visibility option.,Where Is It Found?Conditional Element Rendering is currently found in the Column and the Container Elements, under the Extras tab. Because these Elements hold all content on the page however, this allows for almost all imaginable usage scenarios.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,How To Use Conditional Element RenderingThere will be an enormously wide variety of situations were this feature could be used. The best we can offer here is a breakdown of the possible values, and a scenario to give you the idea.
As you can see in the screenshot below, when you click on the + Add New Logic Button, you are presented with a Field option, a Relational Operator selector (Equals =, and Does Not Equal !=), and a Value field. Below this is an AND/OR option which you can to combine further Logic Terms.
In the table below, you can see all the available Fields, and their possible values. As you can imagine, there are a huge number of possible scenarios, where this much requested feature could be used to control the page contents.

Field
Value

Cart Status
In

 
Empty

Device Type
Desktop

 
Mobile & Tablet

Event Status
Started

 
Ended

Get Variable
This field has both a Get and a Value option

Sale Status
Started

 
Ended

User Agent
 

User Role
Administrator

 
Editor

 
Author

 
Contributor

 
Subscriber

 
Customer

 
Shop Manager

 
Keymaster

 
Moderator

 
Participant

 
Spectator

 
Blocked

User State
Logged in

 
Logged Out

Custom Field
 

ACF Field,Example Of Conditional Element RenderingA good example of how to use Conditional Element Rendering is when building a custom Cart Page for WooCommerce. When a Cart is empty, for example, you would not want all the usual Cart Elements to display, and so by using Conditional Element rendering on the various Columns and Containers on the page, we could achieve that scenario easily. See the Avada WooCommerce Builder – Cart page for specific details of how to achieve this. Another example can be found in the video at the top of the page.
There are many more scenarios where this feature would be useful, including rendering content based on whether a user is logged in, or what their role is, whether an Event or Sale has started or finished, and whether the content is being viewed on a mobile or tablet, or even on a specific browser, just to name a few examples. This much requested feature brings an incredible level of flexibility to your page content, and is just another example of the innovation we continually bring to the table for Avada users!

How To Use Captions On Image Based Elements

Captions are now easy to add to image based elements such as the Image Element, Image Carousel and the Gallery Element. You can find Captions on their own tab, and fully control the look and feel of how they display with a variety of design styles.
Read on to find out more about this awesome new feature for images, and watch the video below for a visual overview.,Where Do Captions Come From?Captions and Titles are fields that are already available in images in the Media Library, as you can see in the image below. When you upload an image you can add, amongst other things, a Caption and / or a Title. The media based Elements with captions then pull that information directly from the images to display using the new Captions styles.
For images that don』t have captions and titles embedded in the file, you can add them (or override them) in the Element itself. There is one main difference however, between the Image Element, and the Image Carousel and Gallery Elements. With the Image Element, you can add the individual caption and title text on the Captions tab of the Element as it is a single image Element, but with the Gallery Element and the Image Carousel Element, these Image Title and Image Caption options are found by editing the individual Element items, found under the Children tab.,Caption OptionsThe range of options on the Caption tabs of the three image based Elements are almost identical, bar for the Title And Caption options mentioned above. But for a full list and screenshots of the options available on the Captions tab, please see the individual Element docs: Image Element, Image Carousel Element, & the Gallery Element.,Caption StylesThere are a range of Caption styles to choose from. By default, captions are Off. There are two simple caption styles – Above and Below, and then a range of five styled caption designs. These are code named Navin, Dario, Resa, Schantel & Dany. Let』s look at these caption styles individually to see what you can achieve.
AboveAs the name says, the Title and Caption are placed above the image with this selection. You can control the color and size of the fonts etc used with the Element Options.
BelowThis is exactly the same as Athe previous style, only this time, the title and Caption sit below the image.
NavinThis places a color overlay over the image. And we can see the title on the image itself. So here, when we mouse over the image, the overlay disappears, and the title lifts up so there』s room for the caption to slide in beneath it.
DarioOK, Dario is the next style, and this one places the Title near the top, and upon mouseover a border slides in under the title, and the caption slides in from the other side
ResaResa is a very stylish design. It only shows the title initially, but on mouseover the title and caption are aligned in the center of the image, and a border appears around the inside of the image.
SchantelSchantel has the title at the top left, and the caption slides in below this on mouseover, with a background color. There』s also a new option with this style called Image Caption Background Color to control that color of course. There』s also a zoom in effect applied to the image with this style.
DanyFinally, there is Dany. This puts the title at the bottom of the image, and on rollover, the image and title lift up, and the caption is presented with a background color. This option also has the Image Caption Background color option.