How to revise a Divi design using the Visual Builder on a real WordPress project
Today I finally revised the Divi site at the staging subdomain, after speaking with the client the other day. If you were a part of the Leverage WP Accelerator Live Course last year, this site will be familiar.
The Leverage WP Community is still in its half-price period for founding members, and we've all been learning a lot and sharing together at https://community.leveragewp.com. Join us!
I'm also delivering a Workshop this Friday September 16 at 12pm MT, on WordPress Hosting and Best Practices.
Join: https://leveragewp.com/checkouts/work...
In this WordPress Divi lesson, you can watch me as I narrate the process of revising the site to fine-tune the design using the Divi Visual Builder.
I use Global Colors, and as assortment of trick and tips for using Divi quickly and efficiently.
Leverage WP website - https://leveragewp.com/
Leverage WP Community - https://community.leveragewp.com/
Leverage WP Hosting - https://community.leveragewp.com/sp/h...
Divi Discount - https://leveragewp.com/get/divi-disco...
Divi Predesigned Layouts - https://leveragewp.com/get/divi-layouts/
The Complete WordPress Website Business Course - https://leveragewp.com/get/udemy-cour...
Blog post here: https://community.leveragewp.com/watc...
Partial transcript:
Welcome leverage WP community. I'm here to share with you a tutorial on the flow coaching website, a website that I worked with in the past, if you had purchased the accelerator program, the accelerator course, back in the end of 2021, you'll recognize this site as a redesign that I was working on with the client. And we've gone through and finalized the visual changes that he wants on the website. And we've almost got it done. It's it's still only live at the staging subdomain. And we're working with the Divi visual builder.
And so the client and I consulted the other day. And I have some notes that I made during that call as we were looking at the website, from each of our computers and speaking on the phone. And so I'll just walk you through this process of inputting these visual edits that are needed on the site before we take it live. So let me go ahead and share my screen. And you may recall, this design is actually a little more advanced than what was shown in the accelerator program, that we've really revised this into an almost final version.
You can see this is at the staging dot flow coaching.com subdomain. The live site is right here, an old defunct WordPress theme and a really old version, and it just doesn't have functionality that he needs. In future tutorials, I'll be showing you how I'm setting up the WooCommerce purchasing of the coaching programs that the client offers, as well as an email opt in and broadcast email setup directly from WordPress. He's moving away from MailChimp and saving a lot of money per month, building an email list directly on his WordPress site and leveraging Amazon Simple email service. As I've talked before, for instance, at leverage wp.com in the master class that you can access for free right now, there's a little bit about that in there.
And we're also going to be setting up the signing of contracts for his new clients when they come in to the website. And so you can see here I've got six pages, home career coaching, executive coaching, about blog, and contact. And so on each of these six pages, there's a few changes that you'll see. So the first thing I'm going to do while I'm logged in here, you can see I've got the tool, the admin toolbar up at the top, and I'm gonna go ahead and click Enable visual builder. So that we get the Divi visual builder tools overlaid on top of the website as it looks to the public. And of course, it's up, it's not really visible to the public. It's at the staging subdomain.
But I wanted to show you in Divi, and I'll just remind you, this bright green means that that that is part of a global template. That is true on several pages or the entire website. And you can choose now in the latest version of Divi to edit the header. Or if you have a global footer, it'll show you in bright green, that those are editable. But right now we're just editing this body area of the particular page here. And that's why these toolbar areas like this module toolbar, and this row toolbar, as well as the blue heading toolbar are showing. And you can't really see that you know, that header template.
[continued here: https://community.leveragewp.com/watc...]