詩語，作者 Avada 文檔 - 第 47 頁共 79 頁

How To Use The Element Animation Options

Element Animation Options control how the Element loads on the page. It can be found under the Extras Tab, which is currently available on 18 Design Elements, and 8 of the 9 Layout Section Elements. Animations can also be found in 2 Child Elements as well. Currently, the following Elements have these options:,Design Elements
Alert Element

Audio Element

Breadcrumbs Element

Button Element

Column Element

Content Box Child Element

Flip Box Child Element

Icon Element

Image Element
Image Before & After ElementMenu Element
Nested Column Element

Portfolio Element

Privacy Element

How To Use Full Screen Scrolling Sections

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

How To Upload And Use Custom Icons In Avada

With Avada, not only do you have access to the thousands of free Font Awesome icons, but you can also upload custom icon sets to use in Avada. Read on to see how this works, and watch the video for a visual overview.,View Element Demo Page!,Managing Custom Icon SetsCustom icon sets are created and managed through the interface found at Avada > Icons, from the WordPress Dashboard, or Icons, from the Avada Dashboard.
Here you can both create and manage custom icon sets. To make a new Custom Icon Set, give your set a name and click on Create New icon Set. This will take you to the Edit Icon Set page. From here, there is a link to the supported icon tool – Icomoon. This link will open in a new tab, and you can create your icon set. If you already have an icon set downloaded, you could just select the file, but let』s go through the process of creating one.
767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada767,669 Businesses Trust Avada
Get Avada,Generating A Custom Icon SetHere in the Icomoon App, you can generate a custom icon set to upload. The first step is to select which icons you want in your Custom Icon set. There are a range of both free and paid icon packs you can import into the Icomoon App, and you can even import your own icons.
Once you have selected which icons you want in your set, you then generate the icon set, which you can then import into Avada. One important thing to note is that every icon pack you upload must have a unique Font Name and CSS Class Prefix before importing into Avada. You can change the Icomoon defaults in the preferences section before downloading your custom icon set, as seen below.
For a full rundown of what』s possible with the Icomoon App, please see their documentation.,How To Upload Your Custom Icon SetOnce you have generated and downloaded your custom font set, you now need to upload it to your site.
Back on the Edit Icon Set page, you will find a simple upload interface to upload your custom font set. (There is also a shortcut to this page in any element that has the Icon Picker. Here you will find a Plus button in the top right corner of the Icon Picker, which takes you straight to the Custom Icon page.),To upload a Custom Font Set, simply give the Icon Set a name, and then click on the Select Files button. Navigate to your icon set (as a zip file) and select it.
Then just click Publish in the right hand side. This will load the Custom Icon set. If you need to update the set later on, there is an Update Custom Icon Set button you can use to reupload the set, as seen below. The icons will now be available through the Icon Picker, in their own tab.
IMPORTANT NOTE: If you create an Icon Set from the Avada > Icon page, the set will be saved immediately, before you even add the icons. And when you add icons, the set is auto saved. If you add an Icon set through the Plus button in the Icon Picker or by clicking Add New when on the Edit Icon Set page, the set will be unpublished until you click Publish.OK, that』s it. Your custom icon set is now installed. To use it, head to any element that uses an icon, including the Icon Element. There, you will see any custom icon sets at the top of the icon picker, and you can now just choose the set and select icons from that.

How To Use The Global Color Palette In Avada

Color management is an integral part of designing and maintaining your website design and branding. This is why we constantly improve our color features in Avada to allow you to manage your color settings with ease. The latest innovation, released with 7.6, is a revised Global Color Palette, which can be used to define a palette of colors, which can then be tied to various global, page and element options on your website, allowing for quick updating of the entire site』s color scheme. Continue reading below to learn about the new color options.,Setting The Global Color PaletteThe Color Palette was originally added back in Avada 6.0, but with Avada 7.6, it has had a major overhaul. It』s a completely different beast now, and does a lot more than just set a color palette. For existing sites, this feature might be overlooked, but where it comes into its own is on a new site, or a freshly imported prebuilt site.
When starting a website, this is the place to go to initially set your site colors. You can find the Color Palette in the Global Options, under Color. There is a palette of eight inital colors, which for best results, you should set from lightest to darkest. Generally, you will set your white and bright tones, then your primary and accent colors, and then your greys or dark tones, as illustrated below. If needed, you can also add extra colors to the palette, by clicking on Add New Color.,Setting Global Colors In Global, Page & Element OptionsOnce you have set the colors on your Global Color Palette, you can begin to set them across your site. Anywhere you find a color picker, you will find a globe icon to access the global palette colors. As you can see in the example in the screenshot below, there is a globe icon at the end of the Primary Color option. To connect the primary color to a color from the Global Color Palette, simply click on the globe, and the Global Color Palette will appear, as in screenshot two.
In the final screenshot, the option has been tied to Color 4 on the Global Color Palette. As you can see, the globe icon becomes blue when a global color has been assigned to an option.
So what this does is not just make the Primary Color blue, but ties it to whatever color is selected in that Color 4 spot. So if that color is then updated, the Primary Color would be updated, as well as any option in the website that pulls the Primary Color.
The significance of this feature is easy to underestimate. Once color options across the site are tied to Global Palette colors, it takes only one change to a color in the Global Color Palette for that change to ripple throughout the entire website, allowing you to change the appearance of the site very quickly and efficiently.
Advanced Global Palette Color OptionsWhen setting a Global Palette Color, there are also some advanced options available. These will not be needed by most users however. These options, accessed by the sliders icon at the right of the dialog when adding a global color, offer Hue, Saturation, Luminance and Alpha options. With this, you can manipulate the existing global color, from the starting point of the chosen global color values. To undertsand HSLA color options, visit this site.
View the How To Use The Color Picker Doc here

How To Use Pagination In Avada

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

Element Options

Third Party Plugin Pagination

Pagination Element

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

How To Order Posts

Avada custom ordering options are available for Blog posts, Portfolio posts and FAQ posts and help you decide what order the posts will be displayed on your site. Please see below for more information:

Avada Ordering Options For Blog, Portfolio & FAQ
Reorder Standard & Custom Post Type Posts In WordPress By Published DateUsing Post Types Order Plugin To Manually Re-order The PostsAvada Ordering Options For Blog, Portfolio & FAQHow to set the order of Blog PostsStep 1 – Add a Blog element in the Fusion Builder.
Step 2 – For the 『Order By』 option, choose between Date, Post Title, Post Slug, Author, Number of Comments, Last Modified, or Random to define how your posts should be displayed.
Step 3 – Set the 『Order』 option to Descending or Ascending to define the sorting order of your posts.
Step 4 – Set the other options to your preference.
Step 5 – Save the Blog element and save the page.
Note: The default setting for 『Order By』 is Date and for 『Order』 is Descending.
How to set the order of Portfolio PostsStep 1 – Add a Portfolio element in the Fusion Builder.
Step 2 – For the 『Order By』 option, choose between Date, Post Title, Portfolio Order, Post Slug, Author, Number of Comments, Last Modified, or Random to define how your portfolios should be displayed.
Step 3 – Set the 『Order』 option to Descending or Ascending to define the sorting order of your posts.
Step 4 – Set the other options to your preference.
Step 5 – Save the Portfolio element and save the page.
Note: The default setting for 『Order By』 is Date and for 『Order』 is Descending.
How to set the order of FAQ PostsStep 1 – Add a FAQ element in the Fusion Builder.
Step 2 – For the 『Order By』 option, choose between Date, Post Title, FAQ Order, Post Slug, Author, Number of Comments, Last Modified, or Random to define how your portfolios should be displayed.
Step 3 – Set the 『Order』 option to Descending or Ascending to define the sorting order of your posts.
Step 4 – Set the other options to your preference.
Step 5 – Save the FAQ element and save the page.
Note: The default setting for 『Order By』 is Date and for 『Order』 is Descending.
Reorder Standard & Custom Post Type Posts in WordPress by Published DateBy default, WordPress orders posts and custom posts types by their publish date. These include blog posts, portfolio posts, FAQs, and the like. The Avada theme also reinforces this order with Fusion sliders and Elastic sliders. To learn how to re-order posts and custom post types, please continue reading below.
Posts & Custom Post TypesBelow are the posts and custom post types that you can re-order in WordPress by published date.
Media Posts – Media posts found in the 『Media』 tab.Orders – WooCommerce orders found in the 『WooCommerce』 tab.Coupons – WooCommerce coupons found in the 『WooCommerce』 tab.Fusion Slides – Fusion slides found in the 『Fusion Slider』 tab.Elastic Slides – Elastic slides found in the 『Elastic Slider』 tab.Events – Events Calendar events found in the 『Events』 tab.Venues – Events Calendar venues found in the 『Events』 tab.Organizers – Events Calendar organizers found in the 『Events』 tab.Reorder Posts by DateBecause the posts are ordered by their publish date by default, you can manually manipulate your posts publish dates to get them in the order you』d prefer. The post with the oldest date appears last, and the post with the earliest date appears first.
Step 1 – Navigate to the posts you』d like to re-order. For example, blog posts in the 『Posts』 tab.
Step 2 – Hover over a post, and you』ll see the 『Quick Edit』 link. Click this to bring up the main details of a post, such as title, slug, date, and the like.
Step 3 – In the 『Date』 field, change the date and time accordingly.
Step 4 – Repeat steps 2-3 for all the posts you』d like to re-order.
Using Post Types Order PluginIf you want to manually reorder your posts you can use the Post Types Order plugin. It works for all Avada posts and post types, using a simple drag 『n drop way for you to rearrange the order. Continue reading below to learn how to install and use this plugin.
How to install the Post Types Order pluginStep 1 – Go to the Plugins > Add New tab of your WP admin sidebar.
Step 2 – In the search bar on the upper right side of the screen, search for 『Post Types Order』. It』ll be the first search result and the plugin created by Nsp Code.
Step 3 – Once you』ve found the correct plugin, click the 『Install Now』 button.
Step 4 – Wait for the plugin to finish installing. Once it』s finished, click the 『Activate Plugin』 link and wait for the plugin to finish activating.
Post Types Order Plugin SettingsStep 1 – Go to Settings > Post Types Order tab on your WP admin sidebar to bring up the options for the plugin.
Step 2 – On this page, you can set which interface to enable or disable. For example, you can choose 『Hide』 for the Post option to disable the re-order feature on blog posts.
Step 3 – To re-order posts, hover on the tab of the post you』d like to re-order, then select 『Re-Order』. For example, if you』d like to re-order your Portfolio posts, hover on the 『Portfolio』 tab on your WP admin sidebar and select the 『Re-Order』 option.

How To Show Videos In A Lightbox

The lightbox we use in Avada is called iLightbox and it is compatible with Youtube, Vimeo and self-hosted videos. The Lightbox can be triggered from the Lightbox Element, but also in many other places thoughout Avada. Read on for more information on where and how you can show videos in a Lightbox in Avada.
Locations You Can Show Videos In A LightboxLightbox Element – The Lightbox Element can be added directly in the page builder, through the Fusion Builder Elements list, or through the Element Generator in a text editor.Columns – You can add a video link to a column and then choose the Lightbox option under Link Target.Button Element – You can launch a YouTube, Vimeo or self-hosted video in a Lighbox through the Button Element.Portfolio Posts – Each portfolio post has a Video URL For Lightbox field in the Fusion Page Options, that allows a video to be loaded in a Lightbox. The video is triggered by the Zoom icon on the Portfolio item thumbnail.Add Media To Page/Post – Any image inserted onto a page can open in a lightbox to play a video or show another image.How To Link Videos In ColumnsStep 1 – Edit the column you』d like to link a video to, or create a new one.
Step 2 – In the Column options, set a video URL in the Link URL field.
Step 3 – In the Link Target option below this, choose Lightbox from the options.
Step 4 – That』s it. Your entire column is now a link and the video will open in a lightbox when the column is clicked.
How To Insert Videos In The Lightbox For Portfolio PostsStep 1 – Open the portfolio post you』d like to add a video to, or create a new one.
Step 2 – In the Fusion Page Options, locate the 『Video URL for Lightbox『 field and paste your video』s link URL. For example, https://vimeo.com/63534746. You can insert both Youtube/Vimeo videos and self-hosted videos.
Step 3 – Once you』re finished making changes, click Save Draft or Publish/Update.
The video is triggered by the Zoom icon on the Portfolio item thumbnail.
IMPORTANT NOTE: For Vimeo and YouTube videos, make sure to use the link URL ( https://vimeo.com/63534746 ) and not the embed URL ( http://player.vimeo.com/video/63534746 ).How to Launch a Video through the Lightbox ElementStep 1 – Add the Lightbox element to your page through the Fusion Builder.Step 2 – Select 「Video」 as the Content Type」 for your Lightbox element.Step 3 – Now add your video』s full URL in the Video URL text field.Step 4 – Select a thumbnail image which will launch the video when clicked.How to Launch a Video through the Button ElementYou can also launch a YouTube or Vimeo video in a Lightbox through the Fusion Builder Button element.

Step 1 – Add a button Element to your page/post content and then add the video URL to the Button URL setting.

Step 2 – Next, in the Button Target field, choose Lightbox.

Step 3 – Now save your settings and update the page. Clicking the button on the frontend will launch your video in the Lightbox.
How To Insert Videos In The Lightbox For Regular MediaStep 1 – Open the page or post you』d like to add a video to, or create a new one.
Step 2 – Click the Insert/Edit Link button in the top row of the page editor, just after the alignment buttons.
Step 3 – Click the Link Options (the cog icon) and paste your video』s link URL in the URL field. For example, https://vimeo.com/63534746. Add your Link Text in the Link Text field below this.
Step 4 – Once you』ve inserted the link URL, click the Add Link button on the lower right corner.
Step 5 – After you insert the video, you must add rel=」iLightbox」 to the link tag. As an example, please refer to the image below.
How To Set Video Size in Fusion Theme OptionsStep 1 – Navigate to the Avada > Theme Options tab.
Step 2 – Go to the Lightbox tab, and locate the Slideshow Video Width and Height options. Set the width and height of your video by entering a pixel value into the corresponding setting. For example,1280px for the width and 720px for the height.
Common Issues or QuestionsMy Youtube or Vimeo video is too large!This issue is because you』re using the embed URL instead of the link URL.

How To Set Up A Side Navigation Page

IMPORTANT NOTE: The 『Side Navigation』 page template will be deprecated in a future version of Avada. We have replaced it with a better solution, the Avada: Vertical Menu widget. This new widget offers the same features but with greater flexibility. It works with the WP menu system. Please utilize this new method instead of the page template which will eventually be removed.Avada includes a Side Navigation page template that can be used to insert large amounts of content on a single page. You can also setup second level menu items on the Side Navigation page that will collapse by default and expand when the parent level is moused over or clicked, depending on how you set it in Fusion Theme Options. You create Side Navigation pages in sets. Each set always has to have a Parent page that will show at the top. Then you create additional pages and assign them to the parent page. All the pages assigned to the parent page will make one side navigation set.
Creating A Side Navigation PageStep 1 – Navigate to Pages and click Add New.
Step 2 – Input a name for your Page (this will be the Parent page under which you can nest different child pages).
Step 3 – In the Page Attributes box on the right side, select Side Navigation from the Page Template dropdown list and click Save.
Step 4 – To add more pages to the side navigation set, create another new page, select the Parent page created in Step 2 as the 『parent page』, and set the Template to Side Navigation.
Step 5 – Choose to have the side navigation set on the left or right side by selecting Left or Right from the Sidebar Position dropdown field in the Fusion Page Options box.
Step 6 – Menu order is set alphabetically, change it by inserting a new order for each page in the Order field.
Step 7 – Once you are done, be sure to Publish each of the pages.

How To Set A Custom Permalink For Portfolio Posts

To set a custom permalink structure for portfolio posts, go to the 「portfolio」 tab in theme options and enter your custom slug in the 「Portfolio Slug」 field. Just make sure its not the same name as your portfolio. So if your portfolio page is called 「portfolio」, your slug could be 「portfolio-items」. Once you insert the custom slug, go to 「Settings > Permalinks」 and select the 「Post Name」 and hit 「Save Changes」.
IMPORTANT NOTE: The slug name cannot be the same name as your portfolio or the layout will break.

How To Speed Up Your Site Using Caching Plugins

Information About Cache & Minification/CombinationCaching and minification is important in any website. Whenever a user visits your site, a lot of information is requested, such as images, styling, as well as retrieving your content from the WordPress database. These factors, plus the amount of visitors you have, can significantly affect your site』s total page loading time. Caching plugins help reduce this by showing your viewers a static version of your site.
IMPORTANT NOTE: These settings are not a one size fits all. The plugins listed below interacts differently with each server, and each situation can be different. Contact your host as well because they may have specific caching rules on their servers.Is Your Site Running Slow?Recommended Cache PluginsBelow is a list of our recommended cache plugins to optimize your site』s speed. These plugins have been tested with Avada, and we find that they work well with it. However, please note that these plugins interact differently with different server setups. Please note, we do cannot provide support for any issues caused by third party plugins.
AutoptimizeWP RocketW3 Total CacheWP Super CacheLiteSpeed CacheThere are also many others out there, try a Google search and you will find other options as well.,The PWA PluginOne of our recommended plugins, the PWA plugin, also is well worth a look, when trying to speed up the loading of your site using plugins. What PWA does is to provide a range of different caching strategies, based on your site and the frequency of content updates.,Useful Links & Resources
Performance Testing using GTMetrix

Performance Testing using Pingdom

Performance Testing using WebPageTest

Pingdom vs GTmetrix vs WebPageTest

Avada Speed and Performance

CSS & JS Compilers

A Comprehensive Guide to WordPress Image Optimization

General Cache information