Template Manager

In this article, we're going to discuss about the Template Manager, how to access, save and use the templates in builders throughout both X and Pro themes.

  1. Overview
  2. Getting to the Template Manager
  3. How to Use the Template Manager
  4. How to Save the Templates
  5. How to Use the Templates
  6. What are the Element Defaults
  7. What is the Design Cloud
  8. Frequently Asked Questions
  9. Summary

Overview

The Template Manager is the control center of your theme which you can use to save parts of the contents which you created using the builders and use them again on a different section of the current website or even the other projects. There are 4 types of templates available:

  • Presets - The settings of an individual element can be saved, allowing you to recall them on elements of the same type. (Available in both X and Pro themes)
  • Content - The content that you add in the page using the builder elements. The Content Template consists of all the sections or selected sections of the content you built. (Available in both X and Pro themes)
  • Header - The header content that you add in the Header Builder. The header Template consists of all the bars, containers and elements or selected ones of the header you built. (Only available in Pro theme.)
  • Footer - The footer content that you add in the Footer Builder. The footer Template consists of all the bars, containers and elements or selected ones of the footer you built. (Only available in Pro theme.)

Getting to the Template Manager

To get into the Template Manager go to WordPress Dashboard > X > Templates in the X theme and WordPress Dashboard > Pro > Templates in the Pro theme.

X / Pro Template Manager

How to Use the Template Manager

If you have not used the Template Manager before you will be greeted with the screen below:

Template Manager Overview

There are three case scenarios of the Template Manager usage:

  1. You can start by clicking the Import Starter Pack button which will import a collection of different starter templates called Themeco Starter Pack that you can use in various parts of the website.
  2. If you already have exported templates available from other projects and downloaded to your computer, you can use the Choose a Template section and drag and drop the template file to the dotted area to import the templates and then use on the website.
  3. You can start saving the templates using various builders on the website and you will see the list of the save templates in the Template Manager screen. Then you can edit, delete and manage the template if needed.

The Template Manager listing screen has 7 major parts as follows:

Template Manager Detailed Overview
  • Type Filter - By default, All Template types are shown in the Template Manager. If you wish to narrow down your search a bit more, you can specify which Template type you'd like to view here. For example, if you only need to look through your included presets, clicking the Presets filter will only display v2 Element presets, and omit all Content, Header, and Footer Templates.
  • Template Search - You can search for the templates in this section to find the one that you are looking for. Will search through the Template name and type content.
  • Select - The Template select column is used to choose a grouping of Templates that you wish to download or delete. Once at least one Template is selected, a popup will appear at the bottom of the screen with available actions.
  • Name - The Template name column displays the given label for a Template. The name of a Template can be updated by double-clicking in this column on the specific Template you wish to rename, which will allow for quick editing of the name, and then hit Enter to save.
  • Type - The Template type column displays which kind of Template you're working with (i.e. Content, Header, Footer, or Preset). If the type is Preset, it will additionally display which Element the preset is for (e.g. Navigation Inline, Navigation Modal, et cetera).
  • Preview - The Template preview column will display an optional image of the Template if provided by the user. By default, a + sign will be visible, and when clicked, the WordPress media uploader will appear and allow you to assign an image. If an image is present, hovering over the column with an image icon will display the preview image in a popup. This is incredibly helpful for giving a quick glimpse of the Template users are about to interface with.
  • Hide - The Template hide column allows Templates to be present in the manager, but hidden in the actual site-builders to keep those dropdowns cleaner by not displaying options that you may not be planning to use right away.

How to Save the Templates

Saving the template is an important step to use the Template Manager. Saving takes place inside the builders and depending on the type of the template it may differ slightly:

Content

The Content Template is a part or whole content of a page which you can save. You need to be inside the Cornerstone in X or Content Builder in Pro theme to be able to save a content template. Follow the steps below to save a content template:

Cornerstone / Content Builder Load / Save Template
  1. Go to the Layout tab in the Cornerstone or Content Builder.
  2. Click the Save Template at the top section of the Layout tab.
  3. A popup will appear which you can enter a name for the template.
  4. Below the popup, there will be the list of sections. You can select all or some of the section to be included in the template.
  5. After the selection of the sections click the save button.
Save Template

Element Presets

Saving a Preset Template is done when clicking directly into an Element. Because a Preset Template is effectively a snapshot of the settings used on that Element at that time, no selections need to be made like when saving a Content Template. To save an element preset follow the steps below:

  1. Click the element to show the element controls at the left section of the screen.
  2. Click the Save Preset button at the top of the element controls.
  3. Enter a name for the preset.
  4. Click the Save button.
Preset Templates

Element preset is also available in the Pro header and footer builder elements. To create an element preset on those builders you need to follow the same steps above, the difference is the position of the preset section which is at the left section of the element controls:

Header / Footer Preset Templates

Headers and Footers

You can save the headers and footers as templates in the header and footer builder of the Pro theme. Go to the initial screen of the header or footer builder and hover your mouse over a header or footer. Additional controls will appear for that header or footer which includes the Save as Template button that you can use to save the header as a template:

Header / Footer Templates

Clicking the Save as Template button will show a popup that you can enter the name of the template and hit the Save button:

Save Template Process

How to Use the Templates

Now it's time to use the template that we have saved before! Each template type has its own way of template usage which we discuss below:

Content

Follow the steps below to load a content template in the Cornerstone or Content Builder:

Load / Save Template
  1. Go to the Layout tab of the builder.
  2. Click the Load Template button at the top of the Layout tab.
  3. Select the template name that you want to load from the list that appears.
  4. Click the Insert button to load the template into the page.
Select Template

Element Presets

Just like the saving an Element Preset, click the element that you want to load a preset on and follow the steps below in the left section of the screen where the controls of the element show:

  1. Click the Apply Preset button to show the input that shows available presets.
  2. Select a preset from the list.
  3. Hit the Apply button to load the preset.
Apply Preset

After you hit the Apply button a popup will appear double checking the action as you may lose the current control settings of the element.

Apply Preset Warning

Headers and Footers

To load a header or footer template in the Pro theme follow the steps below:

  1. Go to the initial screen of the header or footer builder.
  2. Click the Save Template button at the left section of the screen.
  3. Select the template that you want from the list which appears in the input.
  4. Add a name into the input below which will be the name of the new header or footer that will be created based on the template that you selected.
  5. Hit the Create button.
Create Header

What are the Element Defaults

By default, all Elements have a very generic styling applied to them when first placed into the builder. The default view of the element can be changed by clicking on the Settings button in the lefthand bar on the Template Manager page (the cogs icon):

Template Manager

You will notice that there is a dropdown corresponding to every Element available. Any Preset Template you have saved can be set as the default styling for that corresponding Element whenever you use it going forward. For example, we can set the default view of the Text element to one of the templates that we have created before. After we hit the Save Elements Default button the default view of the Text element will be the one that we selected here. The Text Element can still be further edited, all we're doing here is instructing the builder what initial styling to apply. This is a great feature to take advantage of if you have a general theme going throughout your website and want to have a consistent starting point for all of your elements.

What is the Design Cloud

Imagine a collection of over 100 premium design assets and growing directly at your fingertips. Next, imagine these were ready to be installed with the click of a mouse, allowing you to build everything from a tricked out button to a pixel-perfect header or even a beautiful content-rich landing page. Imagine no longer because you get all this and more in Design Cloud!

Available to Pro users, the beauty of the Design Cloud Library is that you're able to quickly browse multiple template types (e.g. Headers, Content, Footers, Presets, et cetera) to download what you need as it is called for. As your project grows, you might think to yourself "I'd love to have a really cool cart style for my online store," come back to the Design Cloud, find that preset and download it to your library of templates to pull from.

For instance, you might be working on a new project and wish you had a header, to begin with, and get a good starting point. You'd go to WordPress Dashboard > Pro > Templates and click the Design Cloud at the top right section of the screen:

Design Cloud

After browsing through the list of available Headers, let's say that our Tophat Security header grabs your eye:

Tophat Security Install

You can go check out the live demo of that template to see that it suits your needs (a live demo is provided for every template in Design Cloud). If you decide that the template fits the bill, you can come back and install that item directly within the Design Cloud, where it will then show as installed:

Tophat Security Installed

Once installed, that template is available for you to use as you please throughout our various builders. Since Tophat Security is a header, if we hop over to the Header Builder and select the Use Template option, we'll see our newly downloaded item in our list of available templates:

Create Header

Currently, Design Cloud features custom templates of all types (Headers, Content, Footers, and Presets) curated and designed by Themeco to meet our standards. We also have Template Packs, which can be any number of combination of our various template types.

For now, we are featuring four Preset Packs, which include a unified set of styles for our entire group of Elements, or can be used to demonstrate different design possibilities with a specific Element. In the future, packs might feature multiple Headers, Content, Footers, and Presets, all creating a unified website design experience that can be used in various combinations to create whole website designs.

Additionally, we have plans to open up a template submission process to anyone in our community who wishes to share something they've created (currently in beta). All templates submitted will undergo a curation process to ensure quality, so you can rest assured that anything added to the Design Cloud will meet our highest standards.

Frequently Asked Questions

What is the purpose of the Template Manager?
The purpose of the Template Manager is to store all of your available template files. In Pro, this includes Header Templates, Content Templates, Footer Templates, and Preset Templates and in X this includes Content Templates and Preset Templates. Standardizing the templating process across many different types of assets allows for a streamlined experience and portable data.


How can I organize my templates?
There are several ways you can organize your template files. For starters, each template can be named/renamed on the Template Manager home screen just by clicking into the text. Any change you make here is automatically updated across your builders. You can use names such as MyTemplate1 / MyTemplate2 or Label1 / Label2 to group various assets together or come up with your own naming convention. You can sort by name or type, and you can even view just one particular type of template by using the navigation at the top.


Why does an export include everything in one .zip as opposed to individual template files?
One of the primary goals of the Template Manager was to make it easy to move your assets around. With this in mind, when you export a group of Templates we group those into one file. We do this for several reasons. One, letʼs say you are referencing the same image in multiple templates. You wouldnʼt want that image exported multiple times and subsequently imported multiple times into your new site. Two, by doing it this way we can include all colors and fonts in a more intelligent way. If you only want individual template files, you can do that as well! Simply export one file at a time and the zip will only include that asset.


What happens when I hide a template?
When you hide a template in the Template Manager it will not show up in your builders. It will still be in your site since the Template Manager functions as a library of sorts for your assets.


Do Design Cloud templates include any sort of specialized functionality (e.g. forms)?
The purpose of the templates provided by Design Cloud is to give a baseline to start from in which users can build out other elements of their website. With forms, Design Cloud templates may present a stylistic idea but will not include these functional pieces of content. For instance, our Mail Footer Template presents the idea of a subscriber opt-in form on top of a more traditional footer section. We cannot provide a working form in an example like this because not only is this type of functionality not native to WordPress (it would require some form of a plugin), often users will have different third-party services that they prefer to use for these situations. That does not preclude us from being able to demonstrate a layout concept in which users can easily update with their own markup or services as they need on top of the starting point provided by the Design Cloud template.

Summary

We've discussed the Template Manager in the X and Pro themes in this article. First, we've explained how to access the template manager, then we've introduced different kinds of the templates and how to use them. That included the saving and loading of the templates across different builders. Then, we've talked about the element defaults and how to set them properly. Finally, we've delved into the Design Cloud Pro theme specific feature and concluded the article with an FAQ section.

See something inaccurate? Let us know