So I'm going to give my page a title. Let’s call this “Example Page.” The URL is going to generate automatically based on the title that you put in here, but if you need to change your url, you can click edit and make any adjustments in here. Before we jump into the Divi builder, I do wanna point out the “page attributes.” You can assign a parent page over here. So I could assign the accessibility statement, for example, as the parent page, and that would add this as a parent page in the URL as well.

I can also go down here to Yoast SEO and add an SEO title and a meta description down here. The actual content on the page will be built using the Divi builder.

So I'm going to go up here and click this purple “use the Divi builder” button, and in just a moment we will get three options. We'll be able to build from scratch.  We can choose a pre-made layouts. These are pre-made layouts that are set up by Orbit in advance of the site launch. Or we can clone an existing page. So if you know that you're building a page that needs to be exactly the same as another page on your site that already exists in terms of layout, you can clone that page, swap out the content and that will make content entry a lot faster.

For demonstration purposes, let's build from scratch. When you build from scratch, you get a placeholder section right here. So before we can do that, we need to go in here, click our blue plus icon and click add from library. When you go to your Divi library, you should see all of the page blocks that Orbit has designed for your website. These are going to be different depending on the design of your site.  You might see many different iterations of the same page block here with for, for example, in a three column cards block, you might see a version that has two columns and a version that has four columns. There might also be different versions for different page block background colors. So all of the sections in here, all of the page blocks that you see listed out in the Divi library should correspond with the page blocks that are shown in the page block library of your how-to document. Please refer to that to see which page blocks exactly should be in here.

We're gonna start our page with our hero block. I'll click on hero block and then click use this section and you'll see this will appear in our Divi builder. And now we can remove our placeholder section. All of your editing options will be here in the text editor. I can double click into here, make any updates, and save.

I'm going to add in a couple other page blocks here. I'm gonna add in a three-column cards. And I'm going to add in a call to action for the bottom of my page.

A couple other notes I wanted to mention here. You can come in and relabel any of these page blocks. Usually I leave the hero block as “Hero block.” But for something like three column cards that has more specific content in it, you can come in here and relabel the backend label to match what the content is. This will help with administration down the road. So you can easily identify which page block corresponds with which content on the front end.

The other thing you can do here is collapse page blocks. I find this helpful when you're dealing with very long pages. When I'm done entering content on my hero block, I can collapse this. The content is all still there, it's just minimized to make administration a little bit easier.

The last thing I wanna show you about the Divi builder is rearranging page blocks on the page. I can come over here to this little cross icon. I can click and drag this and relocate my page block up here or I can relocate it to the middle. This will all correspond to the actual order of the page blocks on the front end.

Before I publish or save any of my changes, you can also preview this page. So up here at the top you should see a little desktop icon, a tablet icon, and a mobile icon. If I click on this, I will see a rough preview of what our content will look like on the front end. And then I can also preview tablet and mobile. This is good, especially for page blocks that are super text heavy, where there's going to be a lot of wrapping and a lot of things that change for mobile responsiveness reasons. You can, you can preview this here. Keep in mind the styling that you will see in this backend preview is not exactly what's going to appear on the front end. So if you want a sense of that, I recommend actually saving your changes and taking a look at the page on the front end, this is just giving you an idea of the spacing on the page and the general flow of content for desktop, tablet, and mobile.

So that is our quick introduction to the Divi builder. If you have additional questions about the Divi builder, please reference your how-to document, which we'll have more detailed instructions.