Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
Avoid building common layouts from scratch with these prebuilt layouts in Webflow.
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:
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.
Show and hide navigation bar on scroll
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 this layout when you want to draw attention to content featuring an image, intro copy, and a large button.
Adding a secondary button
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 this layout when you want to feature a background image with text in the hero section of your homepage.
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 this layout when you want to display a list of content with an image, such as a blog post.
Changing from 3-column to 4-column layout
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.
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.
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:
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.
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 this layout when you want to showcase a product feature with an image or video and supporting copy.
Reversing the layout horizontally
The gallery layout uses lightbox in Webflow to enable a fullscreen slideshow experience.
Use this layout when you want to display images and videos in an immersive fullscreen slideshow modal.
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)
Left-aligning the typographic elements
The Call-to-action layout consists of a heading, paragraph, and a call-to-action button.
Use this layout when you want to draw attention to a specific action with a large button.
Changing the background color and using a gradient
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 the Subscribe from when you’d like to collect email addresses from site visitors.
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 the Contact form when you’d like to give your site visitors the option to reach out.
The Footer layout uses flexbox and consists of an image on one side, and an H5 with list items on the other.
Use this layout when you want to display a list of pages and social media links on your website.
Using grid layout instead of flex
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback
