The Divi theme was released on 11th Dec 2013 and it’s created quite a stir in the WordPress community.
What most of us thought would be just another theme, turns out to be a full blown theme builder complete with the elegance and ease of use that only Elegant Themes know how to provide.
WordPress Theme Builder Shootout – When all is said and done, the biggest competition for these products is not each other but a premium theme, especially the new breed of highly flexible themes such as Divi…
Chris Knowles – WPMU DEV
For a general review of Divi check out my previous post Divi by Elegant Themes: the ultimate drag and drop WordPress theme. This post will concentrate on using the premade layouts that come with Divi, and importing additional business and portfolio premade layouts.
Build your site quickly and easily with Divi’s premade layouts
The Divi theme allows you to create just about any page layout you can imagine simply by dragging and dropping design elements in whatever order you like.
But Elegant Themes have made it even easier to get started by providing you with premade layouts, which you can customise by rearranging and adding your own content.
To show you how easy it is to use these premade layouts and how quickly you can use them to create your own website, check out this short video by Nick Roach of Elegant Themes:
How cool is that: customisable premade layouts that come with all the style and flair that we expect from Elegant Themes.
At the moment Divi comes with the following premade layouts:
General layouts – FAQ’s, About, Our team, Contact, Join, Portfolio
Content / sidebar layouts – Dual sidebars, Left sidebar, Right sidebar
Ecommerce layouts – Shop basic, Shop extended
Blog layouts – Blog standard, Blog tiled
Homepage layouts – Homepage, Homepage simple, Homepage store
Premade layouts – The beauty of these layouts is that you can edit them however you like. For example, if you like a layout, but would rather not have a particular element, simply delete it in the builder and its gone!
Nick Roach – Elegant Themes
Export and import layouts to create new websites
At some stage you’ll want to use some of the layouts that you’ve created, on other sites. The Divi theme makes that easy with its export and import capabilities.
The export / import is a simple two step process and this short video from Elegant Themes runs you through the full process:
Just to remind you of the export / import process:
- From your WordPress dashboard go to Appearance > Export Page Builder Layouts and click “Download Export File”
- This will export an XML file containing all your saved layouts, which you can save wherever you like.
- From the dashboard of your new site go to Tools > Import and from the list that appears click “WordPress”
If you don’t already have the WordPress Importer plugin installed, you’ll be prompted to install it.
- Install the WordPress Importer plugin and click “Activate and Run Importer”
- Click “choose file” locate the XML file and click “Upload File and Import”
- Select the username and click “Submit” and the XML file will then be imported.
To check that all the layouts have been imported create a new page and click “Load Layout” and you should see all the imported layouts.
The export / import capabilities of Divi make it a great choice of theme for developers who can quickly create custom layouts for use on client sites.
Another great reason for choosing Divi.
Importing & Exporting Saved Layouts In Divi – Your saved layouts can be exported from one WordPress installation and imported to a different one in just a few seconds. Each time you start a new project, you can import your pack of saved layouts and begin building your own or your client’s website faster than ever before!
Nick Roach – Elegant Themes
Import an additional eight premade business layouts
If you’re going to use Divi to create business websites then you’re in luck… Elegant Themes have created eight additional premade business layouts to get you off to a flying start.
The premade business layouts are:
- Corporate Homepage – features a large call to action section, a site banner, and a three column features section.
- Corporate Homepage 2 – features a large call to action header with an image and tabs module below. The bottom half of the layout consists of four image blurbs, client logos, and a final call to action.
- Corporate Homepage with Sidebar – features a large header with a right hand sidebar layout below. With this homepage you can display a company description, portfolio, and testimonials.
- Corporate Landing Page – features your logo, a short description of your company, and the services you offer.
- Infographic – this is a recreation of the page that Elegant Themes used to display an infographic of Matt Mullenweg’s 2013 State of the Word.
- Sales Page – description of what you offer, a company breakdown, pricing tables, and customer testimonials.
- Sales Page Extended – in addition to the sales layout above, this page features a large header image, call to action, and frequently asked questions.
- Contact Page – displays an image of your choice, your contact information, location, and hours of operation.
This is a great resource so head over to Elegant Themes and download your eight premade business layouts.
Import an additional six premade portfolio layouts
Don’t worry if you will be creating portfolio sites, because Elegant Themes have also created six premade portfolio layouts.
The premade portfolio layouts are:
- Creative Agency Homepage – perfect for displaying your portfolio right on your homepage, whilst also featuring your clients and their testimonials.
- Masonry Images Homepage – a nice way to display a bunch of images, no matter what their aspect ratio.
- Creative Agency Landing Page – displays your logo, tagline, and a link to your full portfolio. By turning on the parallax effect and uploading the same background image for the top and bottom sections, you can create the illusion of the white banner floating across a single image as you scroll.
- Extended Project 1 – displays a main image wtih the project description and meta data below. Beyond that are four blurbs, a river of images and a project grid for easy navigation to your other projects.
- Extended Project 2 – two column layout, which places your project info and images side by side. This template is also capped off with a grid of image for convenient access to your other projects.
- Extended Project 3 – similar to the Extended Project page in the Divi Demo. The diversity and length of this layout makes it great for case study pages and extensive branding projects.
Another great resource so take a look at Elegant Themes and download your six premade portfolio layouts.
Head over to Elegant Themes and pick up your copy of Divi… complete with premade layouts and other goodies
As I said at the beginning…
“What most of us thought would be just another theme, turns out to be a full blown theme builder complete with the elegance and ease of use that only Elegant Themes know how to provide.”
And that’s exactly what Divi is: a theme builder that gives you creative control of your website without the need of any coding skills.
To find out details of pricing etc. head over to Elegant Themes, put the Divi theme through its paces, see its features in action and check out the awesome documentation and videos.
And dont forget…. pick up those additional premade business layouts and portfolio layouts.
If you enjoyed the post and found it helpful I’d love to hear from you in the comments and if you’d like to spread the word about the Divi theme please use the social media buttons beneath this post.