Last updated on September 12th, 2022 at 10:17 am.
Create a free Getresponse account so as to follow along with me in this tutorial. Use the button below.
#7 GetResponse Landing Page Tutorial
A landing page is a web page that has a single objective such as to promote a product, an event, service or an offer, usually in exchange for the visitor’s contact information.
This Getresponse Landing page tutorial will show you how to work with the Landingpage creator.
Let’s create a Landing page.
Click on Menu , then Landing pages.
If you want to create multiple Landingpages, you will need to upgrade your account.
Click on the Create landing page button.
Choose a template
The first step is for you to choose a template. You can choose templates based on the categories on the left side as shown in the screenshot below.
You may use a pre-built template or you may build your landing page from scratch. With a prebuilt template, all you need to do is edit the content and media files.
When building a Landing page from scratch, you will use the getresponse Drag and drop editor to add in all the blocks and sections you need on your web page.
Also take note of the Thank-you pages category as highlighted below. Thank you pages, as the name suggest are the last pages a subscriber sees after taking action. We’ll see how to create them too ( after creating getresponse Landing Pages).
In my case, let’s say I want to give out this free Getresponse Tutorial PDF. I will choose to build my landing page from scratch. Watch this in depth Getresponse landing Page Tutorial video that I did some time back.
Step 1: Click on build from scratch.
Please note that when you choose a Build from scratch, there are multiple templates that may have different features. So, look at the image of the template to see if it has a signup form, if that’s something you need in your Landing page.
I will click on Build from scratch .
Then I will choose the second template as highlighted in the screenshot below.
Step 2: This is a very important step because it lets you know if your template comes with a Thank you page. Some templates do not. A thank you page could be used to give out an offer or a link (if you don’t want to use an email for that).
Click on Select Template . If it shows you a Landing page and a Thank you page as shown below, then give it a name and continue.
What is a Getresponse Thank-you page?
A thank-you page is where your subscriber will land once they take an action on your landing page. Thank you pages can also be used in other getresponse marketing features such as Webinars and so on.
Once you give your template a name, click on the Next Step button. Give the Landingpage a name that is prescriptive of what its goal is.
Welcome to the Getresponse landing Page editor.
To add any element to your Landing page, drag it from the right onto the landing page.
The following screenshot shows the landing page Sections and Blocks available for you to create your web page. You can drag in any element into the Landing page .
Let’s design the landing page
The objective of this landing page is to give away a free Getresponse PDF Tutorial.
Let’s use the different block content to design our landing page.
Step 1: Add a logo.
Click on the top image to add a logo. Then click on the image icon to upload your logo as shown below.
I do not need the next image after the logo so I will delete it. If you need to add a header image there, click on the image icon to upload an image. Click the delete icon to delete it.
Step 2: After that, drag the header text up. Then double click it to edit it. To change color or font size, double click it to select it and then change the color or any other formatting as needed. You can change the formatting using the text toolbar shown.
Select the full text or the part of the text where you need to edit. For instance, I’ll change the full text title to black and then change the word ‘Getresponse’ to blue as shown below.
This gives the result shown in the screenshot below.
Just remember that you can double click on any item and the toolbar will appear. Once the toolbar appears feel free to edit the element’s properties. As for text, ensure you select the full or partial text you want to edit it’s properties such as colors font size etc. You can also drag elemnts up and down to position them.
When dragging elements up and down, keep an eye out for the lines that appear. These lines will help you position your block elements correctly.
When dragging elements you will also see pixel sizes that will help you to position your elements based on the pixels heights.
Step 3: Editing the Signup form
You can edit the signup form by simply double clicking on the form fields. To edit the full form click next to the button and you can change field settings.
To increase / reduce the width of the fields, click on it and drag the edges as illustrated.
All fields dragged to size:
To change the text or color of the button or text fields, double click and edit appropriately once the toolbar appears.
You can add an image in any background . Click on color on the toolbar, then image. You can choose an image as background as the result below shows.
You may add a BG image:
To make some fields mandatory. Or, to add more fields on your form, click next to the button/ just above the button or between other fields, till you see the Webform Fields options shown in the screenshot below.
Then click on the Webform fields button.
To add a field, click on the checkbox next to its name.
To make any field mandatory, enable it as a required field.
Step 4 : Let’s add more blocks on our Landing page.
You can simply add a block by dragging them into the already available section. Or you can add another section and add blocks into it. If you need to style your sections differently, adding another section for the next blocks would make sense, however if you will have the same background color, just use the same section to add blocks.
I will drag in a textbox, double click on it to edit it and change the font to 30. I will also drag it down to create some space between it and the element on top.
I will add another textbox to list the page of contents.
And then I’ll drag in an image block and use an image from the Getresponse library.
Please note that the Getresponse Landing Page editor is a Drag and Drop editor. This means that you can align your elements next to each other by simply dragging them to the location where you want them.
Also note that, when adding elements into a section, you need to increase the size of the section by dragging the bottom edges (shown in the illustration below.)
Feel free to add the other blocks. Drag them into your Landing page, double click on them to learn what you can do with them.
You should also edit the Mobile version of your web page. A lot of visits come from mobile devices, therefore, ensure that your landing page displays well on mobile phones.
Click on the mobile icon to begin editing the mobile version.
Then click on Ok let’s go Mobile.
Drag all the elements up and down to make them appear well on small devices. Create space between them and remove any items you may not want on the mobile version. When done, click save and go back to the computer version or save and exit.
Adding a download link – Thank you page
Let’s finalize this Getresponse Landing page tutorial by adding a download link to our PDF file.
In this part I will edit the Thank you page that came with my landing page. Another option would be to add the downloadable item in your welcome/ ‘thank you for subscribing’ email.
Edit the Thank-you page:
Click on the Thank-you page link at the top.
Edit the Thank you page with your content. Here is a sample of mine:
Add a downloadable file and link the button
Next step, let’s add the pdf file and make the button clickable.
You can host the PDF file anywhere you prefer. You may also host it on Getresponse. You may upload it into your content library earlier.
Upload the file now
If you haven’t uploaded it yet, just open the Getresponse dashboard in a new window of your browser (RIGHT Click on the Getresponse logo then open in a new tab/window).
Then go to Menu, then Files and Images.
Click on the Add Files button. Upload your pdf by dragging it into the browser or searching for it.
Then click on the Add button.
Once it is uploaded, you can copy its URL by clicking on the vertical ellipsis, then clicking on Copy URL as shown in the screenshot below:
Add a link to your button on the Thank you page
Once you copy the PDF file URL as explained above, go back to your Thank you page editing screen.
Double click on the button, then click on the hyperlink icon highlighted below.
Paste in the Web address of the file, then click OK. Feel free to change the other options as you may see fit.
Thank-You Mobile version
Then click on the mobile icon to edit the Mobile version of the Thankyou page. Edit it as you may need to. Then save.
Finally, Click Save. Then save and exit or Save as Template if you will need to reuse the Landing page template in future.
Under status, click on publish to publish or unpublish the landing page as indicated below.
You may copy and share the link of your landing page. Just copy it from beneath its title as seen in the screenshot above.
Click on the vertical ellipsis to see what else you can do with your Landing page.
That’s it for this Getresponse landing page Tutorial. Create more Landing pages so that you may get more familiar with Getresponse Landing Pages.
Recommended VPS Providers
Find out the VPS providers I recommend.