Webflow: Create A Website Landing Page To Collect Emails

Learn how to create a responsive landing page from scratch, without any code, and start collecting emails with Mailchimp
4.5 (9 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
1,837 students enrolled
Instructed by Edvin Lynch Design / Web Design
25% off
Take This Course
  • Lectures 22
  • Length 1.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 12/2014 English

Course Description

Join Over 1,500+ Students Who Are Creating Their Own Website Landing Pages!

In this course you will learn how to create a Website Landing Page that you can use to convert visitors into emails and get newsletter signups.

  • Showcase a Featured Video or Course with a Slideshow
  • Social Networks Buttons for your visitors to easily connect with you
  • Testimonials to give Social Proof for your content
  • 4 Key Features that encapsulates your website
  • Mailchimp Newsletter Signup Integration
  • Customized Contact Form to receive messages via email
  • In-Page Linking & Animations that bring life to your website

At the end of this course you will be able to build all of this without writing a single bit of code!

Raving Reviews From Udemy Students:

 photo ScreenShot2014-12-17at94219PM_zps75cb2c71.png"If you are looking to create a landing page, webflow is the best place to do it and this course will show you exactly how to do it!" – Strife Lim

 photo ScreenShot2014-12-17at94219PM_zps75cb2c71.png"Edvin Lynch is a master teacher. He knows how to really show you how to arm a website in a snap, using the right tool." – Francisco Urosa

You should take this course if you're doing web design work for a client, family member, friend, or if you're starting your own business, perhaps an online teaching career and you want students to subscribe your own email list!

This course is Learn-By-Doing so you'll follow along with me throughout the course as I show you how to build the website and I'll explain all the tools, functions and design concepts as I go.

The process will be broken down into baby-steps, so each lecture will be really focused on one specific part, and I shall explain how that part fits in with the rest of the site so that you not only learn how to exactly replicate what I'm showing you, but you will be able to use your own creativity to create something unique, and I encourage it.

When you enroll to this course you will receive announcements whenever I add new lectures and content, so there will always be something new for you to learn!

What are the requirements?

  • Create a Free 14 Days Webflow Account
  • Internet Connection

What am I going to get from this course?

  • Create your own landing page that converts visitors into email signups
  • Create a email signup and private messaging form to collect visitors emails

Who is the target audience?

  • Perfect for anyone who wants to start their own business
  • Perfect for Freelancing Designers

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Getting Started
Getting Set Up With Webflow


  • Webflow Dashboard Button
    • Brings you back to the backend settings for your site.
  • Page Indicator
    • Tells you which page you're currently on.
  • Preview Mode (⇧⌘P)
    • Toggle preview On/Off
  • Viewport Mode
    • Desktop (1), Tablet - Portrait (2), Phone - Landscape (3), Phone - Portrait (4)
  • Undo (


    / Redo (</b>


  • Export Code
    • Once your site is ready you can export your code as finalized HTML/CSS
  • Publish Site
    • This will publish your site onto the web with the designated URL or Custom URL


  • Styling Panel (S)
    • Classes, States, Position, Typography, Background, Border, Shadows, Effects
  • Settings (D)
    • ID for in-page linking, Visibility, Element & Custom Attributes
  • Navigator (F)
    • Expand/Collapse All Elements, Layers, Items
  • Style Manager (G)
    • All Styles (classes) used, Clean Up Styles
  • Assets (H)
    • Symbols, Interactions


  • Add Elements (A)
    • Layout, Basic, Typography, Media, Forms, Widgets
  • Pages (P)
    • Add/Edit/Copy/Delete Pages, In-page SEO (Title, Description, Keywords)
  • View Modes
    • Hide Element Edges (⇧⌘E)
    • Hide Empty Elements
    • Show Grid Overlay (⇧⌘G)
    • Enable X-Ray Mode (⇧⌘X)
  • Help
    • Help Center
    • Video Tutorials
    • Forums
    • FAQs
    • Keyboard Shortcuts
    • Contact Us


  • Cascading Layers
    • See Nested Elements/Layers
  • Duplicate Element
  • Delete Element
Section 2: Hero Section

Create Blue–Purple Background

We'll be using the Navbar Widget to create our mobile ready navbar

And adding a tagline next to our logo

and nav buttons for

  • About
  • Courses
  • Contact

Making the buttons interactive with Opacity change

Completed with a sexy white border on the bottom

Navbar Continued

A slider of the featured courses

H1 main course title

Nav button below

Embedded youtube/vimeo video


A 4 column strip with the links to your top Social Networks

Hover state's with the Brand HEX colors

  • Facebook #3B5998
  • Google #d34836
  • Twitter #4099FF
  • YouTube #e52d27

White Multi-column strip with Gray logo'


2 Columns

Blocks 470px


Text flushed left

Price tag + Enroll Link

H1 Title


Section 3: Social Network Section

Icon at the top of the section

You Can Teach Others! H1 Title


Line Break

Large Image

Section Body Title

Body Paragraph

6 Service Features

Let's Get Started CTA Button


Blue–Purple Gradient


Our Favorite Courses H1 Title


Line Break

Section 4: Testimonials Section

Slider section

Our Students Say H1 Title

Line Break





Follow our newsletter H1 Title

3 Column

Facebook Like-box

Twitter Widget

RSS Feed

Line Break Graphic Element
Section 5: Key Features Section

Icon and the top of the section

We Can Teach You! H1 Title


Line Break

4 Column Features

Text title

Text paragraph

View All Courses Button

Key features content
Section 6: Newsletter Signup / Contact Form

Section Icon

Let's Stay In Touch H1 Title

Mailchimp Newsletter Title

Line Break


Message Us Title

Line Break

Message Form

Download Flyer CTA

Social Sharing Buttons

Contact Form Section
Message Us Form
Button Interactions
Adding In-page linking
Section 7: Conclusion
Wrap Up
2 questions

Make the knowledge stick!

Upcoming Lectures!

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Edvin Lynch, UX Design Mentor

I've been doing UI/UX design, business development, digital marketing, and instructional videos for entrepreneurs, startups, and Fortune 500 companies in Silicon Valley and Silicon Beach, and I've been featured in .NET Magazine & MIX Magazine. I'm also an entrepreneur and started my own design agency (LLC Agency) in 2012, based in Los Angeles and Hollywood.

Some of the companies I've worked with include Google, Facebook, Red Bull, and I've taught large design agencies how to design more efficiently as teams.

Here on Udemy, I share all my expertise and insights in Design, Development, and Marketing, that took me years to gain during my career.

I'm also a DJ/Producer since 2007, working with Ableton and producing Electronic Dance Music. Checkout my SoundCloud link below! Let me know if you want to learn about Ableton or music production.

Ready to start learning?
Take This Course