標籤： how-to

How To Add Custom CSS In Avada

Even when you find the perfect theme for your needs, chances are, that at some point, you are going to want to change something that will require some custom CSS.
CSS (Cascading Style Sheets) is code used to style your content. There are innumerable styling options already included with the theme, in the Fusion Theme Options panel, and within the Element and Page Options. But even with that plethora of styling options, you will probably eventually come across something that does not have a built-in option.
When this happens, you need to use custom CSS. Every Element Avada includes has a CSS Class and ID option, including the Column and the Container Elements. This allows you to further customize the element, outside of the options we provide. For example, if you need to set up an element differently than what our options allow, you can add a custom Class or ID to the element, and then create some custom CSS to target that Class or ID. Let』s look at how that works.

Please note that Custom CSS changes are outside the scope of theme support.Overview
Where To Apply Custom CSS

How To Apply Custom CSS To An Element

Some Basic CSS Examples

Inspecting Pages With Browser Tools

Conclusion
Where To Apply Custom CSS?There are several places Custom CSS can be applied in Avada.

Firstly, there is the Custom CSS section in the Avada Global Options. Go to Avada > Options > Custom CSS. The Custom CSS entered here will override the default theme CSS. Do not include any HTML in this field. In some cases, the !important declaration may be needed. Don』t URL encode image or svg paths. Contents of this field will be auto encoded.

If you are using a child theme, you can place custom css in the style.css file, which will also take precedence over the Theme CSS. Whether you add the CSS in your child theme or in the Global Options is purely personal preference and makes no material difference.

You can also place Custom CSS on a page by page basis, using the Custom CSS Icon, on the Avada Builder Toolbar Bar, found at the top of each page (see image below). You should use the page CSS field for any local, page only change.

Finally, if you are working in the Avada Live, you can now add local Custom CSS, which applies only to the page you are working on, by going to the Toggle Sidebar Icon, selecting Page Options, and in there, the second last option is now Custom CSS.
How to Apply Custom CSS To An ElementStep 1 – To apply custom CSS to a specific element, you will first need to give that element a unique Class or ID. All of the Elements you can insert via the Fusion Page Builder, including the Column and the Container Elements, will have an option to set these values (Note: You can use either, but both are not required).

See this article for an understanding of the differences between Classes and IDs. Essentially though, you use ID when the change is unique to one element, and Class when you want to change many.
Step 2 – After you set the custom class or ID, we can then control the styling of that element by adding custom css that targets the class name. This CSS should primarily be added to the the Custom CSS field in the Global Options, found at Avada > Options > Custom CSS.
Obviously, this is the hard bit, where you need to know CSS, and how to apply it. This is beyond the scope of this document, and even outside the scope of official support, but there are plenty of tools (see further down the page) that will help you both find the classes you need to modify, and how to write the CSS to display that class as you wish.
Here is a simple example, where we change the background color of .custom-class-name to black.
IMPORTANT NOTE – The style above will apply a black (#000000) background to the element with the class name 『custom-class-name』. Please note the period (.) before the class name. This is very important, and if forgotten, would break any other styles that you have applied. If we were to use a custom ID instead of a class, we would simply use a 「#」 symbol instead of a 「.」.
As we may be overriding existing styles, we can also use the 「!important」 value just before the 「;」. This tells the browser that this style is to take priority over other CSS trying to set the same style.
If you』re unsure about how to get the code for a color you wish to use, you can use this online tool.
Some Basic CSS ExamplesHere are a few, relatively simple, common examples of custom CSS, used in Avada.
Disabling Links from Featured Image RolloverCopy to Clipboard.MyCustomClass .fusion-link-wrapper{display: none !important;}
.MyCustomClass .fusion-rollover-title{pointer-events: none !important;}
.MyCustomClass .fusion-rollover-categories{pointer-events: none !important;} 1.MyCustomClass .fusion-link-wrapper{display: none !important;}2.MyCustomClass .fusion-rollover-title{pointer-events: none !important;}3.MyCustomClass .fusion-rollover-categories{pointer-events: none !important;}Two Product Columns on Mobile LayoutCopy to Clipboard@media only screen and (max-width: 800px){
.fusion-body .products li {width: 160px !important; margin-right: 2% !important; float: left !important;}
}3 1@media only screen and (max-width: 800px){2.fusion-body .products li {width: 160px !important; margin-right: 2% !important; float: left !important;}3}Inspecting Pages With Browser ToolsIf you would like to override existing styles of an element, you will need to find the CSS selector that it is currently using, and there is no better way to do that than to inspect your site with some kind of browser developer tool. Among other things, browser developer tools and extensions allow you to inspect the CSS of live sites and make changes to the CSS and view the live changes, without making any changes to the actual site. These tools are invaluable, and well worth the time it takes to learn them. There are several out there to use; see below for the different options we recommend.
Chrome Developer ToolsIf you use Chrome, you already have built in browser tools to help you inspect your site. Just right click and choose 『Inspect』 or use the F12 shortcut.
There is a lot of information out there on the web about Chrome Developer tools, but here are a few starter links to get you going.

Chrome Developer Tools information 

Chrome Developer Tools Video Tutorial
Firefox Development ToolsFirefox also comes with its own set of Developer Tools, very much like Chrome. There is also even a Developer Edition of the browser. Please follow these links for more information on that.

Firefox Development Tools Documentation
Firefox Developer EditionConclusionCSS is an incredibly powerful too to change the way content displays. For a really interesting project that highlights this power, see CSS Zen Garden.
Having the ability to customise elements in Avada is the backbone of the ability to change the appearance of virtually any part of your Avada website, but CSS is a complex and deep topic, well beyond the scope of our support.
There are many, many resources on how to use CSS on the Internet, and it』s a very useful skill to learn. The Avada Users Group on Facebook regularly discusses CSS changes, and that may also be a good place for you to learn about CSS in a very specific Avada context.

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 Add Google AdWords Conversion Tracking Code to Avada

To add your Google AdWords Conversion Tracking Code, navigate to Avada > Theme Options > Advanced > Code Fields (Tracking etc.), and insert the code in the Tracking Code field. Place the code inside of tags. Below is an example code snippet added to the Theme Options. This will be added into the header template of the website and will affect your entire site.
If you want to insert the code in the content area of a specific page only, then, you can do it using the Code Block Element of the Fusion Builder. However, if you need the code inside the header area of a particular page, you will need to add and make use of a Child Theme to add the custom code.

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 Add Local Custom CSS

If you want to add custom CSS that affects your site globally, you can do so in the Avada > Theme Options > Custom CSS section. Please read our How To Apply Custom CSS document for more information on applying CSS generally.
But with Fusion Builder, you can also add Custom CSS to each individual page. This option makes it easier for you to manage your custom CSS. To learn how to add custom CSS to single pages, please read on.
IMPORTANT NOTE: This feature is only available in the Fusion Builder released with Avada version 5.0 and up.,How To Add Local Custom CSS In Fusion BuilderStep 1 – Create a new page or edit an existing one.
Step 2 – Activate the Fusion Builder by clicking the 『Use Fusion Builder』 button on top of the page editor.
Step 3 – On the main Fusion Builder toolbar, you』ll see the 『Custom CSS』 icon.
Step 4 – Click this icon to expand the Custom CSS field. In this field, insert the custom CSS that you want applied to that specific page.
Step 5 – Please note that custom CSS you add to this option will only apply to the specific page you add it to.
Step 6 – Click 『Save Draft』 or 『Publish』 to save your changes.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,How To Add Local Custom CSS In Fusion Builder LiveStep 1 – Create a new page or edit an existing one.
Step 2 – Activate the Fusion Builder Live Editor by clicking the 『Fusion Builder Live』 button on top of the page editor.
Step 3 – On the Fusion Builder Live toolbar, click the 『Toggle Sidebar』 Icon to open the Sidebar.
Step 4 – Go to the Fusion Page Options tab, and choose the Custom CSS sub-tab.
Step 5 – Please note that custom CSS you add to this option will only apply to the specific page you add it to.
Step 6 – Click the global Save button at the top right of the Toolbar to save your changes.

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 Backup And Restore Your Avada Website

Creating a backup of your website is arguably the most important task you have as a website administrator. Even if you don』t do it yourself, the golden rule is to make sure someone specifically has the responsibility of backing up your site. Don』t just assume your hosting will take care of it.
And a backup is not very useful to you, without knowing how to restore it in the case of an emergency. In this article, we will look at a few of the most popular backup plugins and services available for WordPress users. Let』s get started!,Why Do I Need To Backup?If you want to ensure your website will be able to cope with all potential issues going forward, then taking backs is simply a no-brainer. There are numerous situations where backups will be useful Here are just a few.

Recovering From Human Error

Reversing Update Issues

Dealing With Compatibility Issues

Resolving Malware Infections

Providing Protection Against Hackers

Simplifying the Process Of Migrating Websites
So it』s clear there are many situations where a backup would not only be useful, but would be critical for your website. Now, let』s look at a couple of the most popular options for taking and restoring backups.,UpdraftPlusUpraftPlus is a free WordPress plugin (there』s also a Premium version) for taking and restoring backups. It』s by far the most popular backup plugin around with over 3 million active installations.
To get started with Updraft Plus is basically a two step process.
– Select how often you want your files and database to be backed up.
– Select Where you want them to be backed up to.
You can make a manual backup, but the strength of UpdraftPlus is in the scheduling, so you』ll want to take advantage of that.
Step 1. To set up your backups using UpdraftPlus, go to Settings > UpdraftPlus Backups from your WordPress menu. This will open the UpdraftPlus settings page.

Step 2. Select the Settings tab along the top.

Step 3. Here you can schedule how often UpdraftPlus creates a new backup. You can pick whichever schedule suits you and your site. For example, if you regularly update your site with new pages and posts, then a more frequent backup may be more suitable. The backup is in two parts – the files, and the database. These should both be backed up at the same time.

Step 4. You can also adjust how many of these backups should be stored at one time. Any new backups will then override the older ones, so as not to use too much storage space.
Step 5. Next, select where you would like your backups to be stored. Scroll down the page and you can choose where you』d like your files to be stored. UpdraftPlus integrates with a nubmer of remote storage options, so pick the one that suits you best.
Step 6. Once you have selected a backup location, specific instructions for that service will be displayed. Follow the prompts to finalise your location. You can also select what files are backed up and what files to exclude during backup.
Step 7. You will have to authenticate with the service so that UpdraftPlus can backup to that location.
Step 8. That』s the setup done! Once your service is connected, UpdraftPlus will return you to the Backup/Restore tab, where you can see your scheduled first backup. If you wish, you can also just click on Backup Now to take your first backup.
The backup begins and you can see the progress of the backup. Depending on the size of the site, this will take a few minutes to complete.
You are notified when the backup is completed, and your backup is now listed in the Existing Backups, ready for you to restore if neccesary.
Restoring BackupsTo restore a backup, it』s a simple step of choosing the backup you want to restore, and clicking of the blue Restore button. A dialog appears with restore options, and the restore process begins.
In the event that you can』t get back into WordPress to initiate the Restore porcess, never fear. You can use your saved backups to recreate your site. Please see this detailed article for how to do that.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Jetpack Backup (was VaultPress)VaultPress has been the Gold Standard of backups for many years. It is owned and run by Automattic, so it』s almost an official part of WordPress. VaultPress is now moving over to be part of the Jetpack plugin, also made by Automattic.
Jetpack is a popular plugin that comes with a huge range of features, and backups are just one of these. This is a paid service with many different options, depending on the type of website you have. To get Jetpack Backups, you have to first connect your Jetpack plugin with your wordpress.com login. You then purchase the Plan you want, and your backups occur automatically. Restoring is just as easy.
To learn more about the Jetpack Backup service and process, watch the video below, or see this page.,Other MethodsThere are also a number of other methods to take a WordPress backup. The first of these is to take a manual backup. This is not nearly as complicated as many people think, but it』s still a method reserved for those familiar with working with server software. This goes beyond the scope of this document, but here is a good tutorial if you want to know more.
You may also have backup options directly with your hosting company. Some hosts offer easy to create and restore backups as part of their hosting plans, and this is an option you should investigate with your host.,Useful VideosWhile these videos refer to website migration, the process is virtually the same as backup and restore, and might also fit your situation.
How to Migrate Your Website With DuplicatorHow to Migrate Your Website With All-In-One WP Migration

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.