Introducing a powerful and efficient way to customize your templates for different article types instantly through MAZ. Here is just a brief overview of all of the powerful productivity features that Template Designer unlocks for your team:
- Create and manage infinite templates
- Assign templates per feed
- Assign templates per article
- Drag & drop reordering of elements
- WYSIWYG style editor
- Inline preview of various device orientations
- Automatic media queries + breakpoint support
- Infinite custom fonts
- Integrates with existing CMS tags
- Instant previews of any article
- Share previews with team members
- Publish to code instantly
In this guide, you will learn how Template Designer works, dive deeper into the different features and how to publish your first custom template.
Upon logging in that the MAZ Control, hover over Media Manager in the navigation and click on Template Designer.
This will take you into the main Template Designer control center. Immediately, you will be presented with three different options
DEFAULT MAZ TEMPLATE
The MAZ default template that your app uses by default. This template is already active for all of your layouts.
Where you manage all of the different fonts that your app uses and upload new ones
Create a new template from scratch
Default, Active and Duplicate
You’ll notice within the Template Designer control center, you have toggles for DEFAULT, ACTIVE and DUPLICATE. There must always be one template that is the default and that is active.
This allows you to assign any template as your default for any article in your app. You can’t change the default until you have another template
This template is live in the app environment for all end users. You can now easily enable and disable templates with the click of a button
If you want to keep all of the attributes of an existing template but tweak a few elements, you can easily duplicate the template to create another version
Before you get started creating new templates, we do recommend squaring away which fonts you want to have access to.
When you click into FONTS, you won’t see any fonts listed. That means your templates are currently using the default device font library (for example San Francisco for iOS).
The cool thing about Template Designer is now you can host your brand’s fonts and experiment with different font styles to your heart’s content.
To add a new font, click + FONT
Template Designer currently supports the following Free Google Fonts which you can add to your app’s font library directly in the Font selector; no need to download separate files.
If you have licenses for custom fonts, you can upload it directly into the back end. Template Designer accepts both .ttf and .otf font files.
Once you have activated a new font, all of your templates will have the ability to access those fonts moving forward for your headlines, body text, etc. You can always add new fonts later.
Creating Your First Template
Once you have your fonts ready to go, click +Template from the main control center to start designing your first template. You can create multiple, and use them accordingly based on the type of content you are sharing. You can also create separate layouts for both mobile, tablet, portrait and landscape orientations.
First, name your template. We recommend picking a name that describes the look that you are going for (ex: HEADLINE at the TOP) so when you apply it to content, you’ll know the primary function of the template.
Disclaimer - Not all of your styles will be automatically linked to your templates
Then, click on each item to adjust your customizations. Here are the different elements that you can customize:
- Top Margin
- Bottom Margin
- Header Media
- Horizontal Line
- Pull Quotes
- Ordered Lists
- Unordered Lists
- Inline Image
- Image Captions
- Inline Video
- Video Captions
Depending on its type, each element has different editing options, detailed below.
For each of the different types, you now have granular control over how these elements are rendered within the app and interact with other elements in the articles themselves. Below, you will find a list of all of the different ways you can customize your content.
- Display - On, Off
- Placement - Left, Center, Right
- Margins - Left, Top, Bottom, Right
- Line Height - Proportional to font size
- Character Spacing - Includes negative values
- Font Style - Automatically pulled from the Font Library
- Font Size - 0 to 100
- Font Color - Hex values
- Caps Rules - Case sensitive, Upper case, Lower case
Ordered - Same as Text
- List Style - Decimal, Lowercase Alphabet, Uppercase Alphabet, Lowercase Roman Numerals, Uppercase Roman Numerals
Unordered - Same as Text
- List Style - Disc, Circle, Square, None
- Margins - Left, Top, Bottom, Right
- Font Color - Default link color
- Active Color - Post click color
- Margins - Left, Top, Bottom, Right
- Thickness - Pixels
- Line Color - Hex values
- Margins - Top, Bottom
- Ad Label - On, Off
- Label Text - Editable
With each new product release cycle, we will continue to add more editing capabilities, so please contact us if there is something you would like added to the element editor.
Drag & Drop
Now you can easily shift the order elements around in your templates: just simply drag and drop each element to place it where you want.
Drag and drop applies to the following elements: HEADER MEDIA, DATE, HEADLINE, SUB-HEADLINE and BYLINE. You’ll notice that you can’t adjust the order of style elements such as H1 text or links. since those are embedded within the content itself.
The game changer is once you have decided on an element order that you like, you can now assign it to any content that you publish within your application. You can also easily make any tweaks and publish any formatting changes automatically across all of the relevant content.
Apply To All Devices + Orientations
Template Designer supports different layout options for 4 different device view configurations:
- Mobile Portrait
- Mobile Landscape
- Tablet Portrait
- Tablet Landscape
When this box is checked, all applicable style changes made to the element will be applied across the board to both Mobile and Tablet: Portrait and Landscape formats. Some styles, such as line height, aren’t applicable across devices by design since what works on mobile won’t translate to tablet.
You’ll notice that if you uncheck the box in one section such as Mobile Portrait, it will automatically uncheck it across all viewports. To link them back, you can recheck them at any point, but remember that it will then override any existing formatting.
Save & Preview
With the Save & Preview function, you can now preview any link that is hosted on your website or within the MAZ Media Manager and see how your new template will be rendered in any device orientation.
MAZ generates a preview link that you can view instantly in browser or email to yourself and anybody on your team. These new collaboration tools should be a game changer to QAing your content on the relevant device types and improving cross team collaboration.
Saving is only available to MAZ users that have upgraded their plan to include Template Designer. Please contact firstname.lastname@example.org to unlock these features in MAZ.
Assigning Templates to Content
Template Designer gives you the power to assign templates across an entire feed or pick and choose individual articles.
Once you are satisfied with how your template looks, head into Experience Creator and easily update what you currently have in place. Within your RSS and Feed Builder Sections, simply click “Edit” and your new template will be available to select and assign to any feed that you link.
Additionally, you can now assign that template to any individual articles that you create within Media Manager or link to within Feed Builder.
You also have quick access to template preview so you can quickly check out your content and/or forward to a colleague.
Save vs. Publish
Once your template is finished and ready to be launched, you’ll notice two different CTAs in the top right of Template Designer: PUBLISH and SAVE. There is a key distinction between the two.
Saves all of your changes to MAZ. Templates can only be viewed within MAZ environments. You’ll notice that if you have unpublished changes, there will be an alert above the buttons
Publishes your changes to your live application and end users. Any content that has been assigned to the template will be updated accordingly. No need to resubmit your app to the app store!