Author 詩語

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 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.

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 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}4​5if ( $show_stream == 'true' ) {6 $height = '600';7}8​9if ( $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 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 Change Testimonial Speed, Fonts, Background

You can change Testimonials speed, font color and background color by going to Avada > Theme Options > Fusion Builder Elements > Testimonials Element. Read the description and enter your desired value.
You can change the Testimonial font size with the following custom CSS:
Copy to Clipboard.review blockquote q {
font-size: 18px !important;
} 1.review blockquote q {2font-size: 18px !important;3}For more details on using custom CSS in Avada, please see our guide here.

How To Add Content To Content-Based Elements

There are several elements in Avada that allow you to add further content inside them, through the WordPress editor. For example, there is the Toggle Element, the Modal Element, the Tabs Element, and the Content Boxes Element, to name a few. If you wish to add further Fusion Builder content inside these elements, we have a few tips here on the best way to achieve this. Read on…
Now, not every element that has the WordPress editor in it, and therefore the Fusion Builder Shortcode Generator, is designed to have extra shortcode content. For example, the Title Element has an editor, but you can』t add a Gallery into a Title. So, common sense is required here.
But anytime you have access to the Fusion Builder Shortcode Generator, you can theoretically at least, add further Fusion Builder elements inside the parent element. There are a few golden rules with this process.
If you are just adding a single element, then you can use the Fusion Builder Shortcode Generator, configure the element and insert the shortcode directly into the containing element. But if you want a more complex layout involving columns, there is one important thing to remember.
IMPORTANT NOTE: Elements are already inside a column by default, so any further shortcode content inside an element needs to be inside nested columns.The Easy SolutionBut there is a very easy way to do this. Simply create a new page, and using your preferred interface of the Fusion Builder, create your desired layout using nested columns. When you are finished, you simply need to copy the nested columns element itself (using the right click feature) to copy the shortcodes into memory.
Then you can return to your original page and paste your shortcode content into the editor of the containing element. This way, you will be inserting the nested column shortcodes that are needed, as well as the elements inside them, but not the container and column they are in.
The resultant shortcode pasted into the editor in the element then generates the desired layout, without needing to edit any code.

How To Change The Order of Sidenav Menu Items

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.By default, the menu items on a side navigation template page will be ordered alphabetically. If you would like to change this order, you can do so in the page attributes box of the individual pages. Look for the 「order」 field and enter a numerical order for all your pages. 0 will make the page the first item under the parent item, 1 will make a page the second, 2 will make a page the third item and so on.