New Services get 20% Off For a Limited Time!

How To Edit Text With Divi

by Jan 17, 2023Tutorials

How to edit text with Divi

Hello! This is Erik, owner of Starry Night Web Designs. I hadn’t planned on making a “How to edit text with Divi” tutorial for my redesigned site, but my copyright person hasn’t used Divi before, and I thought it was the perfect time for a quick tutorial. Besides that, my internet provider, Optimum, is outside replacing an old line running from their box to my house, and I’ve got no internet for the moment. So, let’s take advantage of the downtime!

This tutorial is not going to teach you everything you need to know about the Divi Theme. It is for those who may find themselves having to edit the text on a WordPress site that is using the Divi Theme and have no idea how to do it. This quick tutorial will get you going. So, let’s dive in…

What is the Divi Theme?

The Divi Theme is the ultimate theme builder for WordPress. It’s a blank theme that allows you to create stunning websites without knowing any coding. It can be installed as either a plugin or a theme. This isn’t crucial to know for this tutorial, but if you have to make some quick edits on someone’s site, it helps to understand what you’re dealing with.

Divi builder has a hierarchy to it. Every page or post must first have a “section,” and inside that section will be a “row/s.” Then, inside each row, you have what are called “modules.” These are what we are going to learn how to edit today, specifically “text modules.”

This may sound like a lot, but don’t worry; you don’t need to learn it all. You just need to know how to edit the “text modules” on the site. Believe it or not, we’re almost done! It doesn’t seem like it, but there are only a few more things to learn.

There are two options for editing posts and pages with Divi. You can edit with the wireframe view (this is the default way the page will load in the backend).

When you edit a page created with Divi, you’ll see the “wireframe” view (shown below). To keep this tutorial as simple as possible, we’re not going to edit the page using this view. We’re going to use what’s called the Visual Builder. This is essentially seeing the design of your page and being able to open any module on the page to make edits. You will see these edits change in real-time.

Divi Page Backend default wireframe view

Editing with the Visual Builder.

The fastest way to edit text with Divi is to choose the option “Build On The Front End,” located above the purple line that reads “The Divi Builder” (see image below).

Shows the Divi Build on Front End Button
Once that opens, you can move your mouse around the page but don’t click anything yet.

As you move your mouse around, you’ll notice various colored outlines appear. There’s purple for Sections, green for rows, and grey for modules. We’re going to look for the grey modules that contain text and then click the gear icon; this will allow us to edit the text in that section.

Shows the text module settings icon
Now that it’s open, you’ll see three tabs: Content, Design, and Advanced. The content tab is where the text is contained for this text module (there can be more than one text module). Here you can add more text, cut text, and edit as if you were using WordPress without the builder.
Text module tabs
Now, something important to note: you’ll see the text editor options right above the text, as you would without the Divi builder. Don’t use that to change the fonts, color of the text, and more; use the design tab. You’ll see options for various design elements you can change. In most cases, you’re only going to need to change the “title text” or the body “text.”
Text settings design tab view
A neat trick to get you there quicker is to hover over the text on the page you want to edit the design specifications of. Click that blue circle at the left corner of the text, and it will open to the Design tab text options. Just keep in mind, the changes you make there will affect all the “text” styles in that module. The same goes for the “Title” text; if you hover over that and click the blue icon.
Blue circle buttons
The very last thing to do is save the changes. This is done in two steps. First, you need to save the changes you’ve made to the module you just edited by clicking the green checkmark to the right of the module. This will also close the module.

Next, you’ll need to save the changes you’ve made to the page. There will be a purple circle at the bottom of the page you may have noticed. If you click it, it opens a small menu with various other circles you can click. All you need to worry about at this time is clicking the green save button to the far right, and you’re done.

Congratulations, you’ve just edited the text on your first page or post! If you have any questions, feel free to leave a comment below.

Purple pages settings button views

0 Comments

Submit a Comment

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