![Umbria Documentation [DO NOT DELETE]](https://www.umbriadocs-imageserve.com/65f78027c124c1543492a499-9f09e940-0c28-48c3-b149-a6abc29230c3-DOCS IMAGE LIGHT.png)
![Umbria Documentation [DO NOT DELETE]](https://www.umbriadocs-imageserve.com/65f78027c124c1543492a499-2e72ef6f-071e-4557-b985-54461fa346b7-DOCS IMAGE DARK.png)
Components
Components are the drag-and-drop building blocks used to build your page. The text block you're reading right now was put here as a component.
Here are more examples of components:
Hero Sections
Hero Sections are often used as the first component on your page. They title the content that's discussed on the page. We've used one at the top of this page.
Standouts
Standout components are used to highlight pieces of information you want your users to pay attention to.
Cards
Card components give you the opportunity to place up to three cards. This card row is a component that you can place on your page.
Hero Sections
Hero Sections are often used as the first component on your page. They title the content that's discussed on the page. We've used one at the top of this page.
Standouts
Standout components are used to highlight pieces of information you want your users to pay attention to.
Cards
Card components give you the opportunity to place up to three cards. This card row is a component that you can place on your page.
Hero Sections
Hero Sections are often used as the first component on your page. They title the content that's discussed on the page. We've used one at the top of this page.
Standouts
Standout components are used to highlight pieces of information you want your users to pay attention to.
Cards
Card components give you the opportunity to place up to three cards. This card row is a component that you can place on your page.
Adding Components
Finding the Component You Want
The component menu is found on the left sidebar of the Umbria editor under the "DESIGN" label. Click the row labeled "Components".
Clicking anywhere on the row labeled "Components" will open the component menu
Clicking anywhere on the row labeled "Components" will open the component menu
Components are sorted into categories - Hero, Header, Content, Code, Standout, Pattern, Media, and Container. Clicking the icon buttons on the left will allow you to browse through the different categories. Hovering over each icon will display the name of the component category.
Hover overing the icon will display the name of the category
Hover overing the icon will display the name of the category
Placing Components
Once you are in the category of the component you want, hover over each component to get a better look. Then, click and hold the component and drag and drop it onto the page where you want the component to be placed. As you drag the component into place you'll see a line indicating where it will appear once dropped.
Line appears when placing a component in the editor
Line appears when placing a component in the editor
Nesting Components
You can also nest components. This happens when you drop a component into a container component(containers are tab systems, accordions, expandable sections, etc.).
Line is indented and within a component when nesting components in containers
Line is indented and within a component when nesting components in containers
Video
Editing Components
You must select a component before you can edit it. Click a component to select it. Selected components are indicated with a gradient border and a "Drag" handle.
Clicking on a component shows a gradient border and drag handle
Clicking on a component shows a gradient border and drag handle
Text
Most text fields on components can be edited. Select the component then click the text you would like to delete or replace.
Example 1: All fields boxed in green are text editable on this component
Example 1: All fields boxed in green are text editable on this component
Example 2: All fields boxed in green are text editable on this component
Example 2: All fields boxed in green are text editable on this component
All components, except text boxes, have character limits. If a copy paste into a component doesn't work it is due to the pasted text being greater than the character limit for that component's text field
Styling, Layout, and Images
Most component customizations are done in the right sidebar; this includes coloring/style, image inserting, or showing/hiding features on the component.
To view the settings available for a component make sure the component is selected. Once selected, the right sidebar will populate with features of the component to edit.
A hero component
A hero component
The settings available for the previous hero component
The settings available for the previous hero component
Each editable feature of a component can be edited through an expandable tab on the right sidebar. There are different editable parts available for different components. To learn more about settings available on many of the components, visit the Customizing Components page.
Video
Cloning Components
A clone of a component can be created on the same page as the original component.
To clone a component, select it then select the "Clone" button in the right sidebar. The clone will appear below the original component.
Video
Deleting Components
Components need to be selected in order to be deleted.
After selecting the component you wish to delete, there are two ways you can delete the component:
Click the red "Delete Component" button at the bottom of the right sidebar
Or click the delete key on your keyboard
The "Delete Component" button located at the bottom of the right sidebar
The "Delete Component" button located at the bottom of the right sidebar
You will not be able to delete components that have other components nested in them. Instead first delete all child components then the parent component.
Components
Components are the drag-and-drop building blocks used to build your page. The text block you're reading right now was put here as a component.
Here are more examples of components:
Hero Sections
Hero Sections are often used as the first component on your page. They title the content that's discussed on the page. We've used one at the top of this page.
Standouts
Standout components are used to highlight pieces of information you want your users to pay attention to.
Cards
Card components give you the opportunity to place up to three cards. This card row is a component that you can place on your page.
Hero Sections
Hero Sections are often used as the first component on your page. They title the content that's discussed on the page. We've used one at the top of this page.
Standouts
Standout components are used to highlight pieces of information you want your users to pay attention to.
Cards
Card components give you the opportunity to place up to three cards. This card row is a component that you can place on your page.
Hero Sections
Hero Sections are often used as the first component on your page. They title the content that's discussed on the page. We've used one at the top of this page.
Standouts
Standout components are used to highlight pieces of information you want your users to pay attention to.
Cards
Card components give you the opportunity to place up to three cards. This card row is a component that you can place on your page.
Adding Components
Finding the Component You Want
The component menu is found on the left sidebar of the Umbria editor under the "DESIGN" label. Click the row labeled "Components".
Clicking anywhere on the row labeled "Components" will open the component menu
Clicking anywhere on the row labeled "Components" will open the component menu
Components are sorted into categories - Hero, Header, Content, Code, Standout, Pattern, Media, and Container. Clicking the icon buttons on the left will allow you to browse through the different categories. Hovering over each icon will display the name of the component category.
Hover overing the icon will display the name of the category
Hover overing the icon will display the name of the category
Placing Components
Once you are in the category of the component you want, hover over each component to get a better look. Then, click and hold the component and drag and drop it onto the page where you want the component to be placed. As you drag the component into place you'll see a line indicating where it will appear once dropped.
Line appears when placing a component in the editor
Line appears when placing a component in the editor
Nesting Components
You can also nest components. This happens when you drop a component into a container component(containers are tab systems, accordions, expandable sections, etc.).
Line is indented and within a component when nesting components in containers
Line is indented and within a component when nesting components in containers
Video
Editing Components
You must select a component before you can edit it. Click a component to select it. Selected components are indicated with a gradient border and a "Drag" handle.
Clicking on a component shows a gradient border and drag handle
Clicking on a component shows a gradient border and drag handle
Text
Most text fields on components can be edited. Select the component then click the text you would like to delete or replace.
Example 1: All fields boxed in green are text editable on this component
Example 1: All fields boxed in green are text editable on this component
Example 2: All fields boxed in green are text editable on this component
Example 2: All fields boxed in green are text editable on this component
All components, except text boxes, have character limits. If a copy paste into a component doesn't work it is due to the pasted text being greater than the character limit for that component's text field
Styling, Layout, and Images
Most component customizations are done in the right sidebar; this includes coloring/style, image inserting, or showing/hiding features on the component.
To view the settings available for a component make sure the component is selected. Once selected, the right sidebar will populate with features of the component to edit.
A hero component
A hero component
The settings available for the previous hero component
The settings available for the previous hero component
Each editable feature of a component can be edited through an expandable tab on the right sidebar. There are different editable parts available for different components. To learn more about settings available on many of the components, visit the Customizing Components page.
Video
Cloning Components
A clone of a component can be created on the same page as the original component.
To clone a component, select it then select the "Clone" button in the right sidebar. The clone will appear below the original component.
Video
Deleting Components
Components need to be selected in order to be deleted.
After selecting the component you wish to delete, there are two ways you can delete the component:
Click the red "Delete Component" button at the bottom of the right sidebar
Or click the delete key on your keyboard
The "Delete Component" button located at the bottom of the right sidebar
The "Delete Component" button located at the bottom of the right sidebar
You will not be able to delete components that have other components nested in them. Instead first delete all child components then the parent component.
Components
Components are the drag-and-drop building blocks used to build your page. The text block you're reading right now was put here as a component.
Here are more examples of components:
Hero Sections
Hero Sections are often used as the first component on your page. They title the content that's discussed on the page. We've used one at the top of this page.
Standouts
Standout components are used to highlight pieces of information you want your users to pay attention to.
Cards
Card components give you the opportunity to place up to three cards. This card row is a component that you can place on your page.
Hero Sections
Hero Sections are often used as the first component on your page. They title the content that's discussed on the page. We've used one at the top of this page.
Standouts
Standout components are used to highlight pieces of information you want your users to pay attention to.
Cards
Card components give you the opportunity to place up to three cards. This card row is a component that you can place on your page.
Hero Sections
Hero Sections are often used as the first component on your page. They title the content that's discussed on the page. We've used one at the top of this page.
Standouts
Standout components are used to highlight pieces of information you want your users to pay attention to.
Cards
Card components give you the opportunity to place up to three cards. This card row is a component that you can place on your page.
Adding Components
Finding the Component You Want
The component menu is found on the left sidebar of the Umbria editor under the "DESIGN" label. Click the row labeled "Components".
Clicking anywhere on the row labeled "Components" will open the component menu
Clicking anywhere on the row labeled "Components" will open the component menu
Components are sorted into categories - Hero, Header, Content, Code, Standout, Pattern, Media, and Container. Clicking the icon buttons on the left will allow you to browse through the different categories. Hovering over each icon will display the name of the component category.
Hover overing the icon will display the name of the category
Hover overing the icon will display the name of the category
Placing Components
Once you are in the category of the component you want, hover over each component to get a better look. Then, click and hold the component and drag and drop it onto the page where you want the component to be placed. As you drag the component into place you'll see a line indicating where it will appear once dropped.
Line appears when placing a component in the editor
Line appears when placing a component in the editor
Nesting Components
You can also nest components. This happens when you drop a component into a container component(containers are tab systems, accordions, expandable sections, etc.).
Line is indented and within a component when nesting components in containers
Line is indented and within a component when nesting components in containers
Video
Editing Components
You must select a component before you can edit it. Click a component to select it. Selected components are indicated with a gradient border and a "Drag" handle.
Clicking on a component shows a gradient border and drag handle
Clicking on a component shows a gradient border and drag handle
Text
Most text fields on components can be edited. Select the component then click the text you would like to delete or replace.
Example 1: All fields boxed in green are text editable on this component
Example 1: All fields boxed in green are text editable on this component
Example 2: All fields boxed in green are text editable on this component
Example 2: All fields boxed in green are text editable on this component
All components, except text boxes, have character limits. If a copy paste into a component doesn't work it is due to the pasted text being greater than the character limit for that component's text field
Styling, Layout, and Images
Most component customizations are done in the right sidebar; this includes coloring/style, image inserting, or showing/hiding features on the component.
To view the settings available for a component make sure the component is selected. Once selected, the right sidebar will populate with features of the component to edit.
A hero component
A hero component
The settings available for the previous hero component
The settings available for the previous hero component
Each editable feature of a component can be edited through an expandable tab on the right sidebar. There are different editable parts available for different components. To learn more about settings available on many of the components, visit the Customizing Components page.
Video
Cloning Components
A clone of a component can be created on the same page as the original component.
To clone a component, select it then select the "Clone" button in the right sidebar. The clone will appear below the original component.
Video
Deleting Components
Components need to be selected in order to be deleted.
After selecting the component you wish to delete, there are two ways you can delete the component:
Click the red "Delete Component" button at the bottom of the right sidebar
Or click the delete key on your keyboard
The "Delete Component" button located at the bottom of the right sidebar
The "Delete Component" button located at the bottom of the right sidebar
You will not be able to delete components that have other components nested in them. Instead first delete all child components then the parent component.