Full Page Scroll Template for Divi Theme - Mouse wheel Scrolling

Divi Full Page Scrolling Framework Child Theme

(2 customer reviews)

$59.00

A modern, Framework Child Theme that enable you to create Full page scrolling pages on Divi. The perfect theme to showcase your photography

—Version 2 is now Released with Divi Visual Builder Support!—

 

Live Demo Test Drive This Child Theme Get the BUNDLE and SAVE!

 

Use coupon ‘scroll’ to unlock Sale price* – $45


Don’t have Divi? get it first from CLICK HERE

Description

A modern, Framework Child Theme that enable you to create Full page scrolling pages on Divi with the mouse wheel scroll. The perfect theme to showcase your photography. It also a good starting template to build very creative business websites. See a DEMO (click here) of a site created using this child theme by one of our recent customers. * This site doesn’t run on the latest version of this child theme.

This child theme was featured in Elegant Themes Blog as one of the top Divi child themes for Photographers.

Features:
– One click demo import.
– Unique control panel which allows you to customize the appearance and functions of the child theme.
– Use video backgrounds.
– You can navigate sections through up and down keys. Its even touch enabled in mobiles.

New features added in version 2:
– Divi Visual Builder Support.
– Create any number of scroll pages using page templates.
– You can add any kind of Divi section module to scroll pages (Regular, Fullwidth, Specialty) and make it part of the scroll by giving ‘fullpagesection’ CSS class to each new section added.
– Change scroll side dot navigation position.
– Use Divi Theme Default side Dot Navigation instead of the dot navigation style comes with this child theme.
– Ability to Remove scrolling effect in small screen sizes.

Get the BUNDLE and SAVE! Live Demo Test Drive This Child Theme

 

Setup Guide:

 

To install the Divi One Page Scrolling child theme you will need to go through these simple steps:

1. Install the Divi parent theme by Elegant Themes (Divi Scroll works best on version 2.7 and higher. You will also need to have PHP version 5.5 or higher installed in your server).

2. Install and activate the Divi One Page Scrolling child theme.
– Upload the Divi-child.zip using the WordPress dashboard, or use FTP and upload the unzipped folder “Divi-child” into your themes directory and activate it.

3. Install and activate “One Click Demo Import” Plugin (You can find ‘Install Plugins’ menu item under Appearance).

4. Go To “Appearance”. Click on “Import Demo Data” and Click on “Import Demo Data” Button. This will import Divi Scroll child theme content into your site. If you see any error please try again. If it doesn’t work ask your host to increase maximum execution time.
*** IMPORTANT: It will take some time. So please don’t cancel the process.

5. Go to Appearance > Menus. Assign the menu as the primary menu (if it’s not already set up like that during demo import process).

6. Go to Divi > Theme Options. Click on “Arrow Up / Arrow Down” at the top right and import the .json file (import/Divi Theme Options.json). This will import all Divi Options Settings.
*** IMPORTANT: It will take some time. So please don’t cancel process.

7. Go to Divi > Theme Customizer (or Appearance > Customize). Click on “Arrow Up / Arrow Down” at the top left and import the .json file (import/Divi Customizer Settings.json). This will import all Customizer Settings.
In customizer you can: Edit footer credits, Select any header style you like, Activate boxed layout, Set colors and styles for elements, etc…
*** IMPORTANT: It will take some time. So please don’t cancel process.

8. Go to the home page and Hit Edit Page. Find Page attributes box in the side bar. Under template selection drop down menu assign ‘Child Theme Scroll Page’ as the template.

9. Hover on Divi parent menu and Click on “Child Theme Settings” and Activate “Remove scrolling effect in small screen sizes” option.

10. Go to Permalink Settings and chose “Post name”.

11. Check frontend and enjoy your new child theme!

 

Terms of Sale:

You can use this product for both personal and commercial use on multiple websites. So feel free to use it on your own or client websites. You are not allowed to resell or redistribute this plugin or any of its parts to anyone else.

If you would like to package our plugins into your child theme, a developers license may be purchased separately. Please contact us for more details

You get product updates for lifetime – We will make every attempt to ensure that our products are compatible with all future releases of Divi builder. You can access product updates through ‘My Account‘ Page.

For product support you can directly contact us. We provide 3 months of direct product support – Support is provided for bug fixes only. If you need customization support you will have to pay our hourly rate ($50 per hour)

Please note, If you bought a product from our store at ‘SALE’ price Support will be provided strictly for product related bug fixes only.

Scope of Support – Our main intention by providing product support is to help uncover bugs, add frequently requested features and overall improve the product for everyone. We reserve the right to dismiss any support request that’s outside of this support scope.

  • Ultimate Divi Builder Addons is not responsible for any conflicts due to WordPress updates, Divi updates or third party plugin updates

Due to the nature of digital products as they cannot be returned, it’s impossible to prevent fraud and still offer refunds. Hence refund requests are expressly denied. You can use our test drive facility to check the product before you make purchase.


Compatible with PHP version 5.5 or higher

Changelog

Version 1: Initial Release.

Version 2: The Visual Builder Edition.
* Fixed Flickering error on Google Chrome and bunch of other small fixes.

Element Animations

We integrated ‘WoW animation library‘ to this child theme so you can easily animate any Divi Module/Row or Section. Create stunning web pages using these animation classes. You just have to add class “wow” with below classes into Row or Section or a Module.

—Update—
* The latest Divi update has included wow animation library to the builder. If you are one of our child theme users then you don’t need to use wow animation library we have integrated to our child themes. You can still use child theme animations that aren’t included with Divi builder. In order to use these new Divi builder animations in a child theme imported page you have to first remove any existing CSS classes that calls our child theme integrated animation engine. Read More…

Example : “wow bounce” , “wow swing” , “wow bounceInDown” etc..

bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

Note :

If you want to use image module with this effect then please set “Animation” option to “No Animation”

Works best with Rows and Modules

All of these CSS classes are working in custom HTML code, Text Module and Code Module

Advanced settings you can use with WOW Animation classes,

– data-wow-duration: Change the animation duration

– data-wow-delay: Delay before the animation starts

– data-wow-offset: Distance to start the animation (related to the browser bottom)

– data-wow-iteration: Number of times the animation is repeated

Solutions

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

Divi Section Module

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.

Divi Scroll Page Template

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.

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

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

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

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

 
……Old Solutions that may not 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.

2 reviews for Divi Full Page Scrolling Framework Child Theme

  1. Avatar

    Randy Brown

    This is a neat child theme. I love the full-screen scrolling and the right side menu that opens on hover. This does give it a Tumblr look and feel. I also like being able to use the up and down arrows as navigation through the screens. It uses the WOW animation library so all of the Divi elements can easily be animated. It adds a new control panel called Child Theme Settings where you can select features like opening the right side menu on hover, changing the right menu’s color, hiding the footer, adjusting the dot navigation color, and see how to use the WOW animations. If you’re looking for a Tumblr type of layout and want a child theme with some extra features this one is a great choice.

  2. Avatar

    waveadmin (verified owner)

    neat. clear. clean! I love it

Only logged in customers who have purchased this product may leave a review.