Welcome to Day 3 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


Today we are happy to release our first ever free Divi extension. This extension, which comes in the form of a WordPress plugin, can be installed alongside Divi to add a brand new feature. This is the first of many extensions that we plan to release during our Divi 100 marathon, so if you enjoyed this one then be sure to follow along while we continue our journey to day 100!

While talking with the Divi community, we often hear requests for additional blog layout options. Even though the Blog Module is quite versatile, especially when used with a creative variety of custom advanced design settings and CSS, there are certainly opportunities to expand. We decided to create a free Divi extension that does just that—offers a completely new and modern look for your Divi blog. It’s called the Article Cards extension, and once enabled it completely transforms your Blog Grid Module with a single click!

article-cards

This new custom design is a bit more bold, which is a nice contrast to the simple and subtle design of the default Divi grid blog module. This version features bigger and bolder text, taking the post meta information and transforming each piece into strong graphic elements. You will also notice that it comes with some some really cool hover effects too! If you are getting tired of your blog’s current look, this just might be the refresher you have been waiting for 🙂

Downloading & Using the Article Card Plugin

This Divi Article Cards extension comes in the form of a WordPress plugin, and it can be installed just like any other plugin. First, download the divi-article-cards.zip file by clicking the download button below. Once you have finished downloading the file, locate the divi-artice-cards.zip file in your computer’s downloads folder.

Next, log into your WordPress website and navigate to the Plugins > Add New page. Click the “Upload Plugin” button at the top of the page and upload the divi-artice-cards.zip you just downloaded. Once uploaded, click the “Active Plugin” link to active the extension.

Once activated, you will notice that a new menu item has been added to your WordPress Dashboard called Divi 100. This is where all of your Divi 100 extension options will be located. As you follow along with Divi 100 and install new extensions, each one will show up under this menu where it can be easily managed.

install-1

Click the “Divi 100” link to open up the Divi Article Cards options panel. Here you will find 2 settings. The first one turns the custom blog design on and off. Once enabled, all Divi Blog Modules will have their grid layouts transformed. The new layout only applies to blog modules that have the “Grid” layout enabled. The second option lets you customize the blog’s accent color, which is used as the background color for the category and date elements.

install-2

That’s it! Click save and check out your brand new Divi blog. Don’t forget to make sure that your blog module has it’s layout set to “Grid,” otherwise the custom design will not be applied. The new layout is beautiful, responsive, and works great with all custom post types.

article-cards

Download The Article Cards Extension

Divi Extensions are released under the GPL, which means you can use them for free in both personal and commercial projects! By using ElegantThemes.com and our products you agree to our Terms of Service.

Plugin Updates & Bug Reporting

Like you, we love to tinker, tweak, and improve the things we create. So if you notice any issues with the article card plugin not working as described you can report them via the github repo we’ve set up for it. This will be the quickest and easiest way for both us and you to keep up with any issues you have related to this plugin.

Additionally, when changes are made they will be immediately available at the repo for download. You will also be able to create your own branches/versions of the plugin to fit your specific needs–if you so choose.

We hope you enjoy this Divi freebie and we look forward to sharing many more with you in the coming days of the Divi 100 series.

divi-2-6-logo

Divi 100 Day 3

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN”).jCountdown({timeText:”2016/9/7 7:00:00″,timeZone:-8,style:”slide”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:false,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:true,displayHour:true,displayMinute:true,displaySecond:true,displayLabel:true});});Learn More About Divi 3.0

.section-header{width: 520px; padding: 50px 40px 20px; margin: 100px 0; text-align: center; color: #fff !important; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #6c2eb9; background-image: url(http://cdn.elegantthemes.com/blog/wp-content/uploads/2016/04/divi-100.jpg); background-repeat: no-repeat;}.section-header h2{margin-top: 0 !important; color: #fff;}.section-header strong{color:#fff;}.section-header img{margin-bottom: 10px;}.section-header:after{position: absolute; bottom: -16px; left: 50%; margin-left: -16px; width: 32px; height: 32px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content:”; background: #6c2eb9;}.divi-demo-link{border-bottom: 4px solid #00d5b5; margin-top: 15px; border-radius: 4px; transition: all.5s ease-in-out; display: block; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; text-align: center; color: #1C695D; background-color: #00efcb;}.divi-demo-link:hover{text-decoration: none; background-color: #2CFFDF;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE; text-decoration: none;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}

The post Free Divi Blog Extension Gives The Divi Blog Module A Brand New Look appeared first on Elegant Themes Blog.

View @ ElegantThemes

Leave a Reply