Most activities launched on the Firecart Marketing Platform involve designing a landing page.
This article will help you with the basic steps involved in creating a nice looking landing page.
Designing a Landing Page
Step 1: Selecting a Template
When you reach the page design step in any of the activities, you get an option to pick from a
a. Lot of different pre-built templates offered by Firecart.
b. Reuse an older saved template
c. Create a custom fresh template
Step 2: Picking a Template
You can preview how the different templates look across devices before making a decision on using any one of them.
You can view the template in desktop, tablet or mobile mode by clicking on the option at the top.
Once you have identified the template you want to use, go ahead and click on the use button for the template.
Step 3: Landing Page Editor
You are now on the Editor section of the landing page activity. This page has 3 sections:
a. The main design area for the page
b. Options to change color & SEO for the page
c. Options to assign links, preview & save the page
When we focus on the design area, the page is two main items - Sections & Stuff.
Sections help you in setting up the layout for the page, & stuff includes the different types of items you will add to the page (images, text, html code, etc.)
Step 4: Adding a Section on the Page
When you hover towards the bottom of the page, you get an option to add stuff, add section & style.
Click on the Add Section button, it will give you a bunch of different layout options for the page.
Based on the layout you want, you can pick from one of the options provided.
Step 5: Adding stuff to the different sections on the page
Once you have identified the overall layout of the page, by adding multiple sections, you can start working on adding different blocks inside every section.
When you click on Add stuff, you get an option to pick from 10 different options -
When you click on style button of any block the following sidebar will appear. This sidebar can you used to set various styling options like background image, background color, text-color, border color etc. Additionally you can import a background image from your computer for a particular section.
This option will help you set the width of the page you design. Some pages do not stick to the right and left ends. This setting can be found here. You can choose from the two available options.
You can add your SEO related title, description etc from this block.
Different Blocks you can use on the Landing Page Creator
1. Image Block
a. Click on Image Widget Icon
b. Click on upload image. You now have the option to either upload a new Image or click on gallery icon to select an existing image.
c. Save changes and you will see the image show up on the Design Area. You can scale the image by increasing/decreasing the size from the right bottom section of the image.
2. Form Block
a. Click on Form Icon
b. Click and hold any field under Base Fields and drag it into Form designer area.
c. Save the changes and the form fields start showing up on the landing page.
d. You can rearrange the fields by simply dragging them in the design area.
The settings option gives you additional flexibility to change the labels, placeholders and provide any help text for the fields.
It also gives you the option to make the field optional or compulsory for the form.
3. Code Block
a. Click on the Code widget to design your page with html.
b. Place your custom code in the editor provided and click on Save changes once you are done.
(If you want to place special tracking code, Google Analytics code on the page, then you would use this block)
4. iFrame Block
a. Click on iFrame Icon to add an Iframe to a page
b. You will typically use this option to embed other webpages inside this landing page.
Setup the size & save changes.
5. CTA Block
a. Click on CTA Icon to add Call To Action to your page. This is a very important part of the landing page & when setup correctly can result in significant improvements in lead capture.
b. If you want to link another select option ‘Another Page” or If you want to assign link to CTA then select option “Another Link” option.
Finally click on “Save changes”
6. Like & Follow Icons Block
a. Click on Like and Follow Icon to add a Like and Follow Block to your page
b. Provide additional information about the Facebook/Twitter pages which you want to be liked or followed.
3) Click on Save changes.
7. Share & Tweet Icons Block
a. Click on Share Icon to add a Share and Tweet block to your page.
b. You need to give additional details about the link & edit the images, message that will be shared.
a) Facebook Configuration
You can give Name, Link, Url and description details for sharing your link on facebook.
b) Twitter Configuration
Enter the message to tweet
c) Email Configuration
Give the subject for the email and the message to be shared.
Finally click on Save changes to add the Social Blocks on the page.
8. Rich Text Editor Block
a. Click on the ABC icon to add a Text Block to your page.
b. Using Rich text editor you can add and modify the text on the page.
3) Click on Save changes to add the text to the page
9. Timer Block
a. Click on Timer to add Timer Block to your page
b. Select Timer Theme using drop down and click on ‘Save changes’.
This block is often used to add urgency to the customer to complete the action on the page.
10. Spacer Block
a. Sometimes you want to just add a divider or a blank space in the landing page to distance the blocks from each other. In that case, you can use the spacer block.
b. Click on Add and the block will show up on the design section of the page.
Once you are done adding the sections & the different blocks on each section, you can preview the page across the devices & finally save the pages using the options at the top right corner of the page.
Once you are done, you can click on Proceed, & you are done creating your custom form for the campaign.