25
NOV, 2019
Our top 15 favourite features of DIVI that allows us be web designers
We remember using notepad to code in html and css, way way WAY back in the 2000’s, bit of photoshop here and there and away you go – simple website ready and live online. Nowadays, things have advanced quite a bit and with the aid of WordPress and the DIVI theme, there’s absolutely no need to know code in order to build a swanky, eye catching website.
Back in 2014 is when we first discovered DIVI. We had been using all sorts of page builders, from the default WordPress text editor, Avada, Enfold and Visual Composer… which are all credible builders, don’t get us wrong, but we wanted something with that bit extra when it came to page building.
Something that suited us.
So, back then 5 years ago, Elegant themes (the guys who invented DIVI) were offering 3 packages back then, we can’t remember exactly what they were, something like a starter 1 site license package for 1 year, a developer all sites package, for 1 year and a lifetime no matter what don’t worry package, similar to what they offer here now. As you can see, they only offer two packages now, but back then, we thought “$89 for 1 year? Let’s take a punt”.
A punt that paid itself back in spades.
After year one was up, we purchased the lifetime package and haven’t looked back. It’s also been a steep learning curve knowing and learning it’s best features and we can honestly say we still don’t know it fully from top to bottom; but maybe that’s a good thing?
So here’s our 15 best features why we love DIVI, how we use it to our advantage and why we think you’ll like it, if you’re starting out as a DIVI lover and want to use it for your web design solutions and/or business.
DIVI is intuitive, easy to use and has an abundance of support via Elegant Themes and it’s MASSIVE online communities
A page builder needs to be easy to use … so easy that (no offence) your clients will be able to use it as well. They’re too busy marketing, hiring, firing, buying, selling or whatever it is they do, to want to learn something clunky and/or techy.
The Divi page builder, for us, is a dream, just look at the gif below:
The above animation, in a nutshell, explains the very basic structure of how to build a section on a Divi page:
1. A section spans the width of a page (the blue bit)
2. A row, goes inside a section (the green bit)
3. A module goes into a row
It’s just that easy, click, click again and then click finally. This is just the standard builder, with the new VISUAL BUILDER, it’s even easier, which we’ll touch on later. So many modules to choose from, so many column layouts i.e. 50/50 split, or 1/3 and 2/3 split, there’s just so many options. Within all these modules you can define, background images, colours, font sizes, etc.
So for a few years we used the standard builder, which we loved. Then, those near on geniuses at Elegant Themes go and introduce the Divi page builder… which was a game changer for us. Essentially it’s a LIVE on the fly page editor, which makes creating sections and manipulating modules even easier:
It’s drag and drop already, now you can see your edits as you go along. Edit the module to give 65px top margin – do it LIVE and visually see how it looks as you go along. No need to input measurements then refresh in the front end.
3. We use photoshop – LESS
Sometimes we find that showing up white text to be readable, we’ll make the background darker, we used to do this by darkening images in photoshop, or applying some CSS. Now you can simply do it with a few clicks – no need to know any coding:
How good is that? By default you get this bluey greeny gradient colour overlay as shown above, but you can apply any colours you want. The gradient effect can be applied to almost anything, even buttons, just check out the GET A FREE QUOTE button in the menu bar above, there’s a gradient effect applied to it.
4. Mark items as GLOBAL – cut out the repetitive work and work smarter
Now we’re not quite too sure if there’s a global feature in other page builders, let’s assume there is… and if so, what a god send. If you’re creating for example, a section with a call to action about a special offer (we’ve got quite a few call to actions throughout our site) and you want to place this section on more than one page and/or post, then make it GLOBAL. Once you make one change to this global section, the change replicates across ALL the sections no matter where they are on your site. Cool eh?
5. The price – which package is worth recommending?
It’s what we call a NO BRAINER – what we mean by that is YES – it is worth every penny, however, which package suits you? So, if you’re a developer / designer reading this then we cannot recommend the lifetime access enough. It’s a bit of an investment, but how many websites do you have to build to get your money back? The image above was taken on Nov 25th 2019 by the way…
6. The abundance of modules is ridiculous – there really is no excuse to not be able to build a custom website for your clients
When starting off, well, when we started off, all we were offering were traditional “brochure” websites, which means your standard 5 page website plus contact page. Each page basically filled with text information and images about the business.
Of course, there’s a text and image module, but the ones that we especially like, as well as using them ourselves are:
- Pricing table module
- Contact form module
- Slider module ( good for testimonials)
- Tabs module
- Number counter module
7. Copy and paste – copy a whole module and save time
Creating 3 blurb modules in a row? Just create one blurb module and copy and paste it as many times as you want. On top of that, you can also copy the style of a module and paste it to another one. For example, if you have a text module with:
- Font size 18
- Font style Raleway
- Line height 1.6
- Font colour red
Rather than define each text module with the above, you can just right click the module, select “COPY MODULE STYLES” then right click another text module and “PASTE MODULE STYLES” and hey presto, the styles have copied across.
On top of all that, you can right click the initial text module and choose EXTEND STYLES, then have those styles copied across all text modules throughout the page. Nifty trick and very time saving.
8. Divi templates, they’re not only FREE but they’re great looking too
As if things couldn’t get better, Divi also recently introduced a huge amount of templates ready to ship out and import into any page. Want a quick business template up and running? Not a problem, choose a business homepage layout and edit the text and images to how you like. Here’s an example of a FREE that ships out with Divi:
https://www.elegantthemes.com/layouts/art-design/digital-marketing-landing-page/live-demo
Yes, believe it or not, it’s FREE. Scroll from top to bottom and observe the subtle animation, the numerous amount of sections and the stock images that come with it. What’s not to love, right?!
9. The Divi community – get reliable help and advice fast
Sometimes there’s need to reach out and ask for help, we use the following Facebook groups to dive in to get advice:
- https://www.facebook.com/groups/diviwebdesigners/
- https://www.facebook.com/groups/ElegantThemesUserCommunity/
- https://www.facebook.com/groups/DiviThemeTutorials/
There’s so much support and love for Divi out there, as soon as you put up a post on one of these groups you’ll most likely definitely get a response (so long as your question makes sense 
).
There is one guy we’d like to shout out too, his word is like gospel, what this guy says goes, not to say that other Divi lovers aren’t as great, but there’s just a little something about this guy that when he talks, you listen. His name is PK Son and his website is here:
10. The Divi Gurus – learn from these guys
We’ve lost the mount of tips, tutorials, shortcuts and general helpful information from these guys, I’m sure there’s more of these types of individuals and organisations out there, but these 3 are our top 3 guys to get helpful tips from:
Josh Hall – https://joshhall.co/ This guy has some really fantastic tutorials and he explains everything so clearly. We haven’t used his courses yet but we’re confident they’re packed full of great Divi information.
Geno Quiroz – https://quiroz.co/ Since the early days of our Divi experience we stumbled across Geno, his tutorials are very easy to use and we specifically like just the sheer amount of neat design tips he offers.
Mak – https://www.youtube.com/user/grafxtv/videos We’re not sure what this guy’s last name is, but what does it matter, just watch his videos and you’ll remember him.
11. More editing goodness, inline editing – even slicker than the visual builder
Editing text is even easier, just look at the clip below:
Skip the customisation of the text module and click directly into the text and start editing. Useful if you just want to quickly edit a few words or add/remove some text.
12. Edit your layouts in mobile and tablet view – make your website fully responsive
Within the visual builder, you can switch straight to either tablet or mobile view, which is great and helpful for viewing and seeing your design in these views. H1 text too large on mobile device? No problem, just change the font size thereafter in mobile view.
Granted the tablet and mobile view doesn’t cover all devices, you may need to do a bit of breakpoint CSS research, but at least these two views give you some idea of smaller screen layouts.
13. Hiding certain modules or sections in either desktop, tablet or mobile view
You might build a section that looks great on desktop, but when you resize it to mobile view, it may not look that good. Take our homepage for example, we love how it looks in desktop:
The background image alone is 1920px wide, so getting this to fit within the width of a mobile screen just won’t have the same impact. Also, the white text is intentionally showing above the purple background, to make it visible. So when you view this page on a mobile device, it just looks like a mess – hence why we hid this section on mobile view, and then created another section (which is hidden on desktop view), to produce this result:
And this is a quick overview of how we did it:
14. Importing and Exporting; easily transfer a custom built section or entire page across separate Divi installations
Several times we’ve built a custom section, for example, a hero section that we particularly like and want to use across separate Divi installs. Rather than painstakingly copy the section or entire page from one Divi build to another, you can simply export the said section or entire page, to your Divi library.
Once saved in your Divi library, you can then export the said section or page to a file, go to another Divi install, import the file into that Divi library and away you go – you can now use that section or page in a completely separate Divi install. No need to re-invent the wheel, just export then import what you want across. Simples.
15. The latest Divi theme builder, is it worth the hype? Is it of any use?
The short answer is YES. Although it’s had it’s criticism and personally we feel there was a slight over hype about this, still, we have found the Divi theme builder of great use. You can customise a header and footer and make it GLOBAL, finally, defining them from just one location.
We particularly like the fact you can define you footers across blog posts too, previously if you had a global section as your footer, when you applied this section to your blog post, it didn’t look quite right. You needed a bit of CSS tweaking, in order to get the section to show correctly at the bottom of a blog post.
There’s also 5 great Divi theme builder templates you can install, they’re all great looking too:
Conclusion
There’s more benefits and features we’d like to list, but the above is our absolute top 15 favourites. Some of the above might sound a bit techy and that’s reaching out to the already Divi users. The above list was written out of love for Divi, hoping to help others like us where we started from which is basically from nothing. Completely self taught, we embraced WordPress and Divi, using the communities help, lots of hours watching video tutorials and lots of trial and error we’re now in a position to build websites as a business.
We may not know Divi inside out, but we do know that unless we constantly keep up with Divi and it’s features, then we won’t be able to fully provide all it’s benefits to both ourselves and our customers. It’s a constant learning curve.
If you’re looking to learn Divi and not interested in coding or learning any code then this is right up your street and we hope the eye openers above help you along your Divi journey.
0 Comments