標籤： how-to

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 Offload Google Fonts

Important Note – Avada』s GDPR Privacy Tools are only available for Avada 5.5.2 and newer.When you are using Google fonts that usually mean retrieving the font files from their API, which includes sending the IP addresses of your users (which are considered to be private data) to Google. You might find that circumstance worrisome, but at the same time you don』t want to do without the nice typography options Google fonts offer. Avada to the aid. We have added a new Global Option that easily allows you to decide whether Google fonts should retrieved via the Google fonts API, or if they should be hosted locally on your server.
To offload Google fonts, please go to Avada > Global Options > Privacy and set Google Fonts Mode option to 『Local』.

How To Set Up A One Page Site

Avada gives you the flexibility to create a modern one page site with a scrolling menu. To get an idea of how one page sites work and look, please see our Landing Product demo here. A one page site lets you consolidate all your site』s information into one page that』s split into multiple sections. Please read below for detailed information on how to set it up.
Creating Content For One Page SitesWhen creating content for your One Page site, you』ll need to organize your content into sections and use the 『Name Of Menu Anchor』 option present in the Container Element or the Menu Anchor Element at the beginning of every section. This is so you can reference each section in your menu. Your menu will serve as a way for your viewers to quickly scroll to a section they』d like to view. For example, clicking the About menu item will automatically scroll the page to the About section.
Step 1 – Create a new page or edit an existing one.
Step 2 – Click the 『Use Fusion Builder』 button to access the Fusion Builder, then create your page content and layout as normal.
Step 3 – Once you』re finished laying out the page and creating your content, determine the different sections on your page. For example, the About section, the Contact section, and the like.
Step 4 – Once you』ve decided on the different sections of your page, it』s time to reference each section. If your section is in the beginning of a Container Element, Use the 『Name Of Menu Anchor』 option in the Container Element. If your section is in the middle of a Container, use the Menu Anchor Element.
Step 6 – If you』re using the 『Name Of Menu Anchor』 option, then simply insert the unique Menu Anchor ID for the section. If you』re using the Menu Anchor Element, click the 『Element Settings』 and enter a unique Menu Anchor ID for the section in the 『Name』 field. For example, about.
Step 7 – Click 『Save』 to save your changes, then repeat steps 4-6 and create separate Menu Anchors for all the different sections that you have.
Custom MenuA Custom Menu is important because this is how your viewers jump to different sections of your page. Instead of normal links, your One Page site』s custom menu will have Anchor Links that link and scroll automatically to each section on the page.
How To Create A Custom MenuStep 1 – Navigate to the Appearance > Menus tab on your WordPress admin panel.
Step 2 – Click the 『Create A New Menu』 link. Give it a name, then click the 『Create Menu』 button.
Step 3 – In the left sidebar, expand the 『Custom Links』 tab. If you』re missing content types in the left sidebar that you want to add to the menu, you can open the Screen Options and enable them for your menu.
Step 4 – In the 『URL』 field, enter the Menu Anchor ID you』ve assigned to a section on your page. For example, if this menu item links to your About section, then it would be about. Please note that you have to enter it with a hashtag (#) in order to scroll to the section properly. For example, #about.
Step 5 – Once you』ve added the Anchor Name ID to the 『URL』 field, enter a name for the 『Link Text』 field. This is simply the menu item』s text. For example, About.
Step 6 – When finished filling in those fields, click the 『Add To Menu』 button.
Step 7 – Repeat steps 4-6 and create a menu item for each section you have.
Step 8 – Under the 『Menu Structure』 section, you』ll find all the menu items you』ve just created. You can expand each menu item and edit its settings if you need to.
Step 9 – Don』t forget to assign your new menu. To learn how, see 『Assigning A Custom Menu To A One Page Site』 and 『Assigning A Custom Menu To A Multi-Page Site』 below.
Step 9 – Once you』re done creating your custom menu, click 『Save Menu』.
IMPORTANT NOTE: If you want to create a link that lets the page scroll back up to the top, you can simply use #home, as this anchor is already preset in the theme.Assigning A Custom Menu To A One Page SiteStep 1 – If you』re creating a One Page site, you can assign a custom menu by going to the Appearance > Menus tab.
Step 2 – Select the custom menu you』ve just created from the dropdown, then click 『Select』 to load it.
Step 3 – Once you』ve loaded your custom menu, go to the 『Menu Settings』 section and check the 『Main Navigation』 checkbox. This will assign the custom menu you』ve created as your One Page site』s main menu.
Assigning A Custom Menu To A Multi-Page SiteStep 1 – If you』re creating a page similar to a One Page site on your Multi-Page site, you can assign a custom menu to it by editing the page.
Step 2 – Underneath the editor field, you』ll find the Fusion Page Options box.
Step 3 – Switch to the 『Header』 tab and locate the 『Main Navigation Menu』 option. In the dropdown field, select the custom menu you』ve just created. This will make your custom menu the menu for the Landing Page only.
Step 3 – Once finished, click 『Save Draft』 or 『Publish』.

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

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 Export / Import Your Slider Revolution Sliders

Slider Revolution allows you to easily export/import your sliders. It』s always a good idea to backup your sliders so you can easily import them again if you ever need to. Making animated slides takes a lot of time, so make sure you export the data, so you don』t lose the time you』ve spent on them. Slider Revolution requires you to export each slider individually. Export each slider you have made and it will give you an individual zip file that contains all the necessary files.
How To Export Slider Revolution SlidersThese instructions are for version 6 of Slider Revolution. If you are running an older version, we recommend you update, via the Avada > Plugins page.
Step 1 – Open the Slider Revolution interface by clicking on the Slider Revolution tab in your WP Admin. Any sliders you have created or imported will be represented by a thumbnail.
Step 2 – Mouse over the thumbnail of the slide you wish to Export, and click the small arrow in the bottom right hand corner.
Step 3 – The Export options will be one of the options that appear. Click on that and a confirmation dialog will appear.
Step 4 – Click on 『Yes, Export Slider』 and the download will begin. Once it』s finished downloading, you will have a .ZIP file of your slider.
How To Import Slider Revolution SlidersStep 1 – Open the Slider Revolution interface by clicking on the Slider Revolution tab in your WP Admin. At the top of the interface are a row of large buttons. 『Manual Import』 is the third one along.
Step 2 – Click that to bring up the Choose File dialog. Click 『Click to choose』 to select the .zip file of the slider you wish to import.
Step 3 – Once you』ve chosen the .zip file, the import process will begin.
Step 4 – Once it』s finished uploading, you will now see your imported slider in the list of Slider Revolution sliders available.
Importing Premium SlidersSlider Revolution also comes with a large range of premium sliders (templates) that can be imported. To do this however, you must purchase a license and activate the purchase code.
The version we supply is free, fully functional, and can be updated, but it does not include the premium features that a license unlocks. See below for the features  a premium license unlocks.
If you do upgrade to a premium license, you can import many sliders from the 『New Module from Template』 button at the top of the Slider Revolution interface.

How To Hide The Parent Page of Side Navigation

By default, Avada will always show the top parent page of your side navigation set. If you would like to disable that, use the custom CSS below. Copy and paste it into the CSS field in theme options. This will also hide the first second level page of a parent/child page.
Copy to Clipboard.side-nav li:first-child { display:none }  1.side-nav li:first-child { display:none } 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.

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 Fix Mobile Menu Not Appearing

If your main menu displays on desktop and laptop devices, but not on mobile devices, this may be due to not having a menu assigned to the main menu location. To solve this issue, you must ensure a menu is assigned. To learn more about this, please continue reading below.
Is The Main Menu Assigned In The WordPress Settings?Step 1 – Navigate to the WordPress Dashboard > Appearance > Menus > Manage Locations section
Step 2 – Ensure that the Main Navigation is assigned under Theme Location > Assigned Menu
Purge Your CacheCache us often a culprit with issues like this. If you are running any cache plugins on your website, make sure that you clear your cache as well as clearing your browser/device cache when checking on mobile.
3rd Party Plugin ConflictsIf you have purged your cache and ensured that the main menu is assigned in the WordPress menu section, then you need to check for 3rd party plugin conflicts. Go to WordPress Dashboard > Plugins and disable all 3rd party plugins (except the Fusion Core and Fusion Builder) and then re-enable them one by one until you find the culprit.

How To Import / Export Your LayerSlider Sliders

LayerSlider allows you to easily export/import your sliders. It is always a good idea to backup your sliders / slides so you can easily import them again if you ever need to. Making animated slides takes a lot of time, so make sure you export the data, so you don』t ever lose the time you』ve spent on them. Layer Slider can export all sliders at once, or you can export them individually.
How To Export LayerSlider SlidersTo export a slider, go to LayerSlider WP > Sliders from the WordPress dashboard. Select the slider, or sliders, you wish to export, choose Export from the dropdown list directly under the sliders and then click Apply. You will receive a zip file, with the sliders organised inside it, including the content and a .json file.
How To Import LayerSlider SlidersTo import sliders, click on the 『Import Sliders』 button at the top of the page. From the popup window, choose a zip file you previously exported, and now wish to import, and click the 『Import Sliders』 button.
IMPORTANT NOTE: In order to import from outdated versions (pre-v3.0.0), you need to create a new file and paste the export code into it. The file needs to have a .json extension, then you will be able to upload it.