Templates in Flexitive allow you to quickly build a fully animated HTML5 design in minutes. Flexitive Templates are designed to be easy to use, and they provide a perfect starting point for building design and working with animations. An example of the preview of a Flexitive template is below.
Templates are meant to act as a starting point for building your project. You can use all of the positioning and animation of elements that are provided by default, and your design will look great. If you would like, you can still make edits to the positioning and size of your elements, as well as the animation sequence, to better fit your project.
Template Selection Screen
Whenever you start a new project, you will automatically be taken to the Template Selection Screen. In the template selection screen, you'll be able to select a template to use to start building your design.
If you would like to see a preview of all of the sizes and animations of a template, click the Preview option in the bottom right hand corner of the template.
Flexitive Editor Lite
After you select a template to work with in Flexitive, you will be taken into Flexitive Editor Lite.
In Editor Lite, you'll be able to take the first steps to creating your Flexitive design using a template by labeling your design, uploading assets, and setting text within the element.
Step 1: Edit Design Labels
Editing the design labels in this section will automatically update the labels on the Flexitive design in the design module. For more information, check out our article on Labeling your Designs.
Step 2: Edit Design Content
In"Step 2: Editor Design Content", you will be able to:
- Swap out Images: Upload a new image to your design to swap out the default image in the template for your own.
You can upload a new image by clicking the "Upload New Image" button, or by dragging and dropping your image onto the "Drop Files Here" field. You can also change the label for your design with a description of the layer.
- Edit Text: Set new text for your Flexitive design by inputting the text into the provided field in Editor Lite. Text will also often have a recommended character count for how many characters you should try to include in the text element.
You can also change the color of the text in your design, and change the label of the text to a better description of the layer.
- Edit Shapes: Change the background and/or border color of shapes in your design. You can also change the label of shape to better match the description for the layer.
Step 3: Preview, Edit, or Export Design
In "Step 3: Preview, Edit, or Export Design", there are 3 different buttons that will allow you to:
- Preview your Design: Clicking Preview will refresh the preview on the right hand side of Editor Lite. By previewing your design, you'll be able to see what the finished version of your design will look like.
- Edit your Design: Clicking Go to Editor will open the Flexitive Editor for your design. Here, you'll be able to make any edits to your design that you could make with any other design, including changing the size & position of your elements, adjusting your animation sequence, or activating new sizes.
- Export your Design: Clicking Export will open the Flexitive Editor for your design with the Export Panel open. From here, you'll be able to export your design for the channel you need.
Clients with Enterprise accounts can create Custom Templates built to brand guidelines that require little modification and reduce design time. These templates will be available whenever you start a new project in the Template Selection Screen.
Reach out to your account manager or firstname.lastname@example.org to set up your custom templates. Custom Templates will be added to your site in 2 business days.