Here is a Webflow guide to help you discover all the elements you can insert in your project pages! A short tour of the add-on panel to help you have an overview of what you can do with Webflow.
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.
.jpg)
