Divi ‘tumblr’ homepage style Fullscreen Scrolling Child Theme

Divi ‘tumblr’ homepage style Fullscreen Scrolling Child Theme

Rated 5.00 out of 5 based on 1 customer rating
(1 customer review)

$99.00

A modern, ‘tumblr’ homepage style child theme for Divi with one page scroll engine. The perfect theme to showcase your photography

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

 

Live Demo

Test Drive This Child Theme

 

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


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

Description

A modern, ‘tumblr’ homepage style child theme for Divi with one page scroll engine. 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 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.
– Install free ‘Simple Divi Shortcode’ plugin to use any Divi module inside scrolling pages.
– 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.

Live Demo Test Drive This Child Theme

 

Demo:

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 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!

• If you want to add additional sliders to Scroll page simply clone/duplicate a Section Module. Then you can edit the section module and Fullwidth Header module in it.

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

 

• Create any number of scroll pages using page templates. Simply save the home page scroll layout to Divi library. Create a new page and load it. Then you can select a scroll template to apply for this new page. You can convert any Regular or Full width section module into a scrolling section by giving ‘fullpagesection’ CSS class. Do note that the section scrolling works best with Full width section modules.

• You can install free ‘Simple Divi Shortcode’ plugin to use any Divi module inside scrolling pages. Just paste the module shortcode in to Fullwidth Header or Code module’s text field.

For example if you want to add a ‘Contact form’ module,

o Go to Divi Library > Add New > Give a name and Select Layout Type as ‘Module’.

o Insert and configure the Module you want, in our case its ‘Contact form’ module, and then publish it to Divi library.

o In Divi library you need to find the post ID relevant to the layout you just saved by looking at its URL. Check the plugin page for more details on this.

o Once you got the post ID, just call it by using the shortcode: [showmodule id=”post ID Number”]
You can insert this shortcode in to a text field of one of the existing full width header modules in the page or add it to a new Fullwidth Code module section.

• 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. 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 and activate ‘Dot Navigation’ under ‘Div Page Settings’ Meta box.

 

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.

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

1 review for Divi ‘tumblr’ homepage style Fullscreen Scrolling Child Theme

  1. Rated 5 out of 5

    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.

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