Divi in Five Minutes or Less:
How to change the Divi color palette with Coolors
In this tutorial, we’ll take a look at one of the most useful workflow tips there is when it comes to Divi’s wireframe.
- In the Divi Top 200: Yes
- Why this Divi tip is helpful: design advantages, workflow, organization
- Ease of learning: novice
About this Divi Tutorial
Updated: March 6, 2021
Rather read while working? No sweat. A full transcript of this video tutorial is coming this week! The video is just below the transcription.
Nihon Hustle is reader-supported. When you buy through links on our site, we may earn an affiliate commission.
Hey folks it’s Doc from NihonHustle.com… how the hell are you today? Welcome to another installment of Divi in 5 Minutes or Less—and, today and I’m gonna show you a neat little trick in the wireframe.
You may use wireframe, you may not use wireframe, and this little tidbit has saved me a ton of time and helped me with organization, and I’m gonna show you how to do it.
Basically, what we’re gonna do is rename a label. So, if you know how to do that already,than I guess this video won’t be so helpful. But (!) if you don’t know how to do that, let’s take a look.
So, before I switch to the wireframe the first thing I wanna show you, or make make you aware of, is… currently (in the visual builder end of things), we’re looking at the top of this page, okay? So, when we switch to the wireframe…, which is down in the bottom left hand corner of your page… (sorry about the mouse moving here… trying to get this to popup, and it’s not visible for m e right now. [laughter] which is a problem sometimes when you’re trying to record your screen and do other things…). We can, of course, do this.
So—bottom left hand corner. You see these… this little thing here… this little, kinda stack of items to the right of the vertical ellipses? That’s your wireframe view. So, if you click on that, it will take you on to the wireframe view wherever you are on the visual side. So, as I mentioned we are at the top, so… now you’re looking at the top of the wireframe, with the first thing being the first section in blue and it’s called Header. Beneath that is a row. Green are rows. Modules are this kind of grey-black. Just as they appear on the visual side as kind of “borders” if you will.
So, what we’re gonna do is we’re gonna rename these labels. So. It’s a big pain in the ass if you’re making very long word content… word count pages… sometimes I have pages that are upwards of 15-20,000 words, and they take me forever to work on, and before I learned this trick, they took me even longer… because I would be working on the wireframe view and need to kind of change something or copy paste modules and I wouldn’t know what the hell was what because they were all called text or blurb or row. Here’s the trick.
You click into the flywheel… okay, we’re gonna do this for section. Here’s your flywheel. Click into that. It’s going to bring up your section settings, module, … view, or whatever the hell they call this. And then, down here is maybe something you’ve never played around with before. Or, it never maybe clicked with you, or meant anything: admin label.
If you click on admin label, notice that the name of the admin label Header, is the same as it is right here. So, in real time, if you change it… to let’s say., “top picture.” It changes it. As you can see here on the… in the wireframe as well.
It might not seem like much in this very little display that I’m showing you, but if you do this for content that is repeated over and over again: text, divider, image, blurb, text, divider, image, blurb… let’s say something like that… on and on down the page, then on you’re gonna want to… know what these things are on the backend.
My book pages for example, or the section where I talk talk about How to Start a Blog or How to Find Military Spouse Jobs—those are really long posts and, this is saved my life. So, that’s how you do it.
If you want to an even cleaner view, don’t forget… (I love this new tip that my wife share with me…) up in the right hand corner, click on these vertical ellipses, and you can zoom in or out and that will help you do things even more quickly. Of course you can do this in the U.R.L. bar which is what I used to do in the past, but it’s a little bit more handy here I find, and not too shabby.
In another video (I’ll probably link to that later) I’ll show you how to copy/paste modules… move those around… That is a damn fun.
All right. That’s it. Have fun. Happy web page building.
This is Doc, signing out for now. Cheers.