From the BlogSubscribe Now

Divi by Elegant Themes: Divi Sections and how to use the parallax effect like a pro

divi theme by elegant themes Divi Sections and the parallax effect

One of the great things about the new Divi theme by Elegant Themes is not just that it’s an awesome pagebuilder theme, but that it’s backed with tons of documentation, videos and extra free resources to help you get your site up and running… in double quick time.

It looks as though Nick Roach and his team have worked on the development of the Divi theme and the production of the resources in tandem so that they could be released at the same time and it’s worked perfectly.

In this post I’m going to use one of the Divi teaching videos to run through the basics of Divi Sections and then take a look at combining Sections with the parallax effect to create some stunning effects.

If you’re not familiar with the Divi theme you might want to bring yourself up to speed by checking out my post Divi by Elegant Themes: the ultimate drag and drop WordPress theme.

Divi is a unique theme in our collection. Differing from every other Elegant Theme, Divi is built on a page builder platform that we designed and developed from the ground up. Using Divi’s drag and drop builder you can create beautiful layouts with ease and control every part of your site.
Elegant Themes

Divi Sections – the basic building blocks of the Divi theme

Sections are the basic building blocks of the Divi builder. They are horizontal stacking blocks that allow you to group your content into visually discrete areas.

When you use Divi, everything you build starts with a Section as Nick Roach demonstrates in this video.

 

 

Using the Section settings in conjunction with the various background variables you can create some fabulous layouts and effects.

These are the effects that Nick covered in the video:

Adding a video background

The appearance of an image flying through space is created by defining a background video of zooming starry space and adding a logo image within a single Image Module.

Adding a parallax image background

The “Parallax Background” option is used to make the background image stick in place as you scroll. This gives the impression that everything around it is moving over the background.

Creating a background transition effect

By adding a second parallax background image, which is identical to the first but in monochrome, the image appears to transform from colour to black and white as you scroll down the page.

Creating the appearance of full width Modules

By only defining a simple background colour for the Section and adding a single Call To Action Module and turning off the background colour of the CTA module, the boundary between the Module and the Section is erased, giving the CTA module a “full width” appearance.

This technique is a great way to highlight your important Modules, such as your call to action.

Sections are the biggest building block in the Divi builder. You can think of them as horizontal stacking blocks that can group your content into visually distinguishable areas. In Divi, everything you build starts with a section. This content wrapper has various settings that can be used to do some really awesome things. Elegant Themes

Creating effects with Divi Sections and the parallax feature

divi theme by elegant themes sections and the parallax effect

In the Divi Sections video Nick shows two ways to create interesting effects by combining Sections with the parallax feature. Parallax backgrounds are all the rage at the moment so let’s take a closer look at how he creates those effects.

#1 Moving image on top of parallax background

“Parallax Effect” is one of the options in the Section’s Settings panel. If enabled, your background image will stay fixed as your scroll and any text and image Modules added to the Section will appear to move over the Section’s background image.

The procedure used in the video to create the effect is:

  • Add a skyline background image to the Section and enable the parallax effect via the settings panel
  • Add two equal Rows to the Section and add an Image Module to the LHS Row
  • Add an image to the Image Module – the image is a rocket with a transparent background, which allows the Section’s background image to show through

All you have to do now is scroll and the rocket will fly through the sky – how cool is that?

#2 Background transition illusion

This is a good looking effect which relies on using one Section on top of another with both sections having the same parallax image, but with one image in colour and the other in black and white. The effect creates the illusion that the coloured image is being transformed to black and white.

This is the full procedure:

  • Start with a Section configured as in #1 above
  • Add a second Section directly below the first one and add a black and white copy of the background image used for the first Section and enable the parallax effect
  • Add two equal Rows to the Section, add a Divider Module to the LHS Row and an Image Module to the RHS row. The Divider Module fills the space and stops the Image Module floating to the left
  • Add an image to the Image Module – the image is a rocket, which like the Section background image, is black and white

That’s it folks and because both images are stuck in place, and because they have the same elements within them, the image appears to transform from colour to black and white as you scroll down – nice!

The Advanced Pagebuilder
Divi will change the way you build websites forever. The advanced page builder makes it possible to build truly dynamic pages without learning code.
Elegant Themes

Head over to Elegant Themes and pick up your copy of Divi

Divi Sections are just one of the many powerful features of the Divi drag and drop theme. Add to that Rows and Modules and throw in the awesome documentation and videos available for the theme and Divi really is the theme to beat in 2014!

If you’re not using Divi and you’d like details of pricing etc. head over to Elegant Themes, put the Divi theme through its paces, see its features in action and check out the awesome documentation and videos.

Nearly forgot… don’t forget to try out these great parallax feature effects.

This Is Just The Beginning
Our main focus for the initial release of Divi was create a strong foundation that we could easily expand upon in the future. Our builder has been built to scale, making it easy for us to add more modules in the future.
Elegant Themes

If you enjoyed the post and found it helpful I’d love to hear from you in the comments and if you’d like to spread the word about the Divi theme please use the social media buttons beneath this post.