Avada 文档

How to Create Self-Hosted Videos

Aside from images and text, videos are a great way to showcase content on your website. Avda offers many ways for videos to be loaded into your site, including YouTube, Vimeo and self-hosted videos.
Self-hosted videos require a few steps to create and can use a few file formats per video. This step by step article will cover the various file formats of self hosted videos, how to make the required and optional file formats, areas of Avada that can use the videos, and how to use the videos in those areas.
IMPORTANT NOTE – The ability to set a video as a background of a full-width container is only available in Avada version 3.7 or higher.A Self Hosted Video Consists of 4 File Formats
.MP4 – A required file format for uploading self-hosted videos. This file works in all major browsers.

.WEBM – This format is growing in popularity, but is an optional file format with self-hosted videos.

.OGV – Another optional file format for self-hosted videos.

Video Preview Image – The image that will be seen in place of your video on older browsers or mobile devices.
The Only Required Format is MP4As mentioned above, mp4 is the only required video format for self-hosted videos. WebM and .ogv are optional formats.
The steps below assume that you already have a video to use. Videos come in many different formats, so the idea is that you need to convert your current video format to MP4 and WEBM files, which can then be uploaded and used on your website.
IMPORTANT NOTE – If you have an MP4 video that is not showing/playing, then chances are the video isn』t encoded properly. In this event, try to use Handbrake to re-encode the video.How To Create A MP4 FileStep 1 – After creating your video, make sure to save it in .MP4 format. The video should also be in 16:9 Aspect Ratio.
Step 2 – If you are unable to save your video in .MP4 format, you must convert it to .MP4 format via a 3rd party software, like Handbrake. Please see the links below for information on how to do this.
View Handbrake documentation.
How To Create A WEBM FileStep 1 – Once you have a video in .MP4 format, if you wish, you can also convert it to .WEBM format. You can do this with Media.io.
Step 2 – If you choose to use Media.io, you can simply upload your .MP4 video and it will automatically convert it to .WEBM format.
IMPORTANT NOTE – Self hosted videos can be very large in size, which is not good for a website. Conversion tools like Handbrake and Firefogg will drastically reduce file size. Handbrake and Firefogg are 3rd party applications and are not affiliated with ThemeFusion.
A properly encoded and compressed video shouldn』t be more than 4-8 MB for a 30-60 seconds clip. Avoid adding larger video files > 10MB as they contribute to overall page size and will be a cause of negative user experience.Areas You Can Use Self-Hosted Videos
Video Element – New for Avada 6.1, this Element is specifically designed for you to add self-hosted videos into your content.

Containers – Using the Fusion Builder Container Element, you can set a self-hosted video as the background.

Fusion Slider – Using the Fusion Slider, you can insert self-hosted videos into your slides.

Layer Slider – Using the Layer Slider, you can insert self-hosted videos into your slides.

Revolution Slider – Using the Revolution Slider, you can insert self-hosted videos into your slides.

Anywhere Lightbox is used – Lightboxes can show self-hosted videos, and they can be triggered from the Column, Button and Lightbox Elements, and in the Portfolio Page Video URL for Lightbox option. For more information on using videos in Lightbox, please see How To Show Videos In A Lightbox.
How To Upload Your Video File(s)Once you have your video as an .MP4 file, you』re now ready to upload it.
Step 1 – Choose the area of the site you want to use self-hosted videos. Each area described above has slightly different upload methods, but all accept .mp4 files.
Step 2 –  In your chosen area, simply upload the correct file format to the correct field. For example, upload the .MP4 file format to the .MP4 Upload field. There will be a field for the required file format, and in some cases, fields for the optional videos as well.
Step 3 – If there is just a simple text field with no video uploader button, like in the Container Element, you will need to upload the file to the Media Section and then copy and paste the URL.
Step 4 – If your media files are too big to upload through the Media Manager, you will need to upload them to your server via FTP.

How To Create Flyout Menus in Avada Layouts

In Avada Layouts, it is possible to create Flyout menus, using features from the Menu Element and the Menu itself. Read on to find out how to do this, and watch the video for a visual overview.,Overview
Creating The Menu

Customizing The Menu Element,Creating The MenuLet』s start with the actual menu to be displayed. To create a menu suitable for a Flyout menu, head to Appearances > Menus from the WordPress dashboard. The key to creating a suitable menu lies in the need to have your pages as sub items to the parent menu items. For our example, we are creating an iconized header menu, so the top level items are only designed to trigger the flyout menus. For the top level main menu item, the pages are then added as child menu items to this main item.
The other top level menu items are all Avada Special Menu Items, and all have been made to be Icon only, via the Avada Menu Options. At this point, our menu looks like this, as seen in the screenshot below. Note, also, that the menu has not been assigned a Display Location, as that will be achieved in the Header Layout, with the use of the Menu Element.
To make the menu items to only display as Icons, head to the Avada Menu Options, found in each top level menu item, and select an icon, and set Icon/Thumnbnail Only option to On, as seen below.
767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada767,641 Businesses Trust Avada
Get Avada,Customizing The Menu ElementOnce the menu has been built, you can add the Menu Element to a Header Layout Section. For this example, I used a prebuilt Header Layout Section, as it was designed for a flyout menu.
Once you assign the menu to be used in the Element, it』s time to customize it. You can customize both the Main Menu items, and the Submenu Items. These are generally individual design choices but the important option to get it to function as a Flyout Menu is to have Flyout selected in the Submenu > Submenu Mode option. If you wish to use the Flyout menu across all screen sizes, also ensure that the Mobile > Collapse to Mobile Breakpoint option is set to Never, so that the same menu is used on all screen sizes.
OK, that』s it. You will now have an iconized main menu that triggers a Flyout menu. As you can see in the image below, the Submenu Mode is set to Flyout, and the menu items are just icons in the header.
On the front end, you can see below how the flyout menu was customized for our example. This is the Woo MyAccount menu item that is opened. Note how it has a partially transparent background, and custom colors. These are all set in the Sub Menu panel of the menu Element. Note the X in the top right to close the menu.

How To Create A New Page

Creating pages is the foundation of creating your site. You can create any number of pages for your site and add as much content into them as you』d like. Avada also includes page templates which you can choose from, with each template fulfilling a specific function. Continue reading below to learn how to create a new page.
How To Create A New Page from the WordPress DashboardStep 1 – Navigate to the 『Pages』 tab in your WordPress sidebar and click the 『Add New』 option.
Step 2 – Give your page a name by entering it in the Title field.
Step 3 – Locate the Page Attributes box and set the Parent option and the Page Template option. Learn more about Parent settings here, or learn more about Page Templates here.
Step 4 – Add content to your page using the editor field. You can enter text or common HTML markup to add content, or you can click the 『Use Avada Builder』 button to use the Avada Builder and add Design elements to the page. Learn more about the Avada Builder here.
Step 5 – Set individual options for the page in the Avada Page Options box. Settings options here will affect the current page only. If you』d like to set global options for your entire site, then you have to use the Avada Options. Learn more about the Avada Options here.
Page TemplatesPage templates are templates that you can use to tailor the page according to your needs. For example, if you』d like a certain page to span the 100% of the browser width, then you would have to set the page template to 『100% Width』. Learn more about each type of page template available and how to set them by clicking the button below.
Learn More About Page TemplatesHow To Create A New Page in Avada LiveStep 1 – Click on the + Icon (Add New) in the Toolbar, and choose Page or Post or other custom post type.
Step 2 – The Sidebar will open to Page Options > Settings, where you can give the page a Title, a Slug, choose the Parent page, choose the page template, and add featured images. Follow the links to learn more about Parent settings, and Page Templates.
Step 3 – Add content to your page using the Fusion Builder Live Editor.
Step 4 – You can set individual options for the page in the Fusion Page Options panel on the Sidebar. Settings options here will affect the current page only. If you』d like to set global options for your entire site, then you need to use the Fusion Theme Options. Learn more about the Avada Options here.

How To Create A Landing Page With Avada

A landing page is essentially a page that you get to directly from a link. Landing pages are most commonly used to drive conversions in marketing and advertising campaigns, including email and Pay Per Click (PPC) campaigns.
Landing pages are designed with a clear focus or goal, and almost always have a singular Call To Action (CTA). Because of this, landing pages are typically without menus or other navigation, so as to help funnel the user to the CTA.
So how do you make a Landing page in Avada? It』s actually very simple. It』s really just a two step process of creating your content and turning your header (and potentially your footer) off. Let』s walk throught it.,Create Your Page ContentThe first step in making a landing page is to create your page content. Remember the idea that there should be a singular Call To Action. You can build this manually of course, or there are also some Avada Studio page templates you could possibly use as a starting point, like the Black Friday and Cyber Week templates, or some Avada Studio Containers, such as the Halloween, Black Friday or Cyber Monday Containers.
For this example, I have created a landing page manually, designed to entice students to apply to Avada University.,Turn Your Header OffWith a landing page, you generally want to turn your header off to reduce distractions. It』s all about the CTA, and you don』t want a menu to tempt people to head off to a different page. Remember, a landing page isn』t on your menu, and the user has only arrived at the page by clicking a link in an advertisement or an email campaign. Removing your header might be typical in a landing page, but it』s not a neccessity though, and you might want to leave your header on, or even to have a different header. But for this example, we will assume you want to remove it entirely.
To turn the header off, simply go to the Avada Page Options on the landing page, and the Header tab, and set Display Header to No. If you can』t see the options on this tab, it will be because you are using a Header Layout Section in an Avada Layout. See the Avada Layouts section below for more information on how to get around this.,Turn Your Footer OffIn some cases, you may also want to turn the Footer off. In the case of the University site, there are a lot of navigational links in the content section of the footer, and on the Avada Page Options > Footer, you can turn this area off. In my example, I have turned the footer content off, but left the Copyright Area displaying.
Again, if you are using Avada Layouts, you may not be able to access these page options initially. See below for how to configure your Avada Layouts for this situation.,Avada LayoutsIf your header and footer have been created in Avada Layouts, it』s important to note that you can』t use the above methods. Using a Header or Footer Layout Section in the Global Layout disables the Global Options, as they are not in use in this situation.
The easiest workaround is just to create empty header and footer Layout Sections and assign them to a Conditional Layout (here called Landing Page) and use the conditions to set it to be used on just that particular page (or pages if you have multiple landing pages).
Alternatively, you could create ddifferent header and footer Layout Sections with just some elements, perhaps removing menus or other distracting content, and assign them instead to the Landing Page Layout.,ConclusionSo as you can see, landing pages are deceptively simple in Avada. Create your desired page content using the Avada Builder, and then determine whether you want any header and footer content and use one the above methods to control them. Then you will have a page URL you can add directly to mailouts or ads that take your users directly to your call to action.

How To Convert Your Website To Avada 5.0

IMPORTANT NOTICE: The information in this document is only applicable if you are updating your site from any version older than Avada 5.0 and/or you are following the 『Updating Avada from Older Versions』 stepped update process as detailed here.The Fusion Builder, released in Avada 5.0, is 5x faster than the previous Fusion Builder found in Avada 4.0.3 and older. Updating from an older Avada version to 5+ will require conversion of all elements to the new syntax. The key purpose behind the conversion is to ensure that all elements (formerly known as shortcodes) are assigned with new nomenclatures; this very important step ensures significantly improved 3rd party resource and plugin compatibility.
Let』s look at the conversion process and how to trigger it manually if it doesn』t happen automatically.
Converting WordPress Multisite Installations
The Conversion Process
Triggering The Conversion ManuallyConverting WordPress Multisite InstallationsIf you』re updating a WordPress multisite installation to Avada 5.0+, the conversion has to be performed for each site individually. The Conversion splash screen will display the first time you visit the admin area of each site.
The Conversion ProcessAvada will search through your posts and pages and collect IDs of all pages using the old shortcodes and convert them to our new syntax. A backup is created of those pages and posts, to ensure all your data is fully secure. If the conversion is not performed, you won』t be able to use Avada 5.0 and above, unless you manually trigger the conversion at a later time through the WP admin area. The conversion may take some time, so please be patient and do not close the conversion screen.
Once you』ve carefully read the notice, you will need to check the acknowledgement checkbox to confirm and agree Avada should convert your posts and pages to the new shortcode syntax.
IMPORTANT NOTICE
We recommend doing a full database backup before proceeding with the conversion. If you don』t want your pages converted then please delete the new Avada folder and copy the old Avada folder to your server. If you did not backup your previous Avada theme folder, please contact Support to get a copy of Avada 4.0.3.By pressing the 「Start Conversion」 button below, you confirm that Avada should convert your posts and pages to the new shortcode syntax.
Fusion Builder Manual Conversion ButtonsTo find this section, navigate to The System Status tab at Avada > System Status in your WordPress Admin Main Menu. Once on the System Status tab, you』ll find several buttons which relate to the Fusion Builder conversion for the Avada 5 update. Please see below for details on what each button does.
Rerun ConversionIf the Conversion didn』t process automatically, you can manually trigger the conversion with the 「Run Conversion」 button which is located on the System Status page. Just click this button and the conversion process will start immediately.
Why the conversion is needed:
For Avada version 5.0, the Fusion Builder was separated from the Fusion Core into it』s own plugin. The Fusion Builder was rebuilt from scratch and subsequently all element names were refactored, as well as the page structure of containers. All of this was done to reduce the overall Avada install package, turn the Fusion Builder into it』s own plugin that is 5 times faster than before and more compatible with 3rd party assets.
All installations running Avada 4.0.3 and older will need their pages converted to the new format. If for some reason the shortcode conversion was not automatically triggered when Avada was updated, you can manually trigger the shortcode conversion. During the initial element conversion, all content is backed-up in the database securely.
Reverting ConversionIf required, the conversion to Avada 5.0+ can be reverted to the original state prior to updating. This is only possible if you updated from Avada 4.0.3 or an earlier version and will only revert pages that existed during the update to Avada 5 originally. If that is needed, you can click the 「Revert Conversion」 button from the System Status page.
More details on the Revert Conversion button
This button will undo the initial shortcode conversion which took place during the update to Avada 5. When reverting the shortcode conversion, Avada is getting the content from the backups kept during the conversion and restoring the content to its previous state with the old shortcodes. The process is similar to the initial shortcode conversion in that you』ll be taken to a splash screen and guided through a conversion, only this time the process internally is reversed.
Remove BackupsThe Remove Conversion Backups button will delete the conversion backups created during the initial update. This should only be done once you have checked your site and determined that all is well and you have no need to reference or retain the old data. To start the process of removing the backups, click the 「Remove Backups」 button.
More details on the Remove Backups button
Once you』ve decided you won』t be needing to revert your site for any reason and you are satisfied with the update results, you have the option to manually delete the content backups that were created at the start of the conversion process. Once deleted, it will no longer be possible to automatically restore the content to the pre-5.0 state. Clicking the button will start the deletion of the conversion backup data.
Once completed, only the button to manually trigger the element conversion will remain.,If you have installed Avada 5.0 prior to importing Fusion Builder page content from an older version (4.0.3 or lower), then the conversion will not trigger automatically for you. Also, the conversion trigger button in the Avada > System Status tab will not be available.
To manually trigger the shortcode conversion process and convert old Fusion Builder content to our new syntax, please follow the instructions below.
How To Manually Trigger Shortcode ConversionStep 1 – Login to the WordPress Admin Panel of your site.
Step 2 – At the end of your WordPress Admin URL, usually wp-admin/, add this string:
Copy to Clipboard?fusion_builder_migrate=1 1?fusion_builder_migrate=1After adding this string, your URL should look like this:
Copy to Clipboardhttp://www.yourwebsite.com/wp-admin/?fusion_builder_migrate=1xxxxxxxxxx1 1http://www.yourwebsite.com/wp-admin/?fusion_builder_migrate=1Step 3 – Once you add the necessary string, simply press enter to trigger the Shortcode Conversion process.

How to Convert Child Themes + Custom Post Types for Avada 5.0

If you would like to convert your Custom Post Types within your Child Theme, then please follow the steps below.
How To Convert Only Custom Post Types in Child ThemesStep 1 – Add this code snippet to your child theme』s functions.php file:
Copy to Clipboardfunction add_custom_post_types( $post_types ) {
$my_post_types = array(
'my_post_type',
);
return $my_post_types;
}
add_filter( 'fusion_builder_shortcode_migration_post_types', 'add_custom_post_types' ); 1function add_custom_post_types( $post_types ) {2    $my_post_types = array(3        'my_post_type',4   );5    return $my_post_types;6}7add_filter( 'fusion_builder_shortcode_migration_post_types', 'add_custom_post_types' );Step 2 – Replace
Copy to Clipboardmy_post_typexxxxxxxxxx1 1my_post_type inside the array with your own Custom Post Type name. For example:
Copy to Clipboardfunction add_custom_post_types( $post_types ) {
$my_post_types = array(
'courses',
);
return $my_post_types;
}
add_filter( 'fusion_builder_shortcode_migration_post_types', 'add_custom_post_types' );xxxxxxxxxx7 1function add_custom_post_types( $post_types ) {2    $my_post_types = array(3        'courses',4   );5    return $my_post_types;6}7add_filter( 'fusion_builder_shortcode_migration_post_types', 'add_custom_post_types' );Step 3 – Re-run the conversion script manually. To learn how, click here. It』s important to make sure your Child Theme is active before running the conversion.
How To Convert Custom Post Types and Default Post Types in Child ThemesStep 1 – Add this code snippet to your child theme』s functions.php file:
Copy to Clipboardfunction add_custom_post_types( $post_types ) {
$my_post_types = array(
'my_post_type',
);

$my_post_types = array_merge( $post_types, $my_post_types );

return $my_post_types;
}
add_filter( 'fusion_builder_shortcode_migration_post_types', 'add_custom_post_types' );​x 1function add_custom_post_types( $post_types ) {2    $my_post_types = array(3        'my_post_type',4   );5​6    $my_post_types = array_merge( $post_types, $my_post_types );7​8    return $my_post_types;9}10add_filter( 'fusion_builder_shortcode_migration_post_types', 'add_custom_post_types' );Step 2 – Replace
Copy to Clipboardmy_post_typexxxxxxxxxx1 1my_post_type inside the array with your own Custom Post Type name. For example:
Copy to Clipboardfunction add_custom_post_types( $post_types ) {
$my_post_types = array(
'courses',
);

$my_post_types = array_merge( $post_types, $my_post_types );

return $my_post_types;
}
add_filter( 'fusion_builder_shortcode_migration_post_types', 'add_custom_post_types' );xxxxxxxxxx10 1function add_custom_post_types( $post_types ) {2    $my_post_types = array(3        'courses',4   );5​6    $my_post_types = array_merge( $post_types, $my_post_types );7​8    return $my_post_types;9}10add_filter( 'fusion_builder_shortcode_migration_post_types', 'add_custom_post_types' );Step 3 – Re-run the conversion script manually. To learn how, click here. It』s important to make sure your Child Theme is active before running the conversion.

How To Control Spacing in Avada

Controlling spacing in websites has traditionally been very difficult for non developers. Custom CSS has long been used to style pages, including margins and padding. But Avada Builder goes a long way towards making spacing a breeze, even if you have no coding knowledge whatsoever. Read below to find out where and how to take control of your site spacing using Avada Builder.,Overview
The Difference Between Margins and Padding

Where To Control Spacing

Controlling Spacing With Global Options

Element Global Options

Controlling Spacing With Page Options

Controlling Spacing With Containers

Controlling Spacing With Columns
Controlling Spacing Between Elements
Custom CSS,The Difference Between Margins and PaddingOne of the first things to understand when trying to take control of spacing, is the difference between margins and padding. Simply put, margins are the space around the outside of elements, between one container, column or element and the next. Padding, on the other hand, is the space around the internal content of a container or column. The following diagram is very simple, but it should illustrate the concept clearly enough. If you want further information, try this article.
There are other types of spacing we can control throughout the theme, like column spacing, letter spacing and line heights etc, but in this post we will mostly be focusing on the main ones of margins and padding.
767,637 Businesses Trust Avada
Get Avada767,637 Businesses Trust Avada
Get Avada767,637 Businesses Trust Avada
Get Avada,Where To Control SpacingThere is no one place to control margins, padding or column spacing; there are many. Let』s start at the highest level and work our way down. At each level, there are options that control spacing, either globally or locally, so let』s start by looking at the Global Options, then the Page Options, and then down into the Containers, Columns and Elements, and finally to Custom CSS.
Controlling Spacing With Global OptionsIn the Avada Global Options, there are several settings that directly affect spacing throughout your site. If you use the Boxed Mode layout, for example, the Boxed Mode Top/Bottom Offset setting will control how much margin there is above and below the box. If you use the Wide layout, the Page Content Padding option will control how much padding there is above and below your body content (under the Header and the Page Title Bar and above the Footer). Finally, if you use the 100% Width page template, there is a setting called 100% Width Padding to specify how much left and right padding there will be on content that goes full width.
All of these options can be found in the Theme Options at Avada > Global Options > Layout. These options affect every page, but they can also be overridden on a page by page basis via the Page Options (see below).
Read our doc on Page Top & Bottom Padding!Element Global OptionsStill in the Global Options, there are some Elements which have global options for margins and padding. These are found under Avada > Global Options > Avada Builder Elements > and the individual elements.
The following Elements have the option to set either global margins, padding, or column spacing: Blog, Column, Container, Content Box, Events, Gallery, Portfolio, Syntax Highlighter, Tagline Box, Text Block, and the Title Element. These can also be overridden in the actual Element options, when adding the Element.
Controlling Spacing With Page OptionsThe next level down is to control spacing on a page by page basis. These are overrides for the option we have set in the Global Options, but only apply to one page at a time. Settings that can override global spacing are found in the Content Tab.
These may seem minor, but, as an example in the image below, if you have 55px global Page Top Content Padding, and on a specific page you want it to be 0px, you will be very grateful to find the override setting right there on the page in question.
Controlling Space With ContainersNow we find ourselves in the Fusion Builder. As we are building our pages, we have the opportunity to control the various spacing through the elements we use, starting with the very Containers that make up our page.
By default, Containers have no margins or padding set, unless you are using the 100% width template, where the default padding is 30px left and right. You can of course adjust these settings, either in the Container Settings in the Theme Options (Avada > Global Options > Avada Builder Elements > Container) as seen below, or on a Container by Container basis on your individual pages.
Controlling Space With ColumnsColumns, by default, have 20px bottom margin, and 0px padding. Generally, it is most appropriate to set margins and padding on columns and containers, and to use separators to control the space between elements, if there is more than one in a column. But it really must be looked at on a case by case basis.
Read our doc on Column Spacing!Controlling Spacing in Avada LiveWhether you are using the back or front end version of the Avada Builder, controlling spacing in columns and containers is the same, just with some interface differences. Please see the Adjusting Margins & Padding in Avada Live doc & video for more details on controlling spacing when using the front-end builder.
Controlling Space Between ElementsCurrently, there are only a few Elements that have some form of margin and padding control, and a few others have margins built in. In a future version of Avada, we will be introducing full margin and padding control on all elements as well.
The Separator ElementSpecial mention must be made of the very versatile Separator Element. This Element can be used to space out a page, and can be visible or invisible. See the Separator Element Doc for detailed info.
But plainly put, the Separator Element is a very useful element to space out elements within the same column. Most Elements have no margins or padding themselves, and so when multiple elements are placed in the same Column, separators can be very useful as a design tool.,ExamplesHere are a few examples of controlling spacing using margins and padding in various places.
This column has 40px top margin set, which creates a space between it and the column above. I』ve given the column a background color so you can see the margin is outside and above the column. Below is the 20px padding from the paragraph (within the grey area) and the 20px bottom default margin of the column (outside the grey areas).
This column has 50px padding set all around, which creates a large space around the text within the column. Below is the 20px padding from the paragraph and the 20px bottom default margin of the column. I』ve given the column a background color so you can see the padding is within the column.,Custom CSSFinally, there are times when you will have no choice but to revert to Custom CSS to control your site completely. Some elements have built in margins that have no override, and certain designs and advanced layouts can only be achieved by the clever use of Custom CSS. This is beyond the scope of this document, and quite often, this sort of customization is even beyond the scope of Official Support, but there are links below to our docs on CSS, and our awesome Community Forum and the very active Facebook Avada User』s Group.
So, as you can see, there are a lot of places and ways to control the spacing on your website, but getting familiar with the various places to control it will help you make beautiful designs in no time at all, using nothing but your imagination, and Avada.

How To Change The Speed of Progress Bar Shortcode

You can easily control the transition of the progress bar animations with a small snippet of Custom CSS.
Please add this to your Custom CSS area in the Theme Options for a global fix, or alternatively, in the Custom CSS section of the specific page you want to make the changes on.
You can replace the 3s (3 seconds) with whatever time value you prefer.
Copy to Clipboard.fusion-progressbar .progress {
transition: width 3s ease !important;
} 1.fusion-progressbar .progress {2    transition: width 3s ease !important;3}

How to Change The Speed of Image Rollovers

The image rollovers are CSS3 transistions/animations and we have set a default value for them. If you would like to change this, follow the step below.
Edit css/all.css, find and change 0.3s to a lower value to speed up the animation, or a higher value to slow it down.
Copy to Clipboard-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out; 1-webkit-transition: all 0.3s ease-in-out;2-moz-transition: all 0.3s ease-in-out;3-o-transition: all 0.3s ease-in-out;4-ms-transition: all 0.3s ease-in-out;5transition: all 0.3s ease-in-out;Please note this is a customization that is outside of what we can provide for theme support. If you perform the customization, you will need to maintain the changes for future updates and also be able to troubleshoot any issues that arise. Thank you.

How To Change The Size of Portfolio Thumbnails

Each portfolio layout has a set size for the thumbnail images in column view. This is done to ensure the columns line up and are a consistent size. If you wish to change the default size, it can be done but requires a few edits. See the below example for the Portfolio 4 column layout, you can follow the same steps for the other columns, just make sure you are changing the right code for the column you want to change.
1. In includes/class-avada-init.php find the code below and change the size to your liking.
Copy to Clipboardadd_image_size('portfolio-four', 220, 161, true); 1add_image_size('portfolio-four', 220, 161, true);2. Then you need to change some CSS to match the width and height you used above. Copy and paste this CSS into the CSS tab in theme options.
Copy to Clipboard.portfolio-four .portfolio-item .image {width:220px !important; height: 161px !important; }xxxxxxxxxx1 1.portfolio-four .portfolio-item .image {width:220px !important; height: 161px !important; }3. Please also make sure to change the containers to the right size:
Copy to Clipboard.portfolio-four .portfolio-item {
height: auto !important;
width: auto !important;
}xxxxxxxxxx4 1.portfolio-four .portfolio-item {2    height: auto !important;3    width: auto !important;4}4. When you are finished, you need to use the Regenerate Thumbnails plugin.
Please note this is a customization that is outside of what we can provide for theme support. If you perform the customization, you will need to maintain the changes for future updates and also be able to troubleshoot any issues that arise. Thank you.