Page Layouts – Part 4
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.
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 thebutton.
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).
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.
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).
Configure Reading Settings
Navigate to Settings > Reading and click on Reading to open the window depicted by the following right hand screen capture.
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.
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.