This step-by-step tutorial shows you how to customize existing templates and create your own reusable designs.

What You’ll Learn

By the end of this tutorial, you’ll know how to:

1. Find and use built-in templates
2. Customize template designs
3. Create your own templates
4. Save templates for reuse
5. Share templates with others
6. Import community templates

Time Required: 15-30 minutes
Difficulty: Beginner to Intermediate
Prerequisites: Basic HTML/CSS knowledge helpful

Understanding ShahiLandin Templates


What Are Templates?


Templates are pre-designed landing page layouts you can customize:

7. HTML structure
8. CSS styling
9. JavaScript functionality
10. Pre-configured sections (hero, features, testimonials, etc.)

Template Types


Premium Templates (included):

11. 50+ professional designs
12. Industry-specific (SaaS, eCommerce, Agency, etc.)
13. Fully responsive
14. Conversion-optimized

Community Templates (free):

15. User-submitted designs
16. Various styles
17. Open-source

Custom Templates (your own):

18. Your saved designs
19. Client work
20. Brand-specific layouts

Method 1: Using Built-In Templates


Step 1: Access Template Library


21. Go to Landing Pages → Add New
22. Click Choose Template button
23. Or go to ShahiLandin → Template Library

Step 2: Browse Templates


Filter by:

24. Industry: SaaS, eCommerce, Agency, Education, Healthcare
25. Style: Modern, Minimal, Bold, Corporate
26. Purpose: Lead Gen, Sales, Event, Download

Step 3: Preview Template


27. Hover over template thumbnail
28. Click Preview button
29. Template opens in new tab
30. Review design, sections, features

Step 4: Select Template


31. Click Use This Template button
32. Enter page title: “My Product Launch”
33. Choose slug: my-product-launch
34. Click Create Page

Step 5: Template Loaded


Editor opens with template pre-loaded:

35. HTML content
36. CSS styles
37. JavaScript functionality
38. Placeholder content

Now customize it!

Method 2: Customizing Template Design


Change Colors


Find Color Scheme


In CSS editor, look for color variables (usually at top):

`css
:root {
–primary-color: #0066cc;
–secondary-color: #ff6600;
–text-color: #333333;
–background-color: #ffffff;
–accent-color: #00cc66;
}
`

Update Colors


Change to your brand colors:

`css
:root {
–primary-color: #8b5cf6; / Purple /
–secondary-color: #ec4899; / Pink /
–text-color: #1f2937; / Dark gray /
–background-color: #f9fafb; / Light gray /
–accent-color: #10b981; / Green /
}
`

All elements using these variables update automatically!

Change Fonts


Find Font Declarations


`css
body {
font-family: ‘Roboto’, sans-serif;
}

h1, h2, h3 {
font-family: ‘Montserrat’, sans-serif;
}
`

Replace with Your Fonts


`css
/ Import Google Fonts /
@import url(‘https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Inter:wght@300;400;500&display=swap’);

body {
font-family: ‘Inter’, sans-serif;
}

h1, h2, h3 {
font-family: ‘Poppins’, sans-serif;
font-weight: 700;
}
`

Update Images


Replace Hero Image


Find in HTML:

`html

`
Replace with your image:
`html
`
Or upload to Media Library and use URL.
Replace All Placeholder Images

Search HTML for: template- or placeholder-
Replace with your actual images.
Modify Layout

Change Section Order

Cut and paste HTML sections:
Before:
`html
…
…
…
`
After:
`html
…
…
…
`
Add New Section

Copy existing section and modify:
`html
Pricing Plans
`
Remove Sections

Delete sections you don’t need:
Remove HTML markup
Remove associated CSS (search for class names)
Test page still works
Customize Components

Button Styles

Find button CSS:
`css
.cta-button {
background: var(–primary-color);
color: white;
padding: 15px 40px;
border-radius: 5px;
}
`
Customize:
`css
.cta-button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 18px 48px;
border-radius: 50px; / Pill shape /
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
transition: transform 0.2s;
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
}
`
Form Styles

`css
.lead-form input,
.lead-form textarea {
width: 100%;
padding: 15px;
margin-bottom: 15px;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 16px;
transition: border-color 0.3s;
}
.lead-form input:focus,
.lead-form textarea:focus {
outline: none;
border-color: var(–primary-color);
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
`
Method 3: Creating Custom Template

Step 1: Build Landing Page from Scratch

Landing Pages → Add New
Choose Blank Template
Build your design using HTML/CSS/JS
Test thoroughly
Ensure it’s responsive
Step 2: Save as Template

In landing page editor, click Tools → Save as Template
Template name: “Lead Gen – Purple Theme”
Description: “High-converting lead generation template with purple gradient”
Category: “Lead Generation”
Tags: purple, modern, forms
Add thumbnail (screenshot): Upload image
Click Save Template
Step 3: Template Saved

Template now appears in Template Library under My Templates.
Template File Structure

Templates are saved as JSON:
`json
{
“name”: “Lead Gen – Purple Theme”,
“description”: “High-converting lead generation template”,
“version”: “1.0”,
“author”: “Your Name”,
“category”: “Lead Generation”,
“tags”: [“purple”, “modern”, “forms”],
“content”: {
“html”: “…”,
“css”: “…”,
“js”: “…”
},
“settings”: {
“rendering_mode”: “canvas”,
“enable_analytics”: true,
“lazyloadimages”: true
},
“thumbnail”: “data:image/png;base64,…”
}
`
Method 4: Exporting/Importing Templates

Export Template

Via Dashboard:

ShahiLandin → Template Library
Find your template
Click Export icon
Choose format: JSON or Blueprint
Download file: lead-gen-purple-theme.json
Via WP-CLI:

`bash
wp shahi template export “Lead Gen – Purple Theme” –file=template.json
`
Import Template

Via Dashboard:

ShahiLandin → Template Library
Click Import Template button
Upload .json or .zip file
Click Import
Template added to library
Via WP-CLI:

`bash
wp shahi template import template.json
`
Share with Others

Export template as JSON
Share file via email, GitHub, etc.
Recipient imports into their ShahiLandin installation
Using Template Variables

Make templates more flexible with variables.
Define Variables

In template, use placeholder syntax:
`html
{{COMPANYNAME}} – {{PRODUCTNAME}}
Get started with {{PRODUCT_NAME}} today for only {{PRICE}}/month!
`
Set Variable Values

When using template:
Select template
Customize Variables dialog appears:
`
COMPANY_NAME: [Your Company]
PRODUCT_NAME: [Your Product]
PRICE: [99]
PRIMARY_COLOR: [#8b5cf6]
SECONDARY_COLOR: [#ec4899]
`
Fill in values
Click Apply
Template is created with values replaced:
`html
Acme Corp – SuperWidget
Get started with SuperWidget today for only $99/month!
`
Template Best Practices

Design Guidelines

Mobile-first: Design for mobile, then scale up
Single goal: One clear call-to-action
Fast loading: Optimize images, minimize code
Accessible: Proper contrast, alt text, ARIA labels
Consistent: Use design system (colors, fonts, spacing)
Code Quality

`css
/ Good – organized, commented /
/ === HERO SECTION === /
.hero {
height: 100vh;
display: flex;
align-items: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.hero h1 {
font-size: clamp(2rem, 5vw, 4rem);
color: white;
}
/ === FEATURES SECTION === /
.features {
padding: 80px 20px;
background: #f9fafb;
}
`
Placeholder Content

Use clear placeholders:
`html

[Your Company Name]

XXXX

`
Documentation

Include instructions in template:
`html

`
Community Templates

Browse Community Library

ShahiLandin → Template Library
Click Community tab
Browse hundreds of free templates
Filter by rating, downloads, category
Download Template

Click template thumbnail
Preview template
Click Download & Install
Template added to your library
Submit Your Template

Share your designs with community:
Create template
Click Share with Community
Fill in details:
– Name
– Description
– Category
– Tags
– License (MIT, GPL, etc.)
Upload screenshot
Click Submit for Review
Approved templates appear in Community library
Template Licensing

Choose appropriate license:
MIT: Free to use, modify, redistribute
GPL: Must share modifications
Creative Commons: Attribution required
Commercial: Purchase required for commercial use
Advanced: Template Hooks

For developers – extend templates with PHP.
Register Custom Template

`php
// functions.php or plugin
addfilter(‘shahilandintemplates’, function($templates) {
$templates[] = [
‘id’ => ‘custom-saas-template’,
‘name’ => ‘SaaS Landing Page’,
‘category’ => ‘SaaS’,
‘path’ => getstylesheetdirectory() . ‘/shahilandin-templates/saas-template.json’,
‘thumbnail’ => getstylesheetdirectory_uri() . ‘/shahilandin-templates/saas-thumb.jpg’
];
return $templates;
});
`
Template Preprocessing

Modify template before rendering:
`php
addfilter(‘shahilandintemplatehtml’, function($html, $templateid) {
// Replace placeholders dynamically
$html = strreplace(‘{{CURRENTYEAR}}’, date(‘Y’), $html);
$html = strreplace(‘{{SITENAME}}’, get_bloginfo(‘name’), $html);
return $html;
}, 10, 2);
`
Troubleshooting

“Template Not Displaying Correctly”

Causes:
Missing CSS
Conflicting theme styles
JavaScript errors
Solution:
Use Canvas rendering mode (removes theme styles)
Check browser console for errors
Validate HTML/CSS
“Template Variables Not Replacing”

Cause: Incorrect syntax or variable not defined
Solution:
Use double curly braces: {{VARIABLE_NAME}}
“Template Import Failed”

Causes:
Invalid JSON
File too large
Version incompatibility
Solution:
Validate JSON at jsonlint.com
Increase PHP upload limit
Update ShahiLandin plugin
“Lost Template After Update”

Cause: Template stored in plugin directory (overwritten on update)
Solution:
Store custom templates in: /wp-content/uploads/shahilandin-templates/
Summary

You’ve learned how to:
✅ Browse and use built-in templates
✅ Customize template colors, fonts, images
✅ Modify template layouts and sections
✅ Create your own custom templates
✅ Export and import templates
✅ Use template variables
✅ Share templates with community
✅ Apply best practices for template design
Now you can create beautiful, reusable landing page templates!
Related Tutorials

How to Create Your First Landing Page
How to Optimize Landing Page Performance
Template Builder Feature

—

Need Help? Check documentation or visit community forums.