SlideShare a Scribd company logo
1 of 34
Download to read offline
LeadSquared landing pages are now responsive
What is a responsive landing page
It is an approach to web design aimed at crafting sites for an optimal viewing experience—easy reading and navigation
with minimal resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile
phones).
g
Technically
vTechnicallyIn simple terms
A responsive page will adapt to the screen size and will look good on every device
Why is responsive design important
 Smartphones and tablets have changed the approach towards design and user experience
 You lose visitors and money if your page doesn’t render well on mobile
 To provide optimal user experience
 Google has declared Responsiveness as one of the most important landing page practices
hTechnically
Statistics
A responsive landing page converts 40% more than an unresponsive landing page
Let’s take an example
Ready to create this in LeadSquared ?
Hold on! Before you get started, you should know a few terms.
A section is an area, where you can add blocks .
A block is an area where you can add the content
Meet the Editor
Section Options
Blank Default Section
Block Types
Properties Panel
Blocks
The editor has 8 default blocks which cater to most of the needs
content
feature
form
image
button
video
testimonial
You can edit or move the blocks by clicking on them
Good to go. Let’s begin
This is what we will make in next 15 minutes
Let’s start by adding the background image
From the properties panel select Canvas > Background > Select image
You can choose solid color, gradient,
or an image from the dropdown
Upload and select the image you want to set as the background
Make sure you select a high resolution
image, typically around 1500px width
Now it’s time for the logo
Select Image Block > Double click to edit > Choose your logo image> Insert
This is not how we want it. We want it centered
and a little away from the top edge
Logo is an image; we can use image block for the logo.
To make it centered , stretch the block and apply some padding on top
Padding
TIPS TO NOTE
 Upload the hero image in the canvas background.
 Learn how to stretch and shrink the blocks.
 Give spacing and white spaces using padding and margins.
Now let’s add another section for headlines
For headline select Content Block > Double click to enter html editor > Write your content
This is a content block. You can change the
font, size, alignment etc. in the html editor
We can use content block to write headline and sub-headlines
Clicking on the content blocks opens up the html editor
TIPS TO NOTE
 The default font is Open sans, which is highly readable. Use readable fonts
 Switch the editor background to black, if your content color is white
 Try CTA Block if you have a click through landing page. It would have a headline, a sub-
headline and a Button
Let’s add heart to your landing page, The form
To add form, select Form Block. To keep it in the center add an empty block first
See how the content block gets added to the
left . Keep minimum height as 0
Leadsquared offers a very powerful form editor, Create a new section and select a form block
This is how the form editor looks like
You can make custom adjustments like col
or labels borders here
You can add/delete the fields here
Customize the form header
Click on the header tab to customize
The header
You can customize the color , text and other settings of the header here
Change the color and padding from
The properties panel
Change the form header text
Double click on the header to
Edit the text
Double clicking on the header will allow you to change the text
Toggle the editor color so the
White text is visible on black
Let’s refine it a bit more
Try to adjust the padding a little more, change form fields, colors and form headline to get better results.
TIPS TO NOTE
 Form is fully customizable. Check out the header and the footer tab
 The header and the footer properties are on the right properties pane. Double click o
n them to edit the text and custom html
 You can customize the button by clicking on it. To change the text you can simply
type the content there in the popup.
Let’s add a features block
The features blocks has many templates. Choose whichever suits your needs.
Double click the block to customize the content and icon
TIPS TO NOTE
 Set your style on one features block and clone others.
 Choose good quality icons. There are plenty of free resources on the web
 To change the canvas width or height. Go to Canvas > Dimensions and Spacing
Create a solid color block
You can create a solid block by simply adding a section, and choosing a solid color as background
Make it solid and choose color,
Click on resize from dropdown
options to have it full screen
Embed your video on the landing page
You can also embed your SlideShare presentation on the video block. Just double click and paste the embed code
Your video is live on the page
Embed code
Now let’s add some testimonials
Create a new section and add testimonial blocks
To customize an element, double click
Testimonial Block
Add a CTA Block at the end
Create a new section and add a CTA Block
Double click on any element to customize it
Let’s preview and check
You can preview the page anytime and check how it renders on each device
TIPS TO NOTE
 Use resize button in a section drop-bar for full page width block or sections.
 Use top padding to achieve vertical spacing on lower resolution
CHECK-OUT THE LIVE PAGE
http://responsive.landingpages.io/
h
NEW ADDITIONS
 Visibility- Allows you to hide the blocks in mobiles
 Advanced CSS- Change the CSS of a particular block
 Style Editor- Add your custom CSS to override the default leadsquared blocks and
create your own themes
Visibility- hide blocks on Mobile
Select the block and click on visibility tab on the right property panel
Activate Hidden.
By doing that the block will not
appear on the mobile
Advanced CSS- Add your custom CSS
Select the block and click on Advanced>CSS tab on the right property panel
Add your custom CSS here
Style Editor- Change the overall theme of your page
Select the Style editor on the right properties panel
Create your own theme
Style Editor panel
Write down your own custom styles
Edit the code by clicking the edit tab and click
on apply style.
FOR ANY HELP OR TIPS
Write to support@leadsquared.com
j
GO RESPONSIVE TODAY

More Related Content

What's hot

Hotel & Resort Greenfield Projects Development
Hotel & Resort Greenfield Projects DevelopmentHotel & Resort Greenfield Projects Development
Hotel & Resort Greenfield Projects DevelopmentSubodh V. Gupte
 
Upcoming Hotels of Bangladesh
Upcoming Hotels of BangladeshUpcoming Hotels of Bangladesh
Upcoming Hotels of BangladeshFazlea Allahie
 
Presentation hospitality
Presentation hospitalityPresentation hospitality
Presentation hospitalityravindra95
 
LITERATURE STUDY....pptx
LITERATURE STUDY....pptxLITERATURE STUDY....pptx
LITERATURE STUDY....pptxsamikshabisht3
 
EDIÇÃO 3 - 01-04-22.pdf
EDIÇÃO 3 - 01-04-22.pdfEDIÇÃO 3 - 01-04-22.pdf
EDIÇÃO 3 - 01-04-22.pdfAndrMarra
 
Top 52 mep engineer interview questions and answers pdf
Top 52 mep engineer interview questions and answers pdfTop 52 mep engineer interview questions and answers pdf
Top 52 mep engineer interview questions and answers pdfkeyjonh724
 

What's hot (9)

Hotel & Resort Greenfield Projects Development
Hotel & Resort Greenfield Projects DevelopmentHotel & Resort Greenfield Projects Development
Hotel & Resort Greenfield Projects Development
 
Hyatt regency, Mumbai
Hyatt regency, MumbaiHyatt regency, Mumbai
Hyatt regency, Mumbai
 
Upcoming Hotels of Bangladesh
Upcoming Hotels of BangladeshUpcoming Hotels of Bangladesh
Upcoming Hotels of Bangladesh
 
Presentation hospitality
Presentation hospitalityPresentation hospitality
Presentation hospitality
 
LITERATURE STUDY....pptx
LITERATURE STUDY....pptxLITERATURE STUDY....pptx
LITERATURE STUDY....pptx
 
EDIÇÃO 3 - 01-04-22.pdf
EDIÇÃO 3 - 01-04-22.pdfEDIÇÃO 3 - 01-04-22.pdf
EDIÇÃO 3 - 01-04-22.pdf
 
Go Viral with Social Media Strategy
Go Viral with Social Media StrategyGo Viral with Social Media Strategy
Go Viral with Social Media Strategy
 
Top 52 mep engineer interview questions and answers pdf
Top 52 mep engineer interview questions and answers pdfTop 52 mep engineer interview questions and answers pdf
Top 52 mep engineer interview questions and answers pdf
 
Grand Hyatt Dubai Hotel
Grand Hyatt Dubai HotelGrand Hyatt Dubai Hotel
Grand Hyatt Dubai Hotel
 

Similar to Creating responsive landing pages using LeadSquared

Website now guide client edition
Website now guide client editionWebsite now guide client edition
Website now guide client editionVWHOM
 
Are You Still Watching? How to Create Engaging Presentations for Virtual Lear...
Are You Still Watching? How to Create Engaging Presentations for Virtual Lear...Are You Still Watching? How to Create Engaging Presentations for Virtual Lear...
Are You Still Watching? How to Create Engaging Presentations for Virtual Lear...Aggregage
 
Spice Up Your Digital Portfolio
Spice Up Your Digital PortfolioSpice Up Your Digital Portfolio
Spice Up Your Digital PortfolioS. Hendy
 
Blogging101b
Blogging101bBlogging101b
Blogging101bpahmah
 
How to create_a_site
How to create_a_siteHow to create_a_site
How to create_a_sitemastura71
 
Net4’s EasySite Builder Step By Step Guide to Create Business Website
Net4’s EasySite Builder Step By Step Guide to Create Business WebsiteNet4’s EasySite Builder Step By Step Guide to Create Business Website
Net4’s EasySite Builder Step By Step Guide to Create Business WebsiteNet4 India Ltd.
 
Net4’s EasySite Builder Step by Step Guide
Net4’s EasySite Builder Step by Step GuideNet4’s EasySite Builder Step by Step Guide
Net4’s EasySite Builder Step by Step GuidePallavi Vyas
 
Mondo Guide V02 - WORD
Mondo Guide V02 - WORDMondo Guide V02 - WORD
Mondo Guide V02 - WORDMondoexplorer
 
LIVE DEMO: Using PowerPoint to Create Compelling Presentations for Virtual Tr...
LIVE DEMO: Using PowerPoint to Create Compelling Presentations for Virtual Tr...LIVE DEMO: Using PowerPoint to Create Compelling Presentations for Virtual Tr...
LIVE DEMO: Using PowerPoint to Create Compelling Presentations for Virtual Tr...Aggregage
 
Glogster tutorial2011
Glogster tutorial2011Glogster tutorial2011
Glogster tutorial2011Karen Brooks
 
How To Edit Your Website Using Myraah Editor
How To Edit Your Website Using Myraah EditorHow To Edit Your Website Using Myraah Editor
How To Edit Your Website Using Myraah EditorMyraahIO1
 
Step By Step Microsoft Power Point 2010
Step By Step Microsoft Power Point 2010Step By Step Microsoft Power Point 2010
Step By Step Microsoft Power Point 2010Baseera Hashmi
 
Slide Test
Slide TestSlide Test
Slide Testpris1538
 

Similar to Creating responsive landing pages using LeadSquared (20)

Website now guide client edition
Website now guide client editionWebsite now guide client edition
Website now guide client edition
 
Are You Still Watching? How to Create Engaging Presentations for Virtual Lear...
Are You Still Watching? How to Create Engaging Presentations for Virtual Lear...Are You Still Watching? How to Create Engaging Presentations for Virtual Lear...
Are You Still Watching? How to Create Engaging Presentations for Virtual Lear...
 
Spice Up Your Digital Portfolio
Spice Up Your Digital PortfolioSpice Up Your Digital Portfolio
Spice Up Your Digital Portfolio
 
Intro to online editor
Intro to online editorIntro to online editor
Intro to online editor
 
Blogging101b
Blogging101bBlogging101b
Blogging101b
 
How to create_a_site
How to create_a_siteHow to create_a_site
How to create_a_site
 
Net4’s EasySite Builder Step By Step Guide to Create Business Website
Net4’s EasySite Builder Step By Step Guide to Create Business WebsiteNet4’s EasySite Builder Step By Step Guide to Create Business Website
Net4’s EasySite Builder Step By Step Guide to Create Business Website
 
Net4’s EasySite Builder Step by Step Guide
Net4’s EasySite Builder Step by Step GuideNet4’s EasySite Builder Step by Step Guide
Net4’s EasySite Builder Step by Step Guide
 
From doh to pro!
From doh to pro!From doh to pro!
From doh to pro!
 
Mondo Guide V02 - WORD
Mondo Guide V02 - WORDMondo Guide V02 - WORD
Mondo Guide V02 - WORD
 
LIVE DEMO: Using PowerPoint to Create Compelling Presentations for Virtual Tr...
LIVE DEMO: Using PowerPoint to Create Compelling Presentations for Virtual Tr...LIVE DEMO: Using PowerPoint to Create Compelling Presentations for Virtual Tr...
LIVE DEMO: Using PowerPoint to Create Compelling Presentations for Virtual Tr...
 
Glogster tutorial2011
Glogster tutorial2011Glogster tutorial2011
Glogster tutorial2011
 
Canvas 101 packet
Canvas 101 packetCanvas 101 packet
Canvas 101 packet
 
Tech details 3
Tech details 3Tech details 3
Tech details 3
 
Tech details
Tech detailsTech details
Tech details
 
Tech details 2
Tech details 2Tech details 2
Tech details 2
 
How To Edit Your Website Using Myraah Editor
How To Edit Your Website Using Myraah EditorHow To Edit Your Website Using Myraah Editor
How To Edit Your Website Using Myraah Editor
 
Canvas 101
Canvas 101Canvas 101
Canvas 101
 
Step By Step Microsoft Power Point 2010
Step By Step Microsoft Power Point 2010Step By Step Microsoft Power Point 2010
Step By Step Microsoft Power Point 2010
 
Slide Test
Slide TestSlide Test
Slide Test
 

More from LeadSquared

Getting started for marketing users
Getting started for marketing usersGetting started for marketing users
Getting started for marketing usersLeadSquared
 
Getting started for sales managers and sales users
Getting started for sales managers and sales usersGetting started for sales managers and sales users
Getting started for sales managers and sales usersLeadSquared
 
Getting started for admins
Getting started for adminsGetting started for admins
Getting started for adminsLeadSquared
 
LeadSquared for Field Sales
LeadSquared for Field SalesLeadSquared for Field Sales
LeadSquared for Field SalesLeadSquared
 
LeadSquared - Land More Leads, Close More Deals
LeadSquared - Land More Leads, Close More DealsLeadSquared - Land More Leads, Close More Deals
LeadSquared - Land More Leads, Close More DealsLeadSquared
 
5 Landing Page Optimization Tips to Improve Conversion Immediately
5 Landing Page Optimization Tips to Improve Conversion Immediately5 Landing Page Optimization Tips to Improve Conversion Immediately
5 Landing Page Optimization Tips to Improve Conversion ImmediatelyLeadSquared
 
4 Pillars of a High Performing Sales Process to Overcome Challenges
4 Pillars of a High Performing Sales Process to Overcome Challenges4 Pillars of a High Performing Sales Process to Overcome Challenges
4 Pillars of a High Performing Sales Process to Overcome ChallengesLeadSquared
 
10 Trends and Tips to Get Better at Digital Marketing in 2017
10 Trends and Tips to Get Better at Digital Marketing in 201710 Trends and Tips to Get Better at Digital Marketing in 2017
10 Trends and Tips to Get Better at Digital Marketing in 2017LeadSquared
 
8 Effective B2B Sales Techniques
8 Effective B2B Sales Techniques8 Effective B2B Sales Techniques
8 Effective B2B Sales TechniquesLeadSquared
 
5 Spying Strategies to Stay Ahead of Your Competition
5 Spying Strategies to Stay Ahead of Your Competition5 Spying Strategies to Stay Ahead of Your Competition
5 Spying Strategies to Stay Ahead of Your CompetitionLeadSquared
 
Product Marketing Lessons from a Pro
Product Marketing Lessons from a ProProduct Marketing Lessons from a Pro
Product Marketing Lessons from a ProLeadSquared
 
21 best stock image sites for your content marketing
21 best stock image sites for your content marketing21 best stock image sites for your content marketing
21 best stock image sites for your content marketingLeadSquared
 
10 Hacks to Improve Traffic, Leads & Revenue for Your Website
10 Hacks to Improve Traffic, Leads & Revenue for Your Website10 Hacks to Improve Traffic, Leads & Revenue for Your Website
10 Hacks to Improve Traffic, Leads & Revenue for Your WebsiteLeadSquared
 
Social Media for Lead Generation
Social Media for Lead GenerationSocial Media for Lead Generation
Social Media for Lead GenerationLeadSquared
 
Evolution & AMPlification of Mobile Search Marketing [Driving Traffic & Conve...
Evolution & AMPlification of Mobile Search Marketing [Driving Traffic & Conve...Evolution & AMPlification of Mobile Search Marketing [Driving Traffic & Conve...
Evolution & AMPlification of Mobile Search Marketing [Driving Traffic & Conve...LeadSquared
 
LeadSquared Overview for Education Industry
LeadSquared Overview for Education IndustryLeadSquared Overview for Education Industry
LeadSquared Overview for Education IndustryLeadSquared
 
Design Hacks for Marketers
Design Hacks for MarketersDesign Hacks for Marketers
Design Hacks for MarketersLeadSquared
 
The most entertaining google adwords guide you will ever read
The most entertaining google adwords guide you will ever readThe most entertaining google adwords guide you will ever read
The most entertaining google adwords guide you will ever readLeadSquared
 
16 Creative Real Estate Marketing Ideas
16 Creative Real Estate Marketing Ideas16 Creative Real Estate Marketing Ideas
16 Creative Real Estate Marketing IdeasLeadSquared
 

More from LeadSquared (20)

Getting started for marketing users
Getting started for marketing usersGetting started for marketing users
Getting started for marketing users
 
Getting started for sales managers and sales users
Getting started for sales managers and sales usersGetting started for sales managers and sales users
Getting started for sales managers and sales users
 
Getting started for admins
Getting started for adminsGetting started for admins
Getting started for admins
 
LeadSquared for Field Sales
LeadSquared for Field SalesLeadSquared for Field Sales
LeadSquared for Field Sales
 
LeadSquared - Land More Leads, Close More Deals
LeadSquared - Land More Leads, Close More DealsLeadSquared - Land More Leads, Close More Deals
LeadSquared - Land More Leads, Close More Deals
 
B2B vs B2C CRM
B2B vs B2C CRMB2B vs B2C CRM
B2B vs B2C CRM
 
5 Landing Page Optimization Tips to Improve Conversion Immediately
5 Landing Page Optimization Tips to Improve Conversion Immediately5 Landing Page Optimization Tips to Improve Conversion Immediately
5 Landing Page Optimization Tips to Improve Conversion Immediately
 
4 Pillars of a High Performing Sales Process to Overcome Challenges
4 Pillars of a High Performing Sales Process to Overcome Challenges4 Pillars of a High Performing Sales Process to Overcome Challenges
4 Pillars of a High Performing Sales Process to Overcome Challenges
 
10 Trends and Tips to Get Better at Digital Marketing in 2017
10 Trends and Tips to Get Better at Digital Marketing in 201710 Trends and Tips to Get Better at Digital Marketing in 2017
10 Trends and Tips to Get Better at Digital Marketing in 2017
 
8 Effective B2B Sales Techniques
8 Effective B2B Sales Techniques8 Effective B2B Sales Techniques
8 Effective B2B Sales Techniques
 
5 Spying Strategies to Stay Ahead of Your Competition
5 Spying Strategies to Stay Ahead of Your Competition5 Spying Strategies to Stay Ahead of Your Competition
5 Spying Strategies to Stay Ahead of Your Competition
 
Product Marketing Lessons from a Pro
Product Marketing Lessons from a ProProduct Marketing Lessons from a Pro
Product Marketing Lessons from a Pro
 
21 best stock image sites for your content marketing
21 best stock image sites for your content marketing21 best stock image sites for your content marketing
21 best stock image sites for your content marketing
 
10 Hacks to Improve Traffic, Leads & Revenue for Your Website
10 Hacks to Improve Traffic, Leads & Revenue for Your Website10 Hacks to Improve Traffic, Leads & Revenue for Your Website
10 Hacks to Improve Traffic, Leads & Revenue for Your Website
 
Social Media for Lead Generation
Social Media for Lead GenerationSocial Media for Lead Generation
Social Media for Lead Generation
 
Evolution & AMPlification of Mobile Search Marketing [Driving Traffic & Conve...
Evolution & AMPlification of Mobile Search Marketing [Driving Traffic & Conve...Evolution & AMPlification of Mobile Search Marketing [Driving Traffic & Conve...
Evolution & AMPlification of Mobile Search Marketing [Driving Traffic & Conve...
 
LeadSquared Overview for Education Industry
LeadSquared Overview for Education IndustryLeadSquared Overview for Education Industry
LeadSquared Overview for Education Industry
 
Design Hacks for Marketers
Design Hacks for MarketersDesign Hacks for Marketers
Design Hacks for Marketers
 
The most entertaining google adwords guide you will ever read
The most entertaining google adwords guide you will ever readThe most entertaining google adwords guide you will ever read
The most entertaining google adwords guide you will ever read
 
16 Creative Real Estate Marketing Ideas
16 Creative Real Estate Marketing Ideas16 Creative Real Estate Marketing Ideas
16 Creative Real Estate Marketing Ideas
 

Recently uploaded

WA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di Pasuruan
WA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di PasuruanWA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di Pasuruan
WA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di Pasuruaninfoobataborsi24
 
Leading Customer Retention Strategies for 2024
Leading Customer Retention Strategies for 2024Leading Customer Retention Strategies for 2024
Leading Customer Retention Strategies for 2024experienceprosarah
 
obat pelancar haid di apotik dan harganya
obat pelancar haid di apotik dan harganyaobat pelancar haid di apotik dan harganya
obat pelancar haid di apotik dan harganyainfoobataborsi24
 
The BoF Brand Magic Index Volume Two — Preview.pdf
The BoF Brand Magic Index Volume Two — Preview.pdfThe BoF Brand Magic Index Volume Two — Preview.pdf
The BoF Brand Magic Index Volume Two — Preview.pdfhannahcrump4
 
Key Social Media Marketing Trends for 2024
Key Social Media Marketing Trends for 2024Key Social Media Marketing Trends for 2024
Key Social Media Marketing Trends for 2024Jomer Gregorio
 
Mastering Email Marketing - A Comprehensive Guide.pdf
Mastering Email Marketing - A Comprehensive Guide.pdfMastering Email Marketing - A Comprehensive Guide.pdf
Mastering Email Marketing - A Comprehensive Guide.pdfkassou kacem
 
Niche Analysis for Client Outreach Outside Marketplace.pptx
Niche Analysis for Client Outreach Outside Marketplace.pptxNiche Analysis for Client Outreach Outside Marketplace.pptx
Niche Analysis for Client Outreach Outside Marketplace.pptxAhnaf Tahmid Haque
 
Klaus Schweighofer, Zakaj je digitalizacija odlična priložnost za medije, Sty...
Klaus Schweighofer, Zakaj je digitalizacija odlična priložnost za medije, Sty...Klaus Schweighofer, Zakaj je digitalizacija odlična priložnost za medije, Sty...
Klaus Schweighofer, Zakaj je digitalizacija odlična priložnost za medije, Sty...DIGGIT
 
Digital marketing guide complete guide for beginners
Digital marketing guide complete guide for beginnersDigital marketing guide complete guide for beginners
Digital marketing guide complete guide for beginnerstejaswinisahyadreeso
 
Best Digital Expert Corporation of India
Best Digital Expert Corporation of IndiaBest Digital Expert Corporation of India
Best Digital Expert Corporation of IndiaPriyaDigitalExpert
 
WA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di Magetan
WA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di MagetanWA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di Magetan
WA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di Magetaninfoobataborsi24
 
Beyond Silos: How Holistic B2B Digital Strategy Drives Pipeline
Beyond Silos: How Holistic B2B Digital Strategy Drives PipelineBeyond Silos: How Holistic B2B Digital Strategy Drives Pipeline
Beyond Silos: How Holistic B2B Digital Strategy Drives PipelineSearch Engine Journal
 
Marketing Automation Insights - Unlocking Success
Marketing Automation Insights - Unlocking SuccessMarketing Automation Insights - Unlocking Success
Marketing Automation Insights - Unlocking SuccessLean Summits
 
Tea Gobec, Kako pluti po morju tehnoloških sprememb, Innovatif.pdf
Tea Gobec, Kako pluti po morju tehnoloških sprememb, Innovatif.pdfTea Gobec, Kako pluti po morju tehnoloških sprememb, Innovatif.pdf
Tea Gobec, Kako pluti po morju tehnoloških sprememb, Innovatif.pdfDIGGIT
 
Generating Leads with Analyst Content Webinar Slides_SJN Final.pdf
Generating Leads with Analyst Content Webinar Slides_SJN Final.pdfGenerating Leads with Analyst Content Webinar Slides_SJN Final.pdf
Generating Leads with Analyst Content Webinar Slides_SJN Final.pdfShawnNewman13
 
How To Structure Your Web3 Website For Max Visibility In The Bull Market🚀
How To Structure Your Web3 Website For Max Visibility In The Bull Market🚀How To Structure Your Web3 Website For Max Visibility In The Bull Market🚀
How To Structure Your Web3 Website For Max Visibility In The Bull Market🚀Victoria Olsina
 
5 Benefits Of Using Digital Marketing.pptx
5 Benefits Of Using Digital Marketing.pptx5 Benefits Of Using Digital Marketing.pptx
5 Benefits Of Using Digital Marketing.pptxdeepushah1687
 
Unit 3 - Liberalization, Privatization & Globalization
Unit 3 - Liberalization, Privatization & GlobalizationUnit 3 - Liberalization, Privatization & Globalization
Unit 3 - Liberalization, Privatization & GlobalizationKaushik Jaiswal
 
Building Your Customer Base with MailPoet.pdf
Building Your Customer Base with MailPoet.pdfBuilding Your Customer Base with MailPoet.pdf
Building Your Customer Base with MailPoet.pdfChristopher Ross
 
Global Trends in Market Reserch & Insights - Ray Poynter - May 2023.pdf
Global Trends in Market Reserch & Insights - Ray Poynter - May 2023.pdfGlobal Trends in Market Reserch & Insights - Ray Poynter - May 2023.pdf
Global Trends in Market Reserch & Insights - Ray Poynter - May 2023.pdfMROC Japan
 

Recently uploaded (20)

WA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di Pasuruan
WA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di PasuruanWA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di Pasuruan
WA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di Pasuruan
 
Leading Customer Retention Strategies for 2024
Leading Customer Retention Strategies for 2024Leading Customer Retention Strategies for 2024
Leading Customer Retention Strategies for 2024
 
obat pelancar haid di apotik dan harganya
obat pelancar haid di apotik dan harganyaobat pelancar haid di apotik dan harganya
obat pelancar haid di apotik dan harganya
 
The BoF Brand Magic Index Volume Two — Preview.pdf
The BoF Brand Magic Index Volume Two — Preview.pdfThe BoF Brand Magic Index Volume Two — Preview.pdf
The BoF Brand Magic Index Volume Two — Preview.pdf
 
Key Social Media Marketing Trends for 2024
Key Social Media Marketing Trends for 2024Key Social Media Marketing Trends for 2024
Key Social Media Marketing Trends for 2024
 
Mastering Email Marketing - A Comprehensive Guide.pdf
Mastering Email Marketing - A Comprehensive Guide.pdfMastering Email Marketing - A Comprehensive Guide.pdf
Mastering Email Marketing - A Comprehensive Guide.pdf
 
Niche Analysis for Client Outreach Outside Marketplace.pptx
Niche Analysis for Client Outreach Outside Marketplace.pptxNiche Analysis for Client Outreach Outside Marketplace.pptx
Niche Analysis for Client Outreach Outside Marketplace.pptx
 
Klaus Schweighofer, Zakaj je digitalizacija odlična priložnost za medije, Sty...
Klaus Schweighofer, Zakaj je digitalizacija odlična priložnost za medije, Sty...Klaus Schweighofer, Zakaj je digitalizacija odlična priložnost za medije, Sty...
Klaus Schweighofer, Zakaj je digitalizacija odlična priložnost za medije, Sty...
 
Digital marketing guide complete guide for beginners
Digital marketing guide complete guide for beginnersDigital marketing guide complete guide for beginners
Digital marketing guide complete guide for beginners
 
Best Digital Expert Corporation of India
Best Digital Expert Corporation of IndiaBest Digital Expert Corporation of India
Best Digital Expert Corporation of India
 
WA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di Magetan
WA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di MagetanWA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di Magetan
WA | 0821-8888-6412 | Apotik Jual Obat Aborsi Cytotec Asli Di Magetan
 
Beyond Silos: How Holistic B2B Digital Strategy Drives Pipeline
Beyond Silos: How Holistic B2B Digital Strategy Drives PipelineBeyond Silos: How Holistic B2B Digital Strategy Drives Pipeline
Beyond Silos: How Holistic B2B Digital Strategy Drives Pipeline
 
Marketing Automation Insights - Unlocking Success
Marketing Automation Insights - Unlocking SuccessMarketing Automation Insights - Unlocking Success
Marketing Automation Insights - Unlocking Success
 
Tea Gobec, Kako pluti po morju tehnoloških sprememb, Innovatif.pdf
Tea Gobec, Kako pluti po morju tehnoloških sprememb, Innovatif.pdfTea Gobec, Kako pluti po morju tehnoloških sprememb, Innovatif.pdf
Tea Gobec, Kako pluti po morju tehnoloških sprememb, Innovatif.pdf
 
Generating Leads with Analyst Content Webinar Slides_SJN Final.pdf
Generating Leads with Analyst Content Webinar Slides_SJN Final.pdfGenerating Leads with Analyst Content Webinar Slides_SJN Final.pdf
Generating Leads with Analyst Content Webinar Slides_SJN Final.pdf
 
How To Structure Your Web3 Website For Max Visibility In The Bull Market🚀
How To Structure Your Web3 Website For Max Visibility In The Bull Market🚀How To Structure Your Web3 Website For Max Visibility In The Bull Market🚀
How To Structure Your Web3 Website For Max Visibility In The Bull Market🚀
 
5 Benefits Of Using Digital Marketing.pptx
5 Benefits Of Using Digital Marketing.pptx5 Benefits Of Using Digital Marketing.pptx
5 Benefits Of Using Digital Marketing.pptx
 
Unit 3 - Liberalization, Privatization & Globalization
Unit 3 - Liberalization, Privatization & GlobalizationUnit 3 - Liberalization, Privatization & Globalization
Unit 3 - Liberalization, Privatization & Globalization
 
Building Your Customer Base with MailPoet.pdf
Building Your Customer Base with MailPoet.pdfBuilding Your Customer Base with MailPoet.pdf
Building Your Customer Base with MailPoet.pdf
 
Global Trends in Market Reserch & Insights - Ray Poynter - May 2023.pdf
Global Trends in Market Reserch & Insights - Ray Poynter - May 2023.pdfGlobal Trends in Market Reserch & Insights - Ray Poynter - May 2023.pdf
Global Trends in Market Reserch & Insights - Ray Poynter - May 2023.pdf
 

Creating responsive landing pages using LeadSquared

  • 1. LeadSquared landing pages are now responsive
  • 2. What is a responsive landing page It is an approach to web design aimed at crafting sites for an optimal viewing experience—easy reading and navigation with minimal resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). g Technically vTechnicallyIn simple terms A responsive page will adapt to the screen size and will look good on every device
  • 3. Why is responsive design important  Smartphones and tablets have changed the approach towards design and user experience  You lose visitors and money if your page doesn’t render well on mobile  To provide optimal user experience  Google has declared Responsiveness as one of the most important landing page practices hTechnically Statistics A responsive landing page converts 40% more than an unresponsive landing page
  • 4. Let’s take an example
  • 5. Ready to create this in LeadSquared ? Hold on! Before you get started, you should know a few terms. A section is an area, where you can add blocks . A block is an area where you can add the content
  • 6. Meet the Editor Section Options Blank Default Section Block Types Properties Panel
  • 7. Blocks The editor has 8 default blocks which cater to most of the needs content feature form image button video testimonial You can edit or move the blocks by clicking on them
  • 8. Good to go. Let’s begin This is what we will make in next 15 minutes
  • 9. Let’s start by adding the background image From the properties panel select Canvas > Background > Select image You can choose solid color, gradient, or an image from the dropdown Upload and select the image you want to set as the background Make sure you select a high resolution image, typically around 1500px width
  • 10. Now it’s time for the logo Select Image Block > Double click to edit > Choose your logo image> Insert This is not how we want it. We want it centered and a little away from the top edge Logo is an image; we can use image block for the logo. To make it centered , stretch the block and apply some padding on top Padding
  • 11. TIPS TO NOTE  Upload the hero image in the canvas background.  Learn how to stretch and shrink the blocks.  Give spacing and white spaces using padding and margins.
  • 12. Now let’s add another section for headlines For headline select Content Block > Double click to enter html editor > Write your content This is a content block. You can change the font, size, alignment etc. in the html editor We can use content block to write headline and sub-headlines Clicking on the content blocks opens up the html editor
  • 13. TIPS TO NOTE  The default font is Open sans, which is highly readable. Use readable fonts  Switch the editor background to black, if your content color is white  Try CTA Block if you have a click through landing page. It would have a headline, a sub- headline and a Button
  • 14. Let’s add heart to your landing page, The form To add form, select Form Block. To keep it in the center add an empty block first See how the content block gets added to the left . Keep minimum height as 0 Leadsquared offers a very powerful form editor, Create a new section and select a form block This is how the form editor looks like You can make custom adjustments like col or labels borders here You can add/delete the fields here
  • 15. Customize the form header Click on the header tab to customize The header You can customize the color , text and other settings of the header here Change the color and padding from The properties panel
  • 16. Change the form header text Double click on the header to Edit the text Double clicking on the header will allow you to change the text Toggle the editor color so the White text is visible on black
  • 17. Let’s refine it a bit more Try to adjust the padding a little more, change form fields, colors and form headline to get better results.
  • 18. TIPS TO NOTE  Form is fully customizable. Check out the header and the footer tab  The header and the footer properties are on the right properties pane. Double click o n them to edit the text and custom html  You can customize the button by clicking on it. To change the text you can simply type the content there in the popup.
  • 19. Let’s add a features block The features blocks has many templates. Choose whichever suits your needs. Double click the block to customize the content and icon
  • 20. TIPS TO NOTE  Set your style on one features block and clone others.  Choose good quality icons. There are plenty of free resources on the web  To change the canvas width or height. Go to Canvas > Dimensions and Spacing
  • 21. Create a solid color block You can create a solid block by simply adding a section, and choosing a solid color as background Make it solid and choose color, Click on resize from dropdown options to have it full screen
  • 22. Embed your video on the landing page You can also embed your SlideShare presentation on the video block. Just double click and paste the embed code Your video is live on the page Embed code
  • 23. Now let’s add some testimonials Create a new section and add testimonial blocks To customize an element, double click Testimonial Block
  • 24. Add a CTA Block at the end Create a new section and add a CTA Block Double click on any element to customize it
  • 25. Let’s preview and check You can preview the page anytime and check how it renders on each device
  • 26. TIPS TO NOTE  Use resize button in a section drop-bar for full page width block or sections.  Use top padding to achieve vertical spacing on lower resolution
  • 27. CHECK-OUT THE LIVE PAGE http://responsive.landingpages.io/ h
  • 28. NEW ADDITIONS  Visibility- Allows you to hide the blocks in mobiles  Advanced CSS- Change the CSS of a particular block  Style Editor- Add your custom CSS to override the default leadsquared blocks and create your own themes
  • 29. Visibility- hide blocks on Mobile Select the block and click on visibility tab on the right property panel Activate Hidden. By doing that the block will not appear on the mobile
  • 30. Advanced CSS- Add your custom CSS Select the block and click on Advanced>CSS tab on the right property panel Add your custom CSS here
  • 31. Style Editor- Change the overall theme of your page Select the Style editor on the right properties panel Create your own theme
  • 32. Style Editor panel Write down your own custom styles Edit the code by clicking the edit tab and click on apply style.
  • 33. FOR ANY HELP OR TIPS Write to support@leadsquared.com j