How To Use Divi Templates

One of the ways we empower our Divi customs is past giving abroad Gratuitous premade layout packs each and every week. You can check them out here. We do this primarily considering we know Divi's Premade Layout Packs help you become a beautiful website up and running in minutes. Only here are six more than great reasons to utilize them:

They are Complimentary. Recollect of the fourth dimension and money you lot volition save compared to designing your website from scratch.
Each layout pack features individual page layouts designed strategically for a particular industry or niche.
At that place are 250+ layout packs to choose from (that's 1800+ individual folio layouts!). There'southward a groovy risk we have some that will work for you.
Industry-Leading Blueprint
They are easy to access. You can load premade layouts directly from the Divi Builder Library to any page in just a few clicks.
They come with royalty-free image assets. All images used throughout the layout pack are free for you to use without restriction for commercial and not-commercial utilise.

At present that y'all know the amazing value these layout packs tin can offer, hither's how to use them on your own Divi website.

How to Use a Premade Divi Layout Pack on Your Website

Authenticate Your Elegant Themes Subscription

Before yous can download Premade Layouts from the Divi Library you must authenticate your Elegant Themes Subscription. Hither'due south how to do it:

Navigate to Divi > Theme Options.
Select the Updates tab
Enter your username
Enter your API key
Click save changes

After you enter the Username and API Key, y'all volition gain immediate admission to the layouts. Y'all can find your API Cardinal under your member'south area on the Elegant Themes site. If not, when you click to import a layout to your page, you will be prompted to enter your Elegant Themes Membership Username and API Key.

Load a Premade Layout to a New Page Using The Divi Architect

Once your subscription has been authenticated, we have everything we need to right inside Divi to ready our website pages with one of 250+ premade layout packs. Each layout pack includes 7-9 page layouts (home, landing, almost, contact, etc.) we can use to blueprint our website pages. Basically, all we are going to do is create a new page for each of those page layouts and load the respective premade folio layout to each of those pages. For case, we will create a new page with the title "abode" and then load the corresponding dwelling house page layout to that folio. Then we'll create an "about" page and load the corresponding about page layout to that page and then on. We continue this until we accept a corresponding premade page layout loaded on each of the pages we create.

Create New Page and Use the Divi Architect

Let'southward commencement past creating a new page. From the WordPress Dashboard, navigate to Pages > Add together New.

Requite the page a Title and then click to use the Divi Builder (on the forepart end).

Choose a Premade Layout

Adjacent, select the pick "Choose a Premade Layout" from the 3 options that pop upwards when deploying Divi on a new page.

This will automatically open up the "Add from Library" popup from the Divi Builder settings carte. By default, the premade layout tab volition be open up, displaying the 250+ premade layouts available.

Alternatively, yous tin can always choose a premade layout past clicking the Add together from Library "+" icon at any time to open up the Add together from Library popup.

Search and Find the Page Layout

Inside the Add together from Library popup, you can find the blazon of layout pack you are looking for past using the search bar and/or category filters on the left. Or you tin simply scroll down and look at all the layouts.

TIP: The layouts are listed from oldest to newest, and so if you want to find the latest of our gratis layout packs, just ringlet to the very bottom.

Load a Premade Layout to the Folio

In one case y'all select the layout pack you want, you will come across a preview of all the layouts available on the right a preview of the selected folio layout on the left. To load the layout to the folio, just click on the page layout yous want and click the "Use the Layout" push button.

In just a few moments, the folio volition be loaded onto your new folio. Only like that, you have a fully designed page filled with mock content that makes it easy to tweak and make your own.

Make Edits and/or Publish Folio

At this indicate, feel free to make any edits to the page or get out it only for now and come back to it afterwards all the pages are complete. Make sure to save it equally a typhoon or publish the folio earlier you continue.

Repeat the Process of Loading the Page Layouts to New Pages

Once you have ane of the premade folio layouts loaded to i page using the steps to a higher place, you can continue the same process to create the rest of the pages and load the corresponding premade page layouts to each page.

Once you have all the pages created using the premade page layouts, you now have a huge jumpstart to a brand new website design in identify.

Customizing the Pages that have Premade Layouts

Once you lot accept the page layouts in place, you lot tin get dorsum and edit the pages you lot created to finalize the design before taking the site alive. Using the Divi Architect, yous can get back to each page and brand all edits to the content and design visually. For, this you will need to be familiar with the basics of how to use the Divi Architect. But don't worry, you lot don't need to be a coder or an good in Divi to go your site alive. In fact, y'all tin use all the images included in the pack likewise so no need to worry about replacing those if you don't want to.

TIP: Make certain you lot update any forms with the necessary options to make them work. Contact forms should include an email address. Email Optin forms should be connected to a mailing listing. You don't want to miss out on whatever time to come leads.

Using Layout Pack Image Avails

In one case you lot load a page layout to a page on your website, all the paradigm assets used in the design volition automatically import to your media library and will remain accessible and visible on your website. Feel gratis to use those images as y'all meet fit when putting the final touches on your website.

In addition to the compressed images used with each page layout of a layout pack, each of the 250+ premade layout packs has a downloadable full resolution paradigm binder that contains all of the original image assets used for the layout pack. Depending on the layout pack, these images assets tin can include custom photos, graphics, icons, and more than. And source files (PSD files, AI files, etc.) that yous can customize for your own branding needs.

Hither'south how to get them.

Download Full-Res Images from the Web log Post

To download the image assets folder for a particular premade layout pack, you tin can go to our web log and search for the premade layout pack (ie. "Gratuitous Software Layout Pack"). Then select the post featuring the free layout pack.

Toward the stop of the mail service, you lot volition find the download push titled "Download the full res images avails".

Unzip and Open the Folder

Once the zip file has been downloaded, unzip the folder and open information technology. There you will tin can discover all the source files and full resolution image assets for the pack.

Employ Full Resolution Original Images

About of the total resolution paradigm assets (photos, background images, graphics, illustrations, and icons) will come in JPG or PNG file formats which are easy to open and make simple edits (sizing, cropping, etc.) using whatever default photo app on your computer (similar Preview).

Utilise source files for changing the colors of custom icons, graphics, etc. to match your brand

In some cases, you lot may want to admission the source files used to create the image assets. For example, you may want to open the source file of a particular icon set up to change the icon colour scheme to lucifer your site. If yous want to edit the source files, you volition demand a more advanced photograph editor or graphics software like Adobe Illustrator to make those changes.

Boosted Steps for New Websites

For those of you lot setting up a Divi website for the first fourth dimension, there are a few more steps needed to get your website upwards and running. These steps are non all-inclusive. I'thousand sure each website has different needs beyond the scope of this article. But, this should help get y'all up and running and then you tin focus on other needs.

Create a Primary Menu for Your Website

Once our pages are ready, we demand to create a new primary carte du jour for the website. This volition allow us to command which pages/links bear witness up in the main menu of the default header in Divi.

To create a new menu post-obit these steps:

Navigate to Advent > Menus from the WordPress Dashboard
Enter a menu name
Under Carte du jour Settings, fix the Display location to Primary Menu
Click Create Card

Once the new chief bill of fare is created, nosotros are prepare to add our pages to the menu. Here's how:

Nether the Add Menu items area on the left, you'll see a list of pages that we accept created under the Pages toggle. Select all of the pages.
Click "Add to Menu".
Under the Menu Structure area, organize the card items still you similar using drag and drib.
Then salvage the menu.

Create a Static Habitation Folio for Your Website

By default, WordPress will display your latest posts (dynamically) on your homepage. If y'all want to change your homepage to display the static habitation page you created, here's what to do.

Navigate to Settings > Reading
Nether Your homepage displays, select "A Static Page".
Select the page yous want to use for the homepage.
Salvage changes.

Update Divi Theme Options

After your website is set up with pages, a static homepage, and a master menu, the 1 obvious matter you are missing is a Logo.

Logo

You lot tin upload your custom logo to your Divi website nether Divi Theme Options (hither'southward how).

When you have fourth dimension, you can go through the theme options and see if at that place is anything you need to update. For now, I would definitely upload your logo. And, if you lot aren't going to use the Theme Builder for a Custom Header and Footer, I would add my social media follow URLs here too. These testify upwardly on the bottom correct of the default footer bar. For more, visit our documentation on how to utilize Divi Theme Options.

Theme Builder Templates

At this betoken, y'all are set to extend the design of your spider web pages to all areas of your website. The Divi Theme Builder takes the power of the Divi Builder and extends it to all areas of the Divi Theme, allowing you to build custom headers, footers, category pages, product templates, web log mail templates, 404 pages, and more than.

To admission the theme architect, navigate to Divi > Theme Architect.

There you lot will be able to create countless custom templates with dynamic content using the aforementioned premade layouts you used to build your static pages. For more on how to use the Theme Builder, bank check out the Divi Theme Builder documentation page.

Header and Footer

If you lot desire to use 1 of our Complimentary Premade Header and Footer Templates, nosotros might have one for the same layout pack you. Practice a search on our blog to see if there is one for your layout pack of choice. If not, you lot tin do a more general search to detect all the header and footer templates we have created free for download. They would be a great way to become jumpstart the header or footer design.

For more, check out how to build a custom header with Divi'due south Theme Builder.

And, cheque out how to build a custom footer with Divi's Theme Architect.

Web log Post Template

If y'all plan on having a blog for your website, you should have a blog mail service template that matches style of your static pages. That style all of your posts will have a consistent design sitewide without you having to blueprint each post individually.

For more than, bank check out how to pattern a blog post template (or download it for free).

And, don't forget to search our weblog for a free web log post template that may perfectly friction match your layout pack. If not, y'all can always use one every bit a jumpstart to your own design.

Category Page Template

Category page templates are also a must for blogs. For more than check out how to blueprint a category page template.

And, don't forget to search our weblog for a free category page template that may perfectly lucifer your layout pack. If not, you can always apply ane as a jumpstart to your own design.

404 Page

A 404 page is an important page for your website considering information technology controls what users see when they visit a broken page on your site. For more, check out how to design a 404 page template.

And, don't forget to search our blog for a gratis 404 folio template. In that location are a few bachelor to help you get ane up in running in no time.

Final Thoughts

Using one of Divi's free premade layout packs is a dandy way to get a new website upward and running in just a fraction of the time it would commonly take. Let's exist honest, dandy design is not an like shooting fish in a barrel affair to observe. Then it helps to know that we have access to hundreds of designs made by our manufacture-leading blueprint team right within the Divi Builder. And the layouts aren't but for static pages. Yous can utilize the design elements from these layout packs to create headers, footers, and whatsoever custom template.

What has your experience been with using premade layout packs?

I look forward to hearing from y'all in the comments.

Cheers!