A Journey from Space to Sea Divi Parallax Demo Tutorial

by | Oct 14, 2015 | Tutorials | 0 comments

I really bit it off when I volunteered to create a tutorial on how Nick Roach created his Divi layout “A JOURNEY FROM SPACE TO SEA”. What I thought would be a fun hour or so in Camtasia Studio ended up being much more. I’m not complaining, it was an educational experience for me. Discovering more than one way to achieve the same result was interesting. Finding out how versatile the Advanced Settings and Custom Padding available in Row and Module settings are was an eye opener.

Imitation is the sincerest form of flattery.

Charles Caleb Colton

Writer

Thank you YouTube for adding 2X video speed capability. Viewers of the video that follows may want to use that feature. The video goes through the Sections, Rows and Modules and their settings as required to achieve the imitation of Nick’s original Divi layout. I am also including a downloadable zip file containing the assets used in creating this Divi layout imitation; including the layout itself you one want to add it in and take a big shortcut to creating their own parallax scrolling demo. Following the video are section by section (12 total) breakdowns of settings specific the how a particular section was constructed.

l

Note

While some settings are absolute, many are not. I encourage you to explore on your own.

The Original

Divi Layout by Nick Roach | Sep 24, 2015

Flash Buddy's Version

by Nick Roach | Sep 24, 2015

h

Visual Instructions

Section, Row and Module settings for each of the twelve sections. All settings are default unless noted in the instructions. When I leave out “Advanced Design Settings” and or “Custom CSS”, it means all those settings are default; no changes are made.

Section Type: Fullwidth

General Settings: Background = Black

Module > Row: Fullwidth Post Title

General Settings: Featured Image Placement = Above Title, Text Color = Light
Advanced Settings: Title All Caps = On

Divi Parallax Tutorial Section 1 Screenshot

Section Type: Standard Section

 General Settings: Background = Black

Row: 3 Column (1/4 – 1/2 – 1/4)

General Settings: Make Row Full Width = On

Module 1: Divider (1px)

Module 2: Text (Light & Center)

Module 3: Divider (1px)

Divi Parallax Tutorial Section 2 Screenshot

Section Type: Standard Section

General Settings: Background Image = stars.jpg, Parallax = Yes/True Parallax, Custom Padding: Top=0, Bottom=0

Row 1: 1 Column

General Settings: Make Row Full Width=On, Use Custom Gutter Width=Yes, Gutter Width =1, Custom Padding: Top=0  Bottom=0
Advanced Design Settings: Column Padding: Top=0 Bottom=0

Module: Image=Gradient-Black-Down-to-Transparent.png

General Settings: Animation=No Animation, Remove Space Below The Image=Yes, Image Alignment=Center

Advanced Design Settings: Force Fullwidth=Yes

Row 2: 1 Column

General Settings: Make Row Full Width=On, Custom Padding: Top=0,  Bottom=0

Module: Image (earth.png)

General Settings: Animation=No Animation, Image Alignment=Center

Row 3: 1 Column

General Settings: Make Row Full Width=On, Use Custom Gutter Width=Yes, Gutter Width =1, Custom Padding: Top=0  Bottom=0
Advanced Design Settings: Column Padding: Top=0 Bottom=0

Module: Image=Gradient-Black-up-to-Transparent.png

General Settings: Animation=No Animation, Remove Space Below The Image=Yes, Image Alignment=Center

Advanced Design Settings: Force Fullwidth=Yes

Notes: I’ve added two rows that were not in Nick’s original. One above and one below the earth image, each containing an image module to hold the black gradient png I created to give this section a seamless transition between its adjacent sections.

Divi Parallax Tutorial Section 3 Screenshot

Section Type: Standard Section

General Settings: Background Color=#000000, Custom Padding: Top=0, Bottom=0

Row 1: 3 Columns (1/3’s)

Module: Text (Text Color=Light, Text Orientation=Justified
Module: Text (Text Color=Light, Text Orientation=Justified
Module: Text (Text Color=Light, Text Orientation=Justified

Notes: Plain vanilla, nothing going on here.

Divi Parallax Tutorial Section 4 Screenshot

Section Type: Standard Section

General Settings: Background Image=burst4.jpg, Parallax = Yes/True Parallax, Custom Padding: Top=0, Bottom=0

Row 1: 1 Column

General Settings: Make Row Full Width=On, Use Custom Gutter Width=Yes, Gutter Width =1, Custom Padding: Top=0  Bottom=0
Advanced Design Settings: Column Padding: Top=0 Bottom=0

Module: Image=color-gradient-black3.png

General Settings: Animation=No Animation, Remove Space Below The Image=Yes, Image Alignment=Center

Advanced Design Settings: Force Fullwidth=Yes

Module: Image=shuttle.png

General Settings: Animation=No Animation, Image Alignment=Center

Advanced Design Settings: Force Fullwidth=Yes

Notes:

Divi Parallax Tutorial Section 5 Screenshot

Section Type: Fullwidth

General Settings: Custom Padding: Top-0, Bottom=0

Module > Row: Fullwidth Image (dolphin2.jpg)

General Settings: Featured Image Placement = Above Title, Text Color = Light

Divi Parallax Tutorial Section 6 Screenshot

Section Type: Standard

General Settings: Use Parallax Effect=Yes, Parallax Method=True Parallax, Custom Padding Top=0
Custom CSS: Main Element = color: white;

Row: 1 column

Module 1: Image (surface.png)
General Settings: Animation=No Animation, Image Alignment=Center
Advanced Design Settings: Force Fullwidth=On, Custom Margin – Top=0, Bottom=0

Module 2: Divider
General Settings: Height=200

Module 3: Image (color-gradient-navy2.png)
General Settings: Animation=No Animation, Remove Space Below Image=Yes, Image Alignment=Center
Advanced Design Settings: Force Fullwidth=On, Custom Margin – Top=0, Bottom=0

Divi Parallax Tutorial Section 7 Screenshot

Section Type: Standard Section

 General Settings: Background=#06183a

Row: 2 Column (1/2 – 1/2 – 1/4)
  General Settings: Make Row Full Width = On
Module 1: Text
General Settings: Text Color=Light,
Module 2: Divider

Divi Parallax Tutorial Section 8 Screenshot

Section Type: Fullwidth

General Settings: Background Image = divers.jpg, Parallax = Yes/True Parallax

Module: Fullwidth Image=divers.jpg
   General Settings: Animation=No Animation

Divi Parallax Tutorial Section 9 Screenshot

Section Type: Standard Section
   General Settings: Background Color=#06183a, Custom Padding: Top=0, Bottom=0

Row 1: 2 Columns (1/2’s)

Module 1: Divider
Module 2: Text (Text Color=Light, Text Orientation=Right

Notes: Plain vanilla, nothing going on here.

Divi Parallax Tutorial Section 10 Screenshot

Section Type: Standard Section

General Settings: Background Image=jellyfish-bg.jpg,  Background Color=#06183a, Parallax = Yes/True Parallax, Custom Padding: Top=0, Bottom=0

Row 1: 1 Column
   General Settings: Make Row Full Width=On, Use Custom Gutter Width=Yes, Gutter Width =1, Custom Padding: Top=0  Bottom=0
   Advanced Design Settings: Column Padding: Top=0 Bottom=0

Module 1: Image=color-gradient-color-gradient-navy.png
   General Settings: Animation=No Animation, Remove Space Below The Image=Yes, Image Alignment=Center
   Advanced Design Settings: Force Fullwidth=Yes

Module 2: Image=jellyfish.png
   General Settings: Animation=No Animation, Image Alignment=Center
   Advanced Design Settings: Force Fullwidth=Yes

Module 3: Image=color-gradient-navy2.png
   General Settings: Animation=No Animation, Image Alignment=Center
   Advanced Design Settings: Force Fullwidth=Yes

Notes: Standard parallax sections as previously used in sections 4 & 6

Divi Parallax Tutorial Section 11 Screenshot

Available Assets

Images used by Nick Roach

…as well as screenshots of the eleven sections I’ve created in reproducing this Divi layout are available in a zip file. Also included is the .jason file – you can do the big cheat and simply import the layout into a new page or post. (3MB)

Email Circular

Stay abreast of new and or updated items by opting in to my very occasional email newsletter. I swear by all that is right and holy your email address will never be shared, sold, traded or otherwise abused.

[wysija_form id=”1″]

Pin It on Pinterest