Divi Full Page Scrolling Framework Child Theme

Solutions

• To update this product first compare installed version number in your site with the product version number in your my account page here. If the version number is higher then you need to download that new zip file and install to your site. Once installed WordPress will take care plugin/theme upgrade process.

………..

• Demo import is not a requirement. To disable plugin activation and other demo import related functions, find the line “add_action( ‘tgmpa_register’, ‘onepage_register_required_plugins’ );” in functions.php file and commented it out like this /* add_action( ‘tgmpa_register’, ‘onepage_register_required_plugins’ ); */

 
• Simple 2 step process to turn any page in to a scroll page,
1. Add any kind of section modules to the page. Select the Row setup – One Row per Section only! Design the page using Divi modules. Once your page is done add ‘fullpagesection’ CSS class to each main section module in the page.

2. Assign a scroll template to the page: Hit Edit Page from admin bar. Find Page attributes box in the side bar. Under template selection drop down menu chose a Scroll page template to be used.

That’s it!
> You may want to adjust section spacing/gaps on mobile screen sizes.
> You may also want to turn ON ‘Hide Nav Before Scroll’ option from the backend Divi Page Settings Meta box.

 
• For element animations you can either use WOW animation classes included in the child theme (Check the child theme settings page) or default Divi builder module animation system.
Please note that, Child theme integrated animation system works best with scroll effects than default animations in the Divi builder. Moreover, these animations are designed to trigger on both scroll up and down the page.

 
• Make sure section Top and Bottom spacing is default. Also the padding value is set to 0.

 
• You can disable default boxed layout from theme customizer. General Settings > Layout settings > Untick ‘Enable Boxed Layout’.

 
• You might have to remove default widgets in Footer Area #1 in order to view the page fully.
 

• You can use Divi Theme Default side Dot Navigation instead of the dot navigation style comes with this child theme. To set this up,

First remove child theme default side dot nav’s with this code:

#fp-nav {
    display: none;
}

To remove this site wide adds this code to stylesheet/Divi theme options CSS panel. If you want to just remove it for a specific scroll page then add this code to Divi builder page settings CSS panel.

Then, go to the scroll page back end settings and activate ‘Dot Navigation’ under Divi Page Settings Meta box.
 

• Divi Full width header module’s scroll down anchor icon has an unfixable bug with this full page effect. You can use Button or Menu anchor links (to call a slide through a link) instead. This works best when every section in the page have the same padding and they all fit to the screen. To make padding equal throughout the page you can try adding a code like this to the Divi builder page specific CSS panel,

.et_pb_section.et_pb_section_2,.et_pb_section.et_pb_section_3,.et_pb_section.et_pb_section_4,.et_pb_section.et_pb_section_5 {
	padding-top:33px !important;
}

• Assign different header and side dot colors to each slide,

body.fp-viewing-1 .et-fixed-header#main-header,
body.fp-viewing-4 .et-fixed-header#main-header{
background-color: #000;
}

body.fp-viewing-1 #fp-nav ul li a span, body.fp-viewing-4 #fp-nav ul li a span{
background: #000 none repeat scroll 0 0 !important;
border: 3px solid #000 !important;
}

“body.fp-viewing-x” change x to the slide number you want to target. Like,
body.fp-viewing-0 for the first slide and
body.fp-viewing-1 for the second slide so on…

* This Work only with default Divi header.

 
• If you are unable to change Primary menu active link colour from customizer then please enter this CSS code in Divi theme options custom CSS panel and adjust the colour:

#top-menu li.current_page_item>a {
	color:grey !important;
}

 
• To update this product first compare installed version number in your site with the product version number in your my account page here. If the version number is higher then you need to download that new zip file and install to your site. Once installed WordPress will take care plugin/theme upgrade process.

………..

— Old Solutions that may no longer necessary —
 
* If you experience problem with slow moving sections when using Blank Page template then please update custom.min.js file in the parent Divi theme with the file we have included in the child theme package. This was a problem caused by latest Divi theme update. We hope they will fix it in next versions. Till then please update this js file in main Divi folder with the one we have included. THIS DO NOT AFFECT NORMAL SCROLL PAGE TEMPLATES – ONLY THE BLANK PAGE TEMPLATE IS AFFECTED. So, you don’t need to update this file in main theme if you don’t plan to use blank page scroll template.
 
• You can use element animations (In Builder Modules, Theme Templates, and Widgets).

UPDATE: Recent Divi update included all these animation effects to the builder so to avoid any potential conflict we recommend you to use those default builder animations instead. You can easily remove wow animation CSS classes by going to ‘Advanced’ tab of ‘Full width header’ module sections in Scroll home page. Then you can configure animations for Full width header sections with Divi builder itself. You can still use our child theme wow animation effects in areas where you can’t use Divi builder like theme template files and widgets.