Today, we are going to learn how to build a page in Webflow using elements. Webflow offers a simple drag-and-drop solution to create custom pages. You can arrange different elements on your page.
Quick Tip: Quickly add an element using the keyboard shortcut Ctrl + E or Cmd + E.
1. Layout Elements
The elements in the "Layout" section help structure the pages of your Webflow site.
Section
This element allows you to separate distinct content blocks and divide your page into several meaningful sections. A section has a width that spans the entire page (100%).
Container
The Container element works in conjunction with the section element. It allows for orderly and centered management of content.
Grid
The Grid element permits you to arrange content according to a grid layout (with columns and rows). It is a practical element when aiming for a responsive design.
Columns
As its name suggests, the Columns element allows content to be arranged inside it in column format. You can customize this element by selecting the number of columns and their widths.
2. Basic Elements
The elements in the Basic section are, in fact, the most commonly used (basic) elements for constructing your web page.
Div Block
The Div Block is a highly versatile element. Indeed, all other types of blocks are Div Blocks with special properties. Div Blocks can be used as you see fit, but they are primarily used to group different elements together.
List
The List element allows you to create ordered (numbered) or unordered (bulleted) lists of items.
List Item
The List Item is an element that can only be added to a "List" element and is used to display content in a list format.
Link Block
The Link Block is a Div Block that specializes in turning the elements inside it into links.
Button
The Button element is simply a button that links to pages, sections, forms, etc. It is essential for your CTAs (Call To Action).
3. Typography Elements
Typography elements allow you to add text content to your page.
Heading
A Heading is a text element that represents a title. Headings describe the topic of a section (similar to an essay). There are several types of Headings (H1, H2, H3, ..., H6). The headings have a hierarchy of importance with H1 > H2 > ... > H6. They are crucial for SEO because they provide indicators to indexing bots. Therefore, it's important not to skip headings on a page, to have only one H1, and to optimize them with keywords.
Paragraph
The Paragraph element allows you to add textual content to your pages.
Text Block
The Text Block element allows you to add any type of text to your page. It's somewhat like the Div Block for typography elements.
Text Link
The Text Link element allows you to insert text content that links to other pages or sections.
Block Quote
The Block Quote element allows you to add text content in the form of a quotation.
Rich Text Element
The rich text element lets you create and format headings, paragraphs, quotations, images, and videos in one place, instead of having to add and format them individually.
Learn how to use rich text in Webflow!
4. CMS Elements
CMS elements are those linked to the dynamic part of Webflow.
Collection List
A Collection List is a Webflow element that allows you to display the content of a CMS collection as a list.
5. E-commerce Elements
These elements are available when you have opted for an e-commerce plan and are used in the management of an online store.
Cart
Cart is an element that allows you to add a shopping cart to your e-commerce site.
Add to Cart
Add to Cart is a button-type element that allows products to be added to your cart.
Web Payments
This element is integrated into the checkout page and allows the acceptance of payments via Apple Pay (on Safari) or through another browser (such as Chrome with Google Pay).
PayPal
The PayPal element is integrated into the checkout page and enables the acceptance of PayPal payments.
6. Media Elements
Media elements enable you to insert files of image or video types into your Webflow project.
Image
The Image element allows you to insert graphic files into your pages.
Video
The Video element allows you to embed YouTube or Vimeo videos on your site.
YouTube
The YouTube element allows you to insert a YouTube video on your pages with additional options (Start At, Playback, etc.).
Lottie Animation
The Lottie Animation element allows you to insert animations (like After Effects) on your pages and control their playback.
7. Forms Elements
Webflow's Forms elements refer to elements used to build a form.
Form Block
The Form Block element refers to a set of elements that make up a basic form.
Field Label
A Field Label is a form element that provides guidance to users on the content to be entered in a field.
Input Field
The Input Field is a form element that allows you to collect data from users in a single line.
File Upload
The File Upload element allows users to attach a file to their form submission.
Text Area
The Text Area is a form element that allows visitors to enter data over multiple lines (as opposed to the Input Field).
Checkbox
Checkbox is a form element that allows users to select one or more options.
Radio Button
The Radio Button element allows the selection of one choice among several others in your form.
Select Field
Select Field is a form element that allows you to make a selection from a drop-down list.
Recaptcha
The Recaptcha element allows you to embed Google's service of the same name in your form to prevent spam.
Form Button
Form Button is a form element that allows website visitors to submit the data they have filled out.
8. Components Elements
Components elements are predefined web flow elements such as sliders, tabs, and lightboxes.
Background Video
The Background Video element allows you to insert a video as the background of your page.
Dropdown
Dropdown is a Webflow element that allows you to display a menu that expands to show a list of items when clicked.
Embed Component
Embed Component is a Webflow element that you can use to integrate HTML to display external content, plugins, or applications.
Lightbox
Lightbox is a Webflow element that opens a full-screen view of images or videos when clicked.
Navbar
Navbar is a Webflow element that automatically creates a responsive navigation menu for desktops and mobiles.
Search
Search is a Webflow element that allows you to insert a search system on your website (a sort of mini search engine for your site).
Slider
Slider is a Webflow element that displays sliding slides either during interaction or automatically according to a pre-set timer.
Tabs
Tabs is a Webflow element that displays a content panel including a tab menu.
Google Map
Google Map is a Webflow element that integrates an interactive Google Map into your site.
Facebook Button
Facebook Button is a Webflow element that incorporates a Facebook Like button into your site.
Twitter Button
Twitter Button is a Webflow element that integrates a Twitter follow or share button into your site.
9. Symbols in Webflow
If you want to easily and simply duplicate elements from one page to another, you can do so in Webflow. Indeed, with symbols, you can duplicate a group of elements from one page to another effortlessly. The major advantage is that if a change is made to a symbol on one page, it will automatically reflect on other pages containing the same symbol.
For more explanation, here is a YouTube video: How to create and use a “symbol” in Webflow | Webflow Tutorial
Bonus: Breadcrumbs Element
Here’s a little bonus to wrap up this article on building Webflow pages with elements. We’re talking about the Breadcrumbs Element in the Designer. It is a navigation aid displayed at the bottom of the Webflow Designer to help you track the element you are interacting with in relation to its hierarchy. This feature is very useful as we often nest different elements, allowing us to easily select the element we want.
To learn more about Webflow, you can check out our article on how to design in Webflow using the Style tab or visit our YouTube channel.
