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
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.
How To Make A Full Width Responsive Layer Slider
If you wish to have a full width layer slider, that is 100% responsive, and has all sublayers contained in the same spot on all screens along with a fixed height, please use these exact settings in the image below. Feel free to change the height value if you want it taller or shorter, but the other settings must be set. See the notes below.
1. The important thing is to set your width and heights, along with your Responsive under, and Sublayer container correctly. Please see the attached screenshot for an example.
2. Also make sure you are not positioning the sublayers with CSS, only use the X and Y fields to position the content.
3. For the full width responsive layer slider, leave 「responsive」 turned off
See the image below for a visual representation
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 Fix PHP Configuration Limits on GoDaddy Hosting
If you need to increase your PHP Max Input Vars & PHP Time Limit PHP configuration limits, and you are hosted by GoDaddy, it is most likely that you have been told to create the php.ini file on your server.
They do have official help files for this.
Are you hosted on a VPS or Dedicated Linux server and need to create the php.ini file? -> Help link here
On a shared hosting package? -> Help link here
If you are not sure what type of hosting you have -> Help link here
Once this has been done and to ensure the changes take effect please see here -> Help link here
How to Make a Horizontal Menu in Footer Widget Area
IMPORTANT NOTE: This document relates to the Global Options method of building a Footer. If you are using Avada Layouts to create your footer, then you can simply use the Menu Element to create a Horizontal menu.In our Modern Shop Demo, we feature a simple horizontal menu in the footer area. If you would like to re-create this look, it』ll require just a Horizontal Menu widget.
How To Insert A Horizontal Menu in The FooterStep 1 – Navigate to Avada > Options > Footer > Footer Content.
Step 2 – Locate the 『Footer Widgets』 option and set it to On. Once done, click 『Save Changes』.
Step 3 – Navigate to Appearance > Widgets. Depending on how many columns you』ve set in the Number of Footer Columns, you can have up to 6 Footer Widget boxes. Select the box you』d like to insert the horizontal menu, for example, Footer Widget 2. Then, drag the 「Avada: Horizontal Menu」 widget to Footer Widget 2.
Step 4 – Set the menu you want to use. If you want to create a new menu, go to Appearance > Menus section.
Step 5 – Make the selections for the other field: alignment, padding, color, size, etc.
Step 6 – Once you』re finished setting your menu up, click Save button.
To know more about setting up a menu navigation in another way, check this: Avada Vertical and Horizontal Menu Widgets
How to Create Self-Hosted Videos
Aside from images and text, videos are a great way to showcase content on your website. Avda offers many ways for videos to be loaded into your site, including YouTube, Vimeo and self-hosted videos.
Self-hosted videos require a few steps to create and can use a few file formats per video. This step by step article will cover the various file formats of self hosted videos, how to make the required and optional file formats, areas of Avada that can use the videos, and how to use the videos in those areas.
IMPORTANT NOTE – The ability to set a video as a background of a full-width container is only available in Avada version 3.7 or higher.A Self Hosted Video Consists of 4 File Formats
.MP4 – A required file format for uploading self-hosted videos. This file works in all major browsers.
.WEBM – This format is growing in popularity, but is an optional file format with self-hosted videos.
.OGV – Another optional file format for self-hosted videos.
Video Preview Image – The image that will be seen in place of your video on older browsers or mobile devices.
The Only Required Format is MP4As mentioned above, mp4 is the only required video format for self-hosted videos. WebM and .ogv are optional formats.
The steps below assume that you already have a video to use. Videos come in many different formats, so the idea is that you need to convert your current video format to MP4 and WEBM files, which can then be uploaded and used on your website.
IMPORTANT NOTE – If you have an MP4 video that is not showing/playing, then chances are the video isn』t encoded properly. In this event, try to use Handbrake to re-encode the video.How To Create A MP4 FileStep 1 – After creating your video, make sure to save it in .MP4 format. The video should also be in 16:9 Aspect Ratio.
Step 2 – If you are unable to save your video in .MP4 format, you must convert it to .MP4 format via a 3rd party software, like Handbrake. Please see the links below for information on how to do this.
View Handbrake documentation.
How To Create A WEBM FileStep 1 – Once you have a video in .MP4 format, if you wish, you can also convert it to .WEBM format. You can do this with Media.io.
Step 2 – If you choose to use Media.io, you can simply upload your .MP4 video and it will automatically convert it to .WEBM format.
IMPORTANT NOTE – Self hosted videos can be very large in size, which is not good for a website. Conversion tools like Handbrake and Firefogg will drastically reduce file size. Handbrake and Firefogg are 3rd party applications and are not affiliated with ThemeFusion.
A properly encoded and compressed video shouldn』t be more than 4-8 MB for a 30-60 seconds clip. Avoid adding larger video files > 10MB as they contribute to overall page size and will be a cause of negative user experience.Areas You Can Use Self-Hosted Videos
Video Element – New for Avada 6.1, this Element is specifically designed for you to add self-hosted videos into your content.
Containers – Using the Fusion Builder Container Element, you can set a self-hosted video as the background.
Fusion Slider – Using the Fusion Slider, you can insert self-hosted videos into your slides.
Layer Slider – Using the Layer Slider, you can insert self-hosted videos into your slides.
Revolution Slider – Using the Revolution Slider, you can insert self-hosted videos into your slides.
Anywhere Lightbox is used – Lightboxes can show self-hosted videos, and they can be triggered from the Column, Button and Lightbox Elements, and in the Portfolio Page Video URL for Lightbox option. For more information on using videos in Lightbox, please see How To Show Videos In A Lightbox.
How To Upload Your Video File(s)Once you have your video as an .MP4 file, you』re now ready to upload it.
Step 1 – Choose the area of the site you want to use self-hosted videos. Each area described above has slightly different upload methods, but all accept .mp4 files.
Step 2 – In your chosen area, simply upload the correct file format to the correct field. For example, upload the .MP4 file format to the .MP4 Upload field. There will be a field for the required file format, and in some cases, fields for the optional videos as well.
Step 3 – If there is just a simple text field with no video uploader button, like in the Container Element, you will need to upload the file to the Media Section and then copy and paste the URL.
Step 4 – If your media files are too big to upload through the Media Manager, you will need to upload them to your server via FTP.
How to Fix portfolioID=xxx url Showing in Single Portfolio Item URLs
If you are using the Fusion Builder Portfolio Element, and you follow one of the links to a single portfolio item, you have probably noticed ?portfolioID=xxx (where xxx is a number) is being added to the url in the browser address bar. Continue reading below to understand why this is appearing on your portfolio item links and how to change it.
Why Is ?portfolioID=xxx Appearing?This will happen if you』re constraining the Portfolio posts to a certain category / group of categories, or to exclude categories. That is done through the Portfolio Element settings in the builder. The reason why this query string is added to the URL is so the Previous / Next navigation on single portfolio posts will navigate only within your set categories and exclude any other posts. Without that identifier, it』s not possible for the theme to pass your specific category settings along to the single posts for accurate paging.
For example, let』s assume you chose to only show the Audio, Photography, and Web in a page using the Fusion Builder Portfolio Element. Once you click on one of the portfolio item links to open it in a single portfolio page, the unique identifier will be added to the link. Then, if you use the Previous / Next buttons to navigate through the posts, only items from the 3 categories you』ve set will be displayed, and any additional items that are from other categories will be omitted.
How Do I Remove It?This will only happen for links from the Fusion Builder Portfolio element that does not include all categories. You can disable this, however, it will not retain the ability to page between your specific categories on your single post page. To remove the identifier for the URL, edit your page and open the Portfolio Element settings. Then find and enable the Hide URL Parameter setting. Be sure to update your page after making these changes in the settings.
How To Customize Height of Facebook Widget
The Facebook widget does allow you to change the width in the widget settings, but there is not a setting to change the height. If you need to change the height, follow the steps below. This information below was submitted by user lluisarbos
1. Go to editor
2. Find facebook-like-widget.php
3. Change 「height」 value as you want:
Copy to Clipboardif ( $show_faces == 'true' ) {
$height = '260';
}
if ( $show_stream == 'true' ) {
$height = '600';
}
if ( $show_header == 'true' ) {
$height = '200';
}x 1if ( $show_faces == 'true' ) {2 $height = '260';3}45if ( $show_stream == 'true' ) {6 $height = '600';7}89if ( $show_header == 'true' ) {10 $height = '200';11}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 Get Notified of Theme Updates
There are a few ways to be notified when a new theme version has been released. Please see below for your options, as well as the changelog.
Option 1 – Avada includes an auto-updater that will notify you of theme updates through WordPress. Firstly, however, you must register your purchase. And you should also have a backup theme installed in WordPress for this to work, for example the default Twenty Twenty theme.
Option 2 – When logged into your Themeforest.net account, you can visit your Downloads tab and find your theme purchase. Below it is a check box that says 「Get notified by email if this item is updated」. Please check that box and you will be notified when we submit a new theme update.
Avada Change Log