Adding and editing page content is easy, quick, and intuitive. Before we get to that, though, let’s take a step back and break down the basic, foundational areas on most pages of your site.
- Header - The Header is a special section at the top of a page and contains your site logo, navigation, and other call-to-action buttons. This section doesn’t support other components, so see our guide on editing your site header for more information.
- Sections, Panels, and more - The middle area on all pages is where you’ll have Sections, Panels, and other full-width components. These types of components are containers for other components, and with these you’re going to build the bulk of your page content.
- Footer - The footer section is a special section on the bottom of all pages using templates that include it. By default it also includes the Footer component. Any content added to this section is global, meaning it will show on all pages that include the footer section. See our guide on editing your site footer for more information.
Adding Content
Now that you have a better grasp on where you add content, let’s break it down further and walk through an example of adding content. From your account dashboard, go to the Site tab and click the Edit button. This will open the website editor.
At the top of the website editor is an Add Content button. Click on this button, and the components panel will open. This panel contains all of the various different components you can drag to pages of your website.
To add a component, simply click and drag it to the page. Some components, like Sections, Panels, and Grids, are designed to be containers of other components. While you can drag components into them, these often have their own Add Content button in the component options panel. If you click that button, you can then click on a component in a popup menu and it will add it without needing to drag.
Tip: As you build pages of your site, the top of the components panel will show recently used components. This will help speed up building pages of your site by making it faster to find elements you commonly use.
Editing Content
To edit a component, click on it. In the case of text, with many components like Rich Text or Text with Image you can simply start typing. A text editing toolbar will show with many different formatting options to choose from.
In other cases, you’ll customize the content of the component via the component options panel.
Component Options
The component options panel will open on the side of the website editor for nearly all components when you click on the component. There are three different tabs on the options panel. To access each, simply click the appropriate text.
- Options - This contains all of the various options to control the look, content, layout, and more of a component.
- Hover - Some components have options to change how the component looks when a visitor hovers over it with a mouse.
- Structure - As you build your site, you may end up with more complex nesting of components. This tab contains a link to the parent component or container; clicking on this will open the options for the parent component.
In addition to the options panel, a toolbar will open near the component with button icons you can use to manage the component.
The options available on the toolbar are the following, in order of left to right:
- Add content after component - Clicking on this option will show the popup list of components, and can be used to add a component directly after the current component.
- Copy component - You can use this option to copy the component. A popup will show and you can choose to copy to the same page or to a different page.
- Move component up - With this option, you can move the component up to before the immediately preceding component.
- Move component down - With this option, you can move the component down after the following component.
- Move to top - With this option, you can move the component to the top of the page.
-
Delete component - To delete the component, click this option and confirm that you want to delete it. Note: If you do this and change your mind, click the Undo option at the top of the editor.