Components are the building blocks of every page — think Legos. You can add, duplicate, edit, or remove any component in a page.
There are two primary types of components — container components and element components.
Think of your page as a house. Containers are the foundation, floors and rooms. Elements are like your furniture and decoration — the contents of your house.
Containers are structural components — use them to house other components within a page.
There are 3 Container Components:
- Section - can contain rows, columns and elements; cannot contain other sections.
- Row - can contain columns and elements; cannot contain a section or other rows.
- Column - can only contain elements; cannot contain a section, row, or other columns.
Container components are organized in this hierarchy:
Section(s) > Row(s) > Column(s)
Elements are the decor and content to your page — visible to all.
There are four categories of elements:
- Basic components - text, headline, button, navigation, list, divider, social links, and embed
- Lead Capture components - form and subscribe
- Media components - image, image & caption, and video
- Dynamic components - scratch and countdown
📬 If there is a element component you would like us to add send us an email at email@example.com
You can do the following with components:
- Add a component - add a component by dragging-and-dropping it anywhere on the Canvas. You can drag-and-drop components to the canvas from the Right Pane.
- Duplicate a component - duplicate a selected component using keyboard shortcuts or clicking the duplicate button in the Top Right Bar.
💡 Use the keyboard shortcuts ⌘D for Mac or Ctrl-D for PC to duplicate any component.
- Remove a component - remove a selected component by pressing backspace/delete or clicking the trash icon in the Top Right Bar.
- Copy + paste a component - use keyboard shortcuts ⌘C + ⌘V on Mac and Ctrl-C + Ctrl-V on PC.
💡You can copy + paste the styles of a component. Use ⌘Shift-C + ⌘Shift-V on Mac and Ctrl-Shift-C + Ctrl-Shift-V on PC.
Many components have functions and settings unique to them, but all components contain a similar set of styles you can edit in the Right Page of the Page Editor when selected:
- Visibility - make the component visible only on mobile view, on desktop view, or both. Click the icon to enable or disable its visibility on the device. Switch your Viewing Mode to see what your component will look like on a mobile device.
- Width - width is either relative (a percentage), absolute (to the pixel), or auto. By default, it's set to percentage. Click the "%" in the input field if you want to change it to "PX" or "auto".
- Background - add as many backgrounds to your component as you please. Backgrounds stack in the order in which you add them. You can change their order by dragging-and-dropping them.
- Inner Spacing - increase or decrease the amount of inner spacing by typing the number or dragging the input field left or right.
- Border - borders are set as a pixel value. You can choose which sides have borders. You can pick one of the three types of border styles: solid, dashed and dotted.
- Corners - you can round the corners of components by setting px or %.
- Drop Shadow - add as many drop shadows as you please - they stack in the order in which you add them. You can change their order by dragging-and-dropping them.
- Inner Shadow - add as many inner shadows to your component as you please - they stack in the order in which you add them. You can change their order by dragging-and-dropping them.
- Opacity - drag the slider left or right to change opacity.