Template Builder
How the text auto-resize work ?
The auto resize feature allows you to automatically resize the text contained in a container if it exceeds the container in number of characters. Check out the article explaining how the container system works in Abyssale (hSome readersAdd new format to your template
Add new format to your template Select your template and edit it Click on the Add new format button on the left side bar You can now choose between one of the predefined formats (the most used on the market today) or create your own format with your own dimensions Name your format selection or let the defaultSome readersWhat is the difference between Contain and Cover image parameter?
Control how your image is displayed on your template with the fitting parameters Contain setting The Contain setting will resize an image to fit within the bounds of its container with no cropping. Cover settingSome readersApply a color overlay to an image
Apply a color overlay to an image Add an image and select it Enable the Overlay setting Set the same color in color1 and color2 Set the same opacity via the " A " field in the color picker on both colors Opacity setting on the color picker (https://storage.crisp.chat/users/helpdesk/website/bd8d3f48d81ba800Few readersAdd a rating element
Add a rating element Click on the rating button on the top bar A rating element are added with default attribute, you can now change Score Background color Filled color Dimension Margin - define the space between the shapes of the score element ShadowFew readersAdd an element that is not an image, rating, text or shape.
The template builder has several features to design your templates. You have the possibility to add illustration elements from the component library. In this library you will have the choice to add an element of one of these components: Feather - Open source icon Twemoji - Open source emoji Material icons - Open source icon Undraw - Open source illustration Add an element from a component Insert an element fFew readersAdd an image from your folders or from the Unsplash library
Add an image from Unsplash Click on the image button on the to bar Click on From Unsplash button in the right panel Search your desired image and select it Add an image from your folders Click on the image buttonFew readersAlign an element with the format frame
Align an element with the format frame Select an element (image, text, logo, shapes, ..) Click on the desired alignment button that meets your needs Left - put the element on the left side of the frame Center - align the element vertically with the frame Right - put the element on the right side of the frFew readersLearn the template builder interface
We put at your disposal the possibility to create a template, and in this one you can add as many formats as you want. The goal is to generate banners in all formats from a single template where the desgin is repositioned on each format. Presentation of the Template Builder ToFew readersApply a background color to the format frame
Apply a background color to the format frame Click outside the frame to deselect your element (if you have selected one) Select the format background color option Monochrome - one color Gradient - 2 colors with 3 gradient directions availableFew readersApply a shadow to an image
Apply a shadow to an image Select an image Activate the shadow parameter on the right panel Modify all options according to your needs Blur - Allows to blur and spread the shadow effect Offset X - Horizontal Offset Offset Y - Vertical Offset Color - Change the color of the shadow and its opacity |Few readersApply a mask to an image
Apply a mask to an image Add an image and select it Enable the Mask setting Select the type you wantFew readersAdd a button component
Add a button component Click on the button button on the top bar You can now design your button with all the parameters: Text - change font, weight, decoration Text color - change color with a gradient or a monochrome Text shadow Backgrond color Shape - change radius, vertical and horizontal paddingFew readersApply a duotone or grayscale filter to an image
Apply a duotone or grayscale filter to an image Select an image Activate the filter parameter in the right panel Select one of the two available options : Duotone - 12 color variation GrayscaleFew readersApply a Full-width text background
Apply a Full-width text background to your text Select a text layer Activate the background parameter on the right panel Set the parameter to paragraph Check fill the entire widthFew readersSet my background format transparent
Set my background transparent Click outside the frame to deselect your element (if you have selected one) Select the format background color option to Monochrome Set the opacity to 0 with the slider or change the A value to 0 in the color picker And voilà, when you will generate the image it will be with a transparent bFew readersRotate text, image, shape
Some of the elements you put on your template can be rotated so that you can eventually have backwards text. To do this, nothing could be easier 😎 Note that this feature is only available for the following layer type: Text Shape ImageFew readersAdd a QR code component
Add a Qr Code component Click on the QR code button on the top bar You can now design your Qr code with all the parameters: Foreground Color: - changes the foreground color Background color - change the background color Margin - add margin to your Qr code QR code Icon - add an image/logo to theFew readersAdd a logo component
Add a logo from your folders Click on the logo button on the to bar Click on Upload image button in the right panel Search your desired image and select it Add a logo from the brand presetsFew readersApply the brand preset color on a component
If you have created a brand preset and it is activated on your template, then you will be able to apply the preset colors on all elements where the color is modifiable. Apply the brand preset color Click on the button to chanFew readersSecure/Lock layers to avoid errors
On your templates it is possible that there can be several layers, and as time goes by it becomes complicated to navigate between the layers and you can by mistake modify elements or change its position. Block your layer to avoid this kind of problem. How to lock a layer ? Move your mouse over the layer you want to block, a padlock icon will appear, click on it Your layer is now locked, it will not be possible to move it untilFew readers
Template Page and settings
Understand your Abyssale template statistics
We allow you to have visibility on the usage of each of your templates in a very detailed way. For now, you can see from which source the banners are generated. Source of banner generations on your template There are several generation sources, so we display each of these sources and their volume of banners generated. This allows you to have at a glance more visibility on the use of your template. (https://stoSome readersHow does the container containing the elements work and react?
Each element you are positioning in your templates can potentially move during generation if you change the text in them. That's why we have developed a powerful algorithm that will automatically adjust the position of your elements according to the text inside. For this to work properly, you need to make sure that the container is properly sized and positioned in your template. Proper positioning and sizing of the element's container (https://storage.crisp.chat/users/helpdesk/website/bFew readersOverview template page
At Abyssale, we believe that it is important to have a dashboard for each template in order to follow its progress and its functioning. Discover the detailed view of your template to be able to see all the information concerning it at a glance. Overview template page functionnality A quick overview of your template, with the possibility by clicking on it to see it entirely to comment, share Action buttons to edit or acces the template settings All statistics on the activityFew readersFiltering and Sorting on Abyssale
You are likely to use the platform regularly which over time implies the presence of a large number of templates, banners,funnels in your workspace. Thankfully we've got something to help you get to what you're looking for swiftly. We've set up on all of our pages the possibility to filter and order the selected view at your convenience 🤗. Filter and sort views on Abyssale These settings are recurrent on all our pages. Here is the list of recurring parameters available on all of our pages:Few readersHow to duplicate templates ?
Duplicating a template on Abyssale is easy, just select it and use the duplicate action button. Go to your My Templates page. Move your mouse over the template of your choice and click on the ... button. Duplicate your template from the drop-down menu.Few readersExport my generated images in PDF format
Exporting your images in PDF format can have a real interest in some cases, we can quote notably: The creation of an image containing usage and consumption statistics that will be sent to your clieFew readers