Building a template's input form
To turn a design into a working template, you need to create and connect input fields. Users of the template can only interact with your template via the input form. Here is an example of what the input form of a finished template might look like:
Notice that a user can only edit the template in a very restrictive way. In the example above, the user cannot change colors, fonts or the layout, and the text "#Bluepic-STUDIO" cannot be changed either. Creating restrictive templates – i.e. templates where users can only edit the properties you want them to edit – is the core of Bluepic.
It all comes down to the input fields that you create and connect.
Creating new input fields
If you set the status of a property to “Field”, you can select the type of input field you want to create and connect.
There are a total of 8 different types of input fields. However, only the types that are compatible are displayed for each property. That's why you can only see three different types in the example above - Icon, Image and Select.
Input field parameters
Once you have created a new input field, you can define the parameters for the field. Different types of input fields have different parameters. All input fields have a description parameter. The description is the title that is displayed above the field in the input form. The parameters can be edited at any time in the input fields view.
Input fields view
In the “Input fields” view, you can manage the input fields you have created.
The panel on the left is similar to the “Layers” panel, except that it contains your input fields instead of objects.
You can expand each input field card to manage the parameters of the field.
The order of the input fields can be changed by dragging and dropping cards in the input fields panel.
Preview Tab
You can set the default (placeholder) values of your input fields in the preview tab.
Most common input fields
Although Bluepic STUDIO offers you great creative freedom - both in designing and creating input forms - in most cases only a few common input fields need to be created for a typical template.
Image source
To give the user the option of replacing an image with a different one, connect the “Image source” property to an Image input field.
Image crop
To give the user the option of cropping an image, connect the “Crop image” property to an Image Crop input field.
Text content
To give the user the option of editing a text, connect the “Content” property to a Text input field.
Fill color
To give the user the option to choose between discrete color options, connect the “Fill color” property to a Select field. Set the values of the field options to the hex codes of your desired color options.