Page Layouts – Part 2

Adding Layouts

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 information in this article is relevant to adding Divi Layouts purchased from the Divi Marketplace. Free Divi Layout Packs are now automatically installed to one’s Divi Library when they are released from the Divi design team. The Layout Pack download links formerly residing in Demo Site footers on NoSpin WordPress have been removed and all references to them in this article will be deleted. We have retained Getting Started – Part 3: Layout Packs to demostrate site examples that can be quicky created using Divi Layout Packs.

For information on the latest Divi update incorporating the new Premade Layouts interface, please see Divi Page Layouts.

This series includes:
Part 1: Configuring Theme OptionsPart 3: Layout PacksPart 4: Creating Pages

Divi Layout Packs

When the Divi design team releases a new Layout Pack, which includes everything necessary to quickly build a new Web page or an entire site, it is accessed from the Divi Builder > Load Layout (Load From Library) > Premade Layout library. Currently, the Load Layout tab is how one accesses the Premade Layouts (Layout Packs) from the back-end (Dashboard) Divi Builder intrface, while the + Button labeled Load From Library in the front-end Visual Builder is how one accesses the Premade Layouts from that interface. Whatever method is chosen to access Layout Packs, they include graphics and royalty free photographs. The only thing required from the site owner is their unique content.

Downloaded Layout Packs

When one downloads a Layout Pack zip file purchased from a source similar to the Divi Marketplace, the file should be decompressed into a folder of zipped layout files and each file is either uploaded separately, or cumulatively by selecting the zipped layout file with _All in its filename.

For example, the screen capture to the right displays the downloaded restaurant-layout-pack.zip saved to a location on a desktop computer where it shall be easy to retrieve. You will need to expand restaurant-layout-pack.zip into the restaurant-layout-pack folder since the JSON file you shall upload to your Divi Library is contained inside the expanded folder. Reference our screen capture depiciting a Mac Finder window. Expanding restaurant-layout-pack.zip should create a folder identical to the one seen in our Mac Finder screen capture. Locate your Restaurant_All.json file now. This is the file you shall upload to your Divi Library in the following steps.

Login to Your Dashboard

Currently, importing JSON layout files directly into your Divi Library must be performed within the back-end WordPress Dashboard. We shall demostrate the entire process utilizing the restaurant site Layout Pack, released on 10-09-2017. Keep in mind the entire restaurant demo site was build by simply uploading a single zip file to the Divi Library with ET’s Nexcess theme activated from Dashdoard > Appearance > Themes. No other modifications were made to the theme’s settings other than replacing the nexcess logo with an empty PNG file and setting Page Attributes in the Edit Page window to Full Width Page Template.

If you experience difficulty logging into your WordPress Dashboard, please either create a support ticket in the Client Portal or request help by Email. Your Dashboard may vary somewhat from the screen captures below; however, you shouldn’t have a problem navigating to Divi > Divi Library. Click the images for enlargements if necessary. Once you are inside the Divi Library you will be presented with the Layouts window depicited to the right, where you may or may not have any Layouts already saved. We shall assume for the sake of this exercise, your Divi Library is currently empty. Click the Import & Export button near the top of the Layouts window.

Upload Layout Files

Clicking the Import & Export button within the Layouts window launches the Portability popup with its Export tab active (below left). Click the Import tab to open the Select File To Import dialog box (below right). Click CHOOSE FILE and navigate to the location where the restaurant-layout-pack folder is saved on your desktop computer.

Locate Restaurant_All.json inside your restaurant-layout-pack folder, select it and click Open in your desktop computer’s dialog box.
When you are returned to the Portability popup window, you should see the Restaurant_All.json file under Select File to Import. Clicking the left hand screen capture zooms in on the details. Click Import Divi Builder Layouts to start the import process.

Depending or your desktop system and Internet connection, you may wait several seconds in this particular case before the import process completes. After all, Restaurant_All.json, the layout file selected for this import exercise actually imports eight layout files at once; i.e, the entire Layout Pack, rather than a single layout file. A few seconds after receiving the following success message to the left, you shall be automatically returned to your Divi Library interface depicted lower right. You now have eight additional page layouts stored in your Divi Library, ready to use with Divi Builder in Getting Started – Part 4: Creating Pages. However, before jumping into Part 4, select your favorite Layout Pack by visiting Getting Started – Part 3: Layout Packs.

Conclusion

The framework of WordPress page authoring is evolving and we expect the new Layout Manager workflow to exhibit significant influence on the future of site design using WordPress. If you would like to communicate with us regarding customization of a Layout Pack, send an Email to design@nospinweb.com with layout in the subject. Other questions or issues may be addressed by creating a WordPress Help support ticket in the Client Portal.

Thank you and enjoy your NoSpin WordPress site.

NoSpin Logo