Background:
The best digital ad campaigns perform well because they convert site visitors into customers. Digital ad platforms enable any marketer to fine tune the target audience and even test a variety of marketing messages to drive the most traffic. But hiring a designer and web developer to continually create new landing pages can be really expensive. Plus once they launch your page they will leave for the next job. As a modern marketer you want to be able to monitor, measure, and modify your landing pages to optimize conversions. To create a professional landing page without the help of a web developer, you can utilize a combination of design and web builder tools.
In our last recipe, ChatGPT helped modernize our business. Let’s use Framer to create a landing page letting our customers know we’ve made some upgrades to the banana stand. We’ll also take the opportunity to ask them to sign up for our mailing list.
Shopping list:
Cooking instructions:
Base Layer:
Sign up for Framer.
Up front, Framer’s tool kit is more “solutions” focused rather than being design focused. Elements are sorted by functionality.
If you’re stuck and need inspiration, check out Framer’s template library.
For our purposes I chose a free splash page template.
With the template imported you can start changing it to fit your needs.
For example, I changed the background from the template’s purple to an image of the Newport Beach Pier at sunset by going into the “style” and “fill” section:
You can click and drag the sections to swap their locations or just remove pieces you don’t need.
Don’t forget to edit the text.
Make the template yours by using Framer's built-in tools to add any other interactivity and responsiveness to your design.
For our landing page we just want email addresses which we will do through Mailchim. Framer lets you pick from a variety of forms if you want to do some more complex:
This template has 2 pages, the second page is where visitors go after they submit your form. Be sure to make changes to that page as well.
Preview and test your landing page in various devices and screen sizes. Here's mine:
Optional Seasoning:
If you find Framer’s templates and tools are not advanced enough, you want to hop into Figma.
Figma allows you to get under the graphics layer straight to the HTML and CSS that actually tell the browser what to show.
Design your landing page using Figma's design tools, including text, images, and other visual elements.
Figma’s tools are much more shape and design oriented to allow you to build functionality you want:
Figma expects you to organize your design into frames, which represent different sections of the landing page.
Any design work you do in Figma can be imported to Framer when you’re ready to go live. Just go back into Framer and look for the following:
Finishing Touches:
Publish your landing page using Framer's web hosting.
Make sure to connect it to your company’s domain so that users will visit www.yourcompany.com/landingpage instead of a random Framer site.
Integrate your ad campaign pixel(s) and an analytics tool (e.g. Google Analytics) to track user behavior and optimize your landing page performance. These items typically go in the <head> of the page and Framer gives you an easy place to copy and paste those in:
Add an A/B testing tool like Google Optimize so you can try different ideas to see which one performs best.
Conclusion:
Building a content forward, visually appealing landing page can make or break your customer acquisition flow for any digital marketing campaign. These tools give everyone the power to create, and test, many different options for landing pages for a fraction of the price a web developer and designer would charge.
Comments