Most entrepreneurs need to make landing pages at some point or another in their careers. Well, at least the ones marketing online do.
So many successful businesses crank out landing pages to showcase products and solutions that can make your life (the buyer) easier and more enjoyable.
That being said, most of us get to the point where we have a shhhwweeet product! And we’re at the point where we want masses of people to see it, and sign up to our email lists.
So the question is, how do we create those landing pages? Just as importantly, how do we make them attractive!?
The more attractive they are, the more you delight the user as their eyes pan across the page. When you delight them—your audience begins to psychologically associate you with a subtle sense of joy and beauty.
I’m sure you’ve seen many landing pages that are a variety of blues and grays.
They’re usually static looking and not very entertaining. Snooooooze.
I’m a marketer and as such I understand the utilitarian style necessary to convert your visitors over to a desired task. That usually involves a video and an opt-in email marketing form.
But…
I longed for something more stylish!
As a user experience designer, (and after reading a heavy dose of A Beautiful Mess today) I just wanted something more entertaining while having the necessary methods to convert for marketing purposes.
That’s when I stopped making generic landing pages that “go-with-the-flow.” Nobody made a ruckus by following the masses.
I decided to make a more trendy page that made my eyes sparkle.
Now, I’m not saying it’s a work of art, or anything like that.
It’s nice and refreshing to make something that is attractive AND usable.
I just finished a landing page for a new offer that we’ve created. We wanted to give out a branding guide template for free, so entrepreneurs and small businesses can begin to create their branding strategy. Our gift to the world, if you will.
After blasting through creating the product (and feeling mighty confident if I do say…) I began my journey to creating a beautiful landing page.
Again, with the end in mind of conversion (getting emails) and delighting viewers in the process.
Let’s get started.
I began by using GetResponse. There are a multitude of software systems out there for you to easily create landing pages. There’s Get Response, Lead Pages and Optimize Press to name a few.
I chose to use Get Response because I find that their templates are already well laid out. That way I can edit and input my brand graphics quickly and have a great looking page in a matter of minutes.
GetResponse is also a great email marketing platform. So I’m completing two things I need simultaneously—email marketing and landing pages.
If you’re searching for an email marketing software, feel free to head on over to GetResponse. And if click the link and you sign up for their 30 day free trial and then upgrade, we’ll get a cup of coffee on them for sending you over. It’s a little affiliate love. If you’d prefer to not provide us with complimentary espresso, just google their name to sign up.
The first thing I did, was login. Go to the dashboard and scroll over the tab “Landing Page” and click on “create.”
You’ll then come to a page where you will have the opportunity to choose a template. There is always a nice variety of templates here. I chose the first one: Free Shipping. I liked the look of the blocked text and a big photo background.
Select the template and continue on your journey.
An adorable little monster will chomp on some code while you wait for your page to load…
I love these little brand elements on sites! Chomp… Chomp…
One of the first things I do is swap out the logo placements that they have— for ours. Upload a transparent .png file of your logo (I like to use a white logo). You could always upload a jpeg file also with something like a white background.
Need to make a logo file, or a design file and you don’t have the Adobe Suite? Head on over to Canva. They make designing easy. And it’s mostly free.
Just hover over the current image, and click the button that says “replace.” And replace the image with your logo.
This is what the upload image section looks like:
Next, I started adding the elements that I needed. This program has a great drag-and-drop system that makes design and placement a breeze.
My landing page needed a video and an opt-in. I moved the big orange box and text below, and removed things I didn’t need. There’s a little trash icon when you hover over the images. Sometimes I use this liberally.
Forms with video usully convert the best with the video on the left and the opt-in form on the right.
I selected the video icon in the tool pallet to the right, and dragged it into my page. Remember to link it to your actual video! They give a video placeholder.
I loved the look of the transparent black box with the text atop. I moved that box to the right of the video, and resized it. I added the text I needed, and then highlighted the headline and made it green. Something eye-catching and bright.
I wanted the design of the page to be consistent. I did this by copying the black box, resizing it and adding it below the headline and under the logo.
If you hover over the box, there’s a little plus sign in the right corner. Click that and it will magically copy the box. I added another box below the headline as a container for my email marketing form.
They didn’t have an opt-in up top for this theme. I drag and dropped the setting onto the page (it’s the fourth button down from the tool bar).
I wanted to change the background to something that was more organic and closer to our brand. I uploaded a horizontal photo, and voila! Make sure you select the scale to full screen version (the button 2nd in from the left). This will allow the photo to take up the full screen. And be sure to select “full width.”
Full width background photos are trending right now for design (and have been for a little while now). Do this, and your page will look up-to-date and like you paid a designer loads of cash to make it.
Don’t have a slew of photos at your beck-and-call? Well you should! Here are 12 killer stock photo resources to beautify your brand. Check them out and get some sweet backgrounds for your pages.
I also placed some text below the video to further emphasize what the user will receive for opting in to our list. I created the arrow myself in Adobe Illustrator & uploaded it as a png. I’m sure you could find a transparent png arrow file with a quick google search.
Scroll down the page and you’ll see the next panel to design.
This is where I placed the orange text box. I typed what the offer is for, and it pops!
You’ll notice that I also included a little mocked-up ebook. This is for the more design saavy. If you have Adobe Photoshop, and know how to use it—it’s a total breeze.
I did a quick search for free ebook mock-up designs. Low and behold, Google gave me answers! I found a terrific website— PSD Covers that has plenty of Photoshop actions to mock up your design files. I downloaded this action. I pulled it into Photoshop, uploaded my ebook design and applied the actions.
It’s magic!
I clicked save and had a gorgeous ebook cover mocked up ready to go. I saved it as a transparent png file so I wouldn’t see a white background when I uploaded it into my landing page.
And that’s how I made that ebook file. If you’re looking to make a snazzy ebook cover and you’re not super design saavy, again head on over to Canva. Create the dimensions to be that of a book cover and use one of their many design templates to create your ebook cover.
Trust me, great design makes all the difference.
And mocking up products does wonders.
I went back into GetResponse and dragged the image icon from the tool bar onto the screen. I uploaded my file and layered it just a little over the orange box to create some depth.
Next I went on to creating another email form.
I copied the black boxes again and aligned them next to each other. I moved the text ontop of the left box, and colored it green. Then I copied the email form and dropped it onto the box.
The last step was just uploading my logo into the footer.
Easy Peasy.
All of the themes in GetResponse have a corresponding thank you page.
I wanted the pages to look similar and to keep them consistent. So I applied similar tactics to the design of the thank you page.
I uploaded my logo again, and added a couple of transparent black boxes to place behind the text.
I added the text I needed, and then repurposed the button they had in the theme to encourage people to check out the new Branding Blueprint ecourse we just released.
From there, I just updated the link in the green button to go where I wanted to take my viewers. Then I linked up the social icon buttons below with our corresponding accounts. Just double click on the images and there will be a place for a link.
Make sure you select “save & exit.”
And you’re done!
Remember to publish the page to make it live, and to select the email list that you’d like the forms to input your audience into.
Those are all my little secrets to create a landing page in under 10 minutes!
Looking to build your brand? Head on over to check out our branding series, download our new branding guide template & video, or take a tour of our new Branding Blueprint 7-part e-course.
Like resources & tips? Here are 12 killer stock photography resources for ya!
How do you like creating Landing Pages? Let us know in the comments! Thoughts?