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.
– 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.
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.
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.
* 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…
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
• 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.
> 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:
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,
* 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.
Only logged in customers who have purchased this product may leave a review.