Content Intense Demonstration
You can think of Content Intense as an enhanced Blog module. It displays your posts and pages excerpts in a variety of available new ways. Plus, you get lots of customization options!
Content Intense is designed to work in a single row/one column format. Using « Specialty Sections » in Divi is not recommended with this module.
With that in mind, let’s say that Content Intense is both simple to use for beginners, yet very powerful for designers who learn how to use the full potential of all the settings. Like a game of chess, if you will.
To get you started, the demos in the first section on this page are styled using Content Intense’s native module settings. Most of them are the default settings, but some of the demos in the first section take advantage of basic adjustments.
In the second section, you’ll see a few examples of what you can do with just a bit of custom CSS beyond what Content Intense already provides! The second section also has a link to a free download of the custom layouts. For more info, please visit the Content Intense documentation page.
Explore Content Intense Possibilities
You’ll also want to visit the Content Intense plugin highlight from the Elegant Themes blog.
The Atlas style for Content Intense features a vertical, 3-column layout. Atlas starts with the featured image (thumbnail) at top, the author’s avatar, meta data, content and then the « Read More » button.
Meta data content and styling are fully adjustable.
This example has “Show Comments” turned off, along with a custom meta data separator. The “Read More” button has custom text (« View More »), and is positioned in the center. The date is shown as “time ago” instead of an actual date.
The Alps style for Content Intense features a horizontal, 1-column layout. Alps starts with the featured image (thumbnail) at left, then meta data, content and Read More button. This layout alternates with each row on desktop. The featured image is always on top when viewing on mobile devices.
Meta data content and styling are fully adjustable. The “Read More” button is positioned to the right in this case. The “Advanced” tab in the module will allow you to further style that text.
The Himalayas style for Content Intense features a 3-column layout. Himalayas starts with the featured image as the background, then the title, meta data, content and Read More button as a padded overlay on top of that.
Meta data content and styling are fully adjustable. This example has “Show Comments” turned off. The date is shown as “time ago” instead of an actual date. In this example, the “Read More” button is positioned in the center.
The Rockies style for Content Intense features a vertical, 3-column layout. Similar to Atlas, but with a more modern design.
Rockies starts with the featured image (thumbnail) as the background. The date is in the top left corner. The rest of the meta data, title, content and Read More button live within a container that moves up as you hover. Here, we use the word “in” as the meta data separator instead of the default « / » separator. With this layout, it works really well. The comments count is in a speech bubble, which actually links to the comments section of your post.
As always, meta data content and styling are fully adjustable here.
The Andes style for Content Intense features a vertical, 1-column centered layout with a max width of 800px. Andes starts with the featured image (thumbnail) at top with the author’s avatar and name. It has a bottom-cropped featured image to give the experpt a panoramic feel. Categories and post date are highlighted with borders under the content using the color you set for the meta text in the module. The design finishes with the post date on the bottom-left and comment count on the bottom-right.
The Everest style for Content Intense features a vertical, 3-column card layout similar to Atlas and Rockies.
Everest uses the featured image as a background that slowly slides left on hover. The meta date and comment bubble have transparent backgrounds, with a comment count above the speech bubble on hover. The excerpt area features the author avatar and an ellipsis indicator at bottom to signal interaction, and has a slightly reduced opacity that expands upwards on hover.
We’re sure that Content Intense will provide fresh-looking, modern layouts for you.
Using Module Styling
Adding Custom CSS
The stylists at Superfly have been hard at work coming up with custom styling for Content Intense that top-notch website designers can truly appreciate.
The Content Intense demos in this section have additional custom CSS applied to them to enhance effects that are outside the native settings.
This time, Atlas comes with the border under its title that expands on hover.
In this case, we have Alps rising up and throwing a bit more of a shadow on hover. Subtle, but potent. The kind of micro-interaction effects that modern sites are looking for.
Alps – Dark
The second iteration of custom Alps give us a deep blue (yet pleasant) background.
This concept of Himalayas gives us a darkening of the background on hover, while still allowing the text to keep the brightness it deserves.
Here’s another Himalayas idea. We’ve added a really cool offset effect that takes the text content a bit to the right and down some. This in itself is great on mobile devices, but on hover you get even more of the offset effect.
Even More Styles and Layouts Coming Soon!
Like what you see so far? We’re only getting started! Content Intense is sure to be an awesome tool in your Divi arsenal!
If you’re interested in the custom effects in this second section, you can download our custom JSON layout file and import it into your pages or posts.
First, download the ContentIntense.json file by right-clicking on the « Download Styles » button below, then choose « Save Link As… ». Note that this is a layout file to be imported into a page or post, not a library item.
To load the layout: Create a new page or post, then enable the Divi Builder. Then click on the Import & Export button in the Divi Builder header (the up/down arrows icon), click on the « Import » tab, locate your ContentIntense.json file and click « Import Divi Builder Layout ».
You can then choose to « Save to Library » to create a library item so that you can make changes and/or have this layout available across your site without needing to import the JSON file.