Elegant Themes Blog

Stay up to date with our most recent news and updates

On The Eighth Day Of Divi, We Explore The Creative Potential Of Sections

Hopefully you have had a chance to download our latest theme, Divi. As mentioned in the Theme Launch Post, we will be writing a Divi-related post on our blog every day for the next 12 Days of Divi. Be sure to tune in each day for the next twelve days to get your hands on tons of Divi-related tips and resources! If you haven’t checked out Divi yet, then click the link below to view the release post with all the juicy details, and for your chance to win a free Lifetime Membership!

Understanding The Section Settings

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.

Background Image – If defined, this image will be used as the background for this module. To remove a background image, simply delete the URL from the settings field.

Background Color – If defined, this image will be used as the background for this module. To remove a background image, simply delete the URL from the settings field.

Background Video MP4 – All videos should be uploaded in both .MP4 .WEBM formats to ensure maximum compatibility in all browsers. Upload the .MP4 version here. Important Note: Video backgrounds are disabled from mobile devices. Instead, your background image will be used. For this reason, you should define both a background image and a background video to ensure best results.

Background Video WEBM – All videos should be uploaded in both .MP4 .WEBM formats to ensure maximum compatibility in all browsers. Upload the .WEBM version here. Important Note: Video backgrounds are disabled from mobile devices. Instead, your background image will be used. For this reason, you should define both a background image and a background video to ensure best results.

Background Video Width – In order for videos to be sized correctly, you must input the exact width (in pixels) of your video here.

Background Video Height – In order for videos to be sized correctly, you must input the exact height (in pixels) of your video here.

Inner Shadow – Here you can select whether or not your section has an inner shadow. This can look great when you have colored backgrounds or background images.

Full Width Beauty

Using the section settings and the various background variables, we can create some very unique and engaging layouts. To illustrate some of the cool effects that can be created, I built out this page.

Video Backgrounds

In the first section of the page, I explore the interplay between video backgrounds and static images. By defining a background video of zooming starry space, a vortex-like feel is created. Within this section, I place a single image module with my logo. This creates the appearance that the logo image is flying through space! This is the beginning of our page’s story.

Parallax Image Backgrounds

The “Parallax Background” option is a great way to make your page fun to browse. This option makes your background image stick in its place as you scroll, which makes it look like everything around it is “passing by” on top of it. In our second slide, I add a skyline background image. On top of it, I add an image module and text module. My image is a rocket with a transparent background, and as you scroll down the page it creates the illusion that the rocket is flying through the sky.

Background Transition Illusion

In our third slide, I added a second parallax background image. For this image, I used the same exact image from the slide above it, except in this version I modified the image and turned it black and white. Because both this image and the image above it are stuck in place, and because they have the exact same elements within them, the image appears to transform from color to black and white right before your eyes! This slide continues our page’s story, taking us back in time.

Creating The Appearance Of Full Width Modules

In our final slide, I only defined a simple background color. Because there are no background videos or images, only the color shines through. Within this section, I added a single Call To Action module. What’s unique about this slide is that I have turned off the background color of the CTA module. This erases the boundary between the module and the section, giving the CTA module a new “full width” appearance. Using this technique is a great way to give prominence to important modules, such as your call to action.

I hope this shows you just how creative you can be with sections. I have added an entry about Sections to the Divi documentation, along with a full video screencast that outlines the process. Don’t forget to check out the Divi Documentation for a full list of tutorials.

By Nick Roach

I am the founder and lead designer at Elegant Themes. When I'm not hard at work on new themes, I enjoy writing an article or two on our blog!

would it be possible to use a shortcode in the full width section? I have a plugin that generates a map that can be added to any widget area and based on the size it scales itself similar to the Explorable theme look. or having the ability to insert our own sliders (again with shortcodes to cover the width/height would be awesome).

Agree with you and the entire group commenting, this theme is amazing! You and the team have thought of it all.

Last thing, will you be creating a page builder as a plugin so we can leverage with all the other Elegant Themes and others?

I use shortcodes as well and have used Shortcodes Unlimited (SU). The problem I’m having with Divi is that when I’m trying to implement SU, the Divi pop-up window (e.g. when I’m editing a text module) blocks the SU plugin pop-up window and I can’t access that plugin (if this makes sense). Nothing major, just somewhat of an inconvenience.

I have uploaded/added a fullwidth background image, but the the main navigation/standard top bar is over it. I am trying to remove the top bar. Additionally, I entered the CSS to keep the top section static (epanel custom CSS) but it still moves. I have pasted the CSS provided in the forum, but must be missing something. Any thoughts?
So…
1. How can I see my custom header with a background image.
2. How can I get the header to become static.

I have been a fan for a long time, although have been pretty quiet on the comments. I have purchased a subscription and used, reused, customized, severely broken, triumphantly fixed, and consistently be satisfied with all of the Elegant Themes collection for about 2 years now. I will either by requested to begin using a theme and altering it from there, or depending on the project (and it’s budget) I may just need to start with a bare-bones, unstyled theme (like 2013 or Thesis) and then customize everything from the ground up. Time and time again, even after trying other themes just to see if they could be as reliable and functional as Elegant Themes, I always end up dissatisfied with the other themes and come right back here. The code is so nice and neat in the Elegant Themes collection that it makes customizing fun and productive, whether I am starting from stripping down some of the great stylization to a basic looking theme, or just having to manipulate what comes out of the box. Either way, there’s no question, Elegant Themes is by far the best choice.

That being said, I have a few things to say about your new Divi theme. Now I know you told everyone it would be your best theme yet, a game changer in the theme community. I don’t know why, but I had my doubts, I mean, I would probably start to say the same thing after releasing so many themes.

Boy was I wrong…

Divi is absolutely incredible. Whether you know very little style or lack coding knowledge for customization or a PHP/CSS coding guru, Divi lets you do more, better, quicker and above all more enjoyable.

Thank you for your hard work and inspiring me, I have learned a great deal from violently ripping your beautifully coded creations to shreds, as well as nurturing it back to health. I love elegant themes.

Nice to meet you Dave, i’m agree with you Divi is incredible, this is by far better than all the ET themes, at the first sigth i though that Divi was like the Elegant Builder, but is so much more, i have been used ET since 2011, and i must to say that i love ET, before ET was really hard to me customize a theme because aren’t clean and was hard to figure out how it work, but all the ET themes have the same code, same menu (EPanel) and a great support that make it more easy to work with ET, and there is the extra value when ET release backgrounds, plugins, icons, templates, etc.

(by the way i need to give you an apology, because of my bad English, i’m a mexican ET lover)

http://www.newportweddinglimos.com created in DIVI. The example site is unique. ET has beautiful stock images. I’ve figured out the artist for many of them (Larissa Kulik – search for her), but is there a resource for the starry video, rocket ship, planets, etc.? I use 123rf.com (inexpensive) for most of my images, but never thought of looking for background videos. Any suggestions?

Love how the background of the rocket image covers the whole screen. I am using the background image in the slider setting in a full width section but I am unable to get the image to cover the whole screen. What am I doing wrong?

Nick, can you tell some tips about size and dimension of backgrounds and images using in homepage? I found what 1080p backgrounds (from ET) and similar size pics loading slowly and not suitable to use in homepage.

Hi!
Great work!
A few questions:
– is it possible to create the homepage like any other page or you have to use one of the four premade layout? Where I can see the blog homepage of Divi?
– what happens when you use Divi instead of Chamaleon in a premade site like for example http://www.infiniteart.it? Have you to do all the work again?
Thank you!!!
F.

This templates is ok. I am here be recommendation of my friend. He use elegantthemes many years. Just because I can win Life time membership I will hold on for now. But I must say from the last time when I check few templates, I can see a lot of new ones. Well Done.

As you pointed out, not the most ideal solution because it changes the height of every slider you would use. This is because you are changing the code for standard sliders.

Easiest way to create a separate, custom slider that does not interfere with the main slider code is to create a new CSS Class. All I did was put the following into the CSS Stylesheet a line below the code you referenced above:

.slider2 .et_pb_container {width: 100%; height: 600px; }

When you create a new slider module, scroll down to “CSS Class” in the settings box and write “slider2″ (or whatever class title you choose in its place above, just make sure it’s consistent). You can thereafter put the customized 600px tall slider (or whatever height you desire) next to any standard slider on the same page.

I started using Divi couple weeks ago and tried to put a background video.
The video is in .WebM and works well on Chrome but doesn’t display on IE and Firefox, the browser put a link for downloading the video only.

Is there any way to control the maximum size of a slider? I love the other Divi options, but the sliders are just so big.

I’d like to use a small opening page on my site – where you can see the section below the slider right away. As it is, the slider takes up the whole page that people initially see (they may navigate away before even knowing that they can scroll down).

I’ve experienced glitches with paralax effect when used on pages with image sliders on them. Even your example page listed here (with rockets) is not working properly in my Safari, while it’s performing just fine in Firefox.

How do I change the CTA button colors in both the light and dark settings? I want to have a CTA as you’ve described here, without a background, but I don’t want the button to be teal or the grayed out color. If you happen to see this post, I’d sure appreciate the help. I’ve tried this code and it isn’t working for me, so clearly I don’t know what it should be — I’m new to CSS. Thanks.

I am hoping there’s a way that my scrolling top image can connect to the full width header below it and scroll together in the parallax way. At the moment it leaves a space in-between the two: http://66.147.244.98/~miremoln/home-2/

what is the best size for the background image? i have a big trouble with this slider.. when i set 2 slider one with backgroun img and one whothout, the background image going deform and resize.
and another problem is headline and test.. when i use any of theme the slider heigh going bigger.

I would like to know this as well. Currently, for my site, I feel the height of the full width slider is far larger than needed. It will take some time to figure out how to adjust the CSS, without potentially ruining the mobile optimization.

I am editing a site through MAMP, I am trying to make a full width slider under the navigation, so that I can put a slight opacity on the nav while still seeing the header slider flush to the top of the page. Any thoughts? Would love to figure this out ASAP as this is holding me up because I have tried everything.

When I have a slider, like in the home page of my site, my slide image increases a bit just before it changes to the next slide, and it pushes all the content down a bit for a split second during every change. How can I fix this?

I love this theme. I am not a big code guy, and perhaps I don’t understand something. Many people have asked about how to change the height of sliders… specifically, to reduce it. I need to do that too.

Why is there no answer here? Why no link? As good as this produce it, it is no help if we can’t do some fairly basic resizing of elements on the page and the spaces between them.

Hi guys, First of all, Thanks for that awesome theme! I`ve been using it for a few months now. It was great at the beginning at it becomes even more fantastic with every month! Now I have one question.

I use the full width slider on our website http://www.sqinsh.com. I would like to increase the size of the slide pictures within the slider. Is there any way to do this? Probably I have to increase the size of the entire slider, is that right?

I am not a great coder. 😉 That`s why I use your theme. 😉 Can you give me some tipp, how I get them larger?

Like many people here, I’m trying to figure out the best way to adjust the height of the full-width slides. When I use a video background, the slide is not scaled with the video, and a large part of the video is hidden. Is this simple a problem with the dimensions of the source video I’m using, or is there something else I can do to make the slide taller.

In addition, I feel like Divi needs a simple “full width image” module without having to use slides for this purpose. Does this exist and I’m just missing it?

I should add that I am trying to build websites inside the confines of Divi, without modifying php code, which I am perfectly capable of. If you tell me that what I want isn’t possible with Divi’s native settings, I’ll start modding. I prefer not to, because then I end up with my own fork of the theme.

I installed the Divi Theme and used the page builder. But when I’ve use the sliderwidth, this just doesn’t open the options for change or add new slider. Just doesn’t work. All the website works, accept that tool. Do you know what happens? What can I do?

Like so many others I am here looking for ways to REDUCE THE HEIGHT OF THE FULL WIDTH SLIDER. I tried adjusting all my pictures to various sizes before settling on 2000 x 800 pixels but the full width slider has just stretched my pics and made them far too big!

PLEASE, is there any easy and official way to reduce the height of the full width slider? It is driving me mental.

I have found nearly every other aspect of working with the Divi Theme Builder an absolute dream. The info is so easy to find either via your website or via YouTube.