Table of Contents
Getting Started
Editor Layout Overview
Blocks: Content Elements
Text Block
Image Block
Button Block
Product Block
Video Block
Menu Block
Social Media Block
Countdown Timer Block
Columns
Body Settings (Global Styles)
Mobile Optimization
Preview
Finalizing Your Design
Unsubscribe Link
Best Practices Checklist
---------------------------------------------------------------------------------------------------------------------------------------------------
1. Getting Started
Click on “Template Builder” from the left menu on KwikEngage panel
Select “Email” and then click “New Template”
You can choose from the 'Template Library' or click on “New template” button again to start from scratch
------------------------------------------------------------------------------------------------------------------------------------------------
2. Editor Layout Overview
Once inside the builder, the screen is split into:
---------------------------------------------------------------------------------------------------------------------------------------------------
3. BLOCKS: CONTENT ELEMENTS (Drag & Drop)
These are the building blocks of your email.
TEXT BLOCK
Steps:
Drag the Text block to your canvas
Inline editing: Click and type directly
Toolbar options (Appears on right side on you select the text block):
Alignment: Left, Center, Right
Font Family (Default + Predefined Fonts)
Font Size
Text color
Bullet & Numbered Lists
Hyperlink tool
Padding (individual sides)
Hide on Desktop or Mobile
✅ Tip: Use hierarchy with <h1> for titles, <h2> for subtitles using the Heading Block
-----------------------------------------------------------------------------------------------------------------------------------------
IMAGE BLOCK
Steps:
Drag an Image block to a row
Click on the placeholder → choose:
Upload from device
Paste Image URL
Right Panel Options:
Alignment: Left, center, right
Auto-width toggle
Padding
Add hyperlink
Image Alternate Text
✅ Best Practices:
Use JPEGs for photos, PNG for transparent graphics
Stick to ~600px width for full-width images
---------------------------------------------------------------------------------------------------------------------------------------------------
BUTTON BLOCK
Steps:
Drag the Button block
Change button text (e.g., “Shop Now”)
Right Panel Styling:
URL (web, email, phone)
Button color, font, font-size
Border radius (rounded corners)
Button alignment
Padding & spacing
✅ CTA Tip: Action-oriented verbs like “Claim Offer”, “Buy Now” etc. work best
Note: You can add dynamic content using the [%VAR%] format.
For example, to include the customer’s name, use [%custname%]
-----------------------------------------------------------------------------------------------------------------------------------------
PRODUCT BLOCK
Steps:
Drag the Product block
This block should be used only once in entire email template
Right Panel Options:
Show product title option
Show order button (Recommendation: Disable individual buttons and create a single common button for the entire block.
✅ This Product Block will automatically fetch products for order-related and abandoned cart/checkout journeys.
No links need to be added, as this is a custom-built block. Products will be pulled based on the automation flow trigger selected during the flow setup.
------------------------------------------------------------------------------------------------------------------------------------
VIDEO BLOCK
Steps:
Drag the Video block
Paste YouTube or Vimeo URL
KwikEngage Panel Auto-Generates:
Thumbnail
Play button overlay
Right Panel:
Alignment, Padding, Full Width toggle
? Note: Videos are shown as linked thumbnails—email clients don’t support embedded video
--------------------------------------------------------------------------------------------------------------------------------------
MENU BLOCK
➤ Step 1: Add the Block
Drag the Menu Block into a row/column
➤ Step 2: Add Menu Items
In the right settings panel, you'll find:
Menu Items (Editable List):
Each item has:
Label (e.g., Home,New Arrivals, Shop, Contact Us)
URL (link destination)
Open in New Tab/Same Tab toggle (optional)
To add or remove items:
Click “+ Add New Item”
Use the trash icon ?️ to delete a menu item
--------------------------------------------------------------------------------------------------------------------------------
➤ Step 3: Style Menu Text
Customize:
Font Family: Choose from built-in fonts
Font Size
Font Weight: Regular, bold
Text Color: For menu item text
Letter Spacing: Adjust spacing between letters
Padding: Control spacing around menu text
➤ Step 4: Layout & Alignment
Customize layout behavior:
Alignment:
Left, Center, or Right
Items Layout:
Horizontal (default): Menu items appear side-by-side
Vertical: Items stack (useful for mobile view or footers)
------------------------------------------------------------------------------------------------------------------------------------------
SOCIAL MEDIA BLOCK
Click on the Blocks section from the far-right menu.
Steps:
Drag and drop
Choose networks (Facebook, Twitter, LinkedIn, Instagram, Pinterest, etc.)
Customizations:
Style: Square, Circle, Rounded, Logo only
Size
Icon color: Colored, Monochrome
Add/remove platforms
Add URLs
------------------------------------------------------------------------------------------------------------------------------------------
⏳ TIMER (COUNTDOWN BLOCK)
Steps:
Drag countdown block
Choose end date & time
Format: Days, Hours, Minutes, Seconds
Styling:
Font, color, size
Padding, background color
Note: Not all clients support live countdowns.
-----------------------------------------------------------------------------------------------------------------------------
4. COLUMNS
Types of Columns:
1 Column
2 Equal Columns
3 Columns
1/3 – 2/3
2/3 – 1/3
Steps:
Drag a layout to the canvas
Insert content blocks inside columns
Right Panel Settings:
Column Background
Row Padding
Borders (each side)
Row Background image (optional)
✅ Tip: Use symmetrical rows for mobile-friendliness
------------------------------------------------------------------------------------------------------------------------------------------
5. BODY SETTINGS (Global Styles)
Click the “Body” tab in the left sidebar.
Options:
Content area width (Default: 500px)
Background color (email body)
Default font family
Link color
Content Alignment
Preview Text / Pre Header Text
✅ Tip: Use light backgrounds and dark fonts for readability
------------------------------------------------------------------------------------------------------------------------------------------
6. Mobile Optimization
All templates are responsive by default.
Advanced Features:
Hide on mobile/desktop (per block or row)
Padding/margin control for both views
Preview toggle: Desktop / Mobile
------------------------------------------------------------------------------------------------------------------------------------------
7. PREVIEW
➤ Preview Mode
Click “Preview” by clicking on Eye icon at the bottom of the screen
Switch between desktop and mobile
------------------------------------------------------------------------------------------------------------------------------------------
8. After finalizing your design:
➤ Save
Use “Save Template” to save for later reuse
------------------------------------------------------------------------------------------------------------------------------------------
9. Unsubscribe Link
Unsubscribe Link allows recipients to opt out of future emails.
It's a mandatory element in marketing emails to comply with anti-spam laws and maintain sender reputation.
To add an Unsubscribe link on the KwikEngage panel, follow this syntax:
Step 1: Select the keyword or phrase (e.g., Unsubscribe).
Step 2: Hyperlink it using the following syntax:
[UNSUBSCRIBEURL]
This will automatically insert the recipient’s personalized unsubscribe link.
------------------------------------------------------------------------------------------------------------------------------------------
10. BEST PRACTICES CHECKLIST
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article