What you'll learn

How to make adjustments within our visual editor

Series

3.4

Section

Brand DNA

Last Updated

Feb 4, 2026 9:21 PM

Status

Live

Previous Tutorial

Next Tutorial

TL;DR: Fine-tune your Protaigé templates by uploading brand fonts, mapping dynamic layers, and setting font constraints to ensure every asset remains perfectly aligned and brand-safe as you scale.

Adjusting Templates in Protaigé

Once your PSD is uploaded and saved, it’s time to fine-tune the template in Protaigé to ensure everything is perfectly aligned, editable, and ready for scale.

Before making any adjustments, ensure all template fonts are uploaded to Brand DNA → Fonts.

This is crucial—if fonts aren’t available in Protaigé, the system will use a fallback font, which can distort your layout and throw off sizing, alignment, and design integrity.

💡Tip: Double-check that all font weights and styles (e.g., bold, italic) are included to avoid unexpected replacements.

Edit Design Elements

Click the uploaded design to open the editor.
Select each layer and ensure it’s mapped correctly:

Headline → h1
Subheadline → h2
Body copy → copy_short or copy_long
CTA → cta
Image → image

Adjust font styles, sizes, and colours directly in the Protaigé editor if needed.

Font Size Adjustment

For dynamic text, set min and max font sizes. Ensure H1s are always larger than H2s, and CTAs are big enough to stand out.

Example:

h1: 36pt – 72pt
h2: 18pt – 32pt
copy: 11pt - 22pt
CTA: 26pt – 54pt

Check Font Bounding Boxes

Ensure that text bounding boxes are large enough to accommodate varying text lengths without cutting off content.
Pay special attention to areas like buttons—the bounding box should fit the longest possible CTA text without breaking the layout.
If needed: Resize the bounding box or adjust the auto-resize settings to prevent layout issues.

Verify Type Alignment

Check that all text is aligned correctly within its bounding box.

Buttons? Centre-align the CTA text.
Body copy? Left-align or justify, depending on the design.

Use Protaigé’s alignment tools to snap text perfectly into place, ensuring a clean and balanced layout.

Background Fill Settings

Confirm that the background is set as a colour fill and not imported as an image.

This allows for easy recolouring and maintains brand flexibility.
If the background imported as an image by mistake, replace it with a shape layer and apply the brand colour.

💡Tip: Setting the background as a filled shape layer will ensure that it imports as a colour fill.

Check Image Masks

If your design includes image placeholders, double-check that the shape mask has imported correctly.
Test by swapping the image in Protaigé—if it stays within the mask’s bounds and can be moved or scaled without breaking the shape, you’re good to go.
If the image breaks the mask or doesn’t swap correctly, you can either:

Go back to the PSD and ensure the image is nested within a proper shape layer; or
Recreate the shape mask directly in the editor

Index of Component Names

Note: These are not case-sensitive. At some point, these will all be a drop-down selector, but it’s manual for now.

Name	Description of the dynamic component	Type
H1	Your main headline. This is the big, bold line that grabs attention.	Text
H2	A sub-headline that supports the H1 and adds context.	Text
Short Copy	One or two short sentences for quick impact.	Text
Medium Copy	A paragraph or two of copy—enough to explain without overwhelming.	Text
Long Copy	Extended body text for detail-heavy layouts.	Text
CTA	The call-to-action text itself—what you want the user to do.	Text
Offer	Promotional line that highlights a discount, bonus, or incentive.	Text
Speaker	Speaker name(s) for events. Number them if there are multiple (speaker1, speaker2, etc.).	Text
Date	The event or promotional date.	Text
image	The hero image in a banner or layout.	Image
cta-btn	The visual button that holds your CTA. Can be a colour fill or image.	Image / Fill
logo	Your primary brand logo.	Image
bg	The background layer for a banner (colour fill, gradient, or image).	Image / Gradient / Fill
page	This is the default background fill	Fill
graphic	Decorative graphics in your design. If you use more than one, number them (graphic1, graphic2, etc.).	Image
icon	Iconography. Number them if multiple (icon1, icon2, etc.).	Image
photo	Supporting images or photography that aren’t hero shots. Number them if you have more than one.	Image
shape	Shapes that aren’t graphics, icons, or buttons—like colour blocks or starbursts. Number as shape1, shape2, etc.	Shape

⚡ Troubleshooting Common Issues

Problem	Quick Fix
Images Not Editable	Ensure the layer is named `image` and uses a shape mask.
Text Breaking the Layout	Verify that text bounding boxes are appropriately sized to accommodate varying text lengths. Adjust auto-resize settings if necessary.
Font Not Displaying Correctly	Confirm that all template fonts are uploaded to Brand DNA → Fonts. Missing fonts will default to a fallback, potentially disrupting the design.
Missing Layers After Import	Check for hidden or locked layers in the PSD before importing. Only visible and unlocked layers are processed.
Elements Shifting After Import	Ensure all elements are aligned to grids or guides in Photoshop. Misalignment can cause shifts during import.
Background Imported as Image	Replace image-based backgrounds with shape layers filled with the desired colour. This allows for easier edits and maintains design flexibility.
Image Swapping Issues	Confirm that images intended for swapping are placed within shape masks, not clipping masks or flattened layers. Test by swapping images to ensure they fit correctly within the designated area.
Low-Resolution Image Alerts	Use high-quality images to prevent low-DPI warnings. We can handle images up to 4096x4096 pixels during editing, but higher resolutions can be used during export.
Text Too Close to Edges	Adjust text boxes to ensure content doesn't sit too close to bleed or safety lines, preventing potential cropping issues during printing.
Browser Compatibility Issues	We supports modern browsers. Ensure you're using the latest version of a supported browser.