Template Builder

The Template Builder is ShahiLandin’s next-generation landing page creation system. It provides a guided, wizard-based experience for building high-conversion landing pages with brand consistency, personalization, and AI-powered assistance.

Overview

The Template Builder introduces several advanced features:

Brand Tokens: Centralized management of colors, typography, logos, and motion preferences
Dynamic Data Sources: Hydrate testimonials, product cards, and content without custom coding
Personalization Lab: Create contextual variants based on geography, UTM parameters, or device type
AI Assistant: Get deterministic copy suggestions and CTA optimization with audit logging
Marketplace: Install curated layouts from the community
A/B Experiments: Set up split tests with one-click integration
Analytics Snapshot: View engagement metrics while editing

Accessing the Template Builder

Go to Landing Pages > Template Builder in WordPress admin
The wizard interface loads with a guided workflow

Note: The Template Builder must be enabled in plugin settings. Administrators can toggle it via:

Settings > ShahiLandin > Template Builder Enabled

The Template Builder Wizard

Step 1: Brand Basics

Configure your brand identity tokens that will be used throughout the landing page.

Brand Colors

Define your brand’s color palette:

Primary Color: Main brand color (e.g., #FF5733)
Secondary Color: Accent color for CTAs and highlights
Background Colors: Light and dark background options
Text Colors: Primary and secondary text colors

Palette Management:

Save multiple color palettes for different campaigns
Import colors from existing landing pages
Generate accessible color combinations automatically

Typography

Set up your brand fonts:

Heading Font: Used for H1, H2, H3 elements (e.g., “Montserrat”, “Roboto”)
Body Font: Used for paragraphs and general text
Font Weights: Choose from 300, 400, 600, 700, 900
Font Sizes: Define responsive sizing scales

Font Sources:

Google Fonts (automatic loading)
Adobe Fonts (with kit ID)
Custom web fonts (upload WOFF2 files)

Logos & Assets

Upload brand assets:

Primary Logo: Main logo for headers (PNG, SVG)
Alternate Logo: Light/dark variants for different backgrounds
Favicon: Browser tab icon
Social Share Images: Default OG images for social sharing

Motion Preferences

Configure animation behavior:

Enable Animations: Toggle scroll animations and transitions
Animation Speed: Choose Slow, Normal, or Fast
Respect Prefers-Reduced-Motion: Accessibility setting for motion-sensitive users

REST API Endpoint: /wp-json/shahilandin/v1/template-builder/brand-tokens

Step 2: Template Selection

Choose a starting template or begin with a blank canvas.

Template Categories

High-Converting Templates:

Lead generation forms
Product launches
Webinar registrations
eBook downloads

Industry-Specific:

SaaS product pages
E-commerce promotions
Real estate listings
Event registrations

Blank Canvas:

Start from scratch with brand tokens applied
Full flexibility for custom layouts

Template Preview

View live previews of templates with your brand colors
See desktop and mobile layouts side-by-side
Review included sections (hero, features, testimonials, CTA)

Marketplace Integration

Browse and install templates from the ShahiLandin Marketplace:

Click Browse Marketplace
Filter by category, popularity, or rating
Preview template with your brand tokens
Click Install Template to add to your library

REST API Endpoint: /wp-json/shahilandin/v1/template-builder/marketplace

Step 3: Section Builder

Customize your landing page sections with drag-and-drop simplicity.

Available Section Types

Hero Section:

Headline, subheadline, CTA button
Background image or video
Optional lead capture form

Features Grid:

Icon + text blocks (3, 4, or 6 columns)
Automatic responsive layout
Connect to Dynamic Data Sources

Testimonials:

Customer quotes with photos
Star ratings and attribution
Carousel or grid layout

Pricing Tables:

Up to 4 pricing tiers
Feature comparisons
Highlighted “recommended” option

FAQ Accordion:

Expandable question/answer pairs
Search functionality
Schema markup for SEO

Contact Forms:

Email, name, phone, message fields
Spam protection with honeypot
Integration with WordPress form handlers

Custom HTML:

Embed external widgets
Insert custom code blocks

Section Customization

For each section, configure:

Layout: Column count, spacing, alignment
Styling: Background color/image, borders, shadows
Content: Dynamic or static text/images
Animations: Entrance effects, parallax scrolling

Dynamic Data Sources

Connect sections to data sources for automatic content population:

Click Connect Data Source on a section
Choose source type: Testimonials, Products, Team Members, Blog Posts
Map source fields to section placeholders
Set display count and filtering rules

Example: Connect a Testimonials section to your customer reviews database to automatically display rotating quotes.

REST API Endpoint: /wp-json/shahilandin/v1/template-builder/data-sources

Step 4: Content & Styling

Fine-tune your content and apply global styling.

Content Editor

Edit text content inline:

Click any text element to edit
Apply formatting (bold, italic, links)
Insert merge tags for personalization
Use AI Assistant for copy suggestions

AI Assistant

Access AI-powered content help:

Select a text block
Click the AI Assistant icon
Choose an action:

– Improve Copy: Get clarity and conciseness suggestions
– Shorten/Lengthen: Adjust word count
– Generate CTA: Create compelling call-to-action text
– A/B Variations: Generate alternative copy for testing

Features:

Deterministic output (consistent results)
Audit logging of AI suggestions
Human approval required before applying

REST API Endpoint: /wp-json/shahilandin/v1/template-builder/ai

Global Styling

Apply styling across all sections:

Spacing: Adjust padding and margins globally
Borders: Set border radius and width
Shadows: Configure depth and offset
Responsive: Preview and adjust for mobile, tablet, desktop

Step 5: Personalization Lab

Create contextual variants of your landing page for different audiences.

Personalization Rules

Define conditions for showing different content:

Geographic Personalization:

Show different messaging by country/region
Adjust CTAs for local time zones
Display location-specific contact info

UTM Campaign Tracking:

Customize headlines based on UTM parameters
Show relevant offers for traffic sources
Track campaign-specific conversions

Device Targeting:

Mobile-specific content and CTAs
Desktop-only sections
Tablet-optimized layouts

Creating Variants

Click Add Personalization Rule
Select condition type (Geo, UTM, Device)
Define the condition (e.g., “Country = United States”)
Customize content for that segment
Preview the variant with context chips

Example:

Condition: UTM Source = Facebook
Customization: Change headline to “Welcome from Facebook!” and adjust hero image

REST API Endpoint: /wp-json/shahilandin/v1/template-builder/personalizations

Preview Context Chips

Test personalizations in real-time:

Click context chips to simulate different visitors
Preview geo-specific content
Test UTM parameter combinations
Switch between device types

Step 6: Review & Launch

Final review before publishing your landing page.

Pre-Launch Checklist

The wizard automatically checks:

✓ All required fields completed
✓ Brand tokens applied consistently
✓ Mobile responsiveness verified
✓ Forms connected to handlers
✓ Analytics tracking configured
✓ SEO meta tags present

Launch Options

Save as Draft:

Continue editing later
Share preview link for team review
Schedule for future publication

Publish Immediately:

Make the landing page live
Enable analytics tracking
Activate personalization rules

Schedule Publication:

Set a future publish date/time
Automatically goes live at scheduled time

Create A/B Experiment:

Generate a variant for split testing
Set traffic split percentage (50/50, 75/25, etc.)
Choose experiment duration

Autosave and Drafts

The Template Builder automatically saves your progress:

Autosave triggers every 60 seconds
Manual save via Save Draft button
Drafts stored via /wp-json/shahilandin/v1/template-builder/drafts endpoint
Resume from Landing Pages > Drafts in admin

Experiments & A/B Testing

Launch split tests directly from the Template Builder:

Complete your landing page in the wizard
Click Create A/B Experiment in Review & Launch
Configure experiment settings:

– Variant Name: e.g., “CTA Test – Green Button”
– Traffic Split: Percentage of visitors for each variant
– Duration: How long to run the test (days)
– Goal: Primary conversion metric (form submissions, clicks)

Template Builder generates the variant
Edit the variant to make changes (headline, CTA color, etc.)
Launch the experiment

Analytics Integration:

View experiment performance in the Analytics Snapshot
Winner declared automatically based on statistical significance
Export results to CSV for reporting

REST API Endpoint: /wp-json/shahilandin/v1/template-builder/experiments

Analytics Snapshot

Monitor engagement metrics without leaving the editor:

Page Views: Real-time visitor count
Conversion Rate: Form submissions or goal completions
Bounce Rate: Percentage of single-page visits
Engagement Delta: Comparison to previous period

Refresh Rate: Metrics update every 5 minutes

REST API Endpoint: /wp-json/shahilandin/v1/template-builder/analytics

Marketplace

Install professionally designed templates from the community:

Browsing the Marketplace

Go to Template Builder > Marketplace tab
Browse categories or search by keyword
Filter by:

– Price: Free, Premium
– Industry: SaaS, E-commerce, Events, etc.
– Rating: 4+ stars, 5 stars
– Popularity: Most downloaded

Installing Templates

Click on a template card to view details
Preview with your brand tokens
Read reviews and ratings
Click Install to add to your library
Find installed templates in Template Selection step

Creating Marketplace Templates

Share your designs with the community:

Complete a landing page in Template Builder
Click Submit to Marketplace
Fill out template details (description, category, preview images)
Set pricing (free or premium)
Submit for review by ShahiLandin team