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 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.
To style the headings, paragraphs, blockquotes, figures, images, and captions inside your rich text element, first:
Give the rich text element a class
Select the element within the RTE that you want to style — a blockquote, for example
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.
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)
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.