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

Posted on December 18 by in Resources | 66 comments

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!

Divi-Banner

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.

section-settings

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.

Parallax Effect – If enabled, your background image will stay fixed as your scroll, creating a fun parallax-like effect.

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.

sections-thumbnail

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.

video-bg

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.

parallax-bg

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.

illusions

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.

cta

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.

66 Comments

  1. Does this theme have shortcodes like your previous themes? I use them a lot :)

    • Yes, you can use any shortcode within a text module, whether it comes with our theme or a third party plugin.

      • Nice! Learning a lot about this theme daily.

        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?

        • This isn’t possible yet, however, we will definitely be adding our own maps module in the future.

          • I love this theme!

            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.

            Thanks for all of the work you guys have put into this!

  2. Best blogpost about the options of Divi so far! Really enjoyed this creative bit of thinking.

  3. Great job Nick! :)
    Like it.

  4. great! Thanks!

    Any possibility to use images in the full width header instead of a solid color?

    • #main-header {
      background-image: url(‘http://static1.grsites.com/new/stripes2.png’);
      }

    • All you need to do is define a background image for the full width section that contains the header. You can apply a background image, video or color to any section.

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

  5. Every theme you make just get’s better, i would love to know Nick how your going to top this theme. I don’t think you can, it’s simple the best theme EVER

  6. I cant wait to use this theme. Great Job everyone who worked on this project. I am also loving the blogs highlighting all the features, tips and tricks! Merry Christmas!

  7. OMG! Purely amazing!
    I got a feeling that Divi will be the ONLY theme I need from now on. Great job, Nick!

  8. 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)

      Merry Christmas to all!

  9. Awesome, a case of beer headed your way. What’s your brew of choice?

  10. Every day understanding the DIVI theme more and more…

    Thanks for sharing ;)

  11. It took me sometime to know the power of the section building block but since I discovered it, it turns Divi a million possibilities! Thanks Nick for this charming tricks.

  12. This effects are simply stunning! Thanks for the trick.

  13. You can think of them as horizontal stacking blocks that can group your content into visually distinguishable areas.

    Do you anticipate adding the functionality to let users stack the sections vertically as well?

    It would be a great addition to this theme, and would enable users to truly do whatever they want, and also style sections individually, while placing them side-by-side.

    Excellent theme!

    • Being able to style individual sections that aren’t full width would be a fantastic addition.

  14. What’s the preferred size dimensions of the actual video bg file to achieve the best results?

    • That depends on the content of your section, which effects the height of your section. The taller your section, the taller your video should be.

  15. The ’12 days’ theme rollout/support is really a fabulous idea — great customer support, interesting starting point ideas, ways to create interest in the new theme. Love it!

  16. The “Background Transition Illusion” is invaluable!

  17. OMG! I’ve been looking for a theme that behaves like this!

  18. If we gals use Divi as our theme, does that make us Divas????? :-)

  19. 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?

    • Your site looks beautiful using Divi!

  20. 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?

  21. Divi WordPress theme has given new direction to WordPress theming – Specially premium segment. Great work by ET team.

  22. Awesome effect & theme, I like this so much, thanks a lot~!

  23. Divi flexibility continues to amaze!

    Enough to keep me inside experimenting and away from the white beach 50 meters away on this perfect summer day on the West Coast of South Africa!

    Thanks Guys!

  24. Divi is great! Superior in many ways. It makes content the prime citizen of your website.

    One Flaw: on iPhone images are sliding in too late. You scroll over their positions before they have a chance to appear/to be seen.

  25. I would love to see more customization options for the navigation bar!

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

  27. Again, very impressive effects!

    Request/Suggestion: Please add all files related to Divi and all “12 days of Divi” tips (like the ones on this page) to the download file.

    This way new customers have it all and I won’t have to save all pages to my favorites for when I get around to using this theme.

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

  29. I’m amazed at the generosity of this company… giving us the 12 days of Christmas for such an awesome template is beyond awesome! Thank you so much!

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

  31. Can a section’s label or ID be referenced by URL?

  32. Stunning! Thank you so much for your creativity, hard work and generosity. ET rocks!

  33. amazing…thanks for sharing…every time i can see stunning,amusing and beautifull themes…awesome…!!

  34. Is there a way to adjust the height of the sliders in this theme?

    • This isn’t the best solution, but I was able to adjust the slider height by editing this line in the css to include height:

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

      (this was for a small slider in the middle of the page, not for the large, full width slider though)

  35. Nick, et al., Divi is totally awesome. I’ve used a lot of your themes, but this one is by far the best. I just had to write in and say so!

    mlwj

  36. I love the background image. I found the rocket, where can I find the purple sky moon image? Would love to use this :-)

    Great job on the theme

    • You can purchase them from shutterstock.com

      • Nice :-) I found the rocket one, do you have the ID number for the other one. Thanks

  37. How can I change the max height of the home page Fullwidth Slider?

    • I would also really like to know this! Anyone?

  38. Forgive me if I’ve missed this, but is there a way to narrow the height of the slider so it’s not taking up most of my home page? Thank you for any assistance you can offer!

  39. A few others asked this too – How can I change the max height of the home page Fullwidth Slider?

    Would love to know the CSS for this.. if it’s a simple fix :-)

    Thx!

    Jason

    • If you need help with anything, please open a ticket in our support forums so that our team can assist you.

      • What are the dimensions for the full width header? How do I add a custom header? (Simple, please, I no speak geek). Very excited about this theme!

        Thanks,

        Gail

    • I would like to change the height of the homepage fullwidth slider too!
      Thanks,

      Victoria

  40. Any plans to update the Elegant Page Builder plugin to match the one used in the Divi theme?

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

    If I use the MP4 the video stays black on Chrome.

    Hope someone have an answer to my problem.

    Thanks
    Artiom Valat

    PS : DIVI <3

  42. 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).

    Thanks,
    Ryan

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

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

    .et_pb_bg_layout_light .et_pb_more_button { background-color: #82c0c7; color: #fff;}

  45. 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/

    Can you help?

    Thank you!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Current day month ye@r *

For the all-inclusive price of $69, you are only paying $.79 per theme!

Join our 233,869 happy customers and get complete access to our 87 themes

100% Satisfaction Guaranteed Or Your Money Back!

Sign Up Today

Signup For Access To Free WordPress Tips & Resources

Signup for our newsletter and get access to free downloads, as well as daily WordPress tips, tricks and resources.