Earlier this month we introduced Divi 2.4, the biggest upgrade in Divi history and a giant leap forward for our most popular WordPress theme. There are so many great features to explore in this update that it was hard to describe them all on the release post, which is why we have decided to do a 2-week series of informational blog posts that will aim to teach you how to take full advantage of Divi 2.4 and its new options. In part 13 of this series, I am going to do a full walk through of a demo page we created to show off the power of Divi 2.4. I will also compile a library pack that will include all of the elements from the page that you can add to your very own Divi Library for personal use.
If you haven’t been following the Divi 2.4 mini blog series, I highly suggest that you read through our previous posts before diving into this one. Because we’ve covered lots of features at length throughout the series, I will be linking out to those posts as I talk about them rather than giving you repeat content.
Take a Quick Look At the Demo Page We are Going to Build
I chose this page to cover because of its wide variety of Divi 2.4 features such as the new theme settings, fullwidth rows, fullscreen headers, global elements, transparent background colors, custom css, advanced module settings and so much more.
Looking at the High-Level Page Structure
Before getting into the fine details, here is an outline of the page structure. I will be going through each of these sections in further detail, but take a few moments to understand how the page is broken up.
First Things First. Defining The Typography
One of the first things I always do is define my typography. This helps inform color, content, and the overall texture of the page. Here is a look at my typography settings for this demo. All of my other general settings use Divi’s defaults.
More information about the new theme customizer
Building The Fullscreen Header
The first section of Interior’s homepage is a Fullwidth Section with a Fullwidth Header Module. In this module I’ve added a parallax background image, Logo, Title, Subheading, and Scroll Arrow.
An in depth look at Fullscreen Header Modules
Here is a a look at my General and Advanced Module Settings. You can click on the screen shots for a larger view. Some costomizations to note here are my choice of scroll arrow (general settings) and subheading font styling (advanced settings)
Fullwidth, Equal Height, 3 Column Row
The next section on our page is a three column row that has been set to fullwidth, and given a custom gutter that removes the spacing between columns. Inside each column is a blurb module to establish the icon and text, and then another blurb module to add an icon that links to sections further down the page.
Section And Row Settings – Before looking at the content here, let’s look at how the Section and Row are built. First, I defined custom top and bottom padding of zero for the section and the row and turned on “Keep Custom Padding on Mobile” because I want to keep that gutterless look on mobile devices as well. Screenshots below.
General Row Settings – I turned on “Make Fullwidth” and used a custom gutter width of ‘1’ in the Row Settings so that no matter what the user’s browser width is, the 3 columns span the fullwidth. Note that a gutter width value of ‘1’ removes all the space between columns.
Advanced Row Settings – I’ve given each column its own background color, custom padding (5%), and turned on “Equalize Column Heights” so that the column heights are always the same no matter their content. I used percentages for my column padding so that it grows and shrinks proportionally with the browser width for a more fluid experience.
More Information on Divi’s New Row Settings
Creating the Contents Inside Each Column
As mentioned before, there are two modules inside of each column. The first chunk of content is made up of a Blurb Module with a custom image, title, and content. The title and content have been styled via the Advanced Design Settings in the image below on the right. Because each column has a different background color, all three blurbs have different advanced color values.
Scroll Icons – The scroll Icon was added via another blurb module with “Use Icon” enabled. I selected the desired icon and icon color, and then set a custom icon size in the advanced settings. Notice that I used a transparent black for the icon color so that I could clone the same module onto all three column background colors.
Adding Smooth Scrolling Links – You can also see that I gave the scroll down icon a url of #recent-interiors. I have also given the Recent Interiors section of my page a CSS ID of “recent-interiors”. You can link to any element with a unique CSS ID by simply adding a ‘#’ in front of the ID. Normally this would quickly jump into place, but Divi will smoothly scroll to any internal links you add to your page. I’ve given all three scroll arrows different internal page links so that they all scroll smoothly to the appropriate section.
A Seamless Fullwidth Image
Next, I added a fullwidth image that works perfectly with the three columns I added in the previous step. Let’s be honest, this seamless relationship required quite a bit of photo manipulation and a little bit of luck. In short, I edited a stock image so that it had perfect 3 column divisions, and faded the top part of each column into the exact color values of the columns above.
While this greatly enhances this specific layout, it is not required to make it a strong page. You can see what this page would have looked like without the seamless transition.
Adding Images That Touch The Edge Of The Section
These two sections are 2 column rows that have been made fullwdith. Unlike the fullwidth 3 column row above, I am not using a custom gutter width so that the contents still have some breathing room (highlighted in red). I have however, removed the bottom padding from the first section and row so that the chair touches the bottom edge of the section (blue line). Similarly, I removed the top padding from the lamp section and row so that the lamp touches the top edge of the section. Another customization to note here is the custom top padding I added to the the Text Module in the bottom right of the image below.
Seamless Images and Section Background Colors
It may look like the text content of these sections is on top of a larger background image, but in fact, the images are in their 1/2 columns but they just happen to fade perfectly into the background color of the section.
This is yet another example of how the right images being used with the right background colors can greatly enhance the design of the page, but in my honest opinion, it is not what defines the page layout. For example, this layout still loos great with unmodified imagery.
Adding and Styling The Text Blocks
The text blocks are simple Text Modules created in the text editor, versus the Visual Text Editor. Here is what my input looks like and I let my theme typography settings handle all of the text styles, sizes, and colors outside of a bit of inline styling for my custom link.
<h2>Handmade Furniture</h2> <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel.</p> <a style="font-style: italic;" href="#"><strong>Latest Project</strong></a>
But What About Those Three Little Images?
While I could have added a grid of images with the gallery module, I added three separate image modules with a bit of custom css for the sake of showing off Divi’s new Custom CSS feature. So what this actually looks like in the builder is this.
In the Custom CSS of each image I told the module to be 30% wide with a margin-right of 5% (the last image has a margin-right of 0).
A Full Post About the Custom CSS Tab
Here is the final result, with the image widths and margins adding up to 100% width.
Adding A Gallery To a Fullwidth Row
The gallery module looks really awesome with the new fullwidth gutterless rows. The next section on our page shows off this example in a 2/3 :: 1/3 column row. Again, I have defined 0 top and bottom padding for this row and the section. The contents of the 2/3 row are pretty much the same as the other text blocks in the previous example so I will mainly be talking about the 1/3 column gallery in this section. I will, however, note that the text module on the left here has custom padding of 15% on all sides to give it a lot of breathing room.
Things to Be Careful Of When Using this Layout
This layout is much stronger when using images that are all the same height. This way the gallery and section aren’t constantly changing heights based on the current slide. Another height issue is the possibility of the text column becoming taller than the gallery if there is too much text content, or your images are too short in height. If your text content happens too be too long, it will create a gap below the gallery, but is not the end of the world.
Three Column Image Gallery
This may look like a gallery in a fullwidth row, but is in fact a three column row with an Image Module in each column.
Why Not Use A Gallery Module?
There are advantages and disadvantages to using a Gallery Module. I specifically chose to use this unintuitive method to raise these points.
Gallery Module Advantages – If I were to have used a gallery module I would have only had to use one module instead of three. This advantage is multiplied in the case of me wanting to add more images to this section. Another great advantage is being able to click an image to trigger the gallery lightbox where the user could then arrow through the image gallery in lightbox mode.
Gallery Module Disadvantages – I knew that I only wanted to show three images in a single row here, and the gallery module displays four columns in a 1 column row and breaks down to two columns at certain breakpoints. This would cause an uneven breakdown, which is why I chose to use three separate image modules.
Using the Same Contact Form On Every Page
Wanting to add the same contact footer on every page, I used the new Global Element Feature in Divi 2.4. If you happened to still skip over my recommendation to read our previous posts, this is where I put my foot down and strongly suggest that you do 🙂 At the very least, please read our in depth post about Global Items and the Divi Library.
Now that I have saved this as a global section, anytime I want to contents of my section such as the phone number or ‘Send To’ email address, I only have to do it once, instead of on every single page of my website.
Limiting the Width of My Contact Form
It’s hard to see that its happening, but I am limiting the width of the content in this section using the new “Use Custom Width” row option. Using this new setting I told my rows to never be wider than 680px because I feel that the pricing table module and text line-length were too wide when using the default 1080px width. In case you missed it, here is More Info on the All New Rows Settings.
Styling the Contact Form
As mentioned over and over again in this series, there are so many ways you can style your modules using the Advanced Design Settings. With the new settings I was able to use a transparent background color for my form fields. Here is an in depth post about Using Transparent Colors in Divi.
If you are a Divi veteran, you may have noticed the centered ‘Submit’ button. This might not look so great with a captcha, but because I am not displaying a captcha, I used the Contact Form Module Custom CSS tab to manually center the button with on simple line of css.
Configuring The Navigation Header
Choosing A Header Format
After building out a few more pages it was time to stylize the navigation. I am already displaying the logo in the fullscreen header at the top of the page and I want the user to explore the home page of the site before going to other pages so I chose to hide the navigation until the user scrolls. My logo is also symmetrical and I only have a few links so using a centered inline logo also seemed to work really well for this site.
A Full Walk Through of The New Navigation Settings
Styling The Navigation
I am only showing the navigation after the user scrolls, meaning the user will only see the Fixed Navigation. However, I still need to style my Primary Menu Bar to configure the text styles in my navigation. I also set a logo height that is slightly smaller than its height in the Fixed Navigation so that it has a subtle zoom effect when the fixed navigation appears on scroll.
FREE Interior-Demo Library Pack
As promised, all of the pieces that we’ve gone through in this post are available for download so you can import and use them on your own site. Below I will do a quick recap of all of the items that are included in the Library Pack. As always, we take licensing very seriously at Elegant Themes so we cannot share the exact images used in this demo, but will include everything else as it appears in the Demo. I will also generalize the text since most you aren’t building interior design websites 🙂
Fullscreen Header
Library Item Type: Module
3 Column Fullwidth Gutterless Row
Library Item Type: Section
Make sure to assign internal links to your down arrows if you add this section to your page. To do this just give the section you want to link to a unique CSS ID, for example, CSS ID = contact_footer. Then, just type #contact_footer into the url field in the Blurb Module Settings and your’e done!
2 Column Fullwidth Row
Library Item Type: Section
This item has zero bottom padding on the section and the row so that your image touches the bottom edge of the section.
2 Column Fullwidth Row
Library Item Type: Section
This item has zero top padding on the section and the row so that your image touches the top edge of the section.
2/3_1/3 Column Fullwidth Gutterless Row
Library Item Type: Section
Note that if you add this to your page, the gallery will not appear. Divi uses the WordPress Media Library to create galleries, which doesn’t allow us to pre-populate galleries in Divi Library packs.
3 Column Fullwidth Gutterless Row
Library Item Type: Section
Global Contact Footer
Library Item Type: Section
Beware, this is a global section, so if you add it to multiple pages, they will all be in sync. I have also included a non global version in the library pack.
The Full Layout
Library Item Type: Layout
Also included in the library pack is the entire layout in case you just want to use the whole thing! I didn’t include the global contact footer in the layout, but it is included in the download so if you want to replace the non-global contact footer with the global one you can easily do so.
How To Use This Library Pack
Downloading and importing this pack into your own site is doable with just a few steps. First, download the linked file below and unzip the compressed file. This is the file you will import into WordPress. To import them into your library, navigate to Tools > Import. Select the WordPress link at the bottom of import type list, and you will be prompted to upload the file. You will then have access to these modules for you very own use. Reminder: Before uploading, be sure to unzip the zip file! Only XML files can be imported.
Adding Library Items to Your Page
Once an item has been saved to the library, it can be added to any new page from within the Divi Builder by clicking “Add From Library” button when adding a new module, row or section to the page. I have added an ‘Interior’ category to each item in this pack so you can filter by this category if you already have lots of other items in your Divi Library
We hope that this series has left you a lot more informed, motivated, and inspired to use this brand new Divi to create amazing websites. We promised 14 posts in this series, so stay tuned for one more exciting Divi post tomorrow 😉