Today, we will learn how to build a page in Webflow using elements. Webflow offers a simple drag and drop solution to create custom pages. It is possible to arrange different elements in your page.

Quick Tips: Quickly add an item using the keyboard shortcut Ctrl + E or Cmd + E.

1. The Layout elements

The elements of the "Layout" section allow you to structure the pages of your Webflow site.

Section

This element allows you to separate distinct blocks of content and divide your page into several meaningful sections. A section has a width that extends over the entire page (100%).

Container

The Container element is associated with the section element. It allows the content to be managed in an ordered and centred way.

Grid

The Grid element allows you to place content in it in a grid layout (with columns and rows). This is a useful element when it comes to having a responsive design.

Columns

Just as its name suggests, the Columns element allows you to arrange the content within it in the form of columns. You can customise this element by choosing the number of columns and their widths.

2. The Basic elements

The elements in the Basic section are in fact the most used (basic) elements for building a web page.

Div Block

The Div Block is a very versatile element. Indeed, all other types of blocks are Div Blocks with special properties. Div Blocks can be used as you wish, but they are mainly used to group different elements.

List

The List element allows you to create ordered (numbered) or unordered (bulleted) lists of items.

List item

List Item is an element that can only be added to a "List" element and allows content to be displayed in list form.

Link block

The Link Block element is a Div Block that specialises in turning the elements inside it into a link.

Button

The Button element is simply a button that links to pages, sections, forms etc. It is essential for its CTA (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 refers to a title. Headings are used to describe the subject of a section (like an essay). There are several types of headings (H1, H2, H3, ..., H6). Headings have an order of importance according to their types H1 > H2 > ... > H6. They are important in SEO because they give indications to the indexing robots. Thus, it is important not to skip any headings on a page, to have only one H1 and to optimise 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 is a bit like the Div Block for typography elements.

Text Link

The Text Link element allows you to insert textual content that links to other pages or sections.

Block quote

The Block Quote element allows you to add textual content in the form of a quote.

Rich Text Element

The rich text element allows you to create and format headings, paragraphs, quotes, images and videos in one place, instead of having to add and format them individually.

How to use rich text in webflow!

4. CMS elements

CMS elements are elements that are 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 in list form.

5. E-commerce elements

These elements are available when an e-commerce plan is chosen and are therefore used in the management of an online shop.

Cart

Cart is an element that allows you to add a cart to your e-commerce site.

Add to cart

Add to cart is a button-type element that allows you to add products to your cart.

Web payments

This element is inserted into the checkout page and allows you to accept payments via Apple Pay (from Safari) or via another browser (from Chrome for example with Google Pay).

Paypal

The Paypal element is inserted into the checkout page and allows Paypal payments to be accepted.

6. Media elements

The Media elements allow you to insert image or video files in your Webflow project.

Image

The image element allows you to insert graphic files on your pages.

Video

The video element allows you to embed YouTube or Vimeo videos on your site.

YouTube

The YouTube element is an element that 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 (of the After Effects type) on your pages and to control their playback.

7. The Forms elements

Webflow Forms elements refer to elements for building a form.

Form block

The Form Block element designates a set of elements that make up a basic form.

Field label

A field label is a form element that gives information to users about the content to be entered in a field.

Input field

Input field is a form element that retrieves data from users on a line.

File Upload

The File Upload element allows users to attach a file to their form submission.

Text Area

Text Area is a form element that allows visitors to enter data on multiple lines (unlike Input Field).

Checkbox

Checkbox is a form element that allows people to select one or more options.

Radio Button

The Radio Button element allows you to select one of several choices 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 insert the Google service of the same name into your form to avoid spam.

Form button

Form button A form element that allows website visitors to submit the data they have filled in.

8. The Components elements

Components are predefined web flow elements such as sliders, tabs and lightboxes.

Background Video

The Background Video element allows you to insert a video in 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 compenent is a webflow element that you can use to embed 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 computers 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 website).

Slider

Slider is a webflow element that displays slides that scroll either when interacting or automatically according to a pre-set timer.

Tabs

Tabs is a Webflow element that displays a content pane with 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 simply and easily want to duplicate elements from one page to another, it is possible to do so in Webflow. Indeed, thanks to the symbols you can duplicate a group of elements from one page to another easily. The big positive point is that if a modification is made on the symbol of a page, the modification will automatically be made on the 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 : Element breadcrumbs

Here is a little bonus to finish this article about building Webflow pages with elements. We are talking about the Element Breadcrumbs of the Designer. This is a navigation aid that appears at the bottom of the Webflow Designer to help you follow the element you are interacting with in relation to its hierarchy. Very useful as we often nest different elements and thanks to this feature, we can easily select the element we want.

To learn more about Webflow, you can read our article on how to design in Webflow using the Style tab or find our YouTube channel.