Page Layouts – Part 4

Creating Pages

The first task one should accomplish after creating a brand new NoSpin WordPress site is login to their Dashbord and change the password emailed by our system. Dashboard login and password change is covered in the Dashboard Login article. If you haven’t yet created a NoSpin WordPress site, please sign up now.

The subject of this four part series on page layouts is setting up your new WordPress site with Divi Theme or Builder. This article, Page Layouts – Part 4: Creating Pages, describes in detail how to quickly create new pages using the Divi Library within your WordPress Dashboard.

This series includes:
Part 1: Configuring Theme OptionsPart 2: Adding LayoutsPart 3: Layout Packs

WordPress Menus

Before we actually begin to create a new page, we shall configure our site’s Primary menu such that the addition of each new page automatically adds that page’s link to the Primary menu. Login to the Dashboard and select Menus from the Appearance menu as shown in the following left hand screen capture. This will open the Menus page depicted to the right. In the Menu Name field, enter Main as shown below and click the Create Menu button.

The result of clicking Create Menu is the window depicted to the right. Select Auto add pages and Display location as shown in the screen capture. The Footer Menu option may be selected later if you decide you want the menu titled Main to appear in your site’s footer. You shall learn, the number of menus that may be created by the Menus interface is limited only by the server’s capacity. Clicking Save Menu produces the menu updated message near the top of your window. You are now ready to continue to the Add New Page section below.

For a more complete guide to WordPress menus, visit the Menu Guide.

Add New Page

From the familiar Dashboard page, navigate to Pages > Add New as indicated in the following left hand screen capture and click the Add New menu option. This launches the Add New Page interface depicted to the right. When Add New Page is initially loaded into your window, there will be a blinking cursor inside a blank input field highlighted by a blue border. This is where you shall enter the new page’s title. If you click outside the highlighted input field, you will see Enter title here as shown in the right hand screen capture (green ellipse). Click anywhere inside the input field, enter the page title Landing and click the Publish button (green arrow).

Your page is now published, but currently has no content. As you can see in the right hand screen capture, the window title has changed from Add New Page to Edit Page. We shall explain the Permalink now located under the Landing page title later; for now, https://nospinw.com/newsite/landing/ is the address of the Landing page just created on our example site https://nospinw.com/newsite/. The name of your site may be of the form https://nospinw.com/mysite/, or the more professional looking https://my-domain-name.com/ assuming your site is configured with domain mapping.

Under Page Attributes in the right column of your Edit Page window (1), select Full Width Page from the Template pull down menu. Click Use The Divi Builder (2) to load the Dashboard or back-end version of Divi Builder, displayed in the following screen capture, into your browser’s window. In the Load From Library section to follow, we shall load the Business_Home layout from the Divi Library into the Divi Builder to complete the Landing page.

If you have not already imported a complete Week 2 or later Layout Pack into your Divi Library, go to Adding Layouts now and download one of the Layput Packs from the various Layout Pack sites. Follow the procedure in Adding Layouts to upload the Layout files to your Divi Library.

Load From Library

We have previously saved the complete Business Layout Pack to the Divi Library of our example site (New Site) by importing the single Business_All.json file (reference Adding Layouts) and shall commence loading the Business_Landing layout into Divi Builder. In the following window depicted to the left, click Load From Library which loads the Load Layout interface depicted to the right. By default, the Load Layout interface displays its list of generic layouts that come with Divi Builder under the Predefined Layouts tab. To access your list of Layout Pack layouts downloaded from the Layout Pack sites on NoSpin WordPress, click the Add From Layout tab depicted in the right hand screen capture (left-pointing green arrow).

Retain the default Replace the existing content with loaded layout selection (green ellipse) and click the Load button associated to Business_Landing as shown in the right hand screen capture. This will load the Business_Landing layout into Divi Builder’s interface which is partially depicted below. You may scroll to the bottom of your window to discover how much work you have accomplished with a single mouse click. It would require five additional screen captures to illustrate the entire window in front of you; therefore, we shall proceed to the final step before viewing the new site. Now would be a good time to click the Update button if you haven’t already.
If you are paying close attention to the details, you’ll notice by the lack of a Page updated message under the Edit Page title, the left hand screen capture was taken before the Update button was clicked. You may view the new Landing page at this time; however, the default, or as WordPress prefers, the Front page needs to be set in Settings > Reading before the site will display properly.

Configure Reading Settings

Navigate to Settings > Reading and click on Reading to open the window depicted by the following right hand screen capture.

In the Reading Settings window, change the Front page displays setting by first clicking the radio button in front of A static page… and select Landing from the Front page pull down menu as shown in the right hand screen capture. For now, leave the Post page pull down menu as is. When you are done, click the Save Changes button and have a look at your new single page site. Regarding the other layouts stored in your Divi Library, repeat the steps commencing with the Add New Page section and you shall have the beginning of a great site, sans your specific content.

Since we configured your WordPress primary menu saved as Main to automatically add new top-level pages, new page links will be added to Main in the order successive pages are created. As you might imagine, WordPress menus can be as simple or complicated as your creativity allows; and, you can utilize multiple menus on your site at any time! A series on WordPress menus is in the planning stages; however, prior to its publication you may submit all questions regarding WordPress menus to the Client Portal by creating a General WordPress Help support ticket.

Conclusion

WordPress and Divi Builder are best learned through trial and error. Now that you have a site up and running, you’ll need to edit the content. Start by opening modules in either the Dashboard Divi Builder or its front-end counterpart, the Visual Builder. Both editors use the same building blocks discussed in Getting Started with Divi Builder, a 25 minute video by ElegantThemes, the creator of Divi Builder. Right-click anywhere on a building block to reveal a popup menu where you may temporarily (or permanently) disable the building block on either phone, tablet, desktop or all three display devices.

In Part 1, Configuring Theme Options, we promised a demonstration on how to change themes at the end of this guide. Rather than clutter up this Getting Started guide, we decided to send you to another article which also introduces you to themes geared for WooCommerce. We hope you enjoy your lesson on Theme Selection.
NoSpin Logo