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

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

Mark Valdez Mark Valdez

Mark Valdez

Founder & CEO at Eads Bridge Holdings

发布日期: 2023年5月15日
+ 关注

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?

No alt text provided for this image
Framer’s insert menu

If you’re stuck and need inspiration, check out Framer’s?template library

No alt text provided for this image
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

No alt text provided for this image
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:

领英推荐

No alt text provided for this image
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:

No alt text provided for this image

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.

No alt text provided for this image
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:

No alt text provided for this image
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.

No alt text provided for this image
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:

No alt text provided for this image
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.

Let us know what landing page you created, or what tools you used to make it!

Your Digital Advantage. Your Digital Advantage.

Your Digital Advantage.

557 位关注者

订阅

要查看或添加评论，请登录

Mark Valdez的更多文章

  • Tech Recipe: ???????? Manage cash flow and expenses with modern financial tools
    2024年7月8日

    Tech Recipe: ???????? Manage cash flow and expenses with modern financial tools

    Background: Welcome back from what we hope was a restful, celebratory 4th of July holiday. We are a week into Q3 and we…

  • ?????? Noteworthy Bits
    2024年7月1日

    ?????? Noteworthy Bits

    AI Survey: Four Themes Emerging from Bain & Co [LINK] If you are in to consulting company output, this is a pretty…

    1 条评论
  • Tech Recipe: Leveraging AI Tools for Effortless Content Creation
    2024年6月17日

    Tech Recipe: Leveraging AI Tools for Effortless Content Creation

    Background: Last year we started using ChatGPT to come up with ideas to make our favorite banana stand business really…

  • Noteworthy Bits
    2024年6月11日

    Noteworthy Bits

    Google CEO, Sundar Pichai, on the State of AI and the Future of the Web from The Verge [LINK] In this interview, Nilay…

  • This Week I Learned: People Ops > HR
    2024年6月3日

    This Week I Learned: People Ops > HR

    Despite our core focus on tech-enablement, we often talk about mental health counseling being the ultimate “people…

  • ?? Noteworthy Bits
    2024年5月20日

    ?? Noteworthy Bits

    The Unsexy Future of Generative AI Is Enterprise Apps from Wired [LINK] While the buzz around generative AI has been…

  • This Week I Learned -- Software ≠ No Effort
    2024年5月14日

    This Week I Learned -- Software ≠ No Effort

    This week I decided to kick things off with what in Silicon Valley circles would be considered a controversial…

  • ???? Noteworthy Bits
    2024年4月29日

    ???? Noteworthy Bits

    Businesses at Work 2024 from Okta [LINK] The team at Okta used anonymized data from over 18,800 global customers to…

  • This Week I Learned -- Teamwork Makes the Dream Work
    2024年4月22日

    This Week I Learned -- Teamwork Makes the Dream Work

    Live From New York: It’s Saturday Night! Getting emails in the middle of a workday is normal, getting an email to see I…

    1 条评论
  • ?? Noteworthy Bits
    2024年4月8日

    ?? Noteworthy Bits

    Healthcare Marketplaces, Where Art Thou? from a16z [LINK] The a16z team dives into the unique challenges of building…

社区洞察

其他会员也浏览了