Avoid these 7 typical Divi beginner mistakes!

The Divi Theme with the Divi Visual Builder is so successful for good reason. It is very easy to create appealing websites with it. Even without programming knowledge.

In addition, there is a great community that helps with problems and has programmed many Divi extensions - perfect for beginners.

But all beginnings are difficult. Some of the mistakes made at the beginning are difficult to correct later on.

So avoid these rookie mistakes when using Divi!

Error 1: You are inserting too much text into a single text module

Divi* is great. Unless you want to edit a lot of text (such as in the privacy policy) with it. The editor window is very small and the toolbar disappears when you scroll.

Divi beginner error: too much text

Working directly on the website is often impractical, as the editing options are very limited.

Divi beginner error: Editing directly in the text

Therefore, divide your text into paragraphs. Not too short – otherwise you will have too many elements and Divi’s performance will suffer. But not too long – otherwise editing will be very tedious.

Especially if you want to move text on your website.

This is not as convenient as simply moving the entire text module up or down directly in the text.

Error 2: You only use one section for the entire content

This error is related to error #1 and applies to both sections and columns.

I often find that the entire content is created in one loooong section. Unfortunately, it is then not simply possible to

  • to design a section differently
  • assign a different background color to a part of your website
  • save individual parts of your website in the Divi library.

Therefore, create a separate section for each logical section of your website (Lead image, Call To Action, Customer testimonials, Email opt-in …). This facilitates the logical structure of the page and allows the individual sections to be customized.

Hol dir Divi bis zu 20% günstiger!

Mistake 3: You change the styles for each element individually

The Divi settings under the “Design” tab stimulate the play instinct. A setting is then changed like crazy for each text. By the third page at the latest, the design is no longer consistent.

If you want to change the font or the color of the text later, this quickly turns into an orgy of clicks.

It is therefore more efficient to use the global presets and set them correctly once:

Divi beginner's mistake: Do not use presets.

Now you can change the font size of all headings centrally. Once for all pages. If you do need an individual setting, you can simply overwrite this for each module.

Note: Elegant Themes’ templates do NOT use global styles – so the first step for me is always to put the fonts and colors into global styles as much as possible to ensure a consistent design system.

Error 4: You are not using global elements

Each page of your website requires a call to action. This is then often copied and pasted from one page to another. The same applies to contact forms and newsletter registrations. These are scattered across various pages of your website.

If you change your wording, you have to edit every single page and make sure that you adjust the texts and modules everywhere.

However, if you save a global element in the Divi library, you only have to make the change once and it is automatically applied to all pages.

Therefore, save common elements as “Global” in the library and insert them again from there.

Divi beginner error: Use Divi library

Global elements can be recognized by their poisonous green color.

Changes to it will immediately affect all pages of your website that have this global element inserted.

Mistake 5: You don’t set the distances correctly

Divi offers many possibilities. Too many possibilities. And beginners in particular often don’t know what side effects some settings have. Transforming” is an exciting option, but should not be used for layout purposes.

Divi beginner error: Transforming elements

The same applies to the distances “Margin” (outer distance) and “Padding” (inner distance). These are often used via drag’n’drop to “align elements”.

This is completely the wrong method, because at the latest when you look at your layout on a tablet or mobile device you will realize that this was not such a good idea.

Divi beginner error: "Margin" (outside distance) and "Padding" (inside distance)

Important: Understand how margin and padding work and apply them specifically. The best way is to enter the numbers directly and not to use drag & drop. You don’t always get the right element and the result is a margin-padding-min-height mess…

So here too – plan a little first and then use it consistently, for example only setting the distance between sections at the bottom.

And ALWAYS test mobile afterwards.

Error 6: You paste text directly from Word into Divi

Texts are often written in emails, Microsoft Word or Google Docs. If you copy the text and paste it with Cmd+V(Ctrl+V under Windows), the formatting will also be applied for you.

But wait – something is wrong then? Because the classes, styles and so on that are adopted don’t fit at all. If you look at the source code, it says the following, for example:

Divi Beginner Error: Divi Styles from Microsoft Word

In the end, you add unnecessary markup, which then causes problems that are difficult to find.

Therefore, always use Cmd+Shift+V(Ctrl+Shift+V under Windows) when inserting text. This only inserts the text from the clipboard, but no formatting.

Error 7: You are not using the Theme Builder

New since Divi 4 – the Divi Theme Builder.

Divi Beginner Mistake: Divi Theme Builder

This allows you to design the header and footer for different pages, articles, listings etc. and change them centrally. This again has the advantage that you only have to make changes once and not on every single page.

So if you are starting fresh, use the Divi Theme Builder. This is the only way to ensure that your site is easy to maintain and looks consistent.

Error 8: You are using Divi

Unfortunately, you have to tell it like it is.

Divi is on the decline.

Elegant Themes (the manufacturer of Divi) has been working on Divi 5 behind closed doors for over a year, in the meantime there have been no updates for Divi.

With Elementor*, however, the situation is completely different:

  • Elementor is evolving by leaps and bounds every month (MegaMenu, Flexbox Container, CSS Grid, Loop. Builder…) – here you can find the official roadmap of Elementor.
  • Elementor has a solid technical basis and is easy to expand, so a complete rewrite as with Divi 5 is not necessary
  • Elementor communicates with its developers and has an official Github repository.

I have used both Divi and Elementor and can say that Elementor is definitely the better platform.

So if you are looking for an alternative to Divi: try Elementor* Pro.

You can find more details on the difference between Divi and Elementor here:

Questions about the most common errors

How much text should I insert into a text module?

By no means too much – if it makes sense in terms of text and layout, then be sure to use your own text modules.

How many sections should my site have?

This depends heavily on the design – but putting all the elements in a single section gives you the opportunity to customize it.

Can I define global colors and fonts in Divi?

Yes, and you should definitely do that. Otherwise, you will have to adapt every single module on your entire website when making changes or adjustments.

So familiarize yourself with the global colors and settings of Divi.

How do I set spacing in Divi correctly?

Only use the Margin (outside distance) and Padding (inside distance) functions for distances. Make sure that you also adjust the settings for tablets and mobile devices accordingly.

Should I use the Theme Builder from Divi?

Yes, definitely! This is the only way you can easily and centrally customize the header, footer or even the design of the blog posts.

Become a Pro!

As you have recognized from the mistakes, it is often about making life easier for yourself in the long term. And you can do this by

  • use the Theme Builder from Divi
  • Define styles globally
  • structure the content well

This structured way of working will make your website easier to maintain and change and will also make it look more visually appealing!

Do you have another tip for me? I look forward to your comment!

Michael

PS: a special offer for you: Divi 20% cheaper*.

Picture of Michael
Hi, I'm Michael Baierl and I'm a WordPress programmer from Vienna, Austria. In my WordPress community - the Website Heroes - web designers will find everything they need to create great websites for their customers and be financially successful: regular training, exchange, feedback, quick problem solving and co-working. Come and visit us now.

Content

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Nie wieder alleine - werde Teil der Website Heroes und bilde dich laufend weiter.

Weiterbildung und Sofort-Support für angestellte Website-Helden.

Exklusiv für Agenturen, Grafiker:innen und Designer:innen: WordPress-Programmierung.

Dein Technischer Partner für deine Website.

Schreibe wasserdichte Angebote in nur 10 Minuten.

Raus aus dem Projektgeschäft - schaffe dir langfristig ein passives Einkommen.