FullPage for Visual Composer

FullPage for Visual Composer

INTRODUCING – FULLPAGE FOR VISUAL COMPOSER
Now, create beautiful scrolling fullscreen web sites with Visual Composer, fast and simple.This plugin simplifies creation of fullscreen scrolling websites with WordPress and saves you big time.

Top Features

  • Fully responsive.
  • Touch support for mobiles, tablets, touch screen computers.
  • Each row as a full page section. Full page sections are the vertical slides.
  • Optional columns as slides. If selected, each column behaves as horizontal slides.
  • Full page scroll with optional visible scrollbar.
  • Optional Auto-height sections.
  • Optional fixed header and footer.
  • CSS3 and (optional) JS animations.
  • Animated anchor links.
  • Optional show/hide anchor links in the address bar.
  • Optional vertically centered row content.
  • Optional text resize when window is resized.
  • Optional section and slide loops.
  • Optional section only scrollbars.
  • Optional keyboard support while scrolling.
  • Optional history record. When this is enabled, browser back button will go to the previous section.
  • Optional horizontal and vertical navigation bars.
  • Optional responsive scrollbar. When responsive width and height given, a normal scroll page will be used under the given width and height values.
  • NEW: Scroll overflow Scrollbar Options (Hidden, Faded and Interactive scrollbar options).
  • NEW: Visual Composer native animations in sections and slides.
  • Output CSS and JS minified.

Demos

Demo Page
Demo Page with Scrollbars and Visual Composer Parallax

How To Use

Demo Video
How To Use FullPage for Visual Composer with The7
How To Use FullPage for Visual Composer with Enfold
How To Use FullPage for Visual Composer with X-Theme
How To Use FullPage for Visual Composer with Bridge
How To Use FullPage for Visual Composer with Salient
How To Use FullPage for Visual Composer with Zephyr
How To Use FullPage for Visual Composer with TheFox
How To Use FullPage for Visual Composer with Jupiter
Themes Not Supported (If you have one of these themes, full page will not work so support will be waste of time.)
To use FullPage for Visual Composer, you have 3 options. If you have a theme that supports an empty page template, you can choose Option 1. Otherwise, please follow the steps of Option 2 or 3.
Option 1: With Theme Empty Page Template
1. Enable empty page template of the theme using WordPress Page Templates.
2. Add necessary CSS to the page using Visual Composer (the cog icon) to remove margins of theme wrappers, to remove maximum width of the page wrapper etc.
3. Follow the steps on ‘How to use FullPage for Visual Composer’.
Option 2: With Full Page Empty Page Template
1. Follow the steps on ‘How to use FullPage for Visual Composer’.
2. From Advanced tab of Full Page options, Enable Empty Page Template.
Option 3: With Customized Empty Page Template
1. Copy ‘template’ folder in the plugin directory.
2. Make your changes and copy it back to your server (Do not copy it back under the plugin directory to keep the code on plugin update).
3. Follow the steps on ‘How to use FullPage for Visual Composer’.
4. From Advanced tab of Full Page options, Enable Empty Page Template.
5. From Advanced tab of Full Page options, set ‘Template Path’ to the path of the new template directory.
How to use FullPage for Visual Composer
1. Add rows with Visual Composer. Each row will be defined as fullpage section. Design your row content.
2. Set margins of each row to 0.
3. From row settings, go to ‘Full Page’ tab and select ‘Full Height’ of ‘Section Behaviour’ option. You can select ‘Auto Height’ if you want the row height depending on the contents instead of window height.
4. At the ‘Full Page’ tab and set your anchor name if you want to use anchors. If the value is not set, an automatic generated anchor name will be used. The anchor name cannot be any ID used in the HTML output. (Do not set the anchor name the same as row ID.)
5. At the ‘Full Page’ tab and set your Tooltip text if you want to use tooltips.
6. Enable Full page and configure full page by playing with options.
How to Add Slides
1. Add columns to the row. Each column will be defined as fullpage slides in the section.
2. Set margins of each column to 0.
3. From row settings, go to ‘Full Page’ tab and enable ‘Columns as Slides’.
How to Add Fixed Header
1. Add row with Visual Composer. Design your header row content.
2. From row settings, go to ‘Full Page’ tab and select ‘Full Height’ of ‘Top Fixed Header’ option.
How to Add Fixed Footer
1. Add row with Visual Composer. Design your header row content.
2. From row settings, go to ‘Full Page’ tab and select ‘Full Height’ of ‘Bottom Fixed Footer’ option.
Notes

  • Visual Composer animations are supported only for native visual composer elements. This feature is experimental and may not work with some elements and themes with customized visual composer. If the feature is not used, Visual Composer animations can be viewed only for the first row. If you use animations on other rows, they won’t start and the items will not be visible.
  • Do not use row stretch, full width row, full height row etc.. options of Visual Composer. These options are unnecessary with FullPage and the behaviour of the page changes when used. (Such as scrolling mechanism might not work etc..)
  • Some of the plugins that depend on scrolling mechanism such as sticky menus, animations etc. might conflict with FullPage. Please contact me on need, I will try to resolve the issue.
  • Some of the themes change the behaviour and structure of Visual Composer. If you have one of these themes, please follow the steps below:
    1. Add ’> .vc_row’ (without the apostrophes) to ‘Section Selector’ option of Full Page settings at the Advanced tab.
    2. If you use slides, add ’> .vc_row > .wpb_column’ (without the apostrophes) to ‘Slide Selector’ option of Full Page settings at the Advanced tab.
    3. If you use top fixed header, add ‘mcw_fp_fixed_top’ to ‘Extra Class Name’ of the top fixed header row.
    4. If you use bottom fixed footer, add ‘mcw_fp_fixed_bottom’ to ‘Extra Class Name’ of the top fixed header row.
  • If you want to use your theme header and footer, you can do it with some CSS and maybe some JS.
    1. Javascript code might be necessary to move the header under body in some circumstances.
    2. Add necessary CSS code to make it fixed at the top or bottom such as the following CSS code:
    .YOUR_HEADER_CLASS_NAME {position: fixed; z-index: 999999; top: 0px; width: 100%;}
    .YOUR_FOOTER_CLASS_NAME {position: fixed; z-index: 999999; bottom: 0px; width: 100%;}

    You would need to find out the class names of your header and footer on your theme.
    3. Add ’.YOUR_HEADER_CLASS_NAME, .YOUR_FOOTER_CLASS_NAME’ to ‘Fixed Elements’ option of Full Page settings under Design tab.

Credits

Thanks to Álvaro Trigo for awesome fullpage.js jQuery plugin.

Support

Item support only includes plugin techical/non-technical questions, version updates, reported bug fixes and minor change requests. FullpageJS modifications are not included in the support.
Contact me

  • If you want to ask a question about the plugin.
  • If you want me to check a theme.(This plugin is tested on most of the famous themes that I have. If I have the theme I can tell you if it is supported or not.)
  • If you need support with the plugin.

Changelog

v1.5.1 (June 25 2016)
- New feature: Disable scroll overflow for any section
- New feature: Option to move fullpage.js to footer instead of header (useful with some plugins)
- Bug Fix about 404 pages (thanks to @peterand) v1.5.0 (Jun 4 2016)
- fullpage.js updated to 2.8.1
- New feature: Hide scrollbar, fade scrollbar and interactive scrollbar on scroll overflow options.
- New feature: Visual Composer animations support (Special thanks to Andrea Morone @IlTuoWebmaster)
- Deprecated Resize text option is removed.
- Removed duplicate paddingTop option.
- Stability improvements
- Metabox stability improvements.
- Bug fix in the template file. v1.4.3 (Apr 08 2016)
- fullpage.js updated to 2.7.9
- Metabox bug fix.(Thanks yo milanbrouwer) v1.4.2 (March 27 2016)
- Bug fix. v1.4.1 (Feb 22 2016)
- fullpage.js updated to 2.7.8
- 2 new events are added,
- Tooltip background and text color options are added. v1.4.0 (Jan 26 2016)
- fullpage.js updated to 2.7.7.
- Events are added. Now you can write your own events in javascript and add it to the full page.
- Meta box is improved.
- Section and slide selector options are added to support themes that use customized Visual Composer.
- Full page template is improved for better support.
- Other performance improvements. v1.3.2
- Small bug fix. v1.3.1
- Bug fix about meta box. v1.3.0
- Fixed header and footer rows are added. Now rows can be defined as fixed header or footer on the page.
- paddingTop and paddingBottom features are added.
- fixedElements feature is added.
- Plugin and meta box improvements and bug fixes. v1.2.0 - fullpage.js updated to 2.7.6. - Bug fix (Thanks to Nickid) - Improvements and bug fixes. v1.1.1 - Bug fix (Thanks to h22uk) v1.1.0 - Templates are added. Now can be used with any theme. - fullpage.js updated to 2.7.5. - Directory index.php files are added. - Minor changes. v1.0.0 - Initial Release 

More items by meceware

Elements for Users - Addon for Visual Composer FullPage for Visual Composer