top of page
  • Annand Sharma

Tech Recipe: Creating a Landing Page for a Digital Ad Campaign Without a Web Developer

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:

  • Framer - A powerful, easy to use web design tool that optionally can import more complex designs from other services, like Figma.

  • Figma - A collaborative design tool that allows you to create wireframes, mockups, and prototypes.


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.

A screen shot of Framer's insert menu
Framer's insert menu
Add new template dialog
The dialog Framer shows when you want to add a new 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:

Framer's style and background menu
The style menu in Framer which is on the right hand side of their display
  • 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:

Framer list of form tools
A list of the form options you can add to your page
  • 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:

landing page preview
A preview of the landing page I created for the banana stand


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 screen shot of insert
Figma’s insert menu, which is all shapes compared to Framer’s more functional menu
  • 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:

Framer screenshot to import from Figma
Framer’s feature to “Import from Figma”


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.

Framer custom domain menu
A premium feature of Framer to let you connect to your own domain
  • 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:

Framer’s custom code menu
Framer’s custom code menu
  • 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.


28 views
bottom of page