This step-by-step tutorial walks you through creating your first landing page with ShahiLandin from scratch.

What You’ll Learn

By the end of this tutorial, you’ll be able to:

1. Create a new landing page
2. Add content and customize design
3. Configure page settings
4. Publish and share your landing page

Time Required: 10-15 minutes
Difficulty: Beginner
Prerequisites: ShahiLandin plugin installed and activated

Step 1: Access the Landing Pages Section


5. Log into your WordPress admin dashboard
6. In the left sidebar, find and click Landing Pages
7. You’ll see the landing pages overview screen

What you’ll see: A list of existing landing pages (if any) with options to add new pages.

Step 2: Create a New Landing Page


8. Click the Add New button at the top of the screen
9. Alternatively, hover over Landing Pages in the sidebar and click Add New

You’ll be taken to the landing page editor screen.

Step 3: Add a Title


10. In the Add title field at the top, enter your landing page title
11. Example: “Summer Sale 2024” or “Download Our Free Guide”

💡 Tip: The title is for internal reference and SEO. You can use a different headline in your actual page content.

Step 4: Choose Your Creation Method


You have three options for creating content:

Option A: Start from Scratch (Blank Canvas)


Best for: Complete creative control

12. Scroll down to find the HTML Content editor
13. Click the Text or Visual tab
14. Start typing or designing your content

Example HTML structure:
`html

Welcome to Our Summer Sale!

Save up to 50% on all products

Get Started


Why Choose Us?

Feature 1

Description of feature

`

Option B: Use a Pre-Made Template


Best for: Quick setup with professional design

15. Look for the Templates section in the right sidebar
16. Click Browse Templates
17. Choose a template that fits your needs
18. Click Use This Template
19. The template content will load into your editor
20. Customize the text and images

Option C: Import Existing HTML


Best for: If you already have an HTML landing page

21. Click Import HTML button in the toolbar
22. Follow the import wizard (see How to Import HTML Landing Page tutorial)

For this tutorial, we’ll use Option A (start from scratch).

Step 5: Add Your Content


Let’s build a simple landing page with essential sections:

5.1 Hero Section (Top of Page)


23. In the HTML editor, add:

`html

Get Your Free Marketing Guide


Learn the secrets to 10x your online sales


Download Now



`

Preview tip: Click Preview button (eye icon) in the top right to see how it looks.

5.2 Benefits Section


Add below the hero section:
`html

What You’ll Learn


Social Media Marketing

Master Facebook, Instagram, and TikTok strategies

Email Marketing

Build and nurture your email list effectively

SEO Basics

Get found on Google and drive organic traffic

`

5.3 Signup Form


Add a signup form section:
`html

Get Instant Access



Download Free Guide



`

Step 6: Add Custom CSS (Optional)


For more advanced styling:

24. Scroll down to the CSS Content editor
25. Add your custom styles:

`css
/ Make it responsive /
@media (max-width: 768px) {
.hero h1 {
font-size: 32px !important;
}

.hero p {
font-size: 18px !important;
}
}

/ Button hover effect /
.hero a:hover {
background: #ff7700 !important;
transform: scale(1.05);
transition: all 0.3s ease;
}

/ Form styling /
form input:focus {
outline: none;
border-color: #0066cc;
}
`

Step 7: Configure Page Settings


In the right sidebar, you’ll find several settings:

7.1 Permalink (URL)


26. Find the Permalink section
27. Click Edit next to the URL
28. Change the slug to something memorable: free-marketing-guide
29. Click OK

Your page will be accessible at: yoursite.com/free-marketing-guide/

7.2 Rendering Mode


30. Find Template settings
31. Choose rendering mode:

– Canvas (Full Isolated): Best choice – shows only your landing page
– Minimal (Header/Footer): Keeps site navigation
– Theme (Full Integration): Uses your WordPress theme

Recommendation: Select Canvas (Full Isolated) for this landing page.

7.3 Page Attributes


32. Featured Image: Click Set featured image (optional, used for social sharing)
33. Status: Leave as Draft for now (we’ll publish in Step 10)

Step 8: Configure Meta Tags (SEO)


Scroll down to the SEO Settings meta box:

34. Meta Description:

`
Download our free marketing guide and learn how to 10x your online sales with proven social media, email, and SEO strategies.
`

35. Meta Keywords: marketing guide, free download, social media marketing, email marketing
36. Open Graph Settings (for social sharing):

– Title: “Free Marketing Guide – 10x Your Sales”
– Description: Same as meta description
– Image: Upload an attractive preview image

Step 9: Preview Your Landing Page


Before publishing, always preview:

37. Click the Preview button at the top right
38. A new tab opens showing your landing page
39. Check on desktop and mobile (resize browser or use DevTools)

Checklist:

40. ✅ All text is readable
41. ✅ Images load correctly
42. ✅ Buttons are clickable
43. ✅ Form displays properly
44. ✅ Page looks good on mobile
45. ✅ No layout issues or overlapping elements

Step 10: Publish Your Landing Page


When you’re satisfied with the preview:

46. Click the Publish button in the top right
47. If button says “Save Draft”, change Status to Publish first
48. Click Publish again to confirm

Congratulations! Your landing page is now live! 🎉

Step 11: Get Your Landing Page URL


49. After publishing, click View Landing Page button
50. Copy the URL from browser address bar: https://yoursite.com/free-marketing-guide/
51. Share this URL in your marketing campaigns

Step 12: Set Up Analytics (Optional but Recommended)


To track visitors and conversions:

52. Find Analytics & Goals meta box
53. Check Enable tracking for this page
54. Set up a conversion goal:

– Goal Name: “Guide Download”
– Goal Type: Form Submit
– Goal Value: 10 (optional, assign a dollar value)

55. Click Update to save

Now you’ll be able to see:

56. How many people visit your page
57. How many download the guide (conversions)
58. Conversion rate

View stats by going to Landing Pages → Your page → Statistics tab.

Next Steps


Now that you’ve created your first landing page, try these:

Add More Sections


59. Testimonials
60. FAQ section
61. Pricing table
62. Video embed

Improve Design


63. Add images and icons
64. Use Google Fonts
65. Add animations
66. Include social proof

Optimize for Conversions


67. Set up A/B testing (see How to Run A/B Tests)
68. Add urgency (countdown timer)
69. Improve your call-to-action
70. Add exit-intent popup

Drive Traffic


71. Share on social media
72. Run Facebook/Google ads
73. Send email campaign
74. Add to website menu

Tips for Success


Content Tips


75. Keep it focused: One goal per landing page
76. Clear headline: Explain benefit immediately
77. Strong CTA: Use action verbs (“Download”, “Get”, “Start”)
78. Social proof: Add testimonials or trust badges
79. Remove distractions: No navigation menu, minimal links

Design Tips


80. Contrast: Make CTA button stand out with bright color
81. White space: Don’t cram too much content
82. Hierarchy: Use font sizes to guide attention
83. Images: Use high-quality, relevant images
84. Mobile-first: Most visitors will be on mobile

Technical Tips


85. Fast loading: Keep images under 200KB
86. Test forms: Submit test data to ensure forms work
87. Check links: Verify all buttons and links work
88. Browser test: Check in Chrome, Safari, Firefox
89. Spelling: Proofread carefully before publishing

Common Mistakes to Avoid


❌ Too much text: Keep it concise and scannable
❌ Weak headline: Be specific about the benefit
❌ Hidden CTA: Make your button obvious and above the fold
❌ Slow loading: Optimize images and remove heavy scripts
❌ Not mobile-friendly: Always test on mobile devices
❌ No clear goal: What do you want visitors to do?
❌ Forgetting analytics: Always track performance

Troubleshooting


Page looks different than preview


90. Clear your browser cache (Ctrl+F5 or Cmd+Shift+R)
91. Clear WordPress caching plugin cache
92. Try viewing in incognito/private window

Form doesn’t work


93. Install a form plugin (Contact Form 7, WPForms)
94. Or use HTML form with action URL to form handler
95. Set up conversion tracking for form submissions

Page not found (404 error)


96. Go to Settings → Permalinks
97. Click Save Changes (don’t change anything)
98. Try accessing the page again

Styles not applying


99. Check for CSS syntax errors
100. Use Canvas mode to avoid theme conflicts
101. Add !important to override stubborn styles

Summary


You’ve learned how to:

102. ✅ Create a new landing page in ShahiLandin
103. ✅ Add HTML content with hero, benefits, and form sections
104. ✅ Customize with CSS styling
105. ✅ Configure page settings and SEO
106. ✅ Preview and publish your page
107. ✅ Set up analytics tracking

Your landing page is live and ready to convert visitors!

Related Tutorials


108. How to Import HTML Landing Page
109. How to Set Up Conversion Tracking
110. How to Run A/B Tests
111. How to Integrate Forms
112. How to Optimize Performance

—

Need Help? See our Troubleshooting Guides or contact support.