Note: the example images and videos below are from a different base theme. Check back soon for updates!

Now that we've made some slight adjustments, let's dig in a bit more and get our hands dirty while exploring the page editor.

Exploring the Page Editor

the page editor is the primary means of editing content in Stackbit. It provides a real-time, in-context editing experience.

There are two directions from which you can locate then edit content on the page:

  • From the page editor panel
  • By highlighting content

Page Editor panel

the page editor panel is accessed through the Page icon in the left sidebar. This expands the panel, from which you can see that the page is arranged in sections.

Clicking on the first section (the hero section) drills down into the content for that section.

Highlighting content

You can also highlight content to jump directly to a section or block. Click on the area you wish to edit, then click the pencil icon to open the page editor panel at the appropriate location.

This is the preferred method for most editors, as it quickly helps you locate where the content can be edited.

Style Toolbar

Highlighting select pieces of content may present you with the style toolbar. This is a simpler means of adjusting specific style-focused content values.

The style toolbar is a fancy tool for quickly adjusting the style and layout of your components. Under the hood, all it's really doing is mapping decisions made by content editors to a set of Tailwind classes. Learn more about user-controlled styles.

Customize the Hero Section

With all this in mind, customize the hero section to your liking. Change the text, adjust the layout, add a new image. Go nuts!

Here's a quick example of how you might go about this process if working on the Stackbit website.

After this process, we have a totally different looking hero section, and this thing is really starting to feel like it's veering from the starter that we had at the beginning of this process. Here's another comparison.

Before editing the hero section:Site Before Branding

After editing the hero section:Site After Editing


Next Step: 4. Creating Pages