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” be the first tutorial for my redesigned site. But, my copyright person hasn’t used Divi before and I thought, what a 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 I thought, let’s take advantage of the downtime!

This is not going to teach you everything you need to know about the Divi Theme. This tutorial is for those who maybe find themselves having to edit the text on WordPress site that is using the Divi Theme and they 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 bank theme that allows to create stunning websites without knowing any coding. It’s installed as either a plugin or a theme. This isn’t terribly important to know for this tutorial but if you have to make some edit’s quick on someone’s site, it helps to understand what you’re dealing with.

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

This may sound like a lot. It is. 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! Doesn’t seem like it, but there’s only just 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’re going to 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 basically, seeing the design of your page, and being able to open any module on the page to make edits. You will see this edit, change in real time.

Divi Page Backend default wireframe view

Editing with the Visual Builder.

The fastest way to edit text with Dvi is to chose the option, “Build On The Front End” located about 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 that various colored outlines will appear. There’s purple for Sections, green for rows and grey for modules. We are gonna 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’re going to 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 add more text, cut text, it’s just as if you were using WordPress without the builder.

Text module tabs

Now, something that’s very 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 or color of the text and more, use the design tab. You’ll see options for all kinds of things 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 change all the “text” styles in that module. Same goes for the “Title” text, if you hover over that and click 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 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 to small with varies 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.

Congrats, you’ve just edited the text on your first page or post. If you have any questions, feel 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 *