SlideShare a Scribd company logo
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

DELHI MUMBAI INDUSTRIAL CORRIDOR
DELHI MUMBAI INDUSTRIAL CORRIDORDELHI MUMBAI INDUSTRIAL CORRIDOR
DELHI MUMBAI INDUSTRIAL CORRIDOR
Yash Shah
 
Human thermal perception and outdoor thermal comfort under shaded conditions ...
Human thermal perception and outdoor thermal comfort under shaded conditions ...Human thermal perception and outdoor thermal comfort under shaded conditions ...
Human thermal perception and outdoor thermal comfort under shaded conditions ...
Manat Srivanit
 
Indian Green Building Council Green Schools Rating
Indian Green Building Council Green Schools RatingIndian Green Building Council Green Schools Rating
Indian Green Building Council Green Schools Rating
IGBC Green Building Congress
 
Aranya Community Housing
Aranya Community HousingAranya Community Housing
Aranya Community Housing
Khushboo Sood
 
TOD Karo - Challenges and Opportunities in Implementing TOD Principles in India
TOD Karo - Challenges and Opportunities in Implementing TOD Principles in IndiaTOD Karo - Challenges and Opportunities in Implementing TOD Principles in India
TOD Karo - Challenges and Opportunities in Implementing TOD Principles in India
WRI Ross Center for Sustainable Cities
 
Malaysian Perspective on Barrier-Free and Universal Design
Malaysian Perspective on Barrier-Free and Universal Design Malaysian Perspective on Barrier-Free and Universal Design
Malaysian Perspective on Barrier-Free and Universal Design
Hazreena Hussein
 
ECBC Training_Energy Efficiency Initiatives in Commercial Buildings
ECBC Training_Energy Efficiency Initiatives in Commercial BuildingsECBC Training_Energy Efficiency Initiatives in Commercial Buildings
ECBC Training_Energy Efficiency Initiatives in Commercial Buildings
Mathangi Ramakrishnan
 
APSRTC presentation
APSRTC presentationAPSRTC presentation
APSRTC presentation
Kunal Chaudhary
 
Bhopal city planning
Bhopal city planningBhopal city planning
Bhopal city planning
sonika patel
 
Heathrow Airport
Heathrow AirportHeathrow Airport
Heathrow Airport
Saifullah Mahmud
 
Webinar - Improving Safe Access and Public Spaces: A Case from Navanagar
Webinar - Improving Safe Access and Public Spaces: A Case from NavanagarWebinar - Improving Safe Access and Public Spaces: A Case from Navanagar
Webinar - Improving Safe Access and Public Spaces: A Case from Navanagar
WRI Ross Center for Sustainable Cities
 
Estimating seminar presentation
Estimating seminar presentationEstimating seminar presentation
Estimating seminar presentation
seenyeeyong
 
GRIHA RATING SYSTEM
GRIHA RATING SYSTEMGRIHA RATING SYSTEM
GRIHA RATING SYSTEM
Krina Vesuwala
 
Itc green center gurgaon A2sheet
Itc green center gurgaon A2sheetItc green center gurgaon A2sheet
Itc green center gurgaon A2sheet
rohit singh
 
Dwarka -Developing Projects
Dwarka -Developing ProjectsDwarka -Developing Projects
Dwarka -Developing Projects
Outlook Menia
 
A study on urban growth trends in kochi
A study on urban growth trends in kochiA study on urban growth trends in kochi
A study on urban growth trends in kochi
Arun Chandra Babu
 
TISS Hyderabad M.A DS Cohort 2020: Placement Brochure
TISS Hyderabad M.A DS Cohort 2020: Placement BrochureTISS Hyderabad M.A DS Cohort 2020: Placement Brochure
TISS Hyderabad M.A DS Cohort 2020: Placement Brochure
TISSDSInternalPlacem
 
Green building ppt
Green building pptGreen building ppt
Green building ppt
akshayapriyadharshini
 
Industrial case study report (Final)
Industrial case study report (Final)Industrial case study report (Final)
Industrial case study report (Final)
pranay kumar
 
Site visit report
Site visit reportSite visit report
Site visit report
Hani Abdul-Hakim
 

What's hot (20)

DELHI MUMBAI INDUSTRIAL CORRIDOR
DELHI MUMBAI INDUSTRIAL CORRIDORDELHI MUMBAI INDUSTRIAL CORRIDOR
DELHI MUMBAI INDUSTRIAL CORRIDOR
 
Human thermal perception and outdoor thermal comfort under shaded conditions ...
Human thermal perception and outdoor thermal comfort under shaded conditions ...Human thermal perception and outdoor thermal comfort under shaded conditions ...
Human thermal perception and outdoor thermal comfort under shaded conditions ...
 
Indian Green Building Council Green Schools Rating
Indian Green Building Council Green Schools RatingIndian Green Building Council Green Schools Rating
Indian Green Building Council Green Schools Rating
 
Aranya Community Housing
Aranya Community HousingAranya Community Housing
Aranya Community Housing
 
TOD Karo - Challenges and Opportunities in Implementing TOD Principles in India
TOD Karo - Challenges and Opportunities in Implementing TOD Principles in IndiaTOD Karo - Challenges and Opportunities in Implementing TOD Principles in India
TOD Karo - Challenges and Opportunities in Implementing TOD Principles in India
 
Malaysian Perspective on Barrier-Free and Universal Design
Malaysian Perspective on Barrier-Free and Universal Design Malaysian Perspective on Barrier-Free and Universal Design
Malaysian Perspective on Barrier-Free and Universal Design
 
ECBC Training_Energy Efficiency Initiatives in Commercial Buildings
ECBC Training_Energy Efficiency Initiatives in Commercial BuildingsECBC Training_Energy Efficiency Initiatives in Commercial Buildings
ECBC Training_Energy Efficiency Initiatives in Commercial Buildings
 
APSRTC presentation
APSRTC presentationAPSRTC presentation
APSRTC presentation
 
Bhopal city planning
Bhopal city planningBhopal city planning
Bhopal city planning
 
Heathrow Airport
Heathrow AirportHeathrow Airport
Heathrow Airport
 
Webinar - Improving Safe Access and Public Spaces: A Case from Navanagar
Webinar - Improving Safe Access and Public Spaces: A Case from NavanagarWebinar - Improving Safe Access and Public Spaces: A Case from Navanagar
Webinar - Improving Safe Access and Public Spaces: A Case from Navanagar
 
Estimating seminar presentation
Estimating seminar presentationEstimating seminar presentation
Estimating seminar presentation
 
GRIHA RATING SYSTEM
GRIHA RATING SYSTEMGRIHA RATING SYSTEM
GRIHA RATING SYSTEM
 
Itc green center gurgaon A2sheet
Itc green center gurgaon A2sheetItc green center gurgaon A2sheet
Itc green center gurgaon A2sheet
 
Dwarka -Developing Projects
Dwarka -Developing ProjectsDwarka -Developing Projects
Dwarka -Developing Projects
 
A study on urban growth trends in kochi
A study on urban growth trends in kochiA study on urban growth trends in kochi
A study on urban growth trends in kochi
 
TISS Hyderabad M.A DS Cohort 2020: Placement Brochure
TISS Hyderabad M.A DS Cohort 2020: Placement BrochureTISS Hyderabad M.A DS Cohort 2020: Placement Brochure
TISS Hyderabad M.A DS Cohort 2020: Placement Brochure
 
Green building ppt
Green building pptGreen building ppt
Green building ppt
 
Industrial case study report (Final)
Industrial case study report (Final)Industrial case study report (Final)
Industrial case study report (Final)
 
Site visit report
Site visit reportSite visit report
Site visit report
 

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 edition
VWHOM
 
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 Portfolio
S. Hendy
 
Intro to online editor
Intro to online editorIntro to online editor
Intro to online editor
Firas Abo Assaf "Top Web Today"
 
Blogging101b
Blogging101bBlogging101b
Blogging101b
pahmah
 
How to create_a_site
How to create_a_siteHow to create_a_site
How to create_a_site
mastura71
 
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
Pallavi Vyas
 
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 India Ltd.
 
From doh to pro!
From doh to pro!From doh to pro!
From doh to pro!
Jeremy Harder
 
Mondo Guide V02 - WORD
Mondo Guide V02 - WORDMondo Guide V02 - WORD
Mondo Guide V02 - WORD
Mondoexplorer
 
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 tutorial2011
Karen Brooks
 
Canvas 101 packet
Canvas 101 packetCanvas 101 packet
Tech details 3
Tech details 3Tech details 3
Tech details 3
Marko Crnogorcevic
 
Tech details
Tech detailsTech details
Tech details
Marko Crnogorcevic
 
Tech details 2
Tech details 2Tech details 2
Tech details 2
Marko Crnogorcevic
 
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
MyraahIO1
 
Canvas 101
Canvas 101Canvas 101
Canvas 101
Mike Glennon
 
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
Baseera Hashmi
 
Slide Test
Slide TestSlide Test
Slide Test
pris1538
 

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
Net4’s EasySite Builder Step by Step GuideNet4’s EasySite Builder Step by Step Guide
Net4’s EasySite Builder Step by Step Guide
 
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
 
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 users
LeadSquared
 
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
LeadSquared
 
Getting started for admins
Getting started for adminsGetting started for admins
Getting started for admins
LeadSquared
 
LeadSquared for Field Sales
LeadSquared for Field SalesLeadSquared for Field Sales
LeadSquared for Field Sales
LeadSquared
 
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
LeadSquared
 
B2B vs B2C CRM
B2B vs B2C CRMB2B vs B2C CRM
B2B vs B2C CRM
LeadSquared
 
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
LeadSquared
 
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
LeadSquared
 
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
LeadSquared
 
8 Effective B2B Sales Techniques
8 Effective B2B Sales Techniques8 Effective B2B Sales Techniques
8 Effective B2B Sales Techniques
LeadSquared
 
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
LeadSquared
 
Product Marketing Lessons from a Pro
Product Marketing Lessons from a ProProduct Marketing Lessons from a Pro
Product Marketing Lessons from a Pro
LeadSquared
 
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
LeadSquared
 
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
LeadSquared
 
Social Media for Lead Generation
Social Media for Lead GenerationSocial Media for Lead Generation
Social Media for Lead Generation
LeadSquared
 
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 Industry
LeadSquared
 
Design Hacks for Marketers
Design Hacks for MarketersDesign Hacks for Marketers
Design Hacks for Marketers
LeadSquared
 
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
LeadSquared
 
16 Creative Real Estate Marketing Ideas
16 Creative Real Estate Marketing Ideas16 Creative Real Estate Marketing Ideas
16 Creative Real Estate Marketing Ideas
LeadSquared
 

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

Get Off the Bandwagon - Separating Digital Marketing Myths from Truth - Scott...
Get Off the Bandwagon - Separating Digital Marketing Myths from Truth - Scott...Get Off the Bandwagon - Separating Digital Marketing Myths from Truth - Scott...
Get Off the Bandwagon - Separating Digital Marketing Myths from Truth - Scott...
DigiMarCon - Digital Marketing, Media and Advertising Conferences & Exhibitions
 
INTRODUCTION TO SEARCH ENGINE OPTIMIZATION (SEO).pptx
INTRODUCTION TO SEARCH ENGINE OPTIMIZATION (SEO).pptxINTRODUCTION TO SEARCH ENGINE OPTIMIZATION (SEO).pptx
INTRODUCTION TO SEARCH ENGINE OPTIMIZATION (SEO).pptx
Giorgio Chiesa
 
Mastering SEO for Google in the AI Era - Dennis Yu
Mastering SEO for Google in the AI Era - Dennis YuMastering SEO for Google in the AI Era - Dennis Yu
Title: Making Money the Easy Way: A Quick Guide to Generating Income
Title: Making Money the Easy Way: A Quick Guide to Generating IncomeTitle: Making Money the Easy Way: A Quick Guide to Generating Income
Title: Making Money the Easy Way: A Quick Guide to Generating Income
WilliamZinsmeister
 
Learn more about affiliate marketing as a beginner
Learn more about affiliate marketing as a beginnerLearn more about affiliate marketing as a beginner
Learn more about affiliate marketing as a beginner
MichaelGiles34
 
Advanced Storytelling Concepts for Marketers
Advanced Storytelling Concepts for MarketersAdvanced Storytelling Concepts for Marketers
Advanced Storytelling Concepts for Marketers
Ed Shimp
 
Digital Marketing Trends - Experts Insights on How to Gain a Competitive Edge...
Digital Marketing Trends - Experts Insights on How to Gain a Competitive Edge...Digital Marketing Trends - Experts Insights on How to Gain a Competitive Edge...
Digital Marketing Trends - Experts Insights on How to Gain a Competitive Edge...
DigiMarCon - Digital Marketing, Media and Advertising Conferences & Exhibitions
 
How to Make Your Trade Show Booth Stand Out
How to Make Your Trade Show Booth Stand OutHow to Make Your Trade Show Booth Stand Out
How to Make Your Trade Show Booth Stand Out
Blue Atlas Marketing
 
Mastering The Best Restaurant Advertising Campaigns Detailed Guide
Mastering The Best Restaurant Advertising Campaigns Detailed GuideMastering The Best Restaurant Advertising Campaigns Detailed Guide
Mastering The Best Restaurant Advertising Campaigns Detailed Guide
Kopa Global Technologies
 
How to Kickstart Content Marketing With A Small Team - Dennis Shiao
How to Kickstart Content Marketing With A Small Team - Dennis ShiaoHow to Kickstart Content Marketing With A Small Team - Dennis Shiao
How to Kickstart Content Marketing With A Small Team - Dennis Shiao
DigiMarCon - Digital Marketing, Media and Advertising Conferences & Exhibitions
 
在线办理(英国UWS毕业证书)西苏格兰大学毕业证学位证一模一样
在线办理(英国UWS毕业证书)西苏格兰大学毕业证学位证一模一样在线办理(英国UWS毕业证书)西苏格兰大学毕业证学位证一模一样
在线办理(英国UWS毕业证书)西苏格兰大学毕业证学位证一模一样
5ys5mvlp
 
Top Strategies for Building High-Quality Backlinks in 2024 PPT.pdf
Top Strategies for Building High-Quality Backlinks in 2024 PPT.pdfTop Strategies for Building High-Quality Backlinks in 2024 PPT.pdf
Top Strategies for Building High-Quality Backlinks in 2024 PPT.pdf
1Solutions Pvt. Ltd.
 
Lily Ray - Optimize the Forest, Not the Trees: Move Beyond SEO Checklist - Mo...
Lily Ray - Optimize the Forest, Not the Trees: Move Beyond SEO Checklist - Mo...Lily Ray - Optimize the Forest, Not the Trees: Move Beyond SEO Checklist - Mo...
Lily Ray - Optimize the Forest, Not the Trees: Move Beyond SEO Checklist - Mo...
Amsive
 
Mindfulness Techniques Cultivating Calm in a Chaotic World.pptx
Mindfulness Techniques Cultivating Calm in a Chaotic World.pptxMindfulness Techniques Cultivating Calm in a Chaotic World.pptx
Mindfulness Techniques Cultivating Calm in a Chaotic World.pptx
elizabethella096
 
What Software is Used in Marketing in 2024.
What Software is Used in Marketing in 2024.What Software is Used in Marketing in 2024.
What Software is Used in Marketing in 2024.
Ishaaq6
 
Pillar-Based Marketing Master Class - Ryan Brock
Pillar-Based Marketing Master Class - Ryan BrockPillar-Based Marketing Master Class - Ryan Brock
Global Growth Starts With Translation - How To Unlock Global Markets - Tim Kirby
Global Growth Starts With Translation - How To Unlock Global Markets - Tim KirbyGlobal Growth Starts With Translation - How To Unlock Global Markets - Tim Kirby
Global Growth Starts With Translation - How To Unlock Global Markets - Tim Kirby
DigiMarCon - Digital Marketing, Media and Advertising Conferences & Exhibitions
 
Content Marketing Blueprint For Content Strategy, content creation, content d...
Content Marketing Blueprint For Content Strategy, content creation, content d...Content Marketing Blueprint For Content Strategy, content creation, content d...
Content Marketing Blueprint For Content Strategy, content creation, content d...
Bertie Birchfield
 
Story Telling Master Class - Jennifer Morilla
Story Telling Master Class - Jennifer MorillaStory Telling Master Class - Jennifer Morilla
Mastering Your Online Visibility - Fernando Angulo
Mastering Your Online Visibility - Fernando AnguloMastering Your Online Visibility - Fernando Angulo

Recently uploaded (20)

Get Off the Bandwagon - Separating Digital Marketing Myths from Truth - Scott...
Get Off the Bandwagon - Separating Digital Marketing Myths from Truth - Scott...Get Off the Bandwagon - Separating Digital Marketing Myths from Truth - Scott...
Get Off the Bandwagon - Separating Digital Marketing Myths from Truth - Scott...
 
INTRODUCTION TO SEARCH ENGINE OPTIMIZATION (SEO).pptx
INTRODUCTION TO SEARCH ENGINE OPTIMIZATION (SEO).pptxINTRODUCTION TO SEARCH ENGINE OPTIMIZATION (SEO).pptx
INTRODUCTION TO SEARCH ENGINE OPTIMIZATION (SEO).pptx
 
Mastering SEO for Google in the AI Era - Dennis Yu
Mastering SEO for Google in the AI Era - Dennis YuMastering SEO for Google in the AI Era - Dennis Yu
Mastering SEO for Google in the AI Era - Dennis Yu
 
Title: Making Money the Easy Way: A Quick Guide to Generating Income
Title: Making Money the Easy Way: A Quick Guide to Generating IncomeTitle: Making Money the Easy Way: A Quick Guide to Generating Income
Title: Making Money the Easy Way: A Quick Guide to Generating Income
 
Learn more about affiliate marketing as a beginner
Learn more about affiliate marketing as a beginnerLearn more about affiliate marketing as a beginner
Learn more about affiliate marketing as a beginner
 
Advanced Storytelling Concepts for Marketers
Advanced Storytelling Concepts for MarketersAdvanced Storytelling Concepts for Marketers
Advanced Storytelling Concepts for Marketers
 
Digital Marketing Trends - Experts Insights on How to Gain a Competitive Edge...
Digital Marketing Trends - Experts Insights on How to Gain a Competitive Edge...Digital Marketing Trends - Experts Insights on How to Gain a Competitive Edge...
Digital Marketing Trends - Experts Insights on How to Gain a Competitive Edge...
 
How to Make Your Trade Show Booth Stand Out
How to Make Your Trade Show Booth Stand OutHow to Make Your Trade Show Booth Stand Out
How to Make Your Trade Show Booth Stand Out
 
Mastering The Best Restaurant Advertising Campaigns Detailed Guide
Mastering The Best Restaurant Advertising Campaigns Detailed GuideMastering The Best Restaurant Advertising Campaigns Detailed Guide
Mastering The Best Restaurant Advertising Campaigns Detailed Guide
 
How to Kickstart Content Marketing With A Small Team - Dennis Shiao
How to Kickstart Content Marketing With A Small Team - Dennis ShiaoHow to Kickstart Content Marketing With A Small Team - Dennis Shiao
How to Kickstart Content Marketing With A Small Team - Dennis Shiao
 
在线办理(英国UWS毕业证书)西苏格兰大学毕业证学位证一模一样
在线办理(英国UWS毕业证书)西苏格兰大学毕业证学位证一模一样在线办理(英国UWS毕业证书)西苏格兰大学毕业证学位证一模一样
在线办理(英国UWS毕业证书)西苏格兰大学毕业证学位证一模一样
 
Top Strategies for Building High-Quality Backlinks in 2024 PPT.pdf
Top Strategies for Building High-Quality Backlinks in 2024 PPT.pdfTop Strategies for Building High-Quality Backlinks in 2024 PPT.pdf
Top Strategies for Building High-Quality Backlinks in 2024 PPT.pdf
 
Lily Ray - Optimize the Forest, Not the Trees: Move Beyond SEO Checklist - Mo...
Lily Ray - Optimize the Forest, Not the Trees: Move Beyond SEO Checklist - Mo...Lily Ray - Optimize the Forest, Not the Trees: Move Beyond SEO Checklist - Mo...
Lily Ray - Optimize the Forest, Not the Trees: Move Beyond SEO Checklist - Mo...
 
Mindfulness Techniques Cultivating Calm in a Chaotic World.pptx
Mindfulness Techniques Cultivating Calm in a Chaotic World.pptxMindfulness Techniques Cultivating Calm in a Chaotic World.pptx
Mindfulness Techniques Cultivating Calm in a Chaotic World.pptx
 
What Software is Used in Marketing in 2024.
What Software is Used in Marketing in 2024.What Software is Used in Marketing in 2024.
What Software is Used in Marketing in 2024.
 
Pillar-Based Marketing Master Class - Ryan Brock
Pillar-Based Marketing Master Class - Ryan BrockPillar-Based Marketing Master Class - Ryan Brock
Pillar-Based Marketing Master Class - Ryan Brock
 
Global Growth Starts With Translation - How To Unlock Global Markets - Tim Kirby
Global Growth Starts With Translation - How To Unlock Global Markets - Tim KirbyGlobal Growth Starts With Translation - How To Unlock Global Markets - Tim Kirby
Global Growth Starts With Translation - How To Unlock Global Markets - Tim Kirby
 
Content Marketing Blueprint For Content Strategy, content creation, content d...
Content Marketing Blueprint For Content Strategy, content creation, content d...Content Marketing Blueprint For Content Strategy, content creation, content d...
Content Marketing Blueprint For Content Strategy, content creation, content d...
 
Story Telling Master Class - Jennifer Morilla
Story Telling Master Class - Jennifer MorillaStory Telling Master Class - Jennifer Morilla
Story Telling Master Class - Jennifer Morilla
 
Mastering Your Online Visibility - Fernando Angulo
Mastering Your Online Visibility - Fernando AnguloMastering Your Online Visibility - Fernando Angulo
Mastering Your Online Visibility - Fernando Angulo
 

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