Create and Design Templates

Trimlink's Template or AI Landing Page Builder allows you to create highly responsive, professional landing pages and marketing assets without writing a single line of code. You can start from scratch, customize ready-made layouts, import your own code, or use our powerful AI to generate complete designs instantly.

Watch the complete video demonstration below to see the template creation process in action, or follow the step-by-step guide.

Video Demonstration

Getting Started

To open the Template Builder:

1. Sign in to your Trimlink account and select your active workspace.
2. Navigate to Templates from the left sidebar menu.
3. Open the My Templates tab to view your existing library.
4. Click Design from Scratch to open a blank canvas in the builder.

Phase 1: Template Management

Before building a new design, you can easily manage, filter, and duplicate your existing assets.

1. View, Search, and Filter

The main Templates dashboard displays all the designs available within your workspace. Use the search box and status filters to quickly locate specific drafts or published assets within large workspaces.

2. Switch Between Template Types

You can toggle between two primary libraries:

• My Templates: The private library of templates custom-built within your workspace.
• Ready-Made Templates: A library of premium, pre-designed templates provided by Trimlink. You can select any of these, customize them to match your brand, publish them, and instantly attach them to your short links as destination landing pages.

Phase 2: Create a Template with AI

Trimlink includes an advanced AI Template Generator that builds entire page structures, layouts, and copy from a single text prompt.

1. Open the AI Generator

Inside the Template Builder, click the AI Template Generator button. A dialog window will appear where you can define your project.

2. Select an Existing Prompt from Chips

To help you get started quickly, the generator provides clickable prompt chips. Choose the option that best matches your project to instantly pre-fill your prompt box. Available quick-start chips include: SaaS Landing Page, Restaurant Website, E-Commerce Store, Email Newsletter, Event Page, Resume/CV, Coming Soon Page, Business Proposal, Fitness Studio, and Real Estate.

3. Describe Your Vision

You can customize the pre-filled chip or write your own highly detailed prompt describing your business, goals, target audience, and desired aesthetic.

• Example Prompt: "Create a modern, dark-mode landing page for a SaaS fitness app. Include a bold hero section with a call-to-action to download the app, a 3-column feature section highlighting workout tracking and meal planning, and a pricing table at the bottom."

4. Generate

Click Generate. In seconds, Trimlink AI will construct a complete template with tailored sections, placeholder images, structured content blocks, and professional styling.

Phase 3: Import an HTML Template

If your team has already designed a landing page outside of Trimlink, you can bypass the AI generator and import your own raw HTML file directly into the visual builder.

1. Uploading Your Code

Select the Import Template option and paste or upload your HTML source code into the editor.

Important Technical Note on CSS & Scripts: To ensure maximum security and proper rendering inside the visual builder, your imported HTML must adhere to strict styling rules:

• Custom Styling: All custom CSS must be written as internal <style> blocks or inline styles directly on the HTML elements.
• Allowed Style CDNs: The system exclusively supports external stylesheets from Font Awesome (5.15.4), Tailwind CSS (via internal assets), and Bootstrap (5.3.6).
• Allowed Script CDNs: External JavaScript is restricted to Bootstrap JS Bundle (5.3.6) and jQuery (3.7.1).
• Any unsupported external stylesheet or script tags will be stripped during the import process.

Phase 4: Customize via the Visual Builder

Whether you used AI, imported raw HTML, or started from scratch, Trimlink's advanced visual editor allows you to seamlessly refine your template using intuitive drag-and-drop tools.

1. Drag-and-Drop Component Blocks

The sidebar contains a rich library of pre-built structural and content blocks. You can instantly drag text, images, buttons, columns, dividers, and complex layout grids directly onto the canvas.

2. Edit Content & Traits Directly

Click on any element on the canvas to select it.

• Inline Editing: Double-click text to rewrite headlines or paragraphs immediately on the screen.
• Component Traits: Use the settings panel to change image sources, update button link destinations, or modify specific element attributes (like input types or target behaviors).

3. Visual Styling Management

You do not need to write CSS to make your template beautiful. With an element selected, open the Styling panel to precisely adjust:

• Typography (fonts, sizing, weight, alignment).
• Dimensions (width, height, max-width).
• Spacing (margins and padding).
• Decorations (background colors, gradients, borders, and shadows).

4. Navigate Using Layers

For complex templates with nested rows and columns, open the Layers Navigator. This gives you a clear, tree-like view of your entire DOM structure, allowing you to easily select, rearrange, hide, or delete specific containers that are hard to click on the canvas.

5. Responsive Device Preview

Your audience uses multiple devices. Use the top toolbar to switch between Desktop, Tablet, and Mobile views. You can apply specific styling adjustments that only affect the currently selected screen size, ensuring perfect responsiveness.

6. Tracking & Custom Scripts (GA4)

For marketing campaigns, tracking visitor data is essential. Trimlink allows you to easily embed custom JavaScript (JS), Google Analytics 4 (GA4) tags, Tag Manager and other marketing pixels directly into your template. This ensures that every conversion and visitor interaction is properly tracked once the landing page goes live.

7. Undo, Redo, and Canvas Safety

Feel confident experimenting with your design knowing you have complete control over your canvas.

• Undo & Redo Controls: Located in the top toolbar, these buttons allow you to instantly revert accidental mistakes or re-apply layout modifications.
• Source Code Editor: Advanced users can toggle the underlying code view at any time to manually inspect, write, or tweak the HTML, CSS, and tracking script structure.
• Clear Canvas: Easily wipe the entire workspace clean if you decide to start completely from scratch.

Phase 5: Refine with the AI Assistant

You don't need to be a designer to make your template look premium. The AI Assistant acts as your built-in design co-pilot, editing your layout automatically.

1. Open the Assistant

Click Assistant from the top toolbar to open the dedicated AI panel.

2. Instruct the AI

Describe the specific improvements you want to make to your current design. Examples include:

• "Modernize the color palette to use deep blues and vibrant orange accents."
• "Improve the typography to look more elegant and readable."
• "Increase the visual hierarchy of the pricing section."

3. Apply Recommendations

The assistant will analyze your current layout and automatically update the design based on your exact instructions, saving you hours of manual tweaking.

Phase 6: Preview, Draft, and Publish

Once your design looks exactly how you want it, it is time to finalize your work.

1. Save as Draft

If you are still waiting on final copy or approval, click Save as Draft. Drafts remain strictly private and allow you to safely exit the builder without losing your progress.

2. Preview and View as Live

Click Preview to inspect the layout without the builder menus, or select View as Live to experience the fully functional page exactly as your future visitors will see it.

3. Publish the Template

When you are ready to deploy:

1. Click Publish.
2. Confirm the action in the prompt.
3. Wait a brief moment for the publication sequence to complete.

Important Note: Once published, your template becomes a live asset in your workspace library. You can now seamlessly route your Trimlink short URLs directly to this newly created landing page!

Frequently Asked Questions