Stackbit makes it trivial to create visually-rich content pages from scratch! Let's go through the process of adding a landing page.

Adding a new page

There are two methods for creating a new page: either click on the Plus icon in the left sidebar, or on the + Add new page button in the page navigator (which opens from the top of your screen when in Page Editor mode).

Add New Page Buttons

After clicking either of these, you will be prompted to choose a type of page to add. Some page type also come with presets, which are groups of initial values for the fields of the new page.

page presets dialog3

For our tutorial, choose the general-purpose Page type and select the last preset in the list.

Presets are simply files in your project which you control. Adding presets to your pages and other components can make a content editor's work much more streamlined.

You will then be prompted to name your page (call it "Team") and set a slug for the page. The slug determines the path to the file that will hold your page's data, and its URL:

page slug dialog2

Adding components

Now that we have a new Team page, let's add some components. We've already edited existing component, but we haven't added a new one yet.

Looking at the full page, you'll notice that it's made of multiple full-width elements vertically stacked: first a hero banner, then feature descriptions, a logos line, a list of featured posts, an email subscription form...

This type of element is commonly known as sections. The page we're using can accept any number of sections - let's add another one.

There are two ways to add a new section:

  1. Open the Page panel and click Add section. This will add a section to the bottom of the page.
  2. Hover over an the top or bottom of an existing section component and click Add Section, as can be seen in this picture:

Add Section Trigger

In a similar fashion to pages, components can also have presets. In the dialog that popus up you can choose from any of the section components (on the left side) and from any of the available presets for the selected component:

new section component dialog2

Feel free to fill out your page, and add some components and create the ultimate company team page.

Here's a quick video of what that process might look like (note: this video is based on a different theme than the one we're using):


Next Step: 5. Publishing Changes