Prebuilt layouts

Avoid building common layouts from scratch with these prebuilt layouts in Webflow.

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Prebuilt layouts

Use our prebuilt layouts to get a jump start on your blank canvas — avoid rebuilding the same set of common layouts from scratch.

We've created 6 prebuilt layout options:

  1. Hero layout
  2. 3-column layout
  3. Feature layout
  4. Gallery layout
  5. Call-to-action layout
  6. Footer layout

Hero layout


The hero layout is made up of a flex layout with a heading, intro copy, and call-to-action button on one side, and an asset (image or video) on the other.

Use case

Us this layout when you want to draw attention to content featuring an image, intro copy, and a large button.

Real-life examples

Buffer uses the Hero layout on their homepage.
Tandem uses the Hero layout on their homepage.
We also use the Hero layout on our Webflow homepage.


Try …

Adding a secondary button

  1. Open the Add panel by clicking the + sign on the upper left
  2. Drag a button to the canvas (next to the existing button)
  3. In the Style panel, give the button a class (like “Button Secondary”)
  4. From the background section, change the button’s color to differentiate it from the main button

You could also try …

  • Changing the size of the heading
  • Changing the section’s background color

Resources

Intro to flexbox

3-column card layout

The 3-column card layout is made up of typographic elements (heading and paragraph), but the life of this layout is grid. Grid allows you to easily create 2-dimensional layouts (horizontal and vertical).

Use case

Use this layout when you want to display a list of content with an image, such as a blog post.

Real-life examples

Buffer uses a 2-column card layout.
Lattice uses a 4-column card layout.
Mailchimp uses a 3-column card layout.


Try …

Changing from 3-column to 4-column layout

  1. Select the Grid Card Container
  2. Click the red grid icon on the top right
  3. Click the plus sign to add a grid column

You could also try …

  • Adding a combo class to this section and updating the padding
  • Adding an image in the card

Resources

Grid
Combo classes

Feature layout

The feature layout, like the hero section, uses flexbox. It has an asset (image or video) on one side, with a heading and paragraph on the other.

Use case

Use this layout when you want to showcase a product feature with an image or video and supporting copy.

Real-life examples

Asana using Feature layout.
Slack using Feature layout.
Bugsnag using Feature layout.

Try …

Reversing the layout horizontally

  1. Select the Feature Section layout
  2. Open the navigator
  3. Drag the image below the div section

You could also try …

  • Aligning text to stick to the top of its parent element
  • Using Webflow’s rich text element

Resources

Rich text
Intro to flexbox

Gallery layout

The gallery layout uses lightbox in Webflow to enable a fullscreen slideshow experience.

Use case

Use this layout when you want to display images and videos in an immersive fullscreen slideshow modal.

Real-life examples


Try …

Adding another image to the gallery

1. From the Gallery Section select the Lightbox Link element (Note: When you click the image, you’ll be selecting Gallery Thumbnail instead of Lightbox Link. To select the Lightbox Link, use breadcrumbs or open the Navigator and find the parent of the Gallery Thumbnail)
2. Duplicate and paste (you can also Copy & Paste with command/ctrl+c then command/ctrl+p)

Also try…

Left-aligning the typographic elements

Resources

Grid areas
Lightbox

Call-to-action layout

The Call-to-action layout consists of a heading, paragraph, and a call-to-action button.

Use case

Use this layout when you want to draw attention to a specific action with a large button.

Real-life examples


Try …

Changing the background color and using a gradient

  1. Select the CTA Section layout
  2. From the Backgrounds section in the Style panel, click the plus sign next to Image & Gradient
  3. Choose the Linear Gradient option from background type
  4. Choose your beginning and end colors

Also try …

  • Adding an input field
  • Adding a secondary call-to-action button

Resources

Background gradient

Footer Layout

The Footer layout uses flex box and consists of an image on one side, and an H5 with list items on the other.

Use case

Use this layout when you want to display a list of pages and social media links on your website.

Real-life examples


Try…

Using grid layout instead of flex

  1. Select the Footer Menu
  2. From the Style panel’s Layout section, switch the display from flex to grid
  3. Add additional columns by clicking the plus sign in the grid mode
  4. Remove the extra row from the grid popover in the Style panel

Also try …

  • Making the footer darker
  • Adding another column to the footer

Resources

Grid


Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form