How Avada Controls Responsive Images

How Avada Controls Responsive Images

Images are a huge part of every website, and here at ThemeFusion, we are always looking for ways to improve the load time of pages by making sure that images are loaded as efficiently as possible.
We have long had features specifically for dealing with images, including multiple image sets and Retina versions of logos and other elements, but now with Avada 5.8, we have introduced several performance related features specifically for how Avada handles images. Let』s have a look at this!
WordPress & srcsetTo understand how Avada handles images, you need to know some technical background. You might know, that when you upload an image to the WordPress Media Library, WordPress actually makes 4 other sizes of that image, based on the sizes you specify in the WordPress > Settings > Media settings (plus an unlisted intermediate size). You might also know that Avada creates another 13 versions of the image as well, so that there will be an appropriate sized image for any area in the theme you might use it in. This might seem excessive, as there will be 18 files for each image uploaded, but the extra file size isn』t really that large if your initial image upload is well optimized, and the performance benefits far outweigh the extra storage.
To improve their image handing, WordPress also made some changes back in version 4.4, that added native responsive image support, by including srcset and sizes attributes to the image markup it generates. By including the available sizes of an image into a srcset attribute, browsers could now choose to download the most appropriate size and ignore the others—potentially saving bandwidth and speeding up page load times in the process.
Let』s just look at the scrcset and sizes attributes to understand their syntax.
srcset – This defines the set of images we allow the browser to choose between, and what size each image is. So the browser gets a list of available images and also the information of the width of each of these images.
Syntax
Copy to Clipboardsrcset="{image_name} {image_size}, {image_name} {image_size} ..." 1srcset="{image_name} {image_size}, {image_name} {image_size} ..."Example
Copy to Clipboardsrcset="test_image-200.jpg 200px, test_image-400.jpg 400px, test_image-800px.jpg 800px"1 1srcset="test_image-200.jpg 200px, test_image-400.jpg 400px, test_image-800px.jpg 800px"sizes – This defines a set of media queries (viewport widths) and indicates what image size would be best to choose, when the corresponding media condition is true.
Syntax
Copy to Clipboardsizes="{media_query} {best_image_size}, {media_query} {best_image_size} ..."1 1sizes="{media_query} {best_image_size}, {media_query} {best_image_size} ..."Example
Copy to Clipboardsizes="(min-width: 2200px) 100vw, (min-width: 824px) 270px, (min-width: 732px) 405px, (min-width: 640px) 732px"1 1sizes="(min-width: 2200px) 100vw, (min-width: 824px) 270px, (min-width: 732px) 405px, (min-width: 640px) 732px"Browser AlgorithmNow with these 2 attributes, the browser will do the following:

Look at its device width.
Work out which media query in the sizes list is the first one to be true.
Look at the slot size given to that media query.
Load the image referenced in the srcset list that most closely matches the chosen slot size.

Avada AdditionsIn WordPress, not many image sizes are available by default, and most are also hard cropped. Additionally, the sizes attribute is pretty generic. So, out of the box, you don』t get you the big performance boost.
What Avada does now is:

As mentioned earlier, we create several uncropped images, 200, 400, 600, 800, 1200 etc., which makes sure that for all kinds of devices and scenarios, the right image size will be available.
For the sizes attribute, we check and calculate the exact content width. That is a pretty difficult task, as you can set the site width in px, but also in %. You can have full width pages, or pages with sidebars, have page padding etc. We take all of this into account.
Additionally, we also check if your images are displayed in a grid with columns: e.g. gallery, or image carousel etc. That is important, because if you have a site width with 1200px, but have 4 columns, obviously on desktop you will only have 300px per column. Of course, we also subtract the column spacing correctly.
For single images, we also check if they are part of a parent column, that is smaller than the full width. The reason for this is the same as above.
Finally, we also calculate the sizes media queries in a way that makes sure your responsive breakpoints and grid column amounts are taken into account.

So in all cases, from desktop to mobile, from one column to 6 columns, from full width to double sidebar pages, we』ll give the browser all information to load the best available image size. And that, for both retina and normal screens.
Lazy LoadIn Avada 5.8, we have also introduced Lazy Load for images. This can be enabled under the Performance tab at Avada > Theme Options > Performance. What this does is to only load the images that are visible in the viewport. As the user scrolls and more images come into view, they are then loaded as well. This provides an instant benefit to page load times, as only the initial images in the viewport are loaded.
Lazy Load is enabled on these areas and elements in Avada:

Blog Element – medium, large, grid and masonry

Blog Archive – medium, large, grid, and masonry

Single Blog Post Featured Image, first and slides

Blog Grid with multiple images

Portfolio Element – grid and masonry

Portfolio Archive

Single Portfolio Post Featured Image, first and slides

Gallery Element

Image Element

Image Before/After Element

Person Element

Testimonial Element

Content Box Element

Flip Box Element

Slider Element

Post Slider Element

Recent Posts Element

Lightbox Element

Container background

Column background
Responsive ImagesApart from uploading a Retina version of your logos and favicons, you don』t need to worry about responsive images in Avada. The most important thing you can do with your images is to make sure they are well optimized. Users of Photoshop can use the Export As function, and use a fair amount of compression, and we have also found that compressor.io does a good job dealing with compression. There re also image plugins like Smush it and Short Pixel that can help. Have a read of our Image Optimisation Guide for more info.

Creating A Gallery With Image Elements

Creating A Gallery With Image Elements

The Image Element allows you to create a photo gallery on a page or post through the 『Gallery ID』 option. In this article, we』ll show you how to use the 『Gallery ID』 option to add multiple Image Elements creating a lightbox gallery. To learn how to do this please continue reading below.
Read Our Image Element Article View The Image Element Gallery In ActionNote: This post covers how to create a gallery, where each image is its own Image Element linked through a common Gallery ID. This is primarily to have a lightbox gallery. If you』re looking to create a single element which displays a gallery of images, you may want to check out our Gallery Element for that.
Read Our Gallery Element ArticleHow To Insert An Image ElementStep 1 – Create a new page or edit an existing one.
Step 2 – Click the 『Use Fusion Builder』 button to activate the Fusion Builder.
Step 3 – Insert a Container into the page and then choose a column layout.
Step 4 – Click the 『+ Element』 button to bring up the Elements window. Locate the Image Element and click to add it to the page. Alternatively, just search for 『Image』 and the Image Element will be filtered for your selection.
Step 4 – Insert an image using the 『Image』 option, and set the 『Image Lightbox』 option to Yes. If you』d like to set a different lightbox image, assign one using the 『Lightbox Image』 option.
Step 5 – Configure the Image Element. You can adjust options such as the border, alignment, hover type, and animations.
Step 6 – Add more Image Elements by repeating Steps 4 – 5. If you』d like to retain the styling options you』ve chosen previously, then simply click the 『Clone Element』 icon on the first Image Element, and then only change the assigned image.
The 『Gallery ID』 OptionStep 1 – Once you』ve added all your Image Elements, you can start determining which Image Elements you』d like to add to your Lightbox gallery.
Step 2 – Edit the Image Element you want to add to the Lightbox gallery and locate the 『Gallery ID』 option. To this option, insert a unique gallery ID. For example, TravelGallery.
Step 3 – Keep repeating Step 2 until you』ve added your unique gallery ID to all the Image Elements that will be displayed in the Lightbox gallery. You can add the gallery ID to as many Image Elements as you wish.
Step 4 – Click 『Save Draft』 or 『Publish』 to save your changes.

How To Use Post Cards In Avada

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.

How To Import Single Prebuilt Website Pages In Avada

How To Import Single Prebuilt Website Pages In Avada

With the Avada Builder Library, you can import any page from any Avada prebuilt website. The process of importing a single prebuilt website page also recently got a makeover – with Avada 7.5 and up, you now get images and videos as part of the page import.
If you wish to import everything from a prebuilt website, you should use the Avada Prebuilt Website Importer located on the Avada > Websites page. Please read below for important information about importing single prebuilt website pages using the Avada Builder Library, and watch the video for a visual overview.
What Comes With A Single Prebuilt Website Page ImportWhen importing a single prebuilt website page, you』ll receive almost an exact replica of the page as seen on the live website. I use the word almost, because there is some content and settings that are not imported with the page. Because of this, you will sometimes see differences in style and layout. If you』d like to import the exact replica of our live prebuilt websites, you』ll need to import the full demo, or a section of it.
Content & Settings That Are Imported With Single PagesEntire Page Layout & Content – All Containers, Columns and Elements.Page Template – Page Template set in the Page Attributes section on the Page Options > Settings tab.Avada Page Options – Any Avada Page Options set for the prebuilt website page.Demo Images / Videos – All images or videos used on the prebuilt website page.Content & Settings That Are Not Imported With Single PagesGlobal Options – Any global options set in the Avada Global Options.Custom Post Types – Any custom post types, such as blog posts, faq items, portfolio items, WooCommerce products etc.Sliders – Any type of slider such as Avada, Revolution, Layer, and Elastic.Importing Single Prebuilt Website PagesStep 1 – Create a new page or edit an existing one, in either Avada Builder, or Avada Live.
Step 2 – Click the 『Library』 icon in the toolbar. This opens on the Websites tab.
Step 3 – Select the website you』d like to import a page from, or alternatively, paste a url to a specific page at the top left of the dialog.
Step 4 – Once you select a website, all the pages that are available to import will appear as a list.
Step 5 – To import the page, simply click the Import button that appears beside the page when you mouse over it. A dialog will appear showing you the progress of the import.
After a few seconds, the content will load into the Builder. The page content is then fully editable as normal.

The Avada Builder Library

The Avada Builder Library

The Avada Builder Library allows you to create, save, and quickly redeploy any of your Avada Builder content, from complete page templates, through to Avada Studio content, Containers, Columns, individual Elements and Post Cards. The Library also allows you to import individual pages from the Avada Prebuilt Websites.
The Avada Builder Library can be accessed from several places, depending on what you are trying to do. From the back end at Avada > Library, you can both create new and edit existing Library content. In the Avada Builder, there is a Save icon on Elements, Columns and Containers to save these items into the Library directly from the page content.
From the main Toolbar in the Avada Builder, you can access and deploy existing Library content, as well as Avada Studio content. Here, there are six main tabs – Websites, Templates, Containers, Columns, Elements, and Studio, organizing the various types of content into their own sections. To learn more about each tab, please read the Library Window Tabs section in our article about Avada Builder』s Tools and Icons. Finally, when adding new Elements into your content, you will find a corresponding Library Tab, like the Library Containers Tab, with all saved Containers, and the Library Columns Tab, with all saved Columns etc.
Please read below to see how to take full advantage of the awesome Library in Avada Builder, and watch the video below for a visual overview.
OverviewWhat Can Be Saved To The LibraryHow To Save Items To The LibraryHow To Load Items From The LibraryThe Avada Studio Library TabGlobal ElementsCreating & Managing Avada Builder Library Assets,What Can Be Saved To The LibraryAvada Studio Content Blocks – From the Avada > Studio page, you can directly save any of the relevant content blocks directly to the Avada Builder Library. These are Studio Templates, Containers, Columns, Elements, and Post Cards. The other types of content blocks get saved to thier respective homes – Headers, Page Title Bars, Content Sections and Footers to the Layout Section page, Icons to the Icon Page, and Forms to the Form Builder page.
Custom Page Templates – When saving a full-page layout, it is saved as a Template. This includes all containers, columns and elements on the page and their settings, as well as the Page Template, any custom CSS set on the page via the Custom CSS icon on the Avada Builder, and any settings in the Avada Page Option panel.
This ensures that your page layout is intact and identical when you load it into another page. We』ve also added options that give you maximum flexibility on how to load the page template into a new or existing page. For more details, please read our Avada Builder Custom Page Templates article.
Containers – You can save individual Containers into the Library. This includes all columns and elements currently inside the Container, as well as their settings.
Columns – You can save individual Columns into the Library. This includes all elements currently inside it and their settings.
Elements – You can save individual Elements into the Library. This includes all its current settings, as well. Saved elements can be added back into the same sized columns, or larger or smaller ones as well.,How To Save Items To The LibraryApart from the Avada Studio Content, which is saved to the library from the Avada > Studio page, most content is saved to the Library directly through the Avada Builder.
Step 1. Determine what section you』d like to save into the Library. Remember you can save an Element, a Column, a Container, or a full page layout.
Step 2. Click the appropriate 『Save to Library』 icon, and the Library window will pop up, with the appropriate tab open. If you』re saving a Full-Page Layout, it will be saved under the 『Templates』 tab. If you』re saving a Container, a Column, or an Element, it will be saved under the corresponding tab.
Step 3. Enter a custom name for your Library item. Use a descriptive name that will make it easy to find the item when redeploying. Once finished, click the 『Save』 button, or hit Enter on your keyboard.
Step 4. When it has saved, the new Library item will appear in the Library contents. It is now available to be redeployed at any time. You can now close the Library window and return to your page.
Right Click OptionsThere are also right click options, including the ability to save items to the library. This can be used on Containers, Columns and Elements. Try it out, you』ll love it!
READ MORE ABOUT AVADA BUILDER RIGHT CLICK OPTIONS HERE767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada767,657 Businesses Trust Avada
Get Avada,How To Load Items From The LibraryOnce you have saved any Templates, Containers, Columns and Elements to the Avada Builder Library, you can then easily load them anywhere, on any page, as many times as you』d like. Loading Containers, Columns and Elements not only loads the content itself, but also all its settings and options. This ensures that you load the exact same template you saved.
Let』s look at how you load the different types of Library content that is available.
Loading Custom Page TemplatesPreviously saved full-page templates can be loaded into any page from the Avada Builder Library. You have three options of how to load this type of content, including Replace all page content, Insert above current content or Insert Below current content. This makes it easy to add type of content to both new pages and pre-existing pages.
To load a Page Template:
Step 1. Create a new page or edit an existing one.
Step 2. Click on the Library tab in the Avada Builder toolbar.
Step 3. Select the Templates tab.
Step 4. Choose your saved Page Template from the Library Content area.
Step 5. Mouse over Load (or the plus symbol in Avada live) and select the loading method you prefer.
The template content will now load into the page.
NB. This is the Avada Builder (back-end) interface here, but it』s almost identical in Avada Live.
Loading ContainersHow to load a saved Container from the Avada Builder Library depends on which interface of the Builder you are using, and whether it is an empty page, or already has content.
If it』s an empty page, there will be a + Container (Avada Builder), or Add Container link (Avada Live) on the stater page, and to access the saved Library containers, you simply click on this, switch to the Library tab and click on the saved container you wish to load.
If there is already content on the page, you just need to click on the Add Container icon, found in in Avada Live on the Element Controls of the Container immediately preceding where you want the new container to go, or in Avada Builder with the + Container Icon can be located at the bottom right of every container. See images below.
Loading ColumnsTo load a saved column, you must first have a container to load it into.
Step 1 – Create or select a Container to load the Column into. You can add a blank Container or a pre-populated one, but the saved Column will load with the size it was saved with (1/1, 1/2, 1/3 etc.), so depending on any pre-existing Container content, the column might need to be resized or moved.
Step 2 – To access the Library, click on the Add Column Icon from the Element Controls of the preceding Column, or the empty Column added when you add a Container. In the back-end builder, click on the + Columns Icon at the bottom right of the Container (see images below).
Step 3 – On the Insert Columns dialogue that pops up, select the Library Columns Tab.
Step 4 – Click on the desired saved Column, and it will be inserted directly into your Container. Adjust as required.
Loading ElementsTo load a saved Element from the Library, in Avada Live, just click the + icon on the Element you wish to insert the saved Element after, and head to the Library Elements Tab. In Avada Builder, there is a + Element button at the bottom of every Column.
Loading Prebuilt Avada Website PagesWith Avada, you can also import individual pages from any of the Avada prebuilt websites and customize them as you like.
IMPORTANT NOTE: Please note that importing a prebuilt website page will replace any content that is currently on the page.When you import a single website page, you are not only importing the page layout and content, but also the page template that was used, any Avada Page options enabled, and any images on the page. Global options, Sliders, and Custom Post Types are not imported.
To import a Prebuilt Website Page:
Step 1 – Create a new page or edit an existing one.
Step 2 – Click on the Library tab in the top bar of the Avada Builder.
Step 3 – Select the Websites tab.
Step 4 – Choose your preferred prebuilt website from the list.
Step 5 – Select the page you want to import.
Step 6 – Choose Import to import the page content.
Read more about Installing Individual Prebuilt Website Pages Here,The Avada Studio Library TabThe Avada Builder Library also plays a significant role in the saving and deployment of Avada Studio content. Let』s look at saving content first.
From the Avada > Studio page, there is a Library icon on each content block. Here you can save any of your favorite content blocks directly to the Library. This places them in their relevant area of the Library. For example if you save a Container from that page, it will be saved in the Library under the Library Containers tab, so you can redeploy it any time you wish.,Global ElementsYou can also save items to the Avada Builder Library as Global elements. This applies to Containers, Columns and Elements.
This allows you to set up one instance, that in turn can be deployed across your site, wherever you choose. Edit the Global Element once and see the changes populated across the entire site.
For more details on saving and deploying Global Elements, please read our Avada Builder Global Elements article.,Creating and Managing Avada Builder Library AssetsThere is also an Avada Builder Library admin section, so you can easily create, manage, and edit your saved elements, columns, and containers, as well as your global elements, and in Avada 7.3 we added the ability to create and design Post Cards in the Avada Builder Library. You can edit them individually, delete them, and sort them per category type. The Library is found under Avada > Library, from the WordPress Dashboard. See an example below.
Category types are labelled as Template, Container, Column, Element, and Post Card, and shown in different colors. Global items have the global icon. You can sort the items per category type or global items. The colored category types and the global icon can also be clicked to go to their corresponding list. For example, if you click Column label, it will go to the list of all your saved columns.
How To Create New Library ElementsYou can save items to the Library when building page content, but you can also create Library Elements directly from the Library.
Step 1 – Select the type of Library Element you wish to create from the dropdown menu.
Step 2 – Give your Element a name and click Create Library Element.
Step 3 – You will be directed to a basic editor that looks like a page. Here you can add content. Depending on the Element type, there will be different options. Note: This is not a real page, only a saved template, post card, element, column, or container.
Step 4 – Design and build your Element using the Avada Builder Elements.
Step 5 – When you are finished, click the Update button.
How To Edit Saved ElementsStep 1 – When you hover over the title of the item in the Library you wish to edit; an Edit and Trash links will appear.
Step 2 – Click the Edit link.
Step 3 – You will be sent to the saved element, column, or container which looks like a page. Here you can edit the element, column, or container. View screenshot below. Note: This is not a real page, only a saved element, column, or container.
Step 4 – Make the necessary changes.
Step 5 – When you are finished, click the Update button.
You will notice that the Library UI is slightly different for element, column, and container. Elements will only have the edit function, as you cannot add anything with it. Columns will have the edit function for the column, as well as edit, clone, and delete options for the element, and an option to add a new element. Containers will have the full options (e.g. add, edit, clone, and delete column; add, edit, clone, and delete element).
We have also added Right Click Options in the Element Library in Avada 5.6.1, so you can easily manage your saved global and non-global elements.
IMPORTANT NOTE: When editing a saved element, column, or container from the Avada Builder Library, the changes will be visible on the saved element, column, or container across your site once you click the Update button.How To Delete Saved ElementsStep 1 – When you hover over the title of the item you wish to edit; an Edit and Trash links will appear.
Step 2 – Click Trash link. You can also choose to delete saved items in bulk by checking the check boxes, clicking the Bulk Actions dropdown menu and choosing 『Move to Trash』, then clicking the Apply button. View screenshot below.
Step 3 – The item will be moved to the Trash list. If you hover over the item in the Trash, you can choose to restore it or delete it permanently.
IMPORTANT NOTE: When deleting a saved non-global element, column, or container from the Avada Builder Library, it will not delete the particular item used in your pages except for global elements. Global element deleted from the Avada Library will delete the instances where it is used on your pages.

Avada Builder Library Page Templates

Avada Builder Library Page Templates

When saving a full page layout as a template, it will not only save the content on the page, but also the settings you』ve set for the page. This ensures that your page layout is intact and identical when you load it into another page. We』ve also added options that give you maximum flexibility on how to load the page template into a new or existing page. Please continue reading below to learn more about the saving a page layout as a template into the Avada Builder Library.
What Is Saved With A TemplateWhen you save a page layout as a page template, it will also save the settings of the page itself along with the page content. These are the settings that are saved:
Entire Page Content – All Containers, Columns and Avada Builder Elements currently on the page.Page Template – The page』s current 『Template』 setting in the Page Attributes box.Custom CSS – All custom CSS set on the page via the Custom CSS icon on the Avada Builder.Avada Page Options – All your settings in the Avada Page Options panel.How To Save A Page Layout As A TemplateStep 1. Create a new page or edit an existing one. Ensure the Avada Builder, or Avada Live is active.
Step 2. On the Avada Builder main toolbar, you』ll find the 『Save Page Layout』 icon on the right hand side. Clicking this icon will bring up the Library window. In Avada Live, click the Library Icon, and navigate to the Templates tab.
Step 3. Enter a name for your page template in the text box provided and then click the 『Save Template』 button. Once saved, your custom page template saved in the library.
Step 4. Close the Library window.
Loading A Saved Page TemplateWhen loading a saved page template into a new or existing page, you』ll be presented with three options; Replace All Page Content, Insert Above Current Content, or Insert Below Current Content. Selecting Insert Above Current Content or Insert Below Current Content does not import the Avada Page Options or the page template to prevent overwriting your current settings.
Replace All Page Content – Loads everything the custom template includes such as the entire page content, page template, custom CSS and Avada Page Options. Please note that selecting this option will overwrite everything currently on the page.
Insert Above Current Content – Loads the entire page content directly above your existing content. This setting appends any Custom CSS above existing code. This setting does not load the page template or the Avada Page Options.
Insert Below Current Content -Loads the entire page content directly below your existing content. This setting appends any Custom CSS above existing code. This setting does not load the page template or the Avada Page Options.
How To Load A Saved Page TemplateStep 1. With the Avada Builder enabled, click the 『Library』 tab. This will open the Library window.
Step 2. On the 『Templates』 tab, you』ll see a list of your saved page templates.
Step 3. When you hover over the 『Load』 button of a saved template, (plus button in Avada Live) you will be presented with three options of how to load the template (Replace All Page Content, Insert Above Current Content, or Insert Below Current Content). Select one and the template will load.
Step 4. Close the Library window.

Avada Builder Library Global Elements

Avada Builder Library Global Elements

The Avada Builder Library gives you the ability to save Elements, Columns and Containers as Global Elements. This allows you to set up one instance that in turn can be deployed across your site, wherever you choose. Edit the Global Element once and see the changes populated across the entire site.
IMPORTANT NOTE: The columns and containers that are saved as global, are identified by this icon -> OverviewSetting Up Elements, Columns or Containers As Global ElementsAdding Global Elements To Pages and PostsHow To Edit Global ElementsHow To Delete Global ElementsHow to Unassign An Item As GlobalAdding Global Elements To Widgets
Translating Avada Builder Global Elements, Columns, and Containers
(FAQ) Frequently Asked QuestionsSetting Up Elements, Columns or Containers As Global ElementsStep 1 – Hover over the element to show the options and click the Save Element icon. For Columns and Containers click the Save Column or Save Container icon.
Step 2 – Enter a unique name and check the box for 「Save as Global」. Duplicate names are not allowed.
Step 3 – Click 『Save as Global』 and 『Save Element』, 『Save Column』 or 『Save Container』.
Step 4 – Click 『Update』 to save the page/post.
Note: After editing/creating the Global Element, Column or Container remember to save the page/post if you want to retain the position of that Global item within that page/post. If you don』t save he page/post, you can always come back later and add the Global Element back into the page/post
Adding Global Elements To Pages and PostsStep 1 – To add a Global Element within your page/post, click the 「Add Element」 icon.
Step 2 – Click the Library Elements tab.
Step 3 – Select the Global Element you want to add. The globe icon indicates the element is a global element.
Step 4 – Click 『Update』 to save the page/post.
Note: For Columns and Containers, just click the Add Column or Add Container buttons, and click the Library Columns or Library Containers. Then, select the Global Column or Global Container you want to use.
How To Edit Global ElementsStep 1 – There are two ways to edit the Global Elements. One way is through the Library, which is the centralized editing area for editing saved global or non-global elements, found at Avada > Library, from the WordPress dashboard. For more information on this, click here. Another way, is by simply choosing any Global Elements instance within a page/post and edit.
Step 2 – As soon as you save the page/post, the changes will automatically be applied to all instances of that Global Element across the entire site (including the Widget section).
Step 3 – Click 『Update』 to save the page/post.
Global items will have a globe icon and a different blue background color than normal Elements, Columns, and Containers, which have a white background color.
Note: To ensure that edits to a Global Item is deployed to all instances, wherever used within the site, remember to save the page/post.
How To Delete Global ElementsStep 1 – There are two ways to delete the Global Elements. One way is through the Library, which is the centralized editing area for editing saved global or non-global elements, found at Avada > Library, from the WordPress dashboard. For more information on this, click here. Another way is to navigate to the Library tab from the Avada Builder on your page.
Step 2 – Click the Element, Column, or Container tab.
Step 3 – Click Delete for the global item you want to remove. The globe icon indicates the element is a global element.
Note: Deleting a single Global Element will remove all instances of the same Global Element across all pages and posts.
How to Unassign An Item As GlobalStep 1 – Click the global icon on the element, column, or container you wish to unassign global status.
Step 2 – A confirmation message will appear asking if you want to remove global property. Click OK.
Note: This will only unassign the global status on the specific element, column, or container, and will not delete the saved global element, column, or container. If you wish to assign global status again, you may do so by saving it as global elements. See 「Setting Up Elements, Columns or Containers As Global Elements」 section above.
Adding Global Elements To WidgetsGlobal Avada Builder Items (Containers, Columns, and Elements) can very easily be added to widgets, by simply copying and then pasting the Global Element Shortcode into the widget, as described below.
Step 1 – In the Avada Builder Library, locate the Global Element you wish to add to a widget.
Step 2 – In the Global column, you will see a shortcode. Select and copy that shortcode.
Step 3 – Navigate to the Appearance > Widgets tab 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 4 – Drag and drop the Text widget into your chosen widget area on the right-hand side.
Step 5 – Paste the copied global element shortcode in the Text editor.
Step 6 – When finished, make sure to click the 『Save』 button in the widget editing box to save your changes.
Translating Avada Builder Global Elements, Columns and ContainersIf you are using the translation plugin, WPML, you can now translate Global Elements, Columns and Containers.
Translation support for Global elements is supported by:

WPML Multilingual CMS (4.0.6 or above)
WPML String Translation (2.8.6 or above)
WPML Translation Management (2.6.6 or above)

For more details on how to use this feature, please see WPML』s  specific Avada documentation.
Frequently Asked QuestionsWhere do I edit my saved global elements?Currently global elements are edited anywhere they are located directly within the page or post. There is no centralized edit area for them. Find a page that uses the global element, edit it using the Fusion Builder and then save the page. It will update all instances of the global element across the site.Will saving an Element as a Global Element update it on all pages it has ben used on?Unfortunately that is not possible. You can take any content you have already made and save it as a global element. However, only that first instance will allow it to start being a global element that populates wherever else you use it. If you have a saved element in your Fusion Builder Library that is used on several pages, saving that element as a Global element will not update it on all those pages. You would have to reinsert the saved global element.Can I save an entire page layout as a Global Element?
Unfortunately, that is not possible and functionally, it is simply not necessary. Only Elements, columns, and containers can be saved as Global Elements. With an entire page though, you can save it into the Fusion Builder Library as a Template, which allows you to reuse the page anywhere you want.
What will happen if I click 'Save Element', 'Save Column' or 'Save Container' when selecting Global, but I do not Update the page/post?
Nothing bad will happen, nothing breaks and the Global item is not lost. Saving for use in situ is a two step process. Selecting to set up an Element, Column or Container as Global and clicking 『Save Element』, 『Save Column』 or 『Save Container』 saves it to the Fusion Library at first, however, to retain the position of this global item within the page/post, you need to 『Update』 the page/post.
Can I save Nested Columns as a Global Element?Yes you certainly can, and any Elements added to Nested Columns can also be saved as Global Elements.

Understanding Layouts and Layout Sections

Understanding Layouts and Layout Sections

With Avada Layouts, there are two main components – Layouts, and Layout Sections. It is crucial to understand the difference between these two. It is perhaps easiest to think of a Layout as simply a container that holds the page content. The content itself, however, comes from the Layout Sections.
Structurally, Avada has four Layout Sections: the Header, the Page Title Bar, the Content area, and the Footer. In the Header, for example, is the Logo area and the menu, and sliders, when attached through the global options, are also in the Header Layout Section.
Then, whether it is used or not, the Page Title Bar Layout Section sits directly beneath the header. Under that is the Content Layout Section, which holds the page content coming from the editor, and which goes all the way down to the start of the Footer Layout Section, which finishes the page. See an example of the Layout Sections on the Treatment page of the Avada Spa Demo, directly below.
In Avada Layouts, as you can see below, you can see these four default Layout Sections represented in the Global layout. Here, however, a Custom Footer has been added to the Global Layout, adding a new footer to the website. Also, next to the Global Layout, is a new 404 Page Layout with a Custom Layout Section added to the Content Layout Section, and conditions set so that it only shows on 404 Error pages.
LayoutsSo, in Avada Layouts, there are two types of Layouts. One is the Global Layout. It is empty by default, which means no custom Layout Sections are overriding any of the default Layout Sections, and all content is generated from the Avada Options, Page Options and actual page content. However, if any custom Layout Sections are added to this Global Layout, the custom Layout Section will display globally across the site, and the relevant global options will not be active. An example of this would be a custom Global Footer or Global Header.
The main benefit of using a Custom Layout Section in the Global Layout would be to take advantage of the full design capabilities of Avada Builder to create a custom Layout Section, such as the Footer or Header. Layout Sections can contain anything that can be built in the Avada Builder, and so can have complex layouts, that are not possible to create with just the Avada options. Below is an example of the Global Layout on the Pet Supplies Websites, that has several Custom Layouts Sections, as well as a number of Conditional Layouts.
The second type of Layout is a conditional Layout. These are created in Avada Layouts, and then conditions are added to them to limit when the Layout is used. For more details on Conditional Layouts, see the Understanding Conditional Layouts document.
To create a new Layout in the Avada Layouts, simply give the Layout a name and click Create New Layout. The Layout will then appear below this, next to the Global Layout.
At this point, the Layout is not active. As can be seen at the bottom of the Layout, no conditions have been set, and no Custom Layout Sections have been added. It』s important to note that Conditions are set on the Layout, and Layout Sections provide the content. Once these two tasks are completed, the new Layout will be active on the site based on the conditions set, and using the content added via one of the three currently active Layout Sections. See below on how these Layout Sections work.
Layout SectionsCustom Layout Sections are added to the Layout on by clicking the + symbol on the corresponding Layout Section on the desired Layout. As can be seen below, you can create a New Layout Section by adding a Section name and clicking on Create New Section, or if you have any Existing Layout Sections, they will appear under the Existing Section tab.
Existing Layout Sections will also appear in the Layout Sections tab, which is basically a Library of your Custom Layout Sections. These sections can be reused on any number of Layouts.
If you mouse over a Layout Section on a Layout, you will see two icons – an edit icon and an disconnect icon. To disconnect the Layout Section from the Layout, simply click the disconnect icon. To edit the contents of the Layout Section, click the edit icon. The WordPress editor will load, and you can choose which editor you prefer to use. Your preference will be remembered next time you edit the Layout Section.
The last thing to do with the Layout Sections is to create the content. as this is done using the Avada Builder, you can create virtually any layout you like. When creating Content Layout Sections, you will notice a range of new Layout Section Elements. Please see the Creating Layout Section Content and the Design Elements vs Layout Section Elements docs for more information on how to build content for your Layout Sections and to use these new special elements.

Understanding Footer Layouts

Understanding Footer Layouts

As part of Avada Layouts, you can now create fully customized Footers for your website, using the full design power of Avada Builder. These footers can be global, or they can be conditional; i.e. just on certain pages, categories, custom post types etc. Read on to learn how to build Footer Layouts in Avada, and watch the video for a visual overview.,Overview
The Avada Layouts Interface

Creating A Custom Layout

Creating A Custom Layout Section

Editing A Custom Layout Section

Creating A Conditional Layout
Conclusion,The Avada Layouts InterfaceA Footer Layout is, technically, a Layout Section that you add to a Layout. So, when making a Custom Footer, you need to create a Footer Layout Section, which you can add to either the Global Layout or a Custom Layout. See the Introducing Avada Layouts doc for a general overview of this amazing tool, and Understanding Layout and Layout Sections to understand the difference between these two parts of Avada Layouts, but for now, let』s now look at creating a Custom Footer Layout Section.
You can find Avada Layouts at Avada > Layouts, from the WordPress sidebar, or from the Avada Dashboard. This interface is where you both create and manage your Layouts and Layout Sections in Avada. Initially, there is just a Global Layout, and by default, this is empty, with no attached Layout Sections, as can be seen below.
767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada767,639 Businesses Trust Avada
Get Avada,Creating A Custom LayoutYou can add a Footer Layout Section to the Global Layout, or to a Conditional Layout, set to only show on specific custom post types, or evben single pages etc. The Global Layout is already there by default, but for a Conditional Layout, we have to first create a Layout.
Creating a Layout is done on the Layouts page, by simply adding an appropriate name and then clicking on Create New Layout, as can be seen below.,Creating A Custom Layout SectionIf you already have a Layout you want to add a Custom Footer Layout Section to, or you want to add it to the Global Layout, then you can go ahead and create a Footer Layout Section.
You can do this on the Layout Section Builder page, by simply choosing the type of Layout Section, and then adding a name (in this case, Footer, and perhaps a name of Global Footer might be most appropriate) and then clicking on Create New Layout Section, as can be seen below.
Alternatively, you can create a Layout Section directly from the Layout you wish to add it to, as can be seen below. For a Layout Section to appear on your site, it has to be added to a Layout. And as mentioned, there is initially only a Global Layout. So, if you wanted to create a Global Custom Footer, you would just add it to this Layout. But if you wanted a conditional Custom Footer, you would need to create a new Layout, assign a Custom Footer Layout Section to it, and then add conditions to it to get the Layout to display according to those conditions.
There』s no wrong way to do this, but it』s important to think of the circumstances. If the layout is already active (i.e. it has conditions or is the Global Layout) then any Layout Section added would also be immediately active, and at this point would still be empty. So in the example of adding a Custom Footer to a Global Layout, it would make more sense to add it via the Layout Section Builder page first, and build it before adding it to the Global Layout.
Alternatively, if we were adding a Footer Layout Section to A Conditional Layout, then we could add it in this way, and then build it. Conditional Layouts are not in use until there are conditions added. If we mouse over the Footer Layout Section on the Layout, as shown below, we can then click on the edit icon to design and build our Layout Section.,Editing a Custom Layout SectionWhen you first edit a new Layout Section, you come to the default WordPress Editor. From here, you can choose to use Avada Builder, or Avada Live. It is here we create our Custom Layout Sections. Please refer to Creating Layout Section Content for more information on this, but in short, you can build anything you want here.
Anything you can build in the Avada Builder can constitute the content of your Custom Footer. You can have multiple columns, background images, anything. The freedom this gives is enormous. The Layout Section is literally that – a section where the footer content will show. The content itself comes from the Builder, and what you can do is only limited by your imagination.
As an example, see below the initial footer created for the Taxi Demo. This was created using the traditional method of customizing the theme options and the footer widgets.
Now look at the Custom Global Footer created, using Avada Layouts.
IMPORTANT NOTE: It』s important to note that when you have a Footer Layout Section attached to a Global Layout, the Footer Options in the Theme Options will not be available. Everything in the footer is controlled in the Layout Section by the content options and the Layout Section Options, the equivalent of the Page Options in Layout Sections.,Creating A Conditional LayoutWith a Global Layout, there are no Conditions. This is because it』s global and any Layout Sections added to it will be used on every page. If, however, you wanted a Custom Footer just on some pages of your site, for example, single Blog posts, you』d need to add the Footer Layout Section to a Conditional Layout.
If you want to add an existing Layout Section to a Conditional Layout, you need to create the Layout first. Then, you can simply click on the Select Footer tab of the Layout, and navigate to Existing, from where you can add the Layout Section, as seen below.
With any Conditional Layout, you need to set the conditions of the layout. This is best done last, because as soon as you set the conditions, the layout is active, and if you do this after first creating the Layout Section, but before editing it, the pages displayed that fit the conditions would be empty in those sections.
To add a condition, or conditions, simply mouse over the bottom of the Layout, and choose Add A Condition. This brings up the Layout Conditions Dialog, as seen below. Please see Understanding Conditional Layouts for more information on Conditional Layouts, but for this example, if we wanted a Custom Footer on just the single blog posts, we would select All Posts in the Posts Conditions tab, as shown below.,ConclusionWith Avada Layouts, creating a Custom Footer is not only now a reality, but rather, an unlimited possibility. Not only can you use the power of Avada Builder to create almost any Footer you can conceive of, but thanks to the power of Conditional Layouts, you can also show, or hide, the Footer on any page, category, custom post type, or any combination of conditions you can think of.
Avada Layouts is a game changer in the true sense of the word. It enables such freedom of design, and gives such flexibility in deployment, that building Footers will simply never be the same again.

Understanding Conditional Layouts

Understanding Conditional Layouts

A Conditional Layout is simply a way to make a Layout that only applies to certain pages, or conditions. In this way, you can have multiple layouts for different post types or categories, or whatever your design needs are.
By default, in Avada Layouts, there is only the Global Layout, which you can use to add global custom Layout Sections to. But you can also create as many other Layouts as you like, and then set conditions for when that Layout will be used. Conditions are largely based on custom post types, and there are many conditions for each type. For example, you might want a layout that is only active on Single Post Pages, or Single Portfolio items, or Event Calendar Items etc. But conditions can be as complex as you want, and you can use both multiple conditions, and multiple exceptions. This is a very powerful system, which can create Custom Layouts for virtually any aspect of your site. Let』s look at the Layout Conditions dialog to see what can be done with this amazing tool.
As seen below, it』s is split up into three columns, the first one being broken up into the Custom Post Types available on your installation. If you select a Post Type, the middle column is then populated with all possible conditions for that post type. For each condition, there is a tick box and a cross box. Use the tick box to include a condition, and the cross box to exclude a condition. Selected conditions are then shown in the third column, for a simple overview of the conditions chosen for the layout.
ExamplesRather than go through every single condition, let』s show a few examples of how the Layout Conditions might be used. The possibilities are almost endless and depend entirely on your situation, but once you understand how the conditions work, you will easily be able to apply them to your specific site and situation.
Custom 404 PageA Custom 404 page is now very easy to create. Simply make a new Layout, and in the conditions, assign it to Other > Custom 404 page. Then, using a Content Layout Section, you can design whatever 404 page you like, with any content and design, using the full power of the Avada Builder.
Custom Single Posts LayoutThe next example, is a Custom Single Posts Layout with an exclusion. As you can see from the Layout Conditions below, this Layout would be shown on ALL posts, with the exception of posts in The Designer Show Category. For this category, the default single posts layout would load, unless you created a custom layout for just that category.
Custom Post Category PagesIn this example, the Layout conditions have been set to only show the Layout on certain Post Categories, in this case, Business and Business Broadcast. This might be, for example, if you wanted a Custom Advertising Banner above or below your normal Post Content for only these two Categories.