Author 詩語

How To Ensure A Full Screen Slider Revolution Slider Is Completely Full Screen

Revolution Slider offers a full range of sliders, including a very nice full screen slider. A Full screen slider will always take up 100% width and 100% height of the viewable area. There are two different situations that will require two different settings. To make a full screen slider for each situation, please see below.
IMPORTANT NOTE 1 : If you are logged into your WP admin and the top Admin bar is showing, the full screen Revolution slider will not be aligned properly to the height of your screen. This is normal expected behaviour. The full screen slider will only align properly to the height of your screen when you are logged out of your admin.IMPORTANT NOTE 2 : If you see extra white space above or below your full screen slider, it will be the page padding. You can remove this globally in the Avada > Theme Options > Styling tab, or individually per page in the Page tab of the Fusion Page Options. The two relevant options are 「Page Content Top Padding」 and 「Page Content Bottom Padding」. Set them to 0px.Full Screen Revolution Slider With Normal Header Above SliderIf you』re using a traditional opaque header above the slider, it』s important that you place .fusion-header-wrapper in the slider general options. The field you need to place the header wrapper class is called the 『by container』 field,  and can be found in the Layout > Decrease Container Height section of the Module General Options, as seen below. Doing this will allow the slider to take up the full width/height of the screen while still showing the header.
Full Screen Revolution Slider With Transparent Header or Header Below SliderIf you』re using a transparent header or a header below the slider, you do not need to put anything in the Offset Containers field. Please leave that field blank.,Slider Creation ProcessThe creation of Slider Revolution Sliders is a very large topic that is largely outside the scope of Avada support. Please see our Slider Revolution document for an overview of the topic, or for more detailed information and support, visit the ThemePunch Support Center, and check out their YouTube channel for a range of videos on Slider Revolution 6.

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 Have A Menu Border On Hover Without Movement Using The Menu Element

When creating a menu using the Menu Element, you can set a border on hover, as I have done in the image below. But if you just set it on hover, you will see the menu move slightly, as the border is activated. To eliminate this movement when you hover, there』s a simple trick.
If you start by adding a border size and color on the Hover state of the menu, as found on the bottom of the Main tab, under the Main Menu Item Styling, you will see the menu moves slightly on hover, as the border is activated. In the image below, I have added a 5px border to the bottom of the menu.
The key to eliminate that movement is to also set the Regular state with the same size border, and then set the color to transparent. That way the border is also on the Regular state, but it』s just invisible. But with this method, any movement is fully eliminated.

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 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 Hide Full Width Background Images On Mobile

If you wish to hide full_width shortcode background images on mobile devices, please use this custom CSS. Copy and paste it into the CSS field in Theme Options.
Copy to Clipboard@media only screen and ( max-width: 640px ) {
.fullwidth-box {
background-image: none !important;
}
} 1@media only screen and ( max-width: 640px ) {2  .fullwidth-box { 3    background-image: none !important;4 }5}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 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 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 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 fix page content that is not parsable by Avada Builder

If you switch from the standard WordPress editor to Avada Builder and see the popup as shown in the image below, it is due to one of the following reasons:
Invalid content editing in default editor
Invalid structures of shortcodes (elements) were created with the shortcode generator; or HTML tags have been added to the page contents without using Fusion Builder. Check through the HTML for stray or incomplete tags.
Third-party plugins altering the page contents
A plugin has altered your page content by adding extra content without Fusion Builder shortcodes (elements). Try deactivating your plugins (except Fusion Builder and Fusion Core) to find the culprit.
Content contains outdated shortcodes
This will happen, in particular, if you have updated from an older version, or copied code from a pre 5.0 version of Avada. See our link to converting Fusion Builder pages here.