Our templates are designed to be flexible. If you plan to customize a template, follow these safe practices to avoid layout breakage and preserve functionality:
1. Preserve Core Structure
Avoid renaming or removing the main container elements. If a template uses IDs or class names in the inline scripts (for example, #preview or .certificate), keep them intact or update the scripts accordingly.
2. Fonts and Licensing
We include free Google Fonts for handwriting and display styles. When swapping fonts, ensure the replacement is web-safe or properly loaded in the page head. Check the font license before embedding any paid or restricted font files.
3. Colors, Contrast & Accessibility
Maintain sufficient color contrast for text and important UI elements. Use semantic HTML for headings and form controls so screen readers can navigate the document. Test prints and exported images for readability.
4. Keep Download Tools Working
Templates use html2canvas for generating downloadable images and PDFs. Moving critical elements outside the preview container or applying CSS transforms can affect the capture. Always test the "Download" or "Save" functionality after changes.
5. Testing Across Viewports
Test your changes on mobile and desktop. Some handwriting fonts may appear larger on small screens; adjust font-size or line-height to keep the visual balance.
6. Backup and Version Control
Keep a copy of the original template file before editing. Use version control (git) so you can revert changes if something breaks.
Customizing templates can help you match brand styles or specific use-cases while keeping the core functionality intact. If you need help adapting a template, reach out via our Contact page.