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 (7 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,828 students enrolled
Instructed by Edvin Lynch Design / Web Design
$20
Take This Course
  • Lectures 22
  • Contents Video: 1.5 hours
    Other: 2 mins
  • 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

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

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

What 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.

Curriculum

Section 1: Getting Started
Getting Set Up With Webflow
Preview
Article
09:14

TOP PANEL (LEFT TO RIGHT)

  • 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 (

    ⌘Z)

    / Redo (</b>

    ⇧⌘Z)

  • 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

TOOLS (RIGHT) PANEL

  • 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

LEFT PANEL

  • 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

BOTTOM PANEL

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

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
04:41
02:52

A slider of the featured courses

H1 main course title

Nav button below

Embedded youtube/vimeo video

03:52

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
03:36

White Multi-column strip with Gray logo'

04:48

2 Columns

Blocks 470px

Image

Text flushed left

Price tag + Enroll Link

H1 Title

Paragraph

Section 3: Social Network Section
01:48

Icon at the top of the section

You Can Teach Others! H1 Title

Subtitle

Line Break

Large Image

Section Body Title

Body Paragraph

6 Service Features

Let's Get Started CTA Button

06:25

Blue–Purple Gradient

Icon

Our Favorite Courses H1 Title

Subtitle

Line Break

Section 4: Testimonials Section
02:10

Slider section

Our Students Say H1 Title

Line Break

Photo

Paragraph

Credit

06:58

Follow our newsletter H1 Title

3 Column

Facebook Like-box

Twitter Widget

RSS Feed

Line Break Graphic Element
02:34
Section 5: Key Features Section
04:39

Icon and the top of the section

We Can Teach You! H1 Title

Subtitle

Line Break

4 Column Features

Text title

Text paragraph

View All Courses Button

Key features content
08:08
Section 6: Newsletter Signup / Contact Form
03:21

Section Icon

Let's Stay In Touch H1 Title

Mailchimp Newsletter Title

Line Break

Form

Message Us Title

Line Break

Message Form

Download Flyer CTA

Social Sharing Buttons

Contact Form Section
07:26
Message Us Form
08:01
Button Interactions
06:00
Adding In-page linking
08:32
Section 7: Conclusion
Wrap Up
00:47
2 questions

Make the knowledge stick!

Upcoming Lectures!
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Edvin Lynch, UX Design Mentor

I have been designing in some form since the age of 12, and I made it my profession when I designed a logo for my first client in high school.

At the California Institute of the Arts (CalArts) I received a strong foundation in design for print, web and mobile, in addition to experience in actual product design through a side job for a startup.

For the last 3 years since graduating, I've been working for pre-seed startups in small cross-functional teams <5, agile development, and I've also started my own team at LLC. At LLC, I'm currently in charge of design, while also maintaining business operations and client relations.

I share all my expertise and insights in my Udemy courses!

Ready to start learning?
Take This Course