Table of Contents
The Template Manager is the central location where you can manage all of your layouts and element presets built using v2 Elements. This includes the following:
Preset Templates – all control settings for an individual v2 Element
Content Templates – all layout and element information for page content (can be saved as an individual section or multiple sections)
Header Templates – Pro only, saves all header information including bars, containers, elements used, and their respective settings
Footer Templates – Pro only, saves all footer information including bars, containers, elements used, and their respective settings
Getting to the Template Manager
To get into the Template Manager first you'll need to visit your WordPress admin area. Once there, look in the side menu and find the X Theme or Pro menu item depending on which theme you're using. Hover over that item and select Launch to fire up the site builder and go to the main screen. Once there, click on the Templates link from either of the locations in the image below, which will launch the Template Manager:
Using the Template Manager
If you've not used the Template Manager already, when you first arrive you will be greeted by this screen:
You can start using Templates in a few different ways:
- If you just want to begin with a collection of starter Templates across all formats (presets, content, and headers/footers if you use Pro), click the Import Starter Pack button in the "Get Starter Templates" section. This will download and install our "Themeco Starter Pack" of various templates that you can start assigning and playing with immediately to see how all of the pieces work together.
- If you have some Templates that have been exported by yourself or someone else, you can import them using the section to the left of the screen by clicking on Choose a Template or dragging your template into the area with the dashed outline. This will upload your chosen templates into the manager for you to begin using.
- Start creating your own templates in the various builders, and then save them out as templates. Once a template is saved in a builder, you can come back here to the manager to rename templates, bundle and export, et cetera.
Template Manager Breakdown
We'll take a moment to run through the numbered areas in the screenshot below to describe what that portion of the manager does:
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 – A fuzzy search that will scan all of your Templates for the keywords entered. 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). These types are hardcoded and cannot be changed.
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.
Each Template type is saved in a slightly different place based on how they function. We'll run through where to save each Template type below:
From the Layout tab in the Content Builder, you will find a Save Template option near the top of the pane:
Once clicked, a tiny modal with an input and a save button will appear in place of the Save Template button and the representative sections in the Layout pane will all be outlined blue, indicating they are an active selection to be saved. Before actually saving a template, you can select which sections you wish to save into the template. If you wish to save the whole page, you can go ahead and do so, or if you only want to save out a couple sections as a reusable group, you can do that. Once you have made your applicable selections, name it in the input above and click the Save button.
v2 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. Saving a Preset Template for an element is done using the Name Preset input in one of the first sections of a selected Element. This input is found below in the Content Builder:
And is found below in the Header and Footer Builders:
To save a Preset Template, simply name it in the input and click the Save button.
Headers and Footers
Header and Footer Templates are both saved from the same spot within their respective builders. To save a Header or Footer Template, go to the builder index and hover over the desired Header or Footer you wish to save. When you do this, a grouping of actions will appear at the end of the item. The last button in this grouping, "Save From Template," is what you will click to open a popup, name your Template, and save it out to the Template Manager.
Each Template type is used or assigned in a slightly different place based on how they function. We'll run through where to assign each Template type below:
From the Layout tab in the Content Builder, you will find a Load Template option near the top of the pane:
Once clicked, a tiny modal with a dropdown menu and an insert button will appear in place of the Load Template button and the representative sections in the Layout pane will all be grayed out, indicating they are inactive. After selecting the Template you wish to insert into the page, you can perform one of two actions:
- Clicking the Insert button after the dropdown menu will insert the selected Template to the very end of your page. None of your current content will be deleted, the new Template will only be added to the end.
- Clicking the miniature Insert Template buttons that appear above and below each representative section in the Layout pane will insert the selected Template into that specific spot between the sections. None of your current content will be deleted, the new Template will only be added to the end.
v2 Element Presets
Assigning 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 inserting a Content Template. Assigning a Preset Template for an element is done using the Select Preset dropdown menu in one of the first sections of a selected Element. This input is found below in the Content Builder:
And is found below in the Header and Footer Builders:
To assign a Preset Template, simply select it from the dropdown menu and click the Apply button.
Headers and Footers
Header and Footer Templates are both assigned from the same spot within their respective builders. To use a Header or Footer Template, go to the builder index and click on the Use Template button in the leftmost section, which will reveal a dropdown menu:
From the Select Template dropdown, pick the Template you'd like to use. Once you do so, a preview of the Template will appear above and an input to name and create the Template will appear below the dropdown menu:
If the template selected is the one you would like to build your Header from, give it a name in the Name Template input at the bottom of the leftmost section and then click the Create button to being editing and using that Header Template.
By default, all Elements have a very generic styling applied to them when first placed in some content. For example, adding a button will always initially result in the following:
This can be altered by clicking on the Settings button in the lefthand bar on the Template Manager page (the cogs icon). Clicking that button will reveal the following interface:
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 the example seen above, we're assigning the Starter: Button style, available in our Starter Pack. Doing so would mean that any new button added to a page would now result in the following:
This button can still be further edited just as any other button, 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.
Design Cloud (Pro)
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:
After browsing through the list of available Headers, let's say that our Tophat Security header grabs your eye:
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:
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:
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.
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.
Can you explain the different types of templates and how they work?
The Template Manager currently supports 2 types of Templates if you use X/Cornerstone, and an additional 2 more for Pro users. They include:
Content Templates – comprised of all sections on your page and can be as small as one section (X and Pro).
Preset Templates – include customized styles for Elements (X and Pro).
Header Templates – comprised of everything you can build in a header including images, content, and more (Pro only).
Footer Templates – comprised of everything you can build in a footer including images, content, and more (Pro only).
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 optin 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 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.