Elegant Themes Blog » Nick Roachhttp://www.elegantthemes.com/blog
Recent News and UpdatesSun, 02 Aug 2015 19:20:18 +0000en-UShourly1Coming Soon: The Divi Builder Pluginhttp://www.elegantthemes.com/blog/theme-sneak-peeks/coming-soon-the-divi-builder-plugin
http://www.elegantthemes.com/blog/theme-sneak-peeks/coming-soon-the-divi-builder-plugin#commentsWed, 01 Jul 2015 18:06:30 +0000http://www.elegantthemes.com/blog/?p=21919Earlier this year, I wrote an article about our plans for the future. Here I talked about three big things we have been working on, and how their paths had become intertwined. Divi 2.4, The Divi Builder Plugin, and our future themes (such as Extra). Earlier this month we released Divi 2.4. This update did […]

]]>Earlier this year, I wrote an article about our plans for the future. Here I talked about three big things we have been working on, and how their paths had become intertwined. Divi 2.4, The Divi Builder Plugin, and our future themes (such as Extra).

Earlier this month we released Divi 2.4. This update did a lot of things, but most importantly it laid the groundwork for a lively ecosystem of Divi products, and the first item on that list is the Divi Builder Plugin. This plugin will allow you to use the Divi Builder with any theme, and it will also make it easy to migrate posts and pages built with any theme powered by the Divi Builder! If you have built thousands of posts using Divi, and you decide to move to a new theme, simply install the Divi Builder plugin and everything will continue to work beautifully. If you are using a different theme, but you want more flexibility when building out your pages, then you will soon able to able to install the Divi Builder Plugin to unlock your theme’s true potential.

What Does This Mean For The Divi Theme?

Divi wont change. The Divi Theme will continue to include the Divi Builder packaged with it (just like it is now), as will our future multi-purpose themes. When you use Divi or any theme powered by the Divi Builder, you wont be forced to install any additional plugins.

The Divi Builder Plugin will will simply exist as a separate optional plugin. Thanks to Divi 2.4’s new fluid grid, and a complete re-factoring of the Divi Builder framework, the builder will now work better than ever in just about any situation.

So When Is It Going To Be Ready?

Soon, very soon. Most of the work on the Divi Builder Plugin has already been included in Divi 2.4, which was really a culmination of many months of development on both Divi and Extra. Right now we are focused on making Divi 2.4 perfect and helping our customers with the transition, and after that we will be packaging up the Divi Builder Plugin and releasing it into the wild. We can’t wait to see all the amazing things you create with it. Stay tuned

]]>http://www.elegantthemes.com/blog/theme-sneak-peeks/coming-soon-the-divi-builder-plugin/feed139Exploring Divi 2.4: Using The All New Full Screen Header Modulehttp://www.elegantthemes.com/blog/resources/exploring-divi-2-4-using-the-all-new-full-screen-header-module
http://www.elegantthemes.com/blog/resources/exploring-divi-2-4-using-the-all-new-full-screen-header-module#commentsSun, 28 Jun 2015 14:00:02 +0000http://www.elegantthemes.com/blog/?p=21550Earlier 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 […]

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 eleven of this series, I will be exploring the upgraded Fullwidth Header module, complete with new Full Screen functionality!

The Fullwidth Header Module Gets A Huge Upgrade

Divi has always had a Fullwidth Header module. In Divi 2.4, however, this module has been greatly expanded with dozens of new options that make it one of the most versatile modules in Divi’s collection. There are over 20 different possible layouts that can now be created with this single module, and a myriad of new styling options that can be applied to each element (thanks to Divi’s new Advanced Design Settings). Where before you were limited to only two pieces of information in your header (Title and Subhead), the header has now been expanded to include various images, buttons and backgrounds (each of which can be arranged in different ways). To top things off, a new “Full Screen Mode” has been added to the header, which will force the header to extend the full height of the browser.

Exploring The New Options

There are a ton of new options available for the Fullwidth Header module. At first glance they can seem a bit overwhelming, so let’s go over each of the available options to better explain what they do.

When you add a new Fullwidth Header module to your page, you will be greeted with the following settings:

Subheading Text – If you would like to use a subhead, add it here. Your subhead will appear below your title in a smaller font.

Text Color – Here you can choose the color value of your text. If you are working with a dark background, then your text should be set to light. If you are working with a light background, then your text should be dark.

Text & Logo Orientation – This controls the how your text is aligned within the module. You can choose between left, right or centered alignment.

Make Fullscreen – Here you can choose whether the header is expanded to fullscreen size. If this option is enabled, the header will always have a minimum height equal to the height of your browser window. This is a great way to add extra prominence to your header, making it idea for greeting new visitors on your homepage.

Show Scroll Down Button – Here you can choose whether the scroll down button is shown. When the scroll down button is clicked, it automatically scrolls users down to the next section on the page. It also gives an indication that more content exists below the header (since the “full screen” effect can often be deceiving).

Button Text – If you would like to display a button in your header, you can enter the text for your first button here.

Button URL – If you would like to display a button in your header, you can enter the URL for your first button here.

Background Color – If you would like to give your header a background color, you can specify the color here.

Background Overlay Color – Choose a background overlay color, which will be placed on top of the background image and behind your text. Semi-transparent background overlays can create some interesting effects when placed above background images.

Use Parallax effect – If enabled, your background images will have a fixed position as your scroll, creating a fun parallax effect.

Logo Image URL – Logo images are displayed above your title text (if defined). As with all elements in the header, logos are optional.

Text Vertical Alignment – This setting determines the vertical alignment of your content. Your content can either be vertically centered, or aligned to the bottom.

Header Image URL – Headers can also have an optional header image. This is a larger image that is displayed separately from your title text and logo.

Image Vertical Alignment – This controls the orientation of the image within the module. It can be aligned independently of your logo and text, resulting in over 20 different possible layouts.

Creating Your Own Header Module

Now that we have familiarized ourselves with the new options available, let’s take a look at how these options can be combined to create some stunning headers. In this tutorial, I will be showing you how to create a header in the following style:

This configuration takes advantage of most of the new options added in Divi 2.4, and is a great example of how all of these elements can be successfully combined.

Getting Started – Selecting Your Images

In this example, I will be creating a homepage for a fictional bakery. At the top of the homepage, I want to quickly describe what our company is all about using some beautiful imagery and a bit of text. First things first, we need to decide on some great photos. Selecting images that go well together is the most important part of designing a beautiful header. The Fullwidth Header has 3 different images available to it:

The Logo Image – This image is placed above your title text, and is typically a small logo to represent your company.

The Background Image – The background image is placed behind your header content. It’s best to think of the background image as a textural element. We don’t want something too overpowering. It should compliment the rest of your header, but it’s not the main subject of the module.

The Header Image – This is a larger image that is placed adjacent to your title text and logo. It can be placed to the left, right or below your text content.

To get things started, I have selected a background image that goes well with my baking theme. This image is not too cluttered, and the lack of depth also makes for a more subtle appearance.

I have also uploaded my company logo image. This will be placed above my title text. It has been saved as a transparent PNG image so that the background image will be visible within the negative space of logo.

Next, I have selected an image to be placed below my text content. This is my main “Header Image.”

Since this image will be placed on top of my background image, I have decided to turn this photo into a transparent PNG as well (just like our logo). I used Photoshop and the eraser tool to fade out the edges so that the transparency can take full effect. Here’s what the image looks like after I finished fading it in Photoshop:

Now that we have our basic elements in place, we can start constructing our header!

Putting The Pieces Together

First of all, we need to add a new Fullwidth Header module to our page. To do that, add a new Fullwidth Section and click the “insert module” button. Locate and select the Fullwidth Header module.

This will bring up the Fullwidth Module settings that we went over earlier. To start things off, I input some title text (“Better Tasting Bread”) and enabled the “Fullscreen Header” option. I also changed my text color to “light” since the background image I chose earlier is rather dark. We need to make sure that our text will be readable.

Next I added my background image by uploading the image that I chose earlier.

After saving, you can see what our header looks like so far. We have only a title and a background image, and the header has been set to extend the full height of the browser.

Things are looking pretty good so far! However, I am noticing that as I scroll down the page, the white color of the flour is clashing with the white color of the text. This is a very common problem with background images. It’s often difficult to find a background image that has a low enough contrast to never compete with your text. Luckily, we implemented a new featured called “Background Overlay” that solves this problem by adding a semi-transparent color on top of your background image to help tone it down. It can also be used to colorize your photos.

Since I am going for more of a brown color scheme on the page, I have chosen to place a semi-transparent brown overlay on top of my background image.

Once we save and apply the overlay color, you can see that overall color of the background image has now taken on a brown hue. Since only part of the background image can be seen through the new overlay color, it also lowered the contrast of the image and toned down the white of the flour.

Now things are starting to come together! Let’s continue to add the rest of our content to the header. Next up, I uploaded the logo image I chose earlier. I also filled in the “button text” and “button URL” settings. Buttons are placed below your header title, while the logo image is placed above it.

The logo, title, subhead, and buttons are always placed together (and in that order). All of these elements are optional. If you don’t want to use any of these items in your header, simply leave their setting fields blank. After uploaded our new logo and adding our two buttons, you can see the end result below. Since our logo image is a transparent PNG, the background image and overlay color are shown through the negative space. This is a great effect, and something you should consider using in your own designs.

There is only one piece of the puzzle left, the header image of the piece of bread we chose earlier. This is an important part of our header, since it will quickly let our visitors know exactly what our company does. Together with our title text and logo image, all of the important information necessary to understand what our website is about can be seen right away.

As mentioned earlier, I have used Photoshop to fade out the edges of the image and saved it as a transparent PNG (just like our logo). When combined with a background image and parallax affect, we can create the illusion that these two elements exist in the same space. With this finishing touch completed, our Fullwidth (and Full Screen) Header has been finished.

This Is Just One Example Of Countless Possibilities!

This example is just one of many different ways that the Fullwidth Header module can be used. By choosing different image and text orientations, the layout of the header can be drastically changed. Here is a spreadsheet of all the different layout possibilities just to give you an idea:

As you begin to experiment with different text and image orientations, combined with different styles of photos, you will start to see just how versatile this module has become.

]]>http://www.elegantthemes.com/blog/resources/exploring-divi-2-4-using-the-all-new-full-screen-header-module/feed68Exploring Divi 2.4: Creating A Unique And Unified Blog Design Using The Global Post Title Modulehttp://www.elegantthemes.com/blog/resources/exploring-divi-2-4-create-a-unique-and-unified-blog-using-a-global-post-title-module
http://www.elegantthemes.com/blog/resources/exploring-divi-2-4-create-a-unique-and-unified-blog-using-a-global-post-title-module#commentsFri, 26 Jun 2015 14:00:17 +0000http://www.elegantthemes.com/blog/?p=21431Last week 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 […]

Last week 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 nine of this series, we explore an exciting way to use Divi’s new Global Modules.

Creating A Unique Style And Making It Global

Today I will be showing you how to create a unique look for your blog, and how to unify that look using Global Modules. Why is this combo so important? Because once you have created your new blog look using the Global Post Title Module, the style can be changed across your entire blog without having to edit every single post! There are 3 important pieces to this puzzle:

The new Post Title Module that allows you to automatically pull post meta information, such as post title, author, date and featured image and display those items in a unique way.

Divi’s new post-level features that allow you to use the Divi Builder on posts, as well as remove the post’s sidebar and default post title.

The Divi Library and Divi’s new Global Library Items that allow you to sync a single module, row or section across multiple posts or pages on your site.

Step One: Creating Your New Blog Post Design

To kick things off, we will be customizing our blog post layout to be completely different than the standard Divi blog. By default, blog posts in Divi take on a classic style. There is a sidebar on the right, blog post content on the left and a post title / featured on top. It’s a format we all know and love, but it’s also a format that looks just like every other blog on the internet. So why not try to mix things up a bit? Divi makes it possible.

First things first, let’s change up our overall structure a bit by removing the sidebar in favor of a full width layout. This can now be achieved using the Page Layout setting within the Divi Post Settings box. You will find this box either to the left of below the post editor when writing your post.

Once we select the “Fullwidth” layout and save, you will see that the sidebar has been removed from the post entirely. This gives us more room to work with. Since we will be using the Divi Builder to construct our post, this full width layout will give us the option to take advantage of Fullwidth Sections and Fullwidth Modules to create engaging posts in a style similar to Medium.com.

In particular, we will be using Divi’s new Fullwidth Post Title module to give our blog post a more unique and enticing header. Before we can do that, however, we first need to remove the default title display that gets automatically added to the top of each blog post. This can also be achieved from within the Divi Post Settings box mentioned earlier.

After selecting “Hide” for the Post Title option within the settings box, you will notice that the title, meta data and featured image that typically gets added to the top of the post has been removed.

Now that the default post title has been removed, we can add our own customized version using the Fullwidth Post Title Module. To get started, make sure you are using the Divi Builder to builder your post by clicking the purple “Use The Divi Builder” button above the post editor. This will enable the builder and allow you to construct your post from top to bottom using builder elements.

To add our new customized title, add a new Fullwidth Section to the top of your post, and then add a Fullwidth Post Title Module within the section.

This will launch the settings box for the post title module where you can adjust the display of your custom post title. There are lots of options here, including:

Show Title – Inside each post title module, you can choose which pieces of information you would like to display. If you would like to disabled the title altogether, and only display your featured image and meta data, then this option can be disabled.

Show Meta – You can also choose to hide all of the meta information that typically gets added below the post title, such as post author, date, and categories. Disabling this option will hide all of the information at once. You can also disable individual pieces of meta information using the settings below.

Show Author – This will disable or enable the author name within the post meta box.

Show Date – This will disable or enable the post date within the post meta box.

Date Format – Here you can adjust the format used for your date display. For example, you could switch from 1/23/2015 to January 23, 2015, and so on.

Show Categories – This will disable or enable categories within the post meta box.

Show Comment Count – This will disable or enable the comment count within the post meta box.

Show Featured Image – Displaying the featured image is optional. If you would like to hide the featured image for the post, then it can be disabled here.

Featured Image Placement – If the featured image is enabled, you can choose from various display methods. You can place the image above the title, below the title, or even use it as a background image behind the post title.

Parallax Effect – If the featured image is being used as a background image, then you can enable parallax mode.

Text Orientation – In addition to controlling which text elements appear in your post title, you can also adjust their orientation, choosing between: left, right or centered text.

Text Background Color – Applying a background color to your text will place a colored box around your title.

Text Color – You can choose between light and dark text for your post title. If you have applied a dark text background color, consider making your post title text light to ensure that it’s readable.

Utilizing these various settings, you can create various styles for your blog. As an example for this tutorial, I will be using the settings shown in the screenshot below. Most notably, I have chosen to place the featured image “above” the post title. I have also added a “text background color” and adjusted the post title font, style and size within the Advanced Design Settings.

The end result is a completely different looking post when compared to the default Divi post layout! We have now created a unique style for our blog that is different from every other Divi blog and WordPress blog on the net! Experimenting with the various settings within the Post Title module can yield a multitude of results.

This new header style looks particular great when combined with Fullwidth Image Modules. Since we are using the Divi Builder to construct our post, there are many new layout options to take advantage of.

Step Two: Sync Your New Layout Using Global Modules

Now that we have created a unique look for our blog post, the next step is to unify our entire blog under the same style, and to make that style easy to manage. So what’s the main problem we are solving here? Creating a new post title module with the exact same settings each time you write a new blog post takes time. Furthermore, if you have created 1,000 blog posts and used your new post title module at the top of each, what would happen if one day you want to adjust the layout? You would be forced to go through all 1,000 blog posts to adjust the post title module inside each one! That doesn’t sound like much fun at all. Luckily we can avoid the hassle by saving our custom post title module to the Divi Library as a Global Module. I won’t be going over everything to do with Global Module, since this has already been covered in our previous post. Be sure to check that out if you want to dig a little deeper.

To save this post title to the Divi Library, click the “Save & Add To Library” button when editing the module or the module’s parent section. In this case, I saved the entire Fullwidth Section to the Divi Library. During the save process you will notice an option to “make this a global item.”

Once the item has been saved as global, you will notice that it turns green within the builder. Global items can be easily identified within the builder by their green color.

The next step is to add this same global section to the top of each new post your create! Since the post title automatically grabs the information from the current post, there is no need to edit the module when adding it to a new page. Your post title, meta data and featured image are grabbed by the module without additional instruction. The module only controls the organization of those elements, which will be shared by each instance of the global module.

Whenever you write a new blog post, click the “Add From Library” link when adding a new section, and locate your newly-saved global post title.

Once this post title has been added to each of your blog posts, they will all share the same exact header format! There is no need to do anything except add the global module to the post since the module automatically grabs the post information for the particular post it has been added to.

We have now unified the entire look and feel of our entire blog using the Divi Builder! What’s even more important is that if we ever want to change the appearance of all of our blog posts, we only have to edit the global post title module once! Since this same mode has been added to each page, once you have edited the module in one location, the change will be pushed to all instance of the global module.

In just a few clicks, we can adjust our blog’s design. For example, here I have changed the post title background color to red, and I have adjusted the featured image location to be used as a background image (instead of being placed below the post title).

In just a few seconds, our entire blog style has been altered!

A Brand New Blog That’s Easy To Manage

My goal here was to not only show you how to create a unique looking blog using the Divi Builder, but also how to do it in a way to makes it easy to manage. This is a perfect example of how powerful Divi’s new Global Library Items can be (especially when used for modules that grab their content dynamically). I hope you are enjoying using the Divi Builder on your blog posts, and I look forwarding to seeing all the beautiful posts you create!

]]>http://www.elegantthemes.com/blog/resources/exploring-divi-2-4-create-a-unique-and-unified-blog-using-a-global-post-title-module/feed55Exploring Divi 2.4: Why Rows Are Now the Most Versatile Part Of Divi, And How You Can Use Them Effectivelyhttp://www.elegantthemes.com/blog/resources/exploring-divi-2-4-why-rows-are-now-the-most-versatile-part-of-divi-and-how-to-use-them-effectively
http://www.elegantthemes.com/blog/resources/exploring-divi-2-4-why-rows-are-now-the-most-versatile-part-of-divi-and-how-to-use-them-effectively#commentsWed, 24 Jun 2015 14:00:59 +0000http://www.elegantthemes.com/blog/?p=21205Last week 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 […]

Last week 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 seven of this series, we explore Divi’s new Row and Sections options, and I show you why Rows are now more versatile than ever.

A New Generation Of Divi Layouts

If you are a Divi user, you know that the layouts built with the Divi Builder are broken up into three elements: Sections, Rows and Modules. Sections are your largest organizational element, used to separate big blocks of content on the page. Inside of each section are placed Rows of columns, and inside each column can be any number of Modules. These are the building blocks of your page. Modules are the content, but Rows control how that content is arranged. Using different combinations of column layouts, you can create a vast array of layouts.

That has always been the case in Divi. In Divi 2.4, however, we have introduced a ton of new options to Rows which greatly increase the range of layouts that can be created. Rows and their new layout options are the key to unlocking dynamic and unique looking pages. In this article, we will be exploring the new Row options added in Divi 2.4, as well as discussing how these new options can be used together to create some really cool designs. Let’s get started!

A Look At The New Options

In previous versions of Divi, rows didn’t have any settings. What made each row unique was merely the column structure you chose for it. Divi 2.4 introduces Row Options, which you can now access by clicking the settings icon to the top left of any row on your page.

There are dozens of new settings, broken up into different categories:

New General Settings

Here you will find general layout settings that affect the overall row structure. We tend to place settings into the General Settings tab when we think they will be used often and can be easily understood by new customers.

Fullwidth Rows – The fullwidth row options is incredibly powerful. In the past, the only way to extend an element across the entire width of the browser was to use a Fullwidth Row. That meant that you were limited to our smaller collection of Fullwidth Modules. That is not longer the case in Divi 2.4. Now any row can be made fullwidth, and any module can be used inside of these new fullwidth rows.

Adjustable Gutter Width – This new option lets you adjust the spacing that exists between each column in your row. This spacing can either be increase or decreased, and it can even be decreased down to nothing (allowing your modules to touch edge-to-edge). This works great with image modules, or modules that have background colors/images.

Custom Row Widths – In addition to extending a row the fullwidth of the screen, you can also define a custom width. For example, you could make a single row bigger or smaller than the rows around it, depending on the content you are trying to display. This is a great way to add variation to your page, creating a better rhythm for your content.

Custom Padding – Every row has padding above and below it. This is part of Divi’s natural structure, separating elements to improve hierarch and readability. This spacing can be adjusted to fit your content when needed.

Mobile Padding Adjustment – By default, custom Row padding will not be applied to mobile devices. Large padding values that look good on Desktop often wont look great on a smartphone, but you can choose to apply these padding values if desired.

CSS ID – Much like all Divi Modules, Rows now allow you to assign custom CSS ID’s, which can be targeted using anchor links or styled in your Child Theme or ePanel CSS.

CSS Class – Rows can also have custom CSS Classes applied to them, which can be used to add custom styling in your stylesheet.

All New Column Settings

Depending on the type of row you add, and how many columns the row contains, you will find a range of new column settings within the Advanced Design Settings tab. Here you can adjust styling for each individual column within the row.

Column Background Color – Individual columns within each now can now have their own background color applied to them. When you open up the row settings popup, you will see options for each column depending on how many columns are in the row you are editing.

Column Background Image – Much like background colors, each column can also have a background image.

Column Padding – Adjusting the padding for columns is especially useful for rows that are full width. Adding additional padding around the columns can give the content within each column more room to breathe as their sizes are increased with the width of the browser.

Advanced Design Settings

Inside the Advanced Design Settings you will find a ton of new options that allow you to adjust every aspect of your row’s appearance. We separate these into their own tab to ensure that the General Settings are not too crowded. If you want extra control over your row’s design, you can venture into this new tab.

Background Image – Much like Sections, rows can now have a background image. This will place an image behind the modules in your row.

Background Color – Background colors can also be applied to rows.

Background Video – Finally, video backgrounds (previously only available to Sections) can now be used for individual rows within a section.

Parallax Mode – If you apply a background image using the setting above, you can apply a parallax affect to this image. Parallax mode creates an illusion of depth by moving background image at a slightly slower speed than the speed at which you are scrolling (much like an object behind another object would move, if you pivoted around it).

Equalize Column Heights – This is a wonderful new option that will make your designs look balanced without having to worry about to amount of content in each of your columns in any row. Once this option is enabled, all rows will be “equalized” and their heights will all be made the same. Each column takes on the height of the tallest column in the row. This is especially useful when you have applied a background color to each of your columns.

Custom CSS

Much like Sections and Modules, Rows now have Custom CSS options available under the Custom CSS tab. Here, CSS-savvy developers can can do absolutely anything that is not already possible using the row design options. Using Custom CSS within a row will never be lost when you update your theme, and therefore it is a great alternatively to using a Child Theme.

Combine These Options For Some Amazing Results

When combined, all of these new row options open up some very interesting design possibilities. Let me go over just a few examples of how to apply these new settings in your new website design.

In this example above, 3 blurbs have been placed inside of a 3 column row. We have enabled to “Make Fullwidth” option to extend the row the entire width of the browser. Next we have removed the spacing between each column by setting the “gutter spacing” option to the lowest setting. Next we applied a custom background color to each column, which has been matched to the fullwidth image below it to create a beautifully seamless transition. Finally, we have enabled the “equalize column heights” option to ensure that each of our columns and their custom background colors fit together perfectly. The end result is something entirely new and refreshing.

Rows can now be used to create your own fullwidth image gallery! In this above example, we have placed 3 image modules into 2 different rows with the “fullwidth” setting enabled. Next we removed the padding from each row by setting the “padding” options to “0.” Finally, we removed the spacing between each column entirely by lowering our row’s gutter spacing setting to the lowest value. This causes the edges of each image to touch and the width of the row to extend the entire width of the screen.

The same gallery grid effect can be combined with text and image sliders as well. In the above example, we created a mix and match of image modules, image gallery modules and text modules to create gutter-less and fullwidth media display.

Sometimes your design just needs a little more room to breath. In this example, we have used the row’s padding options to increase the padding on the top and bottom of the row. This places a great deal of space above and below the blurb module, which has been centered inside of a single column.

When you add column background images into the mix, even more possibilities become available. In the example above, an empty column has been utilized with a custom background image. When made fullwidth and paired with a CTA module on either side, we are able to achieve a checkered effect that responds beautifully on mobile.

The Possibilities Are Endless

When I say that Rows have become the most versatile part of the Divi Builder, I mean it! As you begin to experiment with Divi 2.4’s new row options and expand your layout vocabulary, you will also start to unlock new and creative uses for each module. When placed inside of rows of different widths and padding, each module can take on a different personality. Together, you can begin to build a variety of layouts that are vastly superior to anything you have been able to build in the past. I hope this gives you some inspiration for your next website, and I hope you enjoy playing with Divi’s new row options! Have fun

]]>http://www.elegantthemes.com/blog/resources/exploring-divi-2-4-why-rows-are-now-the-most-versatile-part-of-divi-and-how-to-use-them-effectively/feed70Exploring Divi 2.4: Using The Divi Code Module To Integrate Third Party Plugins Into The Builderhttp://www.elegantthemes.com/blog/resources/exploring-divi-2-4-using-the-divi-code-module-to-integrate-third-party-plugins-in-the-builder
http://www.elegantthemes.com/blog/resources/exploring-divi-2-4-using-the-divi-code-module-to-integrate-third-party-plugins-in-the-builder#commentsMon, 22 Jun 2015 17:00:43 +0000http://www.elegantthemes.com/blog/?p=21045Earlier this week 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 […]

Earlier this week 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 five of this series, we will exploring the new Divi Code Module and how it can be used to integrate third party plugins into the Divi Builder.

Easily Combine Third Party Shortcodes Into The Builder

In Divi 2.4, it is easier than ever to integrate third party plugins directly into the Divi Builder. This is thanks to the new Code Module and Fullwidth Code Module. When in the past, text modules could be used to add shortcodes to the page, the module came with extra bells and whistles that were superfluous for code integration. More importantly, no method for adding shortcodes to Fullwidth Sections existed. Both of these issues have been solved in 2.4, and it’s amazing what a simple module can allow you to do.

The power of Divi comes not only from the wide array of native modules it includes, but more importantly from the builder’s intuitive layout tools. Your ability to create diverse layouts using Divi’s wide range of column structure and row options is what makes the builder so versatile.

When you consider the fact that these complex layouts can be combined with third party plugins, so many more possibilities open up. Divi comes with so much to work with, but there is no reason you can’t branch out as well.

Using The Code Module

Divi now comes with both a Code Module and a Fullwidth Code module, which means you can add code and third party shortcodes into an section type. Whenever you add a new module to a column or a Fullwidth Section, look for the new Code Module in your list of available modules.

Using the code modules is incredibly easy. It’s really just a place to plop in your shortcodes, and there is only a single text field inside the module settings (aside from the Admin Label, CSS ID and CSS Class options that come with all modules).

If you ever want to add a shortcode to your page, simple paste it into the Code Module’s text field and save.

Third Party Integration Examples

There are limitless ways that the code modules can be used, since there are so many amazing WordPress plugins out there! Just to give you an idea how integrating third party plugins can be used to expand your Divi sites, I have outlined some example integrations below.

Fullwidth Slider Revolution Slider

Using the Fullwidth Code module, you can seamlessly integrate Slider Revolution (and other popular third party slider plugins). If the Divi Slider Module is not robust enough for you, feel free to try something else. Combining Divi with other great plugins is certainly a way to take full advantage of the builder.

In this example, I have used the Slider Revolution plugin to create a new slider. This is the slider I would like to use in place of the standard Fullwidth Divi Slider.

Whenever you create a new slider with Slider Revolution, as with most slider plugins, a shortcode is generated that can be used to add your slider to any post or page on your site.

This is where Divi’s new Fullwidth Code Module comes into play. Using this module in combination with the slider’s shortcode, you can create a custom slider and enjoy all of the versatility and freedoms you have become accustomed to with Divi.

The Divi’s code module is pretty simple (that’s the point), just paste in your code into the text field and click save. That’s it!

Since we are using a Fullwidth Code module inside of a Fullwidth Section, this new slider extends the full width of the page and fits perfectly into your Divi layout. It’s hard to tell that the slider has been generated by a third party plugin at all, since it has been placed within the Divi Builder.

Fullwidth Essential Grid Gallery

Essential Grid is another popular commecial plugin that offers an alternative to the native Divi Gallery and Portfolio modules. If you are looking to achieve a style that our modules do not currently support, branching out to third party gallery plugins is worth a try! Thanks to the Code Module, adding Essential Grid to standard of Fullwidth Sections is simple.

First things first, I created my new gallery using the Essential Grid plugin. As with most gallery plugins, I am given a shortcode that can be used to display this gallery anywhere on my site. By copying and pasting this shortcode into the builder, we can add the new grid into our Divi-builder page.

Whenever you are adding a new shortcode to your page, the Code Module is the best way to do it. In this case I want my gallery to extend the full width of the browser (much like Divi’s native Fullwidth Portfolio module). Since I want it to be full width, I have added a new Fullwidth Section along with a Fullwidth Code Module. Inside the content field of the Fullwidth Module, I have pasted in the Essential Grid shortcode I copied earlier.

After updating the page, you can see that my new third-party gallery has been added to the page. It looks great in our fullwidth row since I used the Code Module and a FullWidth section, each of which contain no added styling or spacing. The result is a fluid grid that fits perfectly into the layout.

Bloom Opt-in Forms

Using the code module is also a great way to integrate our very own Bloom plugin into Divi. Bloom has various integration methods. Some options will automatically add a popup or opt-in form to your page, which makes it easy to get started building your email list. However, Bloom also offers shortcode integration, giving you more control over exactly where the opt-in form appears. Instead of adding the form automatically to the top or bottom of your pages, the shortcode can be used to add the op-in form inside the builder. Using the shortcode in combination with Divi’s Code Module, you can be more strategic about where you opt-in forms appear. You might find you get more conversions when the opt-in form is placed at certain points throughout your page.

After creating my Inline Opt-In form, I copy and paste the shortcode as we have done previously. This shortcode can now be placed inside the Divi Code Module.

This time I will be using the standard code module inside of a Specialty Section, instead of using the Fullwidth Code Module we used for the Slider Revolution and Essential Grid integration.

By placing this new section below the slider on my homepage, I can be confident that users will see the opt-in form right away. It also gives me the opportunity to support the opt-in form with some informational blurbs to the left. Using this technique, you can place individual opt-in forms anywhere on your site, tailoring those forms to the page content and you visitor’s interests.

Making It Easier To Branch Out

We like to think of Divi as a great all-in-one solution, but that doesn’t mean you can’t use third party plugins every once in a while! In fact, it’s the WordPress community and the thousands of free and commercial plugins available to it that make WordPress so great. The examples above are just a few possibilities out of thousands, so feel free to experiment!

]]>http://www.elegantthemes.com/blog/resources/exploring-divi-2-4-using-the-divi-code-module-to-integrate-third-party-plugins-in-the-builder/feed42Exploring Divi 2.4: Building Beautiful Blog Posts With The Divi Builderhttp://www.elegantthemes.com/blog/resources/exploring-divi-2-4-building-beautiful-blog-posts-with-the-divi-builder
http://www.elegantthemes.com/blog/resources/exploring-divi-2-4-building-beautiful-blog-posts-with-the-divi-builder#commentsSat, 20 Jun 2015 14:00:11 +0000http://www.elegantthemes.com/blog/?p=20898Earlier this week 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 […]

Earlier this week 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 three of this series, we will talking about how to use the Divi Builder to build beautiful and compelling blog posts.

Blog Posts Are Changing, For The Better

The story driven post is the start of a blogging revolution. Designers have been doing it for years in print media, where design programs gave them free reign over the page. Creating dynamic articles where typography, shapes and images intertwined to give each page its own personality. As the web has evolved, so have posts, transforming slowly from plain paragraphs into mixed-media masterpieces.

One of the first classes examples of a mixed-media story-driven post is the New York Time’s Snowfall article. Scrolling down this page is more than your average reading experience. Such posts take full advantage of what the computer and the browser has to offer, combining videos, images, text and interacting with visitor behavior (such as scrolling) to create a more dynamic experience.

Since then a lot of similar pieces have popped up, such as the Paul Ford’s recent 38,000 words article “What Is Code?“, which pushed the boundaries even further. These break-out pieces can be a welcomed change for your readers, and the extra time you spend perfecting the design of your articles can lead to increased vitality. This is the future of online publications, and this is how you can stand out from the crowd.

Stories Can Be Told Visually

Stories can be told in different ways. When we read a novel, we rely solely on words and our imagination. This differs greatly from the cinema, where narration has been replaced by be different techniques – a combination of words, sounds and visuals that have been carefully framed, acted and arranged. Blog posts are not dissimilar, in that they are a mixed-media canvas with tools and techniques available to them that often go unused. When you read Pitckfork’s project Glitter In The Dark, each scroll of the mouse wheel is a new frame in online flip book that pulls you forward one image at a time. When you explore Killing Kennedy by National Geographic, you are taken back in time in an surreal online experience.

These types of blog posts are now possible with Divi 2.4, as the builder has now been enabled for all post types! Using the Divi Builder, you can construct some pretty amazing things that were never possible before using the standard TinyMCE editor that ships with WordPress.

The Anatomy Of A Beautiful Divi Blog Post

A good blog post tells a story, and tells it well. To tell a good story on a visual medium such as the web, you need to think about more than just what you are writing, but also how your writing is displayed. Using a good theme with some great base typographic style is a good start, but you still need to make some decision on your own, such as the order and structure of the elements on your page.

1. Don’t Be Afraid To Ditch The Sidebar – Sidebars are becoming increasingly less necessary. Even if you have a sidebar on your entire blog, you might consider removing it from a post or two so that you can take advantage of the full width of the screen (much like the “Snowfall” and “What Is Code?” examples above). If you really want to keep the sidebar widgets on the post, but you still want to go full width, considering adding them to the bottom of your page in a 1 column row using the Sidebar module. This is possible using Divi’s new “Fullwidth” layout option for posts, found within the Divi Theme Settings box.

2. Don’t Get Too Crazy – Sometimes simplicity is your best friends. With all the modules available in Divi, it might be tempting to add a tone of stuff to your post. Consider that even when limiting yourself to basic elements, such as Text and Image modules, you can still create an inspiring post based solely on how those elements are arranged using Divi’s column layouts. The example blog posts below were created almost entirely of text and image modules.

3. Use Photos With Care – Beautiful imagery can make a post look amazing, but bad imagery can also ruin your design. If you use photos on your blog, take care to pick high quality images that have a cohesive style. Finding good photos can be a challenge, so be sure to check out our post on the subject.

4. Use Columns To Make Content Digestible – Long blog posts can be especially hard to take in when the same format is repeated over and over again (text, image, text, image, text image). It can be difficult to tell what things relate to each other, and you can be easily lost in the post. Using Divi’s column layouts, you have the opportunity to construct a layout that makes sense for the content you are displaying.

5. Be Aware Of Your Space – Going Fullwidth is a great option, but using a Sidebar can look great too. But don’t forget to consider the space available for your content based on the size of your sidebar and your website’s content width. Generally, placing text inside of a 1/4 column row might be difficult to read when you have a sidebar enabled. Try sticking to 1/3 columns and above.

6. White Space Is Your Friend – Give your images and text some room to breath. With Divi, every module, row and section has custom spacing controls in the Advanced Design Settings tab. Sometimes adding some extra space around your text can make it your article more easy to understand. Don’t worry about things being “above the fold” or you page being too long. A smart man once said, “no page can be too long, only too boring.” An effective story is intriguing, and curiosity will pull your visitors down the page naturally.

7. Marry Your Text And Imagery – In a well crafted blog post design, each piece of content plays a small part in a bigger picture. Each image should be away of the text around it. There are so many opportunities to create compelling layouts by letting your text, images and background colors play together. Notice in the post below, how the bend in the chair gives way for the bar counters to the left of them. Notice in the post above how the detailed steps to creating an especially are accompanied by instructional images to the right.

8. Using Sections Backgrounds To Organize Content – Using Sections to separate larger chunks of content is a great way to make your article more organized, much like chapters in a story.

Use Divi’s Post Title Module To Give Your Post A Unique Look

Before Divi 2.4, all posts had a uniform layout, including the post title and meta data. With the introduction of the Divi Builder for posts, we wanted to make sure that everything about your post was customizable, including the display of your standard post elements: Post Title, Meta Data and Featured Image. This is now possible using the Post Title Module.

Disabling Standard Post Title Display

When writing a post with Divi, the standard post title display can now be disabled. Once disabled, you are given free reign to use the Divi Builder to construct your entire post, including the post title.

Using The Divi Post Title Module

Once the standard Post Title has been disabled, you can use the Divi Post Title Module to automatically add a customized and beautifully-styled post title to the top of your page.

This module automatically displays important post information, such as your post title, author name, post date, comment count, categories and featured image; all the things you would normally find at the top of your post. These pieces of information can be toggled on and off, and can also re-arranged into different layouts and styles using the Post Title Module settings.

This allows you to create a completely new look for your post blog. For example, on the following post we have disabled the standard post title display in favor of the Divi Post Title Module. We set the module to display the Featured Image as a background, and also added custom text styling for the title and a semi-transparent background to the text. There are a wide array of looks that can be achieved using different combination of post title settings.

Have Fun And Start Experimenting!

I hope this post gives you just a few ideas about how the Divi Builder can be used to help your blog stand out from the crowd by building story-driven, mixed-media articles that are rarely found outside of huge online publications with big development teams. Trying spending some extra time on the design of your next post and see what happens. Trust me, your visitors will be blown away!

]]>http://www.elegantthemes.com/blog/resources/exploring-divi-2-4-building-beautiful-blog-posts-with-the-divi-builder/feed68Exploring Divi 2.4: The Power Of Divi’s Global Modules And How To Use Themhttp://www.elegantthemes.com/blog/tips-tricks/exploring-divi-2-4-the-power-of-divis-global-modules-and-how-to-use-them
http://www.elegantthemes.com/blog/tips-tricks/exploring-divi-2-4-the-power-of-divis-global-modules-and-how-to-use-them#commentsThu, 18 Jun 2015 20:07:52 +0000http://www.elegantthemes.com/blog/?p=20828Yesterday 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 […]

Yesterday 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 one of this series, we will exploring Divi’s all new Global Library Items.

The Most Powerful Part Of The Divi Library?

If you haven’t explored Divi 2.4 yet, you are probably asking yourself: “Wait, what is the Divi Library?” Put simply, it’s a new place for you to save individual Modules, Rows, Sections or even entire layouts that you have built using the Divi Builder. Once an item has been saved to the library, it can be quickly accessed from within the builder. These library items are like tools in your new web design toolkit, and can be used when creating new pages on your website or when creating new websites for your clients.

As you begin to build and expand your library, you will find that having access to these pre-made/customized items will save you countless hours of development time. But that’s just the beginning, because we have added something even more special to the Divi Library called Global Library Items, and that’s where this story really begins. When an item is made “Global” within the library, it is mirrored across all of the pages you add it to. Whenever this global element is updated, the updates are automatically pushed to each instance of the global module! If you have a repeated module or section on your site, simply make it global.

In this example, we have placed a Contact Form Module at the bottom of every page on the website, since we want potential customers to convert into leads no matter what page they are on.

If you ever want to make a change to that area of your website, you only have to update the global module once, instead of having to update a standard module in dozens of different locations.

If one day we decide to change our website’s color scheme, this global module can be updated once and the new style will be reflected on all the pages it has been added to.

It’s easy to see how using this new feature can save you loads of time.

Saving A Global Item To The Divi Library

When creating or editing a new module, row or section within the Divi Builder, you will notice a brand new save button on the bottom of the settings windows called “Save & Add To Library.” This is accompanied by the standard “Save & Exit” button on the right. When you click the “Save & Exit” button, your module settings are saved on the current page and the settings popup is closed. When you click “Save & Add To Library,” the module is still saved on your page, but it is also added to your Divi Library.

Any module that is added to the Divi Library can be turned into a Global Library Item by selecting the “Make this a global item” option while saving.

Once an item has been saved as a global item, the module assumes a new green appearances within the builder. It’s easy to know which modules on your page are global by their unique color. The settings boxes for global items are also green, so it’s always clear when you are modifying a global item.

Managing Your Global Library Items

Once a global item has been added to your library, it can be modified by editing the module within the Divi Builder, or by editing the item from within the Divi Library.

All of your library items can be managed from within the Divi > Divi Library page inside of your WordPress Dashboard. You can filter by type, such as Module, Row, Section & Layout, as well as by Global/Not Global. Select “Global” from the list of filters to get a list of all of your global items. Click the “edit” button next to any global edit to begin editing. Any changes made will be pushed to all pages using the global item. As stated previously, you can also edit global items right from within the page builder like you would a standard module.

Adding Global Items To Your Page

Once a global 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.

Standard Global Module Applications

There are so many different applications for using global items on your page. Any element that is repeated on different pages can be turned into a global item to make them infinitely easier to manage.

Centralize Your Sidebars

Do you want to add a double sidebar layout to your entire site? Turn both sidebar modules into a global module. If you ever decide to change your sidebar format or widget-ready area, just do it once and have your layout adjusted across every page on your site!

Synchronize Your CTA’s

Do all of the pages on your website contain a Call To Action Module? It’s quite common to have such modules on multiple pages to ensure your visitor always have a clear path towards conversion. If this is the case, why not use a single global Call To Action module? If one day you decide that you want your button to be a little bigger, simply adjust the font size within the global module and have your entire website update instantly!

Mirror A Custom Menu

Have you utilized our Fullwidth Menu module to create a custom navigation menu for your entire website? If one day you decide to change your website’s color scheme, it would be incredibly time consuming to have to adjust the background color of your custom menu when it has been added to every page on your site. Global modules are here to save the day.

Global library items have transformed the way the Divi Builder can be used. Divi isn’t just a page builder anymore, it’s a complete website builder.

Entire Sections Can Be Made Global As Well

Not only can individual modules be made global, so can entire sections. Using a global section, combined with the rows and modules within them, you can build and manage entire areas of your website more easily than ever before. For example, you could use the Divi Builder to create your own customized footer to be used on the bottom of all pages on your site. If you want more control over your footer, this new global section could entirely replace the standard widgetized footer and footer menu.

In the above example, the footer area at the bottom of the page was created completely using the Divi Builder! This is not the Theme’s footer.php layout. This is an example of how the Divi Builder can be used to create your own customer footer, but you can do much more than that. Turn the layout into a set of global sections and then add them to the bottom of all the pages on your site. If you ever want to edit your website’s custom footer, simply update the global section and your entire website gets updated! Using the Divi Builder in this way gives you complete control over your footer layout. You are now free create something entirely different that the standard Divi footer, which is just one of many ways that that global sections can be used to take control over your website’s layout.

Global Modules Can Be Combined With Selective Sync

Global modules get even more interesting when combined with Selective Sync. When saving a new module to the Divi Library, you can select which types of options you would like to save for the current module. You can choose to save any or all of your General Settings, Advanced Design Settings or Custom CSS.

So what does this mean exactly? Let’s say you create a new Fullwidth Slider module and save it to the library as a global module. When saving, you choose to selectively sync only the Custom CSS and Advanced Design Settings. In this case, the General Settings (which include your slider’s content, such as the title, text, and images) are not made global. When adding a new instance of this global slider to a new page, only the settings within the Custom CSS and Advanced Design Settings tab will be shared between each instance of the global module.

You can tell which settings are being shared by a global module by their tab’s color in the settings window. In the example below, only the Advanced Design Settings and Custom CSS tabs are green. The Global Settings tab is not being synced and therefore remains gray.

You can now add this Fullwidth Slider to the top of several of your pages throughout your website and all of your custom styling within the Advanced Design Settings and Custom CSS will be shared. If one day you want to adjust the size of your header text, or change the color of your slider buttons, you only have to do it once and all instances of the global module will be updated! If you want to create a truly unique set of sliders using Custom CSS, you can do that too.

At the same time, the General Settings for each of these global modules remain unique (since they were selectively un-synced while saving). Each slider at the top of each page has its own unique text and images, but the styles for each have been unified using a global module with selective sync.

This combination opens up some amazing opportunities. The same technique could be applied to just about any module on your website. If you ever want to adjust the look at feel of your entire site, you only need to adjust the styles of a few global modules, instead of having to edit hundreds of standard modules spread out across dozens of pages.

We’ve Only Scratched The Surface

Hopefully this post gives you some basic ideas about how global library items can be used. There is so much that can be done with this new functionality, and the more you use and explore the Divi Library, the more creative ways to use it you will discover. The Divi Library and the introduction of global library items are one of my favorite new features of Divi 2.4, and I think you are going to absolutely love how much time they save you!

What other implementations of global library items can you come up with? I would love to hear your thoughts in the comments. I am sure there are quite a few things I haven’t thought of myself!

]]>http://www.elegantthemes.com/blog/tips-tricks/exploring-divi-2-4-the-power-of-divis-global-modules-and-how-to-use-them/feed144Divi 2.4 Has Arrived! Welcome To The Biggest Upgrade In Divi’s Historyhttp://www.elegantthemes.com/blog/theme-releases/divi-2-4
http://www.elegantthemes.com/blog/theme-releases/divi-2-4#commentsWed, 17 Jun 2015 18:36:05 +0000http://www.elegantthemes.com/blog/?p=20720Welcome to the biggest upgrade in Divi’s history. In no product has our team put more time, effort and love than Divi, and never has a Divi update been more expansive than 2.4. This is a monumental update, including over 1,000 new module design settings and theme customizer controls, as well as an all-new fluid […]

Welcome to the biggest upgrade in Divi’s history. In no product has our team put more time, effort and love than Divi, and never has a Divi update been more expansive than 2.4.

This is a monumental update, including over 1,000 new module design settings and theme customizer controls, as well as an all-new fluid grid and a re-imagined set of flexible modules that are more versatile and easy-to-customize than ever. These ultra-customizable layouts are also easier than ever to use thanks to the Divi Library, an all new way to save, use and organize your own collection of Divi Builder layouts. Say hello to your new web design toolkit.

All of the amazing things we have added to the Divi Builder are even more wonderful when you consider that the Divi Builder has now been extended to all post types. The builder is no longer limited to pages, meaning you are free to use the builder to create beautiful blog posts too!

Of course, these few things only scratch the surface of what Divi 2.4 has to offer. There is so much to talk about, and I can’t wait to share with you all the great things we have been working on over the past year. So get comfy, grab a drink, and get ready for a monstrous post about a truly epic update!

Here is a little appetizer before the main course. To kick things off, we have created 4 brand new Divi Demos to show you just how versatile this theme has become. All of these demos were constructed by our lead designer Kenny Sing using only standard theme settings. No custom code or Child Themes! It’s truly impressive the variety of layouts that can now be built with a single theme. Without further adieu, let’s take a detailed look at the new features that made these beautiful designs possible.

New Global Settings & 100% Fluid Grid

The backbone of Divi 2.4 is its all new fluid grid and a re-imagined set of modules that are more flexible than ever. This new grid has allowed us to add some great new settings to the Divi Theme Customizer, such as the ability to define custom content widths, column spacing, menu heights, menu widths and so much more.

Choose Your Content Width

Divi’s website width can now be customized to any max-width of your choosing, making it fully prepared for the future of super high resolution displays.

Choose Your Sidebar Width

Set the width of your sidebar for pages using a sidebar page template, archive pages, category pages, and all other post types.

Adjust the Height of Your Logo

Different logos require different header heights for optimum legibility. This new option lets you adjust the height of your header so that your logo can live up to its full potential.

Define Your Navigation Fonts, Text Sizes, and Text Styles

We’ve made modifying text styles within your navigation extremely easy in 2.4. Right from inside the Divi Theme Customizer you can choose your primary and secondary navigation fonts, font sizes, and text colors.

Give Your Fixed Header Unique Styling

If fixed-navigation is enabled, you now have full control over what your navigation looks like after the user has begun scrolling. These styles can be adjusted independently of your navigation’s primary styles, all of which will be automatically transitioned as the users scrolls.

Hide Navigation Until User Scrolls

When this setting is enabled, your navigation bar will remain hidden until your visitor begins scrolling down the page. This is a great way to give full prominence to the first section on your page, such as a Fullwidth Slider or Call To Action.

Make Your Logo Centered AND Inline

Divi comes with a new Centered Inline Logo header style. This setting will automatically calculate how many menu items you have and center your logo between your navigation links.

Add Full or Semi-Transparency to Your Navigation

The Theme Customizer now supports alpha transparency, giving you the option to make your navigation bars semi-transparent. Divi automatically calculates the height of your navigation bar and adds the appropriate padding to the first element on your page so that it can overlay your page content without obstructing your text. You can even make your navigation background color completely transparent for a new unique look.

Give Your Website a Unique Touch of Creativity by Combining all of the Great New Navigation Features

There are limitless ways to combine menu colors, fonts, text styles, and layout options to create unique looking headers that were never possible before. If you are looking for a way to make each of your Divi websites stand out, you should definitely explore the Theme Customizer’s expansive set of new Header & Navigation settings.

Typography Settings

Divi 2.4 introduces new controls for the typography that can be used to adjust every part of your website, including headers, body, footer titles, footer text, navigation links, body text, and even default text styling for individual modules. You have controls for things such as Size, Color, Letter-Spacing, Line-Height, Font-Weight, All Caps, and Italics.

Define Your Column Spacing

You may want to have your column spacing be wider, more narrow, or even gutter-less based on the type of content you are displaying. Now you can set your global column spacing with the click of your mouse.

This setting also effects grid-based modules, which include Galleries, Portfolios, and Masonry Blogs.

Increase or Decrease Section and Row Height.

Along with Divi’s horizontal column spacing controls, you can also define the vertical spacing of rows and sections. If you want to tighten things up, or give your content more room to breath, simply drag your section/row height slider up or down.

New Footer Layouts & Widget Styling

Now you have 8 column layouts to choose from for your footer area, as well as full control over footer widget header and body text styling.

Button Styling

Divi now gives you full control over all of the buttons on your website. You can set global base styles, or even adjust buttons styles for individual modules. You now have full control over font, text size, text color, background color, stroke styles, icon selection as well as a unique set of controls for button hover styles.

Live Website Demo

Click the link below to see a live demo that illustrates how you can take advantage of some of Divi’s new Theme Customizer features to help make your website stand out from the crowd.

Divi Module Customizer

In addition to the Divi Theme Customizer, the Divi Module Customizer lets you set basic defaults for individual modules. You can adjust font styles and module sizes for each individual module, and have those adjustments reflected throughout your entire website. Do you want to make all of your Sliders a little smaller? Such a change is only one click away in the Module Customizer.

Without creating a child theme or writing custom CSS you now have over 200 settings in the Divi Module Customizer, such as default slider heights, default gallery hover overlay color, or default image lazy loading animation. These options are here to give you more ways to fully customize your website and save you a ton of time doing it.

Use The Divi Builder On Posts!

The long-awaited and highly-desired ability to use the Divi Builder on posts is now a reality. Because of Divi’s new fluid grid, layouts built with the Divi Builder can now be used anywhere while still retaining their design integrity. There are now so many great opportunities to use the Divi Builder to create beautiful story-driven posts on your blog.

Using the Divi Builder on posts still allows you to retain your left, right, or fullwidth post layouts. You also have the option to display your post’s title, meta, and featured image in addition to the builder content. Continue reading to find out how you can add your post’s title, meta, and featured image in more creative ways.

Fullwidth

Left Sidebar

Right Sidebar

Live Post Demos

Blog Posts built with the Divi Builder can be absolutely beautiful and captivating. Just take a look at some of the amazing posts we have been able to build, and imagine how wonderful it will be for your readers to experience such a rich and intriguing piece of content. This is the perfect way to make your online publication stand out from the crowd.

All New Row Options

Before Divi 2.4, Rows did not come with any options. Now that Rows and their column structures are fluid, Rows have been beefed up with a new set of options, making them hands-down the most versatile element in the Divi Builder. The new Row options in Divi 2.4 pave the way to a whole new generation of unique layouts that were never possible before. Take a look below to see how you can edit a row’s existing column structure, adjust its gutter widths, and even how to make a fullwidth row!

Change a Row’s Existing Column Structure

Now you can easily change the column structure of any existing Row in your layout. These Rows have their columns adjusted instantly, and the Modules within them adapt along with it, placing them into the available columns or removing them from the columns that no longer exist. Gone are the days of creating an entirely new Row and draging over all of your modules just to change its column structure!

Increase Columns…or decrease columns in seconds.

Custom Column Spacing

Not only can you adjust column widths globally within the Theme Customizer, but you can also adjust them on a per-column basis. You can even achieve a gutter-less effect by setting your column spacing to 0.

Fullwidth Rows

Divi’s new Row options also include the ability to make Rows Fullwidth. Combining Fullwidth Rows with Divi’s numerous column structures and column spacing options opens up a whole new realm of layout possibilities.

Column Background Colors

In addition to Section and Row background options, you can now give each individual column inside of a Row its own background color, background image or background video. This can be combined with Fullwidth Rows to achieve some really cool effects.

Equal Column Height Option

It is nearly impossible to add just the right amount of content into adjacent columns so that all column heights within a Row are equal. This can look tacky when adding background colors to columns. With Divi’s new column height standardization option, you can tell a row to equalize its columns heights and every column will appear the same in height automatically. This is an especially useful option when used in combination with gutter-less column spacing.

Live Website Demo

Click the link below to see a live demo that illustrates how you can take advantage of fullwidth rows and equal column heights.

Advanced Module Design Settings

It’s now possible to customize absolutely everything about the design of each individual module you add to your page. If it can be done with CSS, then it can be done with the hundreds of new design controls added to the Divi Builder. We have added countless design options across the board that let you control things like typography, spacing, backgrounds, borders, colors and so much more.

New Tabbed Settings

Section, Row, and Module Settings now have a new tabbed layout for General Settings, Advanced Design Settings, and Custom CSS. Advanced Design Settings is where you will find more detailed styling controls for each module. Check out the examples below to see just how powerful these new design options can be.

Typography Options

You now have complete control over the appearance of text in your modules. For every piece of text in a module you can adjust the font, text size, text color, font-weight, line-height, letter spacing, all-caps, italics, and underline.

i.e. Completely customize the typography of a Blurb or Slider module.

Custom Padding and Margin

Divi’s grid foundation is an amazing base for a structured website, but having control over the sizing and spacing of elements on your page is vital for achieving highly refined layouts. Sections and Rows now have adjustable padding controls, as do each of the Divi Modules.

i.e. Reduce or increase the top and bottom padding of any Slider

i.e. Control the padding and typography of Bar Counters

i.e. Increase the padding of a Call To Action to increase its height

Or Add surrounding margin to give it more breathing room

Background & Border Options

Modifying module background colors and border styles is now available right inside the Module’s Advanced Design Settings. You can even choose transparent or semi-transparent colors!

Live Website Demo

Custom CSS Options

If our Advanced Design Settings are not enough, you will notice that each Module, Section and Row in the Divi Builder now has a new Custom CSS tab that can be used by CSS-Savvy designers to directly control particular elements on the page. If the Advanced Design Settings tab doesn’t have what you are looking for, add the CSS for it here. For each module, we have broken down the structural HTML elements and given CSS input fields for each. If you want to make a customization, just add it here. No need to go through the trouble of making a whole new Child Theme.

For example, you can give an image module custom styles to make it overlap the section below it a tiny bit. This is just a single example of the infinite CSS possibilities at your fingertips!

Introducing The Divi Library!

The Divi Library is something we are extremely excited to announce, knowing that it’s going to revolutionize the way people use Divi (and build websites in general). The Divi Library is a place for you to save your customized Modules, Sections, Rows or even entire Layouts. These items can then be added directly into the builder on new pages, or when starting to build new websites for your clients. When combined with our new Advanced Design Settings and Custom CSS inputs, these saved library items take on a whole new meaning. Imagine having a folder of Divi Modules and Sections that have each been customized by you for a specific type of website. The next time you start a similar project, load up the Library and start building. In many ways this forgoes the need for a Child Theme, since your custom CSS and design tweaks can be saved directly into the Library items and accessed instantly wherever you take your Library.

Save Sections, Rows & Modules

The moment we’ve all been waiting for—Divi now lets you save not only layouts, but also individual Sections, Rows, and Modules. Just like layouts, you can export these for use on other sites as well.

Save & Add to Library

You can now choose to save any Section, Row, or Module for later use. Library items can also be made Global, allowing a single module to be mirrored across multiple pages. You can even Selectively Sync certain settings when saving to the Library.

Selective Sync

As you can see in the image below, settings can be selectively synced when saved to the Library. This means you can save any combination of the General Settings, Advanced Design Settings, and Custom CSS tabs into individual Library items. Any tab that is not selected will receive default theme values when you add it to a layout.

i.e. Only save the Advanced Design Settings tab of a fullwidth header module so you don’t have to remember the exact height, text styles, button styles, or background overlay, every time you add a header to your layout. This saves a ton of time and makes consistency a breeze.

Global Library Elements

Yes, this is as amazing as it sounds. The option to have a single module in multiple locations throughout your website is finally here! When you save a Global item to your Divi Library, that item (whether it be a Section, Row or Module) will be mirrored on each page that exists. When you update the item in one location, it gets updated everywhere else instantly. If you repeat any elements through your website, such as a Call To Action Module in your footer, turn it into a Global library item. If you every want to update the module, do it once instead of dozens or even hundreds of times.

Multiple Elements All In Sync

Global elements can be added in multiple spots within a layout or on completely separate pages. This can be great for something like an “About Us” text block that exists on multiple pages. If you need to update your info, just do it once!

Saving Global Elements

In addition to being able to save a Section, Row, or Module, you can also save it as a global element from the ‘Save & Add To Library’ button.

Global Modules

Global library items are the perfect way to handle elements that are repeated across your website. You can create a single Module, save it as a Global Library Item, and then add it anywhere on your site. If you wish to update this module, it’s simply a matter of changing it on one page and the rest will update automatically.

i.e. Use a global Call To Action on multiple pages. Updating the title, text, link, or styling is now a one time task.

Global Rows & Sections

If you have a grouping of modules or rows that you want to use throughout your site, you can even save Global Rows and Sections.

i.e. Create a Global Section, add it to the bottom of every page of your site, and use it as a custom built footer.

Global Items + Selective Sync

As mentioned before, when saving an element you can choose which settings you want to save. This is especially useful with combined with Global elements. For example, only saving a Global items’s Advanced Design Settings will allow each instance to have different content, while at the same time sharing the Global / Selectively-Synced design settings.

For example, you could create a Global Fullwidth Header Module and selectively sync only the Advanced Design Settings. This Global Module can now be added to the top of all of the pages on your site, and only the Advanced Design Settings will be shared in each instances of the Module, while the General Settings will remain unique (un-synced). You can add unique header titles to each page, but have all pages share the same custom font controls and colors. If you ever want to adjust the font used for all of the global headers on your site, simply edit the Global Fullwidth Header Module’s Advanced Design Settings once and all of your pages will be synced!

Live Website Demo

Code Module (Regular and Fullwidth Modules)

The Code Module essentially gives you a blank slate for adding code to your website. You can add code into any column with the Regular Code Module or use the Fullwidth Code Module that is not bound by column or row widths.

i.e. Place third party shortcodes from plugins such as Revolution Slider and Essential Grid into a Fullwidth Code Module.

FULLSCREEN Header

Divi’s Fullwidth Header Module can now be made fullscreen with additional options for adding images, logos, call to action buttons and more!

24 Layout Possibilities

With different combinations of content orientation and image placement, there are over 20 different layouts you can create that are all completely responsive. You can also choose not to enable fullscreen mode and the header will take on the natural height of its content.

Live Website Demo

Click the link below to see a live demo that illustrates how you can take advantage of the Fullscreen Header Module to give your visitors a stunning greeting to your page.

Post Title Module (Regular and Fullwidth Modules)

When using the Divi Builder, you are presented with a blank canvas. This is a great feature of Divi, but it also makes it difficult to add dynamic elements onto the page such as the page or post title, meta data, and featured images. Now that you can use the Divi Builder on posts, it is crucial to be able to easily add that kind of info into your layouts. This module lets you do all of those things with as much control as you have with any other module.

9 Layout Possibilities

Combining the Post Title Module’s options for text placement, featured image placement, and text orientation, there are 9 different layouts that can be used to display your title, meta, and/or featured image.

Enter To Win A Free Membership!

We are so excited about Divi 2.4 that we feel like celebrating with an Elegant Themes Giveaway! Enter below for a chance to win a free Elegant Themes membership or account upgrade.

What could be better than Divi 2.4? How about getting Divi 2.4 for free! We are giving away 10 free memberships and accounts upgrades to 10 lucky winners. You can enter the content below for a chance to win! The more tickets you enter into the raffle, the better your chances of landing the prize.

Divi Is More Than Just A Theme

As we release Divi 2.4 into the wild, I couldn’t be more happy of the product we created, nor could I be more happy with the amazing Elegant Themes team that created it! What’s most rewarding, however, is watching the Divi community thrive and knowing that we are able to help web design agencies, freelancers and website owners build even better websites for themselves and their clients.

This is just the beginning for Divi. We have come a long way, but every day we are overflowing with ideas on how to make it even better. I can’t wait to get back to work! Stay tuned

]]>http://www.elegantthemes.com/blog/theme-releases/divi-2-4/feed1220Divi 2.4 Beta Testing Will Open Next Week! Apply To Become A Tester Todayhttp://www.elegantthemes.com/blog/general-news/divi-2-4-beta-testing
http://www.elegantthemes.com/blog/general-news/divi-2-4-beta-testing#commentsThu, 28 May 2015 14:00:25 +0000http://www.elegantthemes.com/blog/?p=20046Last week we gave you a closer look at some of the spectacular things we are working on for Divi 2.4. This isn’t your average update, it’s the foundation of our future product line; packed with enhancements born from multiple labors of love. Long story short: all of the cool new things we have been […]

Last week we gave you a closer look at some of the spectacular things we are working on for Divi 2.4. This isn’t your average update, it’s the foundation of our future product line; packed with enhancements born from multiple labors of love. Long story short: all of the cool new things we have been building (Divi, Extra and the Divi Builder Plugin) are all part of the same project, and Divi 2.4 is the first manifestation of that hard work. The breadth of this update is humungous, and for the first time we have decided that a pre-launch beta testing program is in order!

What is the Divi beta testing program? Put simply, we will be inviting a small group of Divi power users to test out the theme for 1-2 weeks before it is launched to help us catch any bugs that have slipped through the cracks and assist us in considering the implication of new features.

To apply for the beta testing program, please fill out the form below. We can’t invite everyone, but we would like to get a solid group of people with a wide range of Divi experience to put this thing to the test! If you are accepted, we will send you more details early next week with instructions on how to download the theme and report issues to our team. We appreciate the help!

]]>http://www.elegantthemes.com/blog/general-news/divi-2-4-beta-testing/feed148Divi 2.4 Will Be The Biggest Update In Divi History, And We Are Calling For Your Suggestions!http://www.elegantthemes.com/blog/theme-sneak-peeks/divi-2-4-will-be-the-biggest-update-in-divi-history-and-we-are-calling-for-your-suggestions
http://www.elegantthemes.com/blog/theme-sneak-peeks/divi-2-4-will-be-the-biggest-update-in-divi-history-and-we-are-calling-for-your-suggestions#commentsWed, 13 May 2015 14:00:02 +0000http://www.elegantthemes.com/blog/?p=19653Last month we gave you a Sneak Peek of our upcoming Divi 2.4 release. In that post we hinted at some of the huge features we are working on for Divi 2.4, including the all new Divi Library and Advanced Module Design settings. In fact, Divi 2.4 (despite what its version number might suggest) is […]

]]>Last month we gave you a Sneak Peek of our upcoming Divi 2.4 release. In that post we hinted at some of the huge features we are working on for Divi 2.4, including the all new Divi Library and Advanced Module Design settings. In fact, Divi 2.4 (despite what its version number might suggest) is turning into the single biggest Divi update we have ever made!

One thing we neglected to mention in our last post is that, in addition to big improvements to the Divi Builder, we are also loading the WordPress Customizer with a ton of new options. These options are going to give you a whole new level of control over your website. We have already integrated some pretty impressive stuff, and we are just warming up! Take a glimpse below at just a few of the new options you can expect in version 2.4

We aren’t stopping there (not even close), and before we do, we want to make sure that we have thought of absolutely everything. That’s why we are looking to the Elegant Themes community for suggestions. We want to know what kinds of tools you are dying to have. What customizer options would be useful to you? What can we do to save you time when starting your next Divi build? Just to clarify, we are looking for ideas related to WordPress Theme Customizer settings, which are design-focused settings that affect your entire site (such as the options showcased above). The more great ideas we receive, the more amazing controls we can add.

So please drop your suggestions in the comments and help us help you. We can’t wait to hear all the great things you come up with, and most of all we can’t wait to get back to work on Divi 2.4. I hope you are as excited as we are!