Prebuilt layouts

Get started faster and 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 11 prebuilt layout options:

  1. Simple navigation
  2. Hero 
  3. Hero overlay 
  4. Cards section
  5. Main content 
  6. Feature section 
  7. Gallery 
  8. Call to action 
  9. Subscribe form
  10. Contact form
  11. Footer 


Simple navigation

The Simple navigation layout is made up of a logo, links, and a call-to-action button. On smaller devices, the links stack vertically as buttons.

Real-life examples

Webflow uses Simple navigation.

Resources

Show and hide navigation bar on scroll

Hero

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

Use case

Use 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

Hero overlay 


The Hero overlay is built with a flex layout, aligned and justified so the content will always be centered horizontally and vertically. To change this section’s background, select the "Hero Image Overlay” then scroll to the background section of the Style panel and replace the image. You can also adjust the opacity of the overlay’s black background for better contrast. 

Use case

Use this layout when you want to feature a background image with text in the hero section of your homepage.

Real-life examples

InVision uses the Hero overlay on their homepage. 

Try …

  • Changing the background size from custom to cover
  • Add a secondary button

Resources

Intro to flexbox

Cards section

The Card section 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

Main content


The Main content layout is made up of a Rich Text Element (RTE). Headings, text, video, lists, and blockquotes are all done inside the RTE. 

Use case

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place. This layout saves you from having to add and format each element individually. Just double-click and start writing.

Real-life examples


The Webflow blog uses Main content layout.


Buffer uses Main content layout on their Terms of Use page.

Try …

Static and dynamic content editing

An RTE can be used with static or dynamic content. For static content, drop the element into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect an RTE to that field in the settings panel. 

Voila!

To style the headings, paragraphs, blockquotes, figures, images, and captions inside your rich text element, first:

  1. Give the rich text element a class
  2. Select the element within the RTE that you want to style — a blockquote, for example
  3. Click the + sign below the selector field to "Nest selector inside of" your rich text element's class

Also try …

Customizing the formatting for each RTE

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Resources

Rich text

Intro to dynamic content


Feature section

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 

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 

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


Subscribe form

This section uses a container element to ensure the content looks right on every device. It’s centered with the class "Centered Container.”


It has an email field and a Subscribe button.

Use case

Use the Subscribe from when you’d like to collect email addresses from site visitors. 

Real-life examples

Stripe uses a Subscribe form. 

Try …

  • Add another input field name
  • Change the background color of the section to make it stand out from other content

Resources

Intro to forms

Style forms

Contact form

The Contact form uses grid. You can adjust and reorganize the divs inside the Form Grid to fit 1 or 2 grid columns as needed. For more help with configuration, be sure to check out our tutorial on Intro to forms.

Use case

Use the Contact form when you’d like to give your site visitors the option to reach out. 

Real-life examples

Asana uses a Contact form.

Try …

Resources

Form submissions

Intro to forms

Style forms

Footer layout

The Footer layout uses flexbox 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