As soon as I tried out the Divi theme I knew that it would be the WordPress theme to beat in 2014 and boy… was I right.
I can tell by the number of Divi sites I see, the number of members in the Divi users Facebook group and the number of Divi related questions I get asked that more and more people are using this fabulous theme.
With so many Divi users out there I thought that the time was right to pull together all the Divi related help, advice and inspiration I’ve found or been introduced to and put them all together in one grand and glorious post.
So who’s using Divi and how are they using it?
These sites all run on the Divi theme, they are all drop-dead gorgeous and they are all ram jam full of ideas and techniques that you and I can use on our sites.
Geno Quiroz has a site packed with features and subtle customisation… check out that top nav.
David Blackmon has a mouth-watering site that will make you feel more than a little peckish.
Melissa Love gives us a masterclass in the use of whitespace and subtle colour combinations.
The CONDIVISO team greet us with an absolutely stunning video… and I mean stunning.
Rick Tolis has a site that is absolutely and completely… adorable.
Martin Mosley is hoping to take you back, back, back in time.
Damian Lewandowicz will treat you to a little bit on the side… menu that is.
Melissa Love looks as though she is trying to lead us all up the aisle… in such a delightful way.
Jason Cyr mixes black and white with colour and treats us to awesome rollover effects.
Danny Brown has a top graphic that perfectly matches the name of his site.
Robin Frank shows you how clean and simple can also be spacious and stunning.
Stefano De Prophetis creates movement with a stunning top image complete with parallax effect.
Dennis Brown has gone all retro and the result is gorgeous… absolutely gorgeous.
Antony Warhurst takes us back to school with a fixed background to scroll over.
If your site is running on Divi and you’d like to be included, just contact me and let me have a link to your site. If it cuts the mustard I’ll add it to the Divi hall of fame.
And yes I do know that Melissa Love has two sites in there… but she is rather special.
Elegant Themes resources
If you’re having any problems setting up or configuring your Divi theme the first place to look is in the Divi Theme Documentation.
If you can’t find an answer to your problem there then you can check out the Elegant Themes support forum in the members area and see if anyone else is having the same problem.
Because of the sheer volume of queries, it can take a little time to get an answer from the support forum so always check out the documentation first. It saves you time and you become familiar with the material available.
- Elegant Themes Divi theme documentation
I published a post last week titled Divi theme: the Best Documented Theme on the Web and that documentation is awesome.So make sure you check out the text documents and watch the videos if you want to cut down the learning curve when you start using Divi or when you have a particular problem.
- Elegant Themes support forum in the members area
If you can’t find what you’re after in the Divi theme documentation then head over to the Elegant Themes members area.Once you’ve logged in you can look through the support tickets to see if your problem has already been solved or open a new ticket if you can’t find an existing answer.
My Affiliate Links Disclosure
Hi everyone. Just to let you know that many of the links on this site are my affiliate links. What that means is that if you click one of them and buy something… I get a commission. It doesn’t cost you anything extra so I hope that you will use my links.
Divi users Facebook group
If you don’t like the idea of looking through the Elegant Themes documentation or opening a thread in the ET forum then you might like to try out the Divi users Facebook group.
The group was created by Eileen Corrigan Lonergan and currently has almost 800 members.
The Group posts questions and shares solutions related to the Divi theme for WordPress. The Document Section of the group also has a large collection of frequently shared CSS and code.
You’ll find all sorts of people in the group with both coding and designing skills and all willing to share their code and creativity.
This Group posts questions / shares solutions regarding the Divi theme for WordPress. Please check the Document Section for frequently shared CSS and code.
Good Citizenship is the motto here. Give a little and you will get A LOT.
Thank you for being here.
Eileen Corrigan Lonergan
Divi child themes
If you plan on making a lot of code changes to the default Divi theme then you should consider using a child theme. That way when you update your theme only the core theme is updated, not your child theme, and you won’t lose all your changes.
For a more in depth look at why you should use a child theme see Why you should be using a Child theme by Nick Roach over on the Elegant Themes blog.
There are three ways you can create your Divi child theme: you can create your own, use a ready-made child theme or use a plugin.
Which method you use depends on how confident you are with coding and how much time you have, but all three methods will give you a child theme.
- Create your own child theme
If you like the idea of creating your own child theme then you need to know the rules and protocols that all child themes must follow. This post by Nick Roach of Elegant Themes will lead you gently through the process: How to create a Child Theme - Use a ready-made child theme
My good friend Brad Dalton is a Genesis themes developer who has just discovered Divi. Genesis is the #1 theme framework for WordPress themes so Brad knows all there is to know about child themes.The first thing that Brad did when he started working with Divi was to produce a Divi child theme, which he is sharing with us. You can download Brad’s child theme via this link Child Theme For Divi by Elegant Themes – Free Download
- Use a plugin to create your child theme
As with most things WordPress related you can use a plugin to create your Divi child theme. Here are two that you can try out.The first is a dedicated Divi child theme plugin Create child themes of Divi easily with a free plugin! created by Luis Alejandre over at divi4u.
The second is a general plugin Orbisius Child Theme Creator that allows you to create child themes from any theme that you have installed on your site/blog, not just Divi. It was recommended by David Patel who has used it to create child themes.
The plugin gets a 4.6 out of 5 rating over on WordPress.org.
Creating a child theme when performing adjustments to your theme’s code can save you a lot of future headache. Child themes allow you to make changes without affecting the original theme’s code, which makes it easy to update your parent theme without erasing your changes.
Change the Divi footer links and style the social icons
I’ve given this a separate section because I get asked about it so often.
The footer links are the “Designed by Elegant Themes | Powered by WordPress” links at the bottom of this site and the social icons are located to the right of these links.
You may want to change these links and style your social icons, but there’s no obvious way to do it and even if you know where to look… it’s not easy.
Fortunately Genesis developer Brad Dalton has written a post giving step by step instructions on how to both “Change the Divi footer links” and “style the social icons” Divi by Elegant Themes: Change Footer Links & Style Social Icons.
By default the footer.php (the file you have to modify) contains links for two items: “Designed by” and “Powered by” and Brad shows you how to add a third link.
One final thing: make sure that you backup your footer.php file before you start playing with it… just in case.
If you didn’t already know, Divi is a new parent theme created by Elegant themes which is their most flexible theme.
I was asked for instructions on how to change the footer links which I’ll show you how to do in this post.
Brad Dalton – WP Sites
Add the Divi Pagebuilder functionality to posts as well as pages
I’ve had a lot of people ask me how to add the Divi Pagebuilder functionality to posts as well as pages but unfortunately it doesn’t come as standard with the Divi theme.
I like to keep my posts simple with just text, graphics and a few boxes and blockquotes so I don’t miss the PageBuilder on posts, but for those of you who do, here is the good news:
I currently know of two methods that allow you to add PageBuilder functionality to posts as well as pages: add code to your functions.php file or use a plugin.
- Add code to your functions.php file
Dan Mossop, one of the code gurus over in the Divi users Facebook group, has published a post, which gives code to add to your functions.php file in order to add PageBuilder functionality to your posts.Head over and check out Dan’s amazing code via this link Using the Divi Page Builder on Posts
- Use a plugin
Laterna Studios have recently released a plugin to make the page builder available on post types of your choosing. The plugin offers manual selection of the post types on which you wish to use the Divi PageBuilder.You can download the plugin via this link Laterna Studios pagebuilder on posts plugin
I asked Dan Mossop what the difference was between his code and the Laterna Studio’s plugin and this was his reply:
The main difference is how you add page builder support to a post type. With the plugin, you can select the post types you want to have page builder support on, while my code automatically detects and adds page builder support to any post type which could use it (i.e. the post type uses the main editor box).
The other difference is obviously whether you install a plugin or copy some code into your theme (or child theme). The choice then comes down to what you are trying to achieve.
Other than that, the end result is pretty much the same – you get to use the PageBuilder on posts and custom post types.
I’ve not tried either method but both come from reliable sources so the choice is up to you.
And two final points: before you mess with your functions.php file, or any other files, make sure you take backups just in case and the code that Dan uses in this article will be included in his soon to be released plugin… so watch this space.
By default, the Divi Theme page builder is available only on pages, not posts or custom posts. I’ve put together some code which (when added to functions.php) will enable page builder for posts and any custom post types which support the editor box. Here it is…
Dan Mossop – WP Theme FAQS
Change the font size, increase the padding… CSS for Divi
No matter how good a theme looks out-of-the-box there are always things that you want to change or tweak to make the theme your own.
Most of the changes can be done with simple bits of CSS, but if you’re not familiar with CSS trying to make those changes can be frustrating.
Lets start with a couple of tools, which allow you to examine your CSS and find the particular bits that you need to change. Firebug, Chrome Dev Tools. I wrote the post for Genesis theme users, but it applies to examining the CSS of any theme.
Now let’s look at two great CSS resources where the CSS snippets are provided and all you have to do is copy and paste.
- Eileen Lonergan
Eileen has provided us with some very useful and practical CSS such as “Change the font size and color of the body text in Divi”, “Add a Link that will take you back to the homepage when you are at the bottom of the post” and the super useful “Adding other Social Media Icons and Links to the Divi Footer”.The CSS is spread over several pages so start here Tips on Customizing the Divi Theme by Elegant Themes and follow the various links.
- Dan Mossop
Dan has about forty snippets of CSS for Divi on this site. They include: “Make Divi Accordions Closed by Default”, “Hide the Divi Search Icon on Mobile Devices” and “Adding Custom Icons to Divi”.The CSS is spread over four pages so start here Divi theme tutorials and navigate to other CSS snippets using the links at the bottom of the page.
Make a start on your CSS mods with this bit of Divi CSS love from Melissa
Melissa Love posted this super piece of CSS in the Divi users Facebook group and I’m now using it on this site – feel free to use it on yours.
“If you’re sick of the Read More link being rubbish and inconspicuous, I just added a snippet to our code doc to turn it into a handy dandy outline button on a new line.”
a.more-link {
border: 2px solid;
border-radius: 3px;
display: inline-block;
margin-top: 10px;
padding: 3px 10px;
text-transform: uppercase;
}
A bit of inspiration to replenish your creativity stores
Sometimes it’s not technical knowhow that you need… it’s inspiration.
Fortunately Elegant Themes have just posted the thirty finalists in the 2014 Customer Showcase Contest so you can head over there, check out the sites and replenish your creativity stores.
Make sure that you go over there and check out the thirty finalists and whilst you’re there make sure that you vote for your favourites. You don’t have to decide on just one, you can vote for three sites.
Last week we announced the 2014 Customer Showcase Contest, and since then we have received over 1,000 wonderful submissions. It was an incredibly difficult task, but we have whittled down the finalists to 30 amazing websites, and now it’s time for you to vote on your favorite from the bunch to decide which lucky 3 will win a slew of amazing prizes!
I know it’s tough to pick only one favorite, so we are allowing everyone to select up to 3 websites!
Nick Roach – Elegant Themes
Join the community and unleash your creativity with Divi
When the Divi theme was first released I realised that it would soon become the #1 choice for many creative designers and developers… that’s why I started this Divi dedication website.
What I didn’t realise was just how popular it would become, how creative people would become with it, and how quickly the Divi support community would grow.
If you’d like to join the Divi community and transform your ideas into reality, then sign up with Elegant Themes, download your copy of the Divi Pagebuilder theme and start creating your website today.
We offer no-questions-asked refunds to all customers within 30 days of your purchase.
If you are not satisfied with our product, then simply send us an email and we will refund your purchase right away. Our goal has always been to create a happy, thriving community.
If you are not thrilled with the product or are not enjoying the experience, then we have no interest in forcing you to stay an unhappy member.
Nick Roach – Elegant Themes
I hope that you enjoyed the post and found the resources useful and if you think that I’ve missed anything that should be included, please send me a message or let me know in the comments below.
Credits:
My thanks and gratitude to Elegant Themes for the graphics, Eileen Corrigan Lonergan and the Divi users Facebook group and special thanks to Dan Mossop for his help and enthusiasm.
