IMPORTANT NOTE: This option is only available in Avada version 5.6 or higher. The current version of Avada is, Avada 7.6 (Released on December 15th, 2021)Newly released for Avada 5.6 is the option to enable a search icon/field for your mobile menu regardless on which header type you choose.
Enable/Disable The Mobile Menu Search Icon/FieldStep 1 – Navigate to Avada > Theme Options > Menu > Mobile Menu. Options shown on this section will vary depending on your selected header type. Click here to know more about the Mobile Menu settings.
Step 2 – Look for 『Display Mobile Menu Search Icon/Field』 option and set this to ON.
Choosing A Header TypeCurrently, there are 7 header types to choose from in the Avada Theme Options.
Step 1 – Navigate to Avada > Theme Options > Header to access the header options.
Step 2 – Expand the Header Content section and select your desired Header type.
Main Header Setup Info
Author 诗语
How To Change Image Sizes in Child Themes
More About Child ThemesView The WordPress Codex DocsLocate Current Image SizesBefore you can modify your image sizes in your child theme, you must first locate them in the files so you know the exact image slug to target. The add_image_size() functions are located in two files:
Avada -> wp-content/themes/Avada/includes/class-avada-init.php
Fusion Core -> wp-content/plugins/fusion-core/includes/class-fusion-portfolio.php
To easily locate this, just do a text search in the file for add_image_size.
Once you』ve found the image size function, you can copy out the image size slug that you』re wanting to modify, for use in your child theme』s function.
Note: The 「portfolio-five」 image size is used for not only the five column portfolio layout, but is also used in the Recent Posts element』s 「Thumbnail on Side」 layout.
Avada -> wp-content/themes/Avada/includes/class-avada-init.php
Copy to Clipboard/**
* Add image sizes.
*
* @access public
*/
public function add_image_size() {
add_image_size( 'blog-large', 669, 272, true );
add_image_size( 'blog-medium', 320, 202, true );
add_image_size( 'recent-posts', 700, 441, true );
add_image_size( 'recent-works-thumbnail', 66, 66, true );
// Image sizes used for grid layouts.
add_image_size( 'fusion-200', 200, '', false );
add_image_size( 'fusion-400', 400, '', false );
add_image_size( 'fusion-600', 600, '', false );
add_image_size( 'fusion-800', 800, '', false );
add_image_size( 'fusion-1200', 1200, '', false );
} 1/**2 * Add image sizes.3 *4 * @access public5 */6public function add_image_size() {7 add_image_size( 'blog-large', 669, 272, true );8 add_image_size( 'blog-medium', 320, 202, true );9 add_image_size( 'recent-posts', 700, 441, true );10 add_image_size( 'recent-works-thumbnail', 66, 66, true );11 12 // Image sizes used for grid layouts.13 add_image_size( 'fusion-200', 200, '', false );14 add_image_size( 'fusion-400', 400, '', false );15 add_image_size( 'fusion-600', 600, '', false );16 add_image_size( 'fusion-800', 800, '', false );17 add_image_size( 'fusion-1200', 1200, '', false );18}Fusion Core -> wp-content/plugins/fusion-core/includes/class-fusion-portfolio.php
Copy to Clipboard/**
* Add image sizes.
*
* @access public
*/
public function add_image_size() {
add_image_size( 'portfolio-full', 940, 400, true );
add_image_size( 'portfolio-one', 540, 272, true );
add_image_size( 'portfolio-two', 460, 295, true );
add_image_size( 'portfolio-three', 300, 214, true );
add_image_size( 'portfolio-five', 177, 142, true );
}12 1/**2 * Add image sizes.3 *4 * @access public5 */6public function add_image_size() {7 add_image_size( 'portfolio-full', 940, 400, true );8 add_image_size( 'portfolio-one', 540, 272, true );9 add_image_size( 'portfolio-two', 460, 295, true );10 add_image_size( 'portfolio-three', 300, 214, true );11 add_image_size( 'portfolio-five', 177, 142, true );12}Modify Your Child ThemeNow that you have the slug for the image size you would like to change, it』s time to move to your child theme.
Step 1 – Go into your child theme folder and open the functions.php file. If you don』t have this file, simply create one with the same filename.
Step 2 – At the very bottom, add this action:
Copy to Clipboardadd_action( 'after_setup_theme', 'my_child_theme_image_size', 20 );
function my_child_theme_image_size() {
remove_image_size( 'blog-large' );
add_image_size( 'blog-large', 1000, 500, true );
}xxxxxxxxxx5 1add_action( 'after_setup_theme', 'my_child_theme_image_size', 20 );2function my_child_theme_image_size() {3 remove_image_size( 'blog-large' ); 4 add_image_size( 'blog-large', 1000, 500, true );5}Step 3 – Replace the value 『blog-large』 inside remove_image_size( 『blog-large』 ); with the image slug of your desired image size.
Step 4 – In add_image_size( 『blog-large』, width, height, true ); , replace the values with the exact same image slug and add your desired width and height values respectively. For example,
Copy to Clipboard'blog-large', 1000, 500xxxxxxxxxx 'blog-large', 1000, 500Step 5 – If you』d like to change more than one image size, copy these actions and paste them inside the same my_child_theme_image_size() function and change the necessary values accordingly:
Copy to Clipboardremove_image_size( 'blog-large' );
add_image_size( 'blog-large', 1000, 500, true );xxxxxxxxxx remove_image_size( 'blog-large' ); add_image_size( 'blog-large', 1000, 500, true );Step 6 – If needed, run the Force Regenerate Thumbnails plugin to regenerate your thumbnails.
Code Block Encoding vs. Not Encoding Option
If you』re wondering what the 『Disable Code Block Encoding』 option found in Theme Options > Advanced tab does, please continue reading below.
What Happens To Your Content Inside A Code Block?Essentially, any content within a Code Block element is encoded. This stops WordPress from getting it』s hands on the code and inserting
tags, line breaks and any other formatting changes that it likes to make to content inside the editor. By default, Avada takes the content and converts it into a base64 string so that it can be decoded when the page is rendered. This way it will come out on the page the same as it was inserted into the Code Block.
What Happens When You Enable The 『Disable Code Block Encoding』 Option?If you choose to enable the 『Disable Code Blocking Encoding』 option located in Theme Options > Advanced, your Code Block elements essentially become a Text Block element and WordPress will have it』s way with the content inside. Please view below for a sample Google Analytics code inside a Code Block that has encoding enabled and disabled.
Encoding DisabledIf you have the 『Disable Code Block Encoding』 option checked (Encoding Disabled), then WordPress will insert formatting changes. These tags alone are enough to break the JavaScript code. View screenshot here.
Encoding EnabledIf you have the 『Disable Code Block Encoding』 option unchecked (Encoding Enabled), then your code will be inserted as intended and function correctly. View screenshot here.
How The Menu Element And Menu Work Together
The Menu Element allows you to display and customize an existing Menu, and can be used anywhere in your content. But it will most typically be used in Custom Header Layouts. See the Menu Element documentation for a full rundown of the element and all of its many options, but in this document, we are going to explore how it works in concert with the actual WordPress menu, and review some common situations using the Menu Element.,OverviewCreating Your Menu In WordPressWhere The Menu Element Stops and The Menu StartsHow The Prebuilt Headers Layouts WorkHow To Add Avada』s Special Menu Items,Creating Your Menu In WordPressThe first step, before using the Menu Element, is to have an existing menu. Menus are core WordPress business, and are created under Appearance > Menus, from the WordPress dashboard. See our Setting Up A Menu doc, or the WordPress Menu User Guide on the WordPress Codex for detailed information on this step.
The Menu Element then controls how the menu displays, but there also some options to be aware of in the Menu itself, that affect the menu』s appearance.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Where The Menu Element Stops And The Menu StartsWhen creating your menu in WordPress, there are several options with the menu and the menu items that will affect how the menu will display on the page, whether assigned via the WordPress Menu Options, or displayed using the Menu Element.
Please review the Menu Settings doc for a full rundown of what you can configure while building a menu, but these primarily include the Avada Menu Options, found in every menu item, and the Avada Special Menu Items, found at the bottom left of the menu area.
For example, with the Avada Menu Options, you can style a menu item as a button, add an icon or show the menu item only as an icon, add a Menu Highlight Label, or enable a Mega Menu on the item. All of these options would affect how the menu displayed when using the Menu Element, and as such, the styling for such aspects of the menu items would come from the Menu itself, and not the Menu Element.
And with the addition of the Avada Special Menu Items in Avada 7.0, this is where you would add things like WooCommerce iconized menus, Search bars and Sliding Bar Toggles, if wanting to use a menu with the Menu Element.,How The Prebuilt Headers WorkWhen importing the Prebuilt Headers, do not be concerned if they don』t initially look exactly as the preview. This is because of the above mentioned connection with the actual menu and its settings. When you import a demo Header, the Menu Element uses the first Menu on the site, and the Image Element will only import a logo if one has been uploaded via the options. Therefore, not all of the Layouts will produce a menu like the previews without some extra work, either adding a logo, selecting the appropriate menu, or building a suitable menu for the corresponding area in the template.
For a detailed rundown of each Pre-Built Header, and what you need to customize, please see the Prebuilt Headers for Layouts document.,How To Add Avada』s Special Menu ItemsTo see details of each specific Special Menu Item, head to the Avada Special Menu Items doc. When assigning Menus via WordPress, these options are added via the Global Options, but when using the Menu Element, these special items need to be added to the menu itself for them to appear. These are the WooCommerce Cart, the WooCommerce My Account, Search functionality, and the Sliding Bar Toggle.
Each of these Special Items has their own Avada Menu Options panel, and can be added to menus by themselves or with other menu items.
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 Option Sets
The Avada Builder is a vital part of Avada』s ecosystem. This powerful and easy to use page builder allows you to quickly and easily build all manner of page layouts, through a drag and drop wireframe interface, and now, with Avada Live, through a front-end page builder. Both versions of Avada Builder are intuitive, powerful and flexible.
Avada Builder has its own documentation section where you can learn all about it, and in addition, for Developers, there is an Avada for Developers category, where you can find out all about actions, filters, functions, add-ons and much more.
There are three areas in which you can set options for the Avada Builder. Firstly, there are the general Avada Builder Options, accessed from the Avada Dashboard at Options > Builder Options. Then, there are the Avada Builder Element Default Options controlling the individual Builder Elements. These options are found in the Avada Builder Elements tab of the Global Options. Finally, there are Avada Live Preferences, found in the toolbar of Avada Live.
View The Avada Builder Documentation,Avada Builder General OptionsAvada Builder is a stand alone plugin and contains a set of options for the Builder itself. These options are only for Avada Builder and are not related to the Avada Options System. These are general options around how the Builder loads, what Elements load, and what post types the Builder is available on. You can access these options from the Avada Dashboard, by going to Options > Builder Options. Read more about these options at the link below, or watch the video for a visual overview.
Read More About The Avada Builder General Options!,Avada Builder ElementsAvada Builder has over 70 design Elements you can use to build professional pages through an intuitive user interface. Each element has a set of options for customization, that also work in tandem with Avada』s Option Network.
The link below shows you a full listing of ALL Avada Builder Elements, each linking to their own Element document. The options contained within each Element will only affect the single instance of the Element they』re set in.
See The Full List of Avada Elements!There are also global default options for Elements, located in the Avada Global Options. Go to Avada > Options > Avada Builder Elements. These global Element Options are also accessible from the Global Options tab of the Sidebar in Avada Live. The sidebar is accessed from the Toolbar at the top of the page, when in the front-end builder.,Avada Live PreferencesAvada Live has its own set of preferences you can set, to configure the Live Builder in just the way you like it. There are also a large range of keyboard shortcuts you can use to speed up your workflow.
Read About Avada Live Preferences
Using Videos in Avada
As Internet speeds increase, videos are increasingly common on websites, and they can make a site dynamic and more interesting than a static page. With Avada, we offer a wide range of options for adding videos into your website, including YouTube, Vimeo and self-hosted videos.
Generally, YouTube and Vimeo videos are more commonly used, as these are not served directly from your server, and so don』t affect your bandwidth, but self-hosted videos, despite thier potential for affecting page load speed and server bandwidth, can also be used in clever ways in Avada, and should not be ruled out.
This article looks at the various ways videos can be used in Avada. Read on!
Where Can I Use Videos In Avada?
Videos In Sliders
Videos As Container Backgrounds
Videos in A Lightbox
Video Elements
Some Examples,Videos In SlidersAll major sliders that ship with Avada support videos, including Avada Slider, Slider Revolution & Layer Slider.
Each slider will, of course, have a different process for adding videos, but all three support YouTube, Vimeo, and self-hosted videos. You can use any video type in a slider, but this is generally where self-hosted videos come into their own. The most appropriate videos for sliders are often small background videos that are muted, autoplay upon load, and with no controls. YouTube and Vimeo videos often have overlays and ads etc, so it』s here a small self hosted video fits the bill.
Avada Slider – Avada Slider is Theme-Fusion』s own slider, and supports a full range of video backgrounds. Please see the Avada Slider Background Type Options for more information on how to add videos to your Avada Slider slides.
SliderRevolution – SliderRevolution supports all three types of videos for slide backgrounds. See our Slider Revolution Documentation for more information. There are also a wealth of tutorials on the Internet if you need help to create your SliderRevolution sliders, and a good place to start is the ThemePunch Support Center.
LayerSlider – LayerSlider uses video layers which also support YouTube, Vimeo and HTML 5 video. Please see our Layer Slider documentation, or the Kreatura LayerSlider Documentation for further information.,Videos As Container BackgroundsYou can also use videos as Container backgrounds, through the Container > BG > Video tab. Again, these are best as background videos, rather than feature videos, as the container dimensions may not fit the video size and content will likely be placed above the video in the container and its column/s.
For more details on the Container Backgorund tabs, including the video tab, please see the How To Use Container & Column Background Options doc and video.
767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada767,650 Businesses Trust Avada
Get Avada,Videos In A LightboxVideos can also be opened in a Lightbox, in a variety of ways. You can of course use the Lightbox Element, which we will cover below, in the Elements section, but you can also trigger a video in a Lightbox from a Column.
Editing any Column, you will find the Link URL field and the Link Target field, directly below this. Simply add your video URL in the Link URL field, and set the Link Target Field to Lightbox. The whole column then becomes a link, and clicking on it briings the video up in a Lightbox, ready to play.,Useful Elements for VideosThere are 3 Video Elements in Avada, as well as a number of elements that can be used to trigger or display videos.
Video Element – this is for self-hosted videos. This is new in Avada 6.1, and offers a range of options for both video format and layout options.
Vimeo Element – easily add Vimeo videos to your content. There are dimension and alignment options, as well as autoplay and additional API paremeter options.
YouTube Element – easily add YouTube videos to your content. There are dimension and alignment options, as well as autoplay and additional API paremeter options.
Lightbox Element – The Lightbox Element has a Video Content type, and when this is selected, you can add any video URL here, as well as control a thumbnail, title and description. This is an easy and stylish way to play a video in a Lightbox.
Button Element – You can also trigger a video in a Lightbox from the Button Element. Simply ass the Video URL in the Button URL field, and select Lightbox as the Button Target.
Modal Element – You can add a video to a Modal dialog as its content, by adding another video based element, like the YouTube Element, into the Contents of Modal field, through the Avada Shortcode generator, when editing the Modal Element.,Some ExamplesClick To Open Video!Click Me To Open Video! Video in a Lightbox Element
Video in a Lightbox, being triggered from a Column
Video in a Lightbox, being triggered by a Button
Sorry, your browser doesn't support embedded videos.Click Me To Open Video in Modal!Self-hosted Video in a Video Element with 5px border radius.
YouTube Video in a YouTube Element
Self-Hosted Video opening in a Modal
Mobile Menu Settings
With Avada theme being responsive and mobile-friendly, this includes a mobile responsive menu as well. Having a Mobile Menu makes it easier for the users to navigate your website on devices with smaller screen size, especially if you have a lot of pages/menu items. Avada has specific section in Theme Options to help you customize your Mobile Menu with ease. Continue reading below to know more about customizing and setting up Mobile Menu.
Mobile Menu OptionsNavigate to Avada > Theme Options > Menu > Mobile Menu section and you will see the available options for Mobile Menu.
IMPORTANT NOTE: Mobile Menu Search Icon/Field and Mobile Header Background Color are the only options available for your Header Layout #6, the other options are only available when using Header Layouts #1-5 or 7. The rest of the options for Header #6 are on the Flyout Menu and Main Menu tab.Mobile Menu Design Style – Illustrated as A. Controls the design of the mobile menu. Choose between Classic, Modern, or Flyout. Flyout design style only allows parent level menu items. Note: When you select Flyout design, only a few options will be available. You can find other options for Flyout in the Flyout Menu section.
Mobile Menu Icons Top Margin – Illustrated as B. Controls the top margin for the icons in Modern and flyout menu design. Manually enter a value (0-200) or drag the slider left/right.
Mobile Menu Dropdown Item Height – Illustrated as C. Controls the height of each dropdown menu item. Manually enter a value (0-200) or drag the slider left/right.
Mobile Menu Dropdown Slide Outs – Illustrated as D. Turn on to allow dropdown sections to slide out when tapped.
Display Mobile Menu Search Icon/Field – Illustrated as E. Turn on to display the search icon/field in the mobile menu.
Mobile Menu Sub-Menu Indicator – Illustrated as F. Turn on to display the mobile menu sub-menu indicator: 「-「.
Mobile Header Background Color – Illustrated as G. Controls the background color of the header on mobile devices.
Mobile Archive Header Background Color – Illustrated as H. Controls the background color of the archive page header on mobile devices.
Mobile Menu Background Color – Illustrated as I. Controls the background color of the mobile menu dropdown and classic mobile menu box.
Mobile Menu Background Hover Color – Illustrated as J. Controls the background hover color of the mobile menu dropdown.
Mobile Menu Border Color – Illustrated as K. Controls the border and divider colors of the mobile menu dropdown and classic mobile menu box.
Mobile Menu Toggle Color – Illustrated as L. Controls the color of the mobile menu toggle icon.
Font Family – Illustrated as M. Controls the font family to be used.
Backup Font Family – Illustrated as N. Controls the backup font family to be used in case the primary font doesn』t load correctly.
Font Weight & Style – Illustrated as O. Controls the font weight and style to be used.
Font Subsets – Illustrated as P. Controls the font subset to be used.
Font Size – Illustrated as Q. Controls the size of the text on display.
Line Height – Illustrated as R. Controls the spacing between lines.
Letter Spacing – Illustrated as S. Controls the spacing between letters.
Font Color – Illustrated as T. Controls the color of the text.
Mobile Menu Hover Color – Illustrated as U. Controls the hover color of the mobile menu item. Also, used to highlight current mobile menu item.
Mobile Menu Text Align – Illustrated as V. Controls the mobile menu text alignment. Choose between Left, Center, or Right.
How to assign a Mobile MenuStep 1 – Navigate to Appearance > Menus section.
Step 2 – Click 『Manage Locations』 tab.
Step 3 – Select a menu from the dropdown for the Mobile Navigation area. If you do not have a menu, please create one. Check this to know more about setting up a new menu.
Step 4 – Don』t forget to click 『Save Changes』 button.
How To Reduce Image Size Generation
More About Child ThemesView The WordPress Codex DocsThe Avada theme generates image sizes for the most important areas, so that images of appropriate sizes can be loaded on the frontend instead of always loading the full image size. It may seem like a lot of images, but this reduces loading time considerably on the front end for your viewers. We feel the performance increase is well worth the extra image files. If you would like to change this to suit your needs however, please read the information below.
Locate Current Image SizesBefore you can reduce your image sizes in your child theme, you must first locate them in the files so you know the exact image slug to target. The add_image_size() functions are located in two files:
Avada -> wp-content/themes/Avada/includes/class-avada-init.php
Avada Core -> wp-content/plugins/fusion-core/includes/class-fusion-portfolio.php
To easily locate this, just do a text search in the file for add_image_size.
Once you』ve found the image size function, you can copy out the image size slug that you』re wanting to remove, for use in your child theme』s function.
Note: The 「portfolio-five」 image size is used for not only the five column portfolio layout, but is also used in the Recent Posts element』s 「Thumbnail on Side」 layout.
Avada -> wp-content/themes/Avada/includes/class-avada-init.php
Copy to Clipboard/**
* Add image sizes.
*
* @access public
*/
public function add_image_size() {
add_image_size( 'blog-large', 669, 272, true );
add_image_size( 'blog-medium', 320, 202, true );
add_image_size( 'recent-posts', 700, 441, true );
add_image_size( 'recent-works-thumbnail', 66, 66, true );
// Image sizes used for grid layouts.
add_image_size( 'fusion-200', 200, '', false );
add_image_size( 'fusion-400', 400, '', false );
add_image_size( 'fusion-600', 600, '', false );
add_image_size( 'fusion-800', 800, '', false );
add_image_size( 'fusion-1200', 1200, '', false );
} 1/**2 * Add image sizes.3 *4 * @access public5 */6public function add_image_size() {7 add_image_size( 'blog-large', 669, 272, true );8 add_image_size( 'blog-medium', 320, 202, true );9 add_image_size( 'recent-posts', 700, 441, true );10 add_image_size( 'recent-works-thumbnail', 66, 66, true );11 12 // Image sizes used for grid layouts.13 add_image_size( 'fusion-200', 200, '', false );14 add_image_size( 'fusion-400', 400, '', false );15 add_image_size( 'fusion-600', 600, '', false );16 add_image_size( 'fusion-800', 800, '', false );17 add_image_size( 'fusion-1200', 1200, '', false );18}Avada Core -> wp-content/plugins/fusion-core/includes/class-fusion-portfolio.php
Copy to Clipboard/**
* Add image sizes.
*
* @access public
*/
public function add_image_size() {
add_image_size( 'portfolio-full', 940, 400, true );
add_image_size( 'portfolio-one', 540, 272, true );
add_image_size( 'portfolio-two', 460, 295, true );
add_image_size( 'portfolio-three', 300, 214, true );
add_image_size( 'portfolio-five', 177, 142, true );
}12 1/**2 * Add image sizes.3 *4 * @access public5 */6public function add_image_size() {7 add_image_size( 'portfolio-full', 940, 400, true );8 add_image_size( 'portfolio-one', 540, 272, true );9 add_image_size( 'portfolio-two', 460, 295, true );10 add_image_size( 'portfolio-three', 300, 214, true );11 add_image_size( 'portfolio-five', 177, 142, true );12}Modify Your Child ThemeNow that you have the slug for the image size you would like to remove, it』s time to move to your child theme.
Step 1 – Go into your child theme folder and open the functions.php file. If you don』t have this file, simply create one with the same filename.
Step 2 – At the very bottom, add this action:
Copy to Clipboardadd_action( 'init', 'my_custom_remove_image_size' );
function my_custom_remove_image_size() {
remove_image_size( 'blog-large' );
}xxxxxxxxxx4 1add_action( 'init', 'my_custom_remove_image_size' );2function my_custom_remove_image_size() {3 remove_image_size( 'blog-large' ); 4}Step 3 – Replace the value 『blog-large』 inside remove_image_size( 『blog-large』 ); with the image slug of your desired image size.
Step 4 – If you』d like to remove more than one image sizes, copy this action and paste it inside the same my_custom_remove_image_size() function and change the necessary value accordingly:
Copy to Clipboardremove_image_size( 'blog-large' );xxxxxxxxxx remove_image_size( 'blog-large' );Step 6 – If needed, run the Force Regenerate Thumbnails plugin to regenerate your thumbnails.
Column Spacing Options
Column spacing plays a huge factor in designing a creative website. Avada gives you the freedom to choose the amount of column spacing that shows between columns. There are global options, and element options. Please read below to learn about each area that offers column spacing options. Also, please see the How To Control Spacing With Avada & Fusion Builder doc for more information on this topic.
Overview
Blog Element With A Grid Layout
Portfolio Element With A Grid LayoutImage Carousel ElementColumn ElementWooCommerce Featured Products ElementWooCommerce Carousel ElementRelated Posts / ProjectsGeneral Blog and Portfolio in Fusion Theme OptionsBlog Element With A Grid LayoutStep 1 – Add a Blog Element by clicking the 『+ Element』 button in a column.
Step 2 – Click the 『Element Settings』 icon on the Blog Element, then set the 『Blog Layout』 option to Grid.
Step 3 – Locate the 『Grid Layout Column Spacing』 option. Drag the slider to your desired column spacing value, or simply enter it in the text box provided. For example, 20.
Step 4 – Once finished, click 『Save』.
IMPORTANT NOTE
Column Spacing for the Blog Element only works for the Grid Layout.Portfolio Element With A Grid LayoutStep 1 – Add a Portfolio Element by clicking the 『+ Element』 button in a column.
Step 2 – Click the 『Element Settings』 icon on the Portfolio Element, then set the Layout option either to Grid, or Grid with Text.
Step 3 – Locate the 『Column Spacing』 option. Set your desired column spacing value in the text box provided. For example, 20. You can also click the 『Use Default Value』 radio field to use the default value set in Theme Options.
Step 4 – Once finished, click 『Save』.
IMPORTANT NOTE
Column Spacing for the Portfolio Element only works for the Grid, and Grid with Text Layout.Image Carousel ElementStep 1 – Add an Image Carousel Element by clicking the 『+ Element』 button in a column.
Step 2 – Click the 『Element Settings』 icon on the Image Carousel Element.
Step 3 – Locate the 『Column Spacing』 option. Set your desired column spacing value in the text box provided. For example, 13.
Step 4 – Once finished, click 『Save』.
IMPORTANT NOTE
This option is only available with Avada version 3.8 or above.Column ElementStep 1 – Click the 『Column Settings』 icon on the Column Element.
Step 2 – Locate the 『Column Spacing』 option. Set your desired column spacing value in the text box provided. For example, 20px. This setting can take any valid CSS unit.
Step 3 – Once finished, click 『Save』.
WooCommerce Featured Products ElementStep 1 – Add a Woo Featured Element by clicking the 『+ Element』 button in a column.
Step 2 – Click the 『Element Settings』 icon on the Woo Featured Element.
Step 3 – Locate the 『Column Spacing』 option. Set your desired column spacing value in the text box provided. For example, 13.
Step 4 – Once finished, click 『Save』.
WooCommerce Carousel ElementStep 1 – Add a Woo Carousel Element by clicking the 『+ Element』 button in a column.
Step 2 – Click the 『Element Settings』 icon on the Woo Carousel Element.
Step 3 – Locate the 『Column Spacing』 option. Set your desired column spacing value in the text box provided. For example, 13.
Step 4 – Once finished, click 『Save』.
Related Posts / ProjectsStep 1 – Navigate to Avada > Theme Options > Extra > Related Posts / Projects tab.
Step 2 – On this tab, locate the 『Related Posts / Projects Column Spacing』 option. Drag the slider to your desired column spacing value, or simply enter it in the text box provided. For example, 44.
Step 3 – Once you』re happy with your settings, click the 『Save Changes』 button.
Fusion Theme OptionsInside the Fusion Theme Options which is located in Avada > Theme Options, there are also options for column spacing specifically in the Blog and Portfolio tab. These options only affect the Blog Grid and Portfolio pages, but not the Blog and Portfolio elements. Column spacing for the Blog and Portfolio elements must be set individually per element.
To access this, navigate to Avada > Theme Options > Blog > General Blog.
To access this, navigate to Avada > Theme Options > Portfolio > General Portfolio.