Webflow: Create A Website Landing Page To Collect Emails
4.6 (10 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,843 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Webflow: Create A Website Landing Page To Collect Emails to your Wishlist.

Add to Wishlist

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.6 (10 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,843 students enrolled
Created by Edvin Lynch
Last updated 12/2014
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 1.5 hours on-demand video
  • 2 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create your own landing page that converts visitors into email signups
  • Create a email signup and private messaging form to collect visitors emails
View Curriculum
  • Create a Free 14 Days Webflow Account
  • Internet Connection

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:

"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

"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!

Who is the target audience?
  • Perfect for anyone who wants to start their own business
  • Perfect for Freelancing Designers
Students Who Viewed This Course Also Viewed
Curriculum For This Course
22 Lectures
Getting Started
2 Lectures 10:13


  • 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
Preview 09:14
Hero Section
6 Lectures 22:26

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

Create the Navbar

Navbar Continued

A slider of the featured courses

H1 main course title

Nav button below

Embedded youtube/vimeo video

Hero Section

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
Hero part 2

White Multi-column strip with Gray logo'

Call-to-Action & Hero Slider

2 Columns

Blocks 470px


Text flushed left

Price tag + Enroll Link

H1 Title


Finalizing Hero Section
Social Network Section
2 Lectures 08:13

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

Social Section

Blue–Purple Gradient


Our Favorite Courses H1 Title


Line Break

Social Buttons
Testimonials Section
3 Lectures 11:42

Slider section

Our Students Say H1 Title

Line Break




Testimonials Section

Follow our newsletter H1 Title

3 Column

Facebook Like-box

Twitter Widget

RSS Feed

Adding Testimonial Slider

Line Break Graphic Element
Key Features Section
2 Lectures 12:47

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

About Us Section

Key features content
Newsletter Signup / Contact Form
5 Lectures 33:20

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

Creating The Contact Section

Contact Form Section

Message Us Form

Button Interactions

Adding In-page linking
2 Lectures 00:59
Wrap Up

Make the knowledge stick!

Pop Quiz
2 questions

Upcoming Lectures!
About the Instructor
Edvin Lynch
4.3 Average rating
629 Reviews
30,148 Students
6 Courses
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.