FullPage for Visual Composer

INTRODUCING – FULLPAGE FOR VISUAL COMPOSER

Now, create beautiful scrolling full screen web sites with Visual Composer, fast and simple. This plugin simplifies creation of full page scrolling websites with WordPress and saves you big time.

Top Features

Responsive
FullPage is fully responsive and perfect fit for any device.

Touch Support
For mobiles, tablets and other touch screen devices.

Rows as Sections
Each visual composer row is defined as vertical scrolling section.

Columns as Slides
Each visual composer column inside the row can be defined as horizontal slides.

Auto-Height Sections
Each section can be defined as auto-height instead of full screen.

Responsive Auto-Height Sections
Full height sections for big screens and auto height sections for small screens.

Fixed Header and Footer
Fixed header and footer rows can be defined within visual composer row settings to add your own custom menu or code to the top or bottom of the page.

Navigation Bullets
Horizontal and vertical navigation bullets with 20 different styles.

Scrollbars of Sections
When the content is bigger than the screen size, scrollbar can be visible inside the sections (Hidden, Faded and Interactive scrollbar options).

Optional Scrollbars
Full page scroll with browser scrollbar instead of auto-scrolling.

Animations
5 CSS3 ease animations or 32 Javascript animations, whichever you prefer.

Anchors
Animated anchor links, optional browser history support and optional anchor links at the address bar.

Keyboard Navigation
Navigate between sections and slides with keyboard (up/down/left/right keys).

Vertically Centered Sections
Section contents can be vertically centered.

Vertically Centered Sections
Section contents can be vertically centered.

Section and Slide Loops
Infinite loop options for sections and slides.

Record History
Browser back button will go to the previous section or slide.

Clean and Minimized Code
Clean, professionally written, optimized and minimized code.

Great Support
Customer support and satisfaction is the most important priority and the help will always be available.

Customization – VC Native Animations
Visual Composer native animations in sections and slides.

Customization – Videos
Play videos only when the videos are in view.

Demos

Demo Page

Demo Page with Scrollbars and Fit To Section

Demo Page with Scrollbars and Parallax

Responsive and Responsive Auto Height Sections Demo

How To Use

Demo Tutorial

Responsive Auto-Height Tutorial

FullPage for Visual Composer has been tried with more than 80 themes, and counting…

How To Use FullPage for Visual Composer with Avada

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 Bridge

How To Use FullPage for Visual Composer with Jupiter

How To Use FullPage for Visual Composer with 907

How To Use FullPage for Visual Composer with Fevr

How To Use FullPage for Visual Composer with X-Theme

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

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 2 options. Option 1 uses theme default template, and Option 2 uses custom empty page template, which is is independent from the theme and gives you the possibility to use a blank page, which means no theme related menus and settings.

How To Use FullPage for Visual Composer

• Add rows with Visual Composer. Each row will be defined as fullpage section. Design your row content.
• From row settings, go to ‘Full Page’ tab and select:
  • Full Height: To make the row (section) full screen.
  • Auto Height: To make the row (section) auto height, which means the row height will be depending on the contents of the row. It won’t be full screen.
  • Responsive Auto Height: To make the row (section) full screen on big screens, but auto height on responsive screens. To adjust the maximum width or height of responsive screens, please enter the values to ‘Responsive Width’ and/or ‘Responsive Height’ under FullPage Settings -> Design tab.
  • Top Fixed Header: If you have a menu or another content that you want to show at the top of the screen, it can be shown using this option. Add your content inside this row and select this option.
  • Bottom Fixed Footer: If you have a footer content that you want to show at the bottom of the screen, it can be shown using this option. Add your content inside this row and select this option.
• Add your anchor name at ‘Full Page’ tab 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.)
• Set your Tooltip text at ‘Full Page’ tab if you want to use tooltips.
• You can add slides to the sections by following these steps:
  • Add columns to the row (The plus sign of each row, set custom and enter 1/1 + 1/1 + …). Each column will be defined as slides in the section.
  • From row settings, go to ‘Full Page’ tab and check ‘Columns as Slides’.
• Enable Full page and configure by playing with the options.

Option 1 – Using theme page template

• Enable ‘Force Remove Theme Margins’ from FullPage Settings -> Customization tab.
• Hide page title, either from theme settings or using CSS. There should be no relative positioned element before content.
• If you want the theme header shown at the top, enable ‘Force Fixed Theme Header’ from FullPage Settings -> Customization tab. When you enable this option, there is another option appears right under it. Please enter your theme header selector to that box.
• If you don’t want theme header shown at the top, hide header either from theme settings or using CSS. You can add your own menu to the top or bottom with adding a row with FullPage settings as ‘Top Fixed Row’. You can add your menu shortcode inside that row.

Option 2 – Using Full Page empty page template

• Select ‘Enable Empty Page Template’ from FullPage Settings -> Advanced tab.
• Enable ‘Force Remove Theme Margins’ from FullPage Settings -> Customization tab.
• You can add your own menu to the top or bottom with adding a row with FullPage settings as ‘Top Fixed Row’. You can add your menu shortcode inside that row.
• You can also customize the template buy writing your own code. Copy template folder in the plugin directory, make your changes in it and copy it back to your server. Do not copy it under the plugin directory or you can lose the changes when the plugin is updated.

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 might not start and the items might not be visible.
• Do not use row stretch, full width row, full height row etc.. options of Visual Composer rows. These options are unnecessary with FullPage and the behaviour of the page changes when used. (Such as scrolling mechanism might not work.)
• 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:
  • Add ’> .vc_row’ (without the apostrophes) to ‘Section Selector’ option of Full Page settings at the Advanced tab.
  • If you use slides, add ’> .vc_row > .wpb_column’ (without the apostrophes) to ‘Slide Selector’ option of Full Page settings at the Advanced tab.
  • If you use top fixed header, add ‘mcw_fp_fixed_top’ to ‘Extra Class Name’ of the top fixed header row.
  • If you use bottom fixed footer, add ‘mcw_fp_fixed_bottom’ to ‘Extra Class Name’ of the top fixed header row.

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.7.3 (March 04 2017)
- fullpage.js updated to 2.9.3.
- Extensions support.
- Filters are added for parameter change on the fly. More information can be found in the helpers plugin file.
- Improvements.

v1.7.2 (January 03 2017)
- fullpage.js is updated to 2.9.2.

v1.7.1 (November 16 2016)
- Bug fixes.

v1.7.0 (November 10 2016)
- fullpage.js is updated to 2.8.8 (stabilized)
- 19 extra navigation styles are added, Different styles for sections and slides.are applied.
- Auto-height Responsive feature is added.
- AfterResponsive event is added.
- Video play customization is added. Now videos are stopped when the section is not in view.
- Fixed theme header customization is added. Now you can add theme header to the page easily.
- Plugin URL is changed.
- Template system is changed.
- Bug fix.
- Other small code improvements.

v1.6.0 (August 31 2016)
- Infrastructure improvements to make the plugin more stable and a little bit faster.
- FullPage options are re-organized.
- Fit to section delay option is added.
- Theme remove margins customization added.
- Metabox improvements
- fullpage.js updated to 2.8.5
- Bug fix.

v1.5.3 (August 19 2016)
- fullpage.js updated to 2.8.4.

v1.5.2 (July 12 2016)
- fullpage.js updated to 2.8.2.
- New Feature: bigSectionsDestination added to options.
- Small bug fix and improvements.

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