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!
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.
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.
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.
Download The Article Cards Extension
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 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.
The new article cards have only applied to the last 2 blog posts. Posts previous to that don’t work. Is there a reason for this? Some of the posts have been written and published since the release date. Is it only effective on the posts written on the date of plugin install onwards?
Will the free plugins that are offered during the 100 day marathon always be available to download? … or do I need to make sure I keep up and download as you go along?
Thanks, what I’ve picked up so far are awesome by the way!
Hi, I’ve been trying to install this to use with Divi (standard WP install hosted by GoDaddy), but keep getting the following message – “Unable to create directory uploads/2016/07. Is its parent directory writable by the server?”
Any thoughts on why & how to fix?
Having an issue with this specific plugin… every time I try to install it – I get this connection has timed out – firewall blah blah blah. Never had any problem with anything else – just this. I am doing a fresh install of DIVI in a new site and all the extensions are there, Hamburger Menu, Back to Top – but Divi 100 module is not listed and I can’t get the article cards to upload at all. Help?
I managed to get the module Divi 100 to show up but still no article cards.
Here’s a response from support from ET support
Faycal Boutam
Hi there,
The Divi 100 Article Card Extension has been updated to fix compatibility issues with the new version of Divi. Please delete the plugin and re-download and install it from here: http://www.elegantthemes.com/downloads/divi-100-article-card.zip
It must be a month now since this extension broke – could someone please reply
Any fix? Really was hoping to use this. :/
Any timeframe for when this will be fixed? It seems to have been broken for a good while now – not a great look when it has been used on client sites.
Waiting for the fix!!!
Was awesome until it broke
Hi,
After the latest update this plugin is broken
Hi,
After the latest update this plugin is broken
Hi,
This layout is great, but you say in the description that it is available for custom post type and I don’t see how to use it with CPT.
Is it possible to give us a way to use this layout with custom post type?
Thanks in advance,
Aude
The plugin is now broken after updating to Divi 2.7.7 anyone find a solution?
Same thing has happened to me. It was working beautifully before! I’ll have to deactivate it now and see if a fix comes.
This is beautiful! I’ve always had to tweak the blog module’s css to hide the excerpt. (which is difficult because there’s no style on the excerpt) This is much much nicer.
I was hoping that it would add an option for custom post types in the blog module, or any module.
Im working on a page that requires an ‘Events’ feed in one row, preferably in 4 columns.
The custom post type (events) is already built. I just need a way to display it nicely. I was trying the blog module or maybe a way to swap the portfolio module to use my custom post type. no joy.
I hope this option will be available soon, as divi is my FAVORITE and only theme I use. You’ve made my life as a designer easy peasy.
How would one go about editing the text colors for this?
Great Plugin, really love it. But i am having some trouble with displaying the excerpt. The text is too long. And i cannot click on the title as it disappears…
Any idea?
I have the same problem. Trouble with displaying the excerpt. The text is too long. And i cannot click on the title as it disappearsβ¦
Otherwise it is a great plugin. Thank you guys.
Same issue. I tried reducing font and line space in CSS. Tried editing child functions.php but the code I found is for et_exerpt_length. For now I think I have to force the excerpt font way down to keep my titles from running off the top. Ideal would be to be able to shorten the character count down below 180 or so. Love the look of this, even on mobile. Great work, Andy.
https://github.com/andyhqtran/Divi-100-Article-Card/issues/29
After the latest update this plugin is broken
Hi, why in localhost my post look like this. It’s not work properly..
https://snag.gy/2f6EyG.jpg
The plugin is now broken after updating to Divi 2.7.7
Mine also never looked like demo in the this post. No dates shows up like the demo, no Author etc, Also the category is not aligned as the demo. I had to fudge increase the Blog title height before I can get the category to line up with the image.
Do you know if Divi will be introducing a way to customize the Category pages like they can in the Extra theme? It is my biggest frustration and I almost went through the hassle of switching themes, but I am really holding out. As a blogger it is so essential that we be able to customize the category landing pages =(
Hi,
Are you able to make the blog layout page one post wide instead of having 3-4 posts running left-to-right?
I’d like to have larger post thumbnails and them be centered on the page.
I would truly appreciate insight from anyone on this.
Thanks,
Brandon
I put a comment on here yesterday about this addon not working with the latest Divi update but it got deleted. Why was that?
That is great…but…if I click on “author” to check all articles of some author ..its open in old crappy layout. How can I manage “author” page with Article cards plugin?
Hi! It is a very nice solution to blog pagges and I’m using it on 3 or 4 websites!
But today, after upgrade Divi from 2.7.5 to 2.7.6 something goes wrong and broke the layout of the cards…… removed the padding of text area
Any tips on how to fix?
Same issue for me.. My site look like this pict
https://snag.gy/2f6EyG.jpg
Same for me updating to the latest 2.7.7
Any ideas on a solution?
Same issue for me. The divi blog plugin is not working properly since the update :/
Same problem here!
How to fix this problem?
Same issue going 2.7.6β¦
I’d love to give this a try but it won’t upload. I get this error message at 40% in the upload:
This site canβt be reached
The connection was reset.
Try:
Reloading the page
Checking the connection
Checking the proxy and the firewall
ERR_CONNECTION_RESET
I have tried disabling ALL plugins and security apps on my PC. Still no luck.
Same here, still waiting for an update on this…
I’ve implemented this on a project I’m working on, and it sure did make my blog module section pop. Looks much better now.
Would really like more immediately useful stuff like this,.
Thank you so much! I’ve been trying to figure out how to code something like this for weeks. Love divi. Question though, it there anyway to get more than 3 columns? Also, is there a way to constrain the feature image area? I have a ton of audio and video format blog posts in a site I’m developing and they look strange with all different sizes using this format.
I’m absolutely loving it! Looking forward for all the new stuff that’s coming up!
Hi there,
Awesome news! Looking forward to Divi 3.0
I have a concern though — there’s no mention of loading speed anywhere. Will Divi 3.0 be slow as a result of adding in too many features?
The Yoast SEO plugin is an example of software evolving into bloatware. From recent reviews, people are abandoning Yoast in favor of other SEO plugins.
With Divi however, it’s not going to be as painless switching to another theme.
Don’t get me wrong. I love the Divi theme. In fact, it’s the ONLY theme I use for my customers these days. Hope Divi 3.0 will be as fast as Divi 2.0, if not faster.
Cheers,
Jax
Speed-wise, I tend to think of Divi as, uh, forward-looking — to a day when we all have burly computers and gigabit connections.
Hi Jax, I’d recommend checking out today’s post for a sneak peek of Divi 3.0. I think you’ll find that because of the way we’re building it Divi 3.0 will be lightning fast!
Mobile performance improvements would certainly be much appreciated.
Nice plugin..
But, in my case, the date not shown, even i make sure “show Date” set yes.
why?
Hi
This is amazing, just what i needed on my new Divi site I’m developing.
great timing and thanks for the gifts π
Still the same issue today as when it was released:
“The connection was reset
The connection to the server was reset while the page was loading.
The site could be temporarily unavailable or too busy. Try again in a few moments.
If you are unable to load any pages, check your computer’s network connection.
If your computer or network is protected by a firewall or proxy, make sure that Firefox is permitted to access the Web.”
Everything else has downloaded & installed properly and functions well. This one just won’t. Any suggestions? Using a PC. Even tried uploading files via ftp with no luck.
I love the idea of this but I cannot get it to upload in WP. I keep getting an error message that says problem loading. I have tried with multiple computers with no luck. I have been able to upload other plugins that have been posted. Not sure why it isn’t working with this. Hopefully I can get it figured out.
hi team,
I’ve added this layout. Exactly what i wanted. One small issue. When I have more then 1 category selected to the post, it gets messy in the blue category box. How can this be solved?
How can I apply the article card display to archive and search results pages? Since I’m using it (and love it) on the blog page it would be nice to be able to keep the look and feel consistent on the search results and archive pages.
Alternatively, I’ve been searching high and low for how to style/customize the article and search results pages, along with the sidebar and its widgets within Divi and/or the Divi Builder. Can you let me know if there is any information on those topics anywhere?
Amaizing Feature!
I was get PHP-errors all over the place, when trying to install this blog-plug-in.
Then I noticed my fist download from this page, was named:
Divi-100-Article-Card-master.zip
After I tried the exact thing again, re-downloading, it was called:
divi-article-cards.zip
…and that worked … weird, or a change from you guys coinciding – doesn’t matter, installed fine now π
Thanks for all the freebies by the way, and thank you for your hard word answering this massive stream π
Elegant Themes Rock – The Article cards are visually appealing and the hover motion is a great to capture the attention of the reader. It is also easy to change the color. Nice look
blockquote, div.yahoo_quoted { margin-left: 0 !important; border-left:1px #715FFA solid !important; padding-left:1ex !important; background-color:white !important; }
Same issues here… using a Mac and when I try to upload the plugin I’m getting the error:
“This site canβt be reached
The connection was reset.
Try:
Reloading the page
Checking the connection
Checking the proxy and the firewall”
Has anyone figured out how to fix this?
I installed the plugin and it’s fantastic.
Just a problem: how can I change the category text size ?
I would like to choose a smaller size of the UNCATEGORIZED text.
I like it, but would prefer it if we can control the display a little. I.E. In Settings allow us to change font size and control the height of the cards to allow them to be equal heights. This is something the Blog module needs desperately. Having to hard code this, which will cause issues when updates come through.
This looks awesome. In the video it shows the Divi100 showing up under the Divi plugin, but it doesn’t do that for me. Also the file is only called divi-article-cards, not divi-100-article-cards. Any suggestions getting this to work? I already installed and activated the plugin It just isn’t showing up any where on my sidebar for me to get it to work.
Same issue as others. When attempting to upload the plugin I receive a “connection was reset” error in FF. Attempted on two different sites (same host account) with the same result.
Hi,
When you plan to add the another blog style to Divi ?
Like this : http://elegantthemes.com/preview/Extra/category/standard-blog/
I think this style essential for Divi. I read the support forum, so many users want to use this style on Divi.
What do you think about this?
Thanks.
You guys are simply the best. Looking forward to Divi 3!!!
When I tried to install from FF Mac, it can’t upload, always refresh connection message, so can’t install it.
Great feature!
What if my blog post is under two categories? Which category will be shown? It should be the primary category but seems like it’s not the case for now.
I have the same problem, I’m using the latest relase of the plugin. It would be cool to choose which category will be visable (first/last in hierarchy or primary for example). It’s don’t look fine at my site for now.
In my case the Day and Month stay back to Categorys card, without circle card. I try the css
.divi-100-article-card .et_pb_blog_grid .article-card__month {
margin-top: 10px;
display: block;
font-size: 0.70rem;
text-transform: uppercase;
}
but won’t work. My Date format is j, M Y
blockquote, div.yahoo_quoted { margin-left: 0 !important; border-left:1px #715FFA solid !important; padding-left:1ex !important; background-color:white !important; }
Elegant Themes Blog | Lefteris commented on Free Divi Blog Extension Gives The Divi Blog Module A Brand New Lookbody {line-height:normal;font-family:sans-serif;background-color:#ffffff;}a {color:#2980b9;}h1 {font-weight:normal;line-height:normal;}h2 {line-height:normal;}h1 a {text-decoration:none;}p.padded {font-size:85%;}blockquote {clear:both;}.btn-secondary {text-decoration:none;color:#FFF;background-color:#aaa;border:solid #aaa;border-width:5px 10px;line-height:2;font-weight:normal;margin-right:10px;text-align:center;cursor:pointer;display:inline-block;border-radius:15px;margin-top:10px;}.comment-body {font-size:110%;padding-bottom:10px;border-bottom:1px solid #ddd;}.alignright {float:right;margin:0 0 20px 20px;}.alignleft {float:left;margin:0 20px 20px 0;}.aligncenter, .alignnone {margin:20px auto;display:block;float:none;width:auto;}#content {max-width:600px !important;overflow:hidden;}.utils {margin-top:65px;margin-bottom:65px;}.reply {margin-left:45px;line-height:normal;}.reply a {text-decoration:none;}.reply small {font-weight:normal;font-size:12px;}.foot_wrap {font-size:12px;text-align:left;width:600px;line-height:normal;} Elegant Themes Blog
Lefteris added a comment in reply to Free Divi Blog Extension Gives The Divi Blog Module A Brand New Look. In my case the Day and Month stay back to Categorys card, without circle card. I try the css
.divi-100-article-card .et_pb_blog_grid .article-card__month { margin-top: 10px; display: block; font-size: 0.70rem; text-transform: uppercase; }
but won’t work. My Date format is j, M Y Reply to this email to reply to Lefteris. Please note: Your reply will be published on Free Divi Blog Extension Gives The Divi Blog Module A Brand New Look. You received this email because you’re subscribed to discussion of Free Divi Blog Extension Gives The Divi Blog Module A Brand New Look. To no longer receive other comments or replies in this discussion reply with the word ‘unsubscribe’. Sent from Elegant Themes Blog. Delivered by Postmatic.
Aww, I was so excited until I saw that it only effects the blog page. Really need this as a module to be put on other pages. π
I’ll try it today on my Blog, Thanks!
Divi 100 option not showing up on chrome or FF
Tried the github and it crashed the site
problem here uploading plugin too from ff.
hello i uploaded the plugin but I’m getting error messages when it comes to the install… It does not install
This does look awesome, and I know I’m a day late. But I did use the first page builder, so today I will implement this one.
I always tend to lag…but this will be done today!
Thanks!!!
I crashed my whole site and uploaded the wrong file. Now I can’t get into it at all.
So happy with the plugin! Its my first website with WordPress and I’m so glad that I bought the Divi theme! I am a beginner but I’m learning fast!
Everything is very good explained.
I only had troubles to find out how to post the blogpost. But I found a few good tutorials on youtube.
Thank you guys for the amazing Divi!
blockquote, div.yahoo_quoted { margin-left: 0 !important; border-left:1px #715FFA solid !important; padding-left:1ex !important; background-color:white !important; } Unsubscribe
Inviato da Yahoo Mail per iPhone
Might sound like a stupid question but how do you set the blog module layout to Grid?
No DIVI 100 menu appears…
You guys rock!
This just looks beautiful on my site – big thanks!
Thanks for sharing new plug-in which will come my site with brand new
feature. will definitely use it in my site.
Hi, looks great!
First time of using Divi, I am using “Featured Images” in posts rather than embedding them in the text. The images are coming out huge at the top of the story once it has been clicked on. Any settings to control these?
Also, even though a grid, all the “boxes” which contain the stories to be clicked on are not uniform, so the alignment is a bit out. Any way of changing this? Many thanks! Keep up the great work!
It doesn’t run. In my dashboard i cannot find the DIVI 100. There was no error in the upload.
So it might be a number of things, but the most obvious one to check first is that you’re running Divi with or without a child theme. If, for instance, you are running Extra or any other theme besides Divi it will not show up. It will install and activate fine, but not show up.
Thank You, in the moment I#m using ePhoto. Can I work inside with the plugin?
I haven’t tried that particular setup. I’d create a test version of your site and give it a go to see!
I don’t have the “DIVI100” after uploading the plugin π
Thanks again, for the awesome extension. Very eager about next surprises.
The tilte is blod only when we enable the extension. Is there anyway to fix that please?
I am sorry,
I am lifetime ET member, but did not understand HOW could I downloadd this extension.
I see 6 ET plugins on the list + obsolete ET Builder. No Article Cards either within ET list of plugins or at WP plugin list.
After I completed the CTA forma, I’ve been notified, that another person uses this email.
So, HOW?
It’s only available in this post. You should see a large purple call to action button above. That will trigger the download.
Really. Thanks, Nathan. I don’t understand, how did I miss it.
Hi! I have problem with displaing date. When i enable show post date and category, date is not displayed. When i choose only date, it is diplayed on wrong place and without styles, like now.
Good idea and nice layout. But don’t tell me for each addition we have to add another plugin ?
My wordpress sites are allready full of plugins !
Great plugins!
This is what I am looking for, recently I use another plugins now with the Divi Card plugin I can have more great website and beautiful design.
Thank u guys. Keep on the good work.
Just installed the extension and while it works fine,however, I still would prefer the masonry look of Extra if it was available in Divi.
Hello,
I ams using Czech language and it shows me date like this: 2 VN but I would like to see ΔVN (add one more letter to shortcut months). For exmaple if you have use in english, you have MAY but I have only MA.. Is possible to change that?
Just installed this on my blog, but the result is not like in the demo.
The day date is loaded after the ‘read more’ (lΓ€s mer) link. When I disable that function, the day is still placed below the picture. Not where it should be.
And even if I have disabled comments, the line ‘0 comments’ appear.
Thanks! This is pretty great. I’d love it if during the 100 days we get an extension that allows custom post types to be used in blog and slider modules.
For what it’s worth, I LOVE the idea of functionality added via plugins, as opposed to being added to the Divi builder/theme. This way, I can add only the additional features I need on a per-website basis. Too many themes get bogged down by adding every feature users request to their core. Like a lot of web developers, I use Divi for a variety of reasons. But reason #1 is always: Divi is lean and fast! (P.S. Maybe Extra functionality could be integrated into Divi similarly?)
Hi. It looks awesome but I can’t use a blog page. I created a page I used the blog module wit grid view on chrisberber.com/blog and it doesn’t show me anything. If I use the preview I see the posts with the pluging style. If I click on the preview button it shows me a page with the next text: You don’t have permission to see this page. What can I do to fix it? Thank you guys.
Geat free plugin! I truly now think “the gift that keeps on giving” never applied to anything as much as it does to Elegant Themes. If this 100 days campaign is an elegant scheme to make me praise ET every day for 100 days… IT’S WORKING!!
You are so wonderful! Love Divi more every day π Thank you so much for making my job such fun.
Thanks again! Divi Goodness is Divi Greatness! π
Hello, I canβt get this plugin to upload. In Safari it starts then just freezes. I tried in Chrome and it says βThis site canβt be reached.β
I had the same problem. I think the issue is the extra _MACOSX directory included in the zip file. If you unzip the file and then ftp just the divi-article-cards to the plugins folder, that worked for me.
I manually installed it and I’m getting a fatal error warning. Host is godaddy too. Can you walk us through the install?!
Hey Donna, could you elaborate more on the the steps you took? As well as other plugins that you have installed? Cause there could be possible conflicts.
On GitHub I saw that someone posted this doesn’t work on GoDaddy sites. My sites are hosted at GoDaddy, so I guess it’s a problem with my host.
Yes, so am i. So we are out of luck?
Same problem here.
I just did the basic: PlugIns, Add New, selected the zip file and hit install. It looks like it starts and then nothing happens. I disabled all of my plugins and tried it again and nothing happened. Thanks. I looked in GitHub and saw someone else with the problem and they manually added it via ftp, but I have no idea how to do that.
Donna, this is the EXACT same problem I’m having. I’ve tried in both Safari & Chrome with the same results in each as you are having. I’ve also tried it on two different sites that I manage on two different servers. I, too, have disabled all plugins and tried it. I’m using the newest version of WordPress & Divi.
Thanks!
Very nice..
Thank You
Love how automatic/easy to install this was. Looks great!
Hey Justin, glad to hear you were able to install it smoothly!
Don’t work with accent π
et i dont see the date
π
Lovely! Thanks so much for this option and the 100 Days. π
You’re welcome Susan! 96 more days of awesomeness to go!
Since Divi is not compatible with other WordPress themes, and since Divi 3.0 will be React based, why don’t you make Divi 3.0 independent of WordPress so we can get rid of that elephant?
Hey! Divi is a theme for WordPress and the Divi Builder is a plugin that allows you to build out your page on most of the WordPress Theme out there! Even though Divi 3.0 is React based, we’ll still be using a lot of the futures of WordPress!
I just installed it and it looks great. You did it again! Thank you guys.
You’re welcome Manuel! Glad that it’s working great on your end!
Great stuff! Just installed it for a little “pick me up” on my blog.Can’t wait to see what else ET comes up with.
Thanks Annemarie, stay tuned for 96 more days of awesomeness!
Now it works it is great.
Thaks Uwe
You’re welcome Uwe! Glad it’s working out!
This is great!! Will there be further development of this app to be more customizable? More like Essential Grid?
Hey Dustin, we’ll be updating the plugin along the way. To be notified of updates, you’ll need to check out/follow our repo on GitHub! https://github.com/andyhqtran/divi-100-article-card
Hello Andy,
Thanks for this cool piece of code.
One thing missing : There should be a setting for the excerpt length in words or lines.
Felling like the 100 days wait will be easy…
Hey HyperTiti, if you’d like this feature to be added, I’d recommend creating a ticket on our GitHub repo! https://github.com/andyhqtran/divi-100-article-card
Thanks Andy.
Ya, +1 for that. Otherwise it is awesome!
Not sure why but when I am trying to upload the zip folder i get an error message, any ideas?
Hey Anja, it might be an issue with your installation. What you can do is connect to your site via FTP and upload+unzip the plugin there and activate it in your dashboard.
Looks great here: http://www.howtoloveyourneighbor.com/blog/ Thanks for all the Divi extras!
I am going to say it does not look the perfect though due to the location of the date covering up words on the featured image.
You’re welcome Amy! Looking great!
Hi,
I’m newbie on wordpress and divi theme.
What is the blog module ?
For setting the layout to βGridβ.
Thanks
Hey Mike, Nathan provided a video in the blog post that demonstrates how to setup the plugin.
Awesome plugin, already have it running on a live site.
Thank you for this present!
You’re welcome Verdi! Glad to hear that you’re running it!
wow I love this!
Hey Amy, I’m glad you love it!
Hi there, This looks great and works well. Have to agree with others though that this would be better as an added feature to Divi. One of the main reasons for using Divi is to reduce the number of plugins, which you promote.
Great way to bring in the new version – looking forward to day 96 – Thanks
Hey Peter, you’re definitely right. However, at the time our priority is to get everything in Divi 3.0 up and running first and these extensions are optional freebies that I can install.
I agree that I want to install less plugins, but I do worry about theme glut slowing down a wordpress site.
Instead of showing the category, it displays “read more”! (but not for every article…).
Hey Florian, that’s possible! However, I believe that it’ll look out of place if it’s put before the content.
Wow! All I can say is “Thank you!” It is absolutely gorgeous. I just installed it on my blog and it looks amazing!!
You’re welcome Laura, glad that it’s working out for you!
I just downloaded and tried – I love it. The only problem is that it makes the rest of my website look outdated.
I can’t believe the resources ET keeps making available. I’m a lifetime member and can’t believe what good value this has been. Thank you.
You’re welcome Robin! Don’t worry, we’ll release more content to give your Divi site a fresh new look!
Hallo,
this plugin will not install in my Divi site.
PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature
Have you an idea.
Uwe
Pleeeeease guys, make it available for Extra, it looks amazing and Extra is very much blog focused, so an add on like this seems essential to me!
Hey Sebastien, we’ll add support for Extra later on. Follow the repo to get updates! https://github.com/andyhqtran/Divi-100-Article-Card
That is great to know..
P.s. I have a question.
When Divi Blog module will support Custom Post Type? I have to use seperate plugin to display custom post type in blog module as the Divi blog module can’t see Custom Post Type. This would be great. Many normal and free plugin does the job but Divi?
Hey Emily have you seen the premium CPT Layout Injector plugin for DIVI yet and the premium Advanced Custom Fields module plugin for DIVI?
You can get them from elegantmarketplace.com
Hey Emily, the plugin checks for .et_pb_blog_grid and rewrites the DOM. As long as your custom post type still uses the Blog Grid module, it should work.
Hi Andy. If you ever use Divi. Blog module not support Custom post type. It only see the normal post type but not custom post type. If you not get it, I am asking how to display custom post type using blog module. Please read carefully you don’t have to rush to answer.
Loving this plugin! Thanks so much π
You’re welcome Michelle, I’m glad you’re loving it!
This is GREAT! Is it possible to add the year to the little circles in the upper right?
Hey Patrick, at the moment that’s not possible. However, if you follow our GitHub repo, there will eventually be an update that adds that option in! https://github.com/andyhqtran/divi-100-article-card
Thank you very much!
It looks great on my testing ground: https://qmm.nl/blog/
Hi Nick,
A nice plugin if not using option date if not doing error
Hope you can solve my 3 little points :
1-Setting fate format : F , j , Y otherwise if j F Y date is on the bottom
2- Ok for short month but for long month out of the cercle
3-And for french calendar using “Γ©” like fΓ©vrier, dΓ©cembre …oups!!
you can see on http://www.taichi.taoproject.fr/blog/
Best regards
Den
Hi Dentaoman,
where did you set the date?
I’m having similar issues in German.
Regards,
Oliver
Olivier,
I configure M j, Y on divi themes options, better than F , j , Y, because it trunks the month, now only problem with FΓ©vrier, AoΓ»t and DΓ©cembre
Regards
I’m soo freakin’ excited about this! I’ve downloaded the freebies from Day 2 and Day 3 – was there a download for Day 1 or was that day just for announcing everything?
Hi there. I had commented earlier that I was unable to get this plugin to upload. I’ve tried two different sites on two different servers. The comment was initially approved, but now it is gone. I also see that some other folks complaining of a similar issue have had their comments deleted, as well.
I am totally grateful that y’all are offering this to us for free. I know it’s a FREE product, so I know I have no room to complain. I just really, REALLY want this to work because it looks phenomenal. Is there a possibility you could offer some assistance on this or tell us why it’s not working for everyone?
Thank y’all!
Hey Amy, can you provide the steps to reproducing this error? If possible, creating a GitHub ticket via our Repo. https://github.com/andyhqtran/divi-100-article-card
Looks good and is much appreciated. But like others have said, I hope this and any other new plugins will be built into Divi 3 as I don’t want to have to install a bunch of plugins for every new site I build. Thanks!
WOW !!!! Thank you sooooo much π
Will this work with another theme using the Divi Builder Plugin?
Hey Lawrence, the plugin is made specifically for Divi since it’s modifying the blog grid module’s DOM. However, there is a possibility that it would work on themes using the Divi Builder Plugin! Doesn’t hurt to try, and if it doesn’t work out you can submit a request via our GitHub repo to have it added as support. https://github.com/andyhqtran/divi-100-article-card
Great one, thank you very much.
Is there a possibility that the cards have equal heights?
Hey Erkan, the blog grid uses a masonry style so it stacks accordingly. If you would like equal heights as an option, I recommend opening a ticket on our github repo. https://github.com/andyhqtran/divi-100-article-card
Thank you for all the goodies over the 100 days! This one unfortunately wasn’t so helpful to me as it really needs a Featured Image to look nice, and the use of native featured images causes so many design/page headaches across the site.. Too bad.
Glad you’re loving it! The extra spacing that gets applied when you don’t have an image is to prevent the date from overlapping text and the category from disappearing.
Quite dissapointed that this does not work with EXTRA…
Hey John, no worries! I’ll add in Extra support at one point! Just make sure to follow the GitHub repo! https://github.com/andyhqtran/divi-100-article-card
I love it!
Hey Monica, glad you’re loving it!
It is nice to see great updates rolling out.
Even @ this rate we will 2-3 dozen updates done on the website. Buy any means can you roll out just combined upgrades . It is hard to maintain.
100 videos to see and learn are fine , but updating all of it & maintaining into several plugins or files.
Just keep a check , Have a awesome day
Hey Amit, these plugins are freebies that you can simply add on to your website. If we were to pack it all into one, then that means you’d have to load a bunch of files just to serve one purpose! The best way to keep up to date would be to checkout the Repo and hit “Watch” which would notify you of any release via Email.
https://github.com/andyhqtran/divi-100-article-card
Has anyone worked out the optimal pixel size for the feature image?
The pictures I made for facebook posts look the best as the feature image. They are 1200×627.
Oh Divi.. how I love you! We’ve been waiting for this. Looks great!
Haha thanks, glad you’re loving it!
Cool plugin! really enjoying it. One issue only, on a child-theme (multisite installation) it does not work. It will only work if the “main Divi theme” is the one active. Anyways, thank you. can’t wait for 3.0
We actually added in Divi Child Theme support. If it’s not working for you, I’d recommend reporting it via our GitHub repo so one of us can take a look at it!
https://github.com/andyhqtran/divi-100-article-card
Thank you for that great plugin! π
It works great unless you change the date format from ‘M j, Y’ to something else like ‘j M A’ in the Blog Grid module.
Anyway, once you know that, everything works fine!
Love it.
Hey Frederic, I’m glad you’re loving it! The way the plugin works is it reads the DOM and replaces/moves around text that was rendered. That means that it was made to read the day and month in a specific order using RegEx. We’ll add in support to change the formatting at one point, so much sure to follow the repo! https://github.com/andyhqtran/divi-100-article-card
Hi Andy,
I’m not sure if this is related to the date issue, but on my website http://www.rutenfest.com the post is corrupted:
https://www.dropbox.com/s/7tcnuwf4xufnvzl/Screenshot%202016-06-02%2023.11.32.png?dl=0
Best reagards,
Oliver
If you did this CSS:
.divi-100-article-card .et_pb_blog_grid .article-card__month {
margin-top: 10px;
display: block;
font-size: 0.70rem;
text-transform: uppercase;
}
This would clean up font issues.
Thanks!
That solved the issue with the date, but the category is still not translated / corrupt:
https://www.dropbox.com/s/oqkq9l2pfkt53yt/Screenshot%202016-06-07%2016.50.35.png?dl=0
I am pretty sure I am going to be surprised during all these 100 days!
This looks great, however, for me there’s one problem. The upper part of the post where the date is is simply too large, that is, the space above the featured image. It uses too much screen real estate.
It’s a shame because otherwise it looks super.
If you use text in that featured image the date area can be a messy ready. You could CSS that area out, but the date may just be too important to not display.
I will have a look, guys , you are doing a great work
One problem. I love the look of the grid blog with this extension. Unfortunately, however, the upper section with the date and blank space below it is just too big — it uses too much real estate.
It’s a shame because the overall look is great.
Hmmmm…. it didn’t work for me.
Hey Patty, could you create an issue and add the steps you took on our GitHub repo? If you’re not familiar with GitHub, feel free to post the steps here! https://github.com/andyhqtran/divi-100-article-card
For some odd reason, mine won’t upload. It keeps telling me it’s a directory. How can I get it to work??
I’ve installed it on my homepage and even though its at the end of a long affiliate marketing page, it simply makes my page look divine…
Hey Haroun, I’m glad that it made your page look divine!
There are no words for this great and generous work you are doing. 100 + 1 thanks.
Hey Alberto, thanks! Really appreciate your feedback!
I’ve tried to upload this to two different sites on two different servers. No luck. It keeps giving me an error of “This site can’t be reached. The connection was reset.”
Any ideas? I’ve wasted about an hour so far trying to figure out what’s going on.
Hi,
I installed the Divi 100 Article Card and it did not create the Divi 100 section. Is there a separate process for this? I run WP on a Managed Go Daddy site.
Tried to change the card color but could not.
.divi-100-article-card {
background: #fcf9d8 !important;
}
How would I change the background color please?
Hey Al, .divi-100-article-card {} is a class that gets applied to the
tag. To change the background color of the card, you’ll need to be more specific. Check the code below...divi-100-article-card .et_pb_blog_grid .article-card {
background: #FCF9D8;
}
Awesome! Doesn’t appear to handle multiple categories well, though. Blog posts with more than 1 categories have their categories overlap. Fixing it via CSS was not obvious to me:
.divi-100-article-card .et_pb_blog_grid .article-card__category
Hey Logan, I’ve pushed an update on our GitHub to fix the category overlapping, and the download link should be updated with the newest version.
Just play with it. It is working in the two cases : default post or divi post. When I pass my post to the divi post, it seems not working. Someone have the same issue?
Hey, can you elaborate on what you meant by “pass my post to the divi post”?
If I try to use the Divi builder for my post it doesn’t work.
So this won’t work with the Divi Builder using Extra Theme?
At the moment it checks for Divi themes and Divi child themes, however we’ll make an update adding support to Extra eventually. I recommend following our GitHub repo to receive notifications on future updates! https://github.com/andyhqtran/divi-100-article-card
Just the Divi theme based on my look at the code for this plugin.
One word: WOW π
Hey Fred, glad the extension made you WOW.
That was three words Fred π
Will this be available in the user download area in the plugins section? I don’t need it right now but may want to use it in the future. If I save it to my hard drive it will get forgotten about and just collect digital dust.
It will always be available here in this blog post.
Just a suggestion….
While we are all thankful for your offering us 100 free gifts…the best gift being Divi 3.0!…it’s going to be difficult for Divi members to find what they are looking for down the road if they have to scroll through 100 blogs to find perhaps a single plugin or layout when needed. Is there a chance, since we are at the beginning of this, that an index page can be created that we could bookmark for future reference which would aggregate what you are now offering us? (Title only, perhaps, rather than a title and blog excerpt which is typically found when searching through a blog…the point being that everything is seen in one glance.) Perhaps call the index something other than “Divi 100” for an easier way to find the aggregate page? (I, for one, will never remember “Divi 100” months from now.) Thanks for considering this!
Hey Sharon, we will be adding all the resources to the Divi Resource repo via GitHub. If you would like to recieve notifcations on each Divi resource added, you can hit “watch” button.
https://github.com/andyhqtran/Divi-Resources
To receive updates on this plugin specifically, you can check out it’s repo and follow that for update notifications!
https://github.com/andyhqtran/divi-100-article-card
This is perfect. Thank you!
Great! 70 sec. and it works.Thanks.
Hey Thomas, glad that you’re enjoying it! π
Question about Divi 3.0… is it going to mean a lot of CSS modifications to my existing sites built with earlier versions of DIVI?
Is the new theme going to be released at September 6th? I counted how many days left.
Interesting.
Would be worth exploring the relationship beteen the Divi plugin v the Divi Theme…..and how to make the individual posts (and the page they are displayed in) look nice WITHOUT resorting to using builder elements to hand-craft each post.
Maybe this is where Extra comes in?
very nice, but is it possible to enable or disable on the blog module? I use the blog module in several places on my website I would like to use the article on some of my blogs but not all
Hey Paul, at the moment there’s no option to specify a page. However if you want to disable it on a page, what you can do is create a Code Module and add the following code to it.
<script>jQuery(document).ready(function ($) {$(‘body’).removeClass(‘divi-100-article-card’);});&/lt;script>
Sorry about that, looks like code didn’t render properly.
<script>jQuery(document).ready(function ($) {$(‘body’).removeClass(‘divi-100-article-card’);});</script>
Hi Andy,
Thanks for the reply, I will try that out later on my website. Looking forward to all the future goodies.
Great ! Very nice and cool stuff ! Thank you …
Just a question : are all these extensions, plugins, layouts, and others gifts you propose along these 100 days will be included into DIVI 3.0 ?
Hey Remi, all these resources are separate from Divi that you can install on the side. However, we do plan on integrating our popular resources straight into Divi.
The effect looks great … awesome job on the front end!
If I had any feedback at all, I don’t think this warrants another top-level menu option in the WP admin. Is there some reason why it was built that way, rather than as a sub-menu under Divi, or as a tab under the Divi Theme Options?
It was built this way to make it clear that the options relate to something separate from Divi.
Great!!! I’m already using it on one of my client’s page!
Hey Jere, glad to hear that you’re already using it!
It will be great if it works with divi builder.
Hey RafS, Richard is correct. At the moment, it only checks for the Divi Theme, however we’ll be adding support for the Divi Builder and Extra eventually! Follow our repo to get future updates! https://github.com/andyhqtran/divi-100-article-card
The plugin at the moment checks to see if the DIVI theme is active or the menu option does not show up. You can easily check to see if the active theme is Extra,but the extension does nothing…
This is great…
But I think it is not the correct direction, or at least is not the direction that I hope you to take in some point.
I could implement custom css and js (in a form of plugin or whatever) to change any current divi module, but what us (developers) really want is an easy and standard way to add new modules to divi.
Something like the way you add new modules to visual composer.
Hope that you take this as a constructive opinion.
Regards
Hey Paulo, we’re currently working on developer docs that will be released in the near future to help developers create extensions for Divi.
Originally these add-on’s were intended to be added via an article tutorial, but we thought it’d be much easier for our users to install it as a plugin.
Well put Paulo, I’ll await as well their response to your inquiry.
+1! Especially for Extra
I love it! Already used it π Thanks guys, super smooth new look!
Hey Jamie, I’m glad you love it and were able to install it successfully!
Thanks, Andy. It looks awesome but can you tell me how to manage how categories are displayed?
http://screencast.com/t/NhCwYBBe
The second category on the first post is obscured on my staging site. Thanks!
I have the same question…you can see the way it overlays one category on top of another on this page: http://www.marcyrequist.com/blog
Otherwise, great plug-in…thanks!
Hey Ron, I’ve updated the plugin with the fix! You can redownload the plugin from this post.
So if anyone has this plugin installed (I haven’t yet), how does it get updated? Does the ET Updater include updates for this (and other “Divi 100” plugins that are hopefully to come) or do we have to keep an eye on a certain page somewhere and manually update?
Awesome…thanks!
Wow. Waiting to test the latest additional and improvements of Divi 3.0
Hey Nimitz, only 97 more days! But in the mean time, we’ll be having more resources like this to give your Divi a boost!
Just installed and noted a bug – if I have the date set to j M Y, the date number goes missing and only shows the month.
Tried that github link to report bugs and it goes to a 404 page π
Sorry, it wasn’t set to live yet. Should be now though.
Thanks Nathan! π
This is cool and awesome. Thanks a lot. Where would Extra be after Divi100 marathon is over?
I’ve set a post picture and was expecting it to be displayed in the grid layout, but it’s not. Do any other settings have to be applied?
Hey Falco, do get the image to display, you’d need to set it as the “Featured Thumbnail”.
Hey Andy, it a “Features Thumbnail” the same as the featured image I can add when writing a post?
Andy Tran, you are something else, this is awesome and great. But are we not neglecting Extra so far π
Wow you guys really raise the bar – often! Thanks for your generosity.
Simply fantastic!!
Thanks!! friends
Hey Hector, glad that you’re loving it!
This is simply fantastic! to try immediately π
Thanks Fabio, hope it’s working out great for you!
Very nice plugin.
But it would be nice still to have a little excerpt visible and when you hover mouse it would make shadow/popout/move something.
Hey Marializ, the design was intended to hide the excerpt until hovered over.
It looks great, thank you!
Why is this extension for DIVI Only??
What code makes it so different that it can only show up in DIVI and not EXTRA??
It rewrites Divi’s blog grid module DOM. Which is just different enough from Extra’s that it will not work with both.
I just noticed the freebie from yesterday’s post can no longer be downloaded. Does that mean that I’m going to miss out on the freebies you guys are going to be posting on the weekends during this 100-day thing? Saturdays and Sundays are the two days a week that I try *not* to use a computer in an attempt to keep my sanity…
The download is still present and Nick and Nathan have said the downloads will be available always – I still see it as a download?
It’s still there. Easy to miss though.
Here’s the link –> http://www.elegantthemes.com/downloads/divi-landing-page-kit.zip
https://github.com/andyhqtran/Divi-Resources/tree/master/Divi%20100
You can find it there.
Thank you.
No freebies were removed. Simply visit yesterday’s post and click the download button to download the layout pack. These downloads will always be available here on the blog.
Wondering this myself. I did not receive an email about yesterday.
Nice extension to give a boost to blog layout
Thanks Kiran! Glad that it’s working out on your end! Feel free to report any issue on our repo is you find any issues! https://github.com/andyhqtran/divi-100-article-card
Finally! changes to the blog modules!
Hey Amenwolf, glad that it’s working out for you! Stay tuned for more Divi awesomeness!
If I know for sure that I’m getting Divi 3.0… do I need to download all these freebies? Will they be included or are they actually extra features?
Thanks so much… really excited about this stuff!!!
These freebies are standalone goodies. They wont be part of 3.0.
So far so good!!
Hey Emily, glad it’s working out for you! Feel free to report any issues that you have on our repo. https://github.com/andyhqtran/divi-100-article-card
This must be the best 100 days in row ! Gonna play with this right now, thanks.
You’re welcome Kjell! Stay tuned for 97 more days of awesomeness!
Looks great! It has a bit of a bug with the category display on some modules – but it looks fantastic.
Hey Andrea, we have updated the plugin and you can redownload it from this post or from our GitHub repo.
You can download by pressing “divi-100-article-card.zip” on the page.
https://github.com/andyhqtran/divi-100-article-card/releases
Thanks Andy – I tried to install another update and it 404’d me … maybe was old already. But this link above good as newest version always up top.
Please feel free to report any bugs here: https://github.com/andyhqtran/divi-100-article-card
I don’t github but I can’t figure out why the card shows comments count when comments are disabled in every possible place and we’re running the Disable Comments plugin just to be sure π
Found that sucker, not a card problem, more of a “Kim” problem.
I apply in my website and it is amazing. Very easy to use it.
Thank you-
You’re welcome Francisco! I’m glad that it’s working out great for you!
WoW truly AWESOME !
Hey Pierre, glad you’re loving it!
Hey there Andy,
Nice layout,, however, I’m really looking for the blog module layout to be row wise and not column wise. Any suggestions will be reallllly a great help.
Thank you!
Elina
This is a feature for which many of us have been waiting for. And I have a question: Will this plugin be already included in Divi 3.0 so that we won’t have to install a separate plugin?
Not sure. But if it is included all you’ll have to do is deactivate this plugin. Super quick and simple.
I really love this new format guys!
One question. This whole DIVI 100 thing…. is it the DIVI whole platform (will it all work with EXTRA) or is it specifically for the DIVI theme moving towards 3.0?
I find myself confused between the two sometimes….. top work… can’t wait till tomorrow!
This series is focused on Divi. However, almost everything in it will be applicable to Extra since they share the Divi Builder. That said, this extension and possibly a few others will be exclusive to Divi due to the slight difference in the two that makes it compatible with one and not the other.
YES!! It looks great
Thanks Richard! Hope the plugin is working out great for you!
Question: Will this work with Extra? Or is it Divi exclusive?
This one will only work with Divi.
Nathan – I hope you’ll do some quick tips – or a whole Divi Nation podcast on Extra. I’m a bit in the dark about why or when to use it. I get that it’s a magazine layout — but somehow I’m missing a clearer picture of it. I hope you’ll spotlight it a bit more. Do that ET “Ta Da – here’s Extra — you know you want it baby, and here’s why!” kind of thing that you do so well!
I am personally working on a few projects with Extra right now and I’m keeping track of everything I’m doing along the way. I hope to have some Extra specific content ready in the near future. Hang in there!
I’m in the same boat Karen. Extra was a confusing release for me. The only reason I want to use Extra is because of the blog layouts that are not in Divi, but with Divi 3.0 coming, I think I’ll stay put.
Hey Mike, I’m also working on several Extra extensions that I’ll release in the future!
1000% DIVI Exclusive for now.
Lovely! (first post) π
Cool!
Thanks Andy Tran
Hey Vanutama, you’re welcome! Hope the plugin is working out great for you!
Wow! this plugin looks great! But, no support for Extra?
Will all of the 100 days of Divi be for Divi only?
Grrr, spent 1/2 hour now trying to get this to work. Please state in the post somewhere this won’t work in Extra.
I agree it’s silly and self-defeating. Time is precious. Think I’m going to have to dump Extra. Seems to have been a quirky experiment that takes a back seat.
Almost every day of Divi 100 will related to Divi, Extra and the Divi Builder equally (such as yesterday’s Layout Pack). Also, when Divi 3.0 launches, so will Extra 2.0 and Divi Builder 2.0 along with the new visual editor π
This particular freebie only works with Divi, but that wont always be the case.
Wish I hadn’t swapped over to Extra now. Did so for the category layout options. But it doesn’t seem to be front and center of Elegant Themes mind. Perhaps removing Extra might leave you with less frustrated customers. Just because you can doesn’t mean you should.
I agree, this should work on Extra, its a god damn news theme.
Hello! I’m excited for all this goodies especially because I’m new to the ET community. However I am a tad concerned, and I can see I’m not the only one, that Extra, the reason why I signed with ET in the first place, is being left to itself. I ‘d love to be reassured about its own development. I’m building two brand new websites around it and it would be frustrating to put time and effort only to see the theme disappear behind Divi. I understand Divi is the diamond of ET, and I’m eager to put it to work, but right now I’ve dived into Extra and need to be reassured about its future.
Thanks !
As a humble user, I would recommend using Divi only. Make a commitment to Divi. Allow yourself to focus on Divi, and you will be rewarded. Thank you for Divi.
All of the layout packs we’ll be giving away during the Divi 100 series will be usable on Extra as well as Divi. We’ll also be publishing builder centric tutorials that should be things you can do with Extra or the Divi Builder Plugin just as easily as with Divi itself.
This particular extension is exclusive to Divi but that will not be the case for all of them.
No problems there. Just use Divi π
Same question here. Do these extensions work with Extra as well?
Good question. On my test server the menu option shows up on DIVI, but not EXTRA for this extension