docs.stackbit.com Open in urlscan Pro
18.192.76.182  Public Scan

Form analysis
0 forms found in the DOM

Text Content

This app works best with JavaScript enabled.
DocumentationShow Menu
 * Documentation
 * Blog
 * Sign In
 * Get Started

Navigate Docs
 * HomeSubmenu⌘K
   Getting StartedSubmenu
   * Next.js + MarkdownSubmenu
     * Stackbit Setup
     * Content Modeling
     * Inline Editing
     * Component Presets
   * Next.js + ContentfulSubmenu
     * Stackbit Setup
     * Basic Editing
     * Inline Editing
     * Component Presets
   Add New Project
   For DevelopersFeaturesSubmenu
   * Content Editor
   * Create from GitHub
   * Form Submissions
   * Global Styles
   * Local Development
   * Publishing
   GuidesReferenceSubmenu
   * @stackbit/cli
   * create-stackbit-app
   * stackbit.yaml
   * .stackbit/modelsSubmenu
     * Model Properties
     * Field Properties
     * Field & Component Styles
   * data-sb-*Submenu
     * data-sb-object-id
     * data-sb-field-path
     * @stackbit/annotations
   * .stackbit/presets
   * Automatic Content Reload
   ConceptsSubmenu
   * How Stackbit Works
   * Structured Content
   * Content Presets
   * Managed Hosting
   IntegrationsSubmenu
   * Connecting Accounts
   * Hosting ProvidersSubmenu
     * Netlify
     * Vercel
     * Cloudflare Pages
   * Web FrameworksSubmenu
     * Next.js
     * Angular
     * SvelteKit
     * Nuxt 3 (Early Preview)
     * Hydrogen
     * Bring Your Own
   * Contentful
   * Cloudinary
   For EditorsEditor GuidesSubmenu
   * Overview
   * Publishing Changes
   * Collaboration: Previewing & Sharing
   * Building Landing Pages
   * Save as Preset
   SupportTroubleshooting

Editor GuidesSave as Preset


SAVE AS PRESET

Updated: Jun 03, 2021

Presets enable you to create reusable pieces of content for your site. This
helps speed up the editing process by providing a content-rich starting point
for new sections and components on your site's pages.


SAVING NEW PRESETS

To save a component as a preset, select it by clicking on it in the visual
editor and then choosing the Save as preset icon.



Give the preset a name (1), add it to an existing category or create a new
category (2), and click Save. (More on categories below.)




ELIGIBLE OBJECTS

Any object on the page that is represented by a data model can be saved as a
preset.

For example, in our minimal starter, the card grid component is available as a
preset (1), along with the cards inside (2), which are sub-components of the
card grid. But the heading and subheading (3) can not be stored independently,
as they are simply content values applied directly to the card grid.




PRESET CATEGORIES

Categories provide a means for you to organize your presets however you would
prefer. You can create new categories when creating new presets.

These categories are then surfaced when creating a component from a preset.




CREATING NEW COMPONENTS FROM PRESETS

As shown above, when creating a component from a preset, you'll be able to
choose from your saved presets, as well as any other presets developers have
stored in the .stackbit/presets directory.

If you want to know more about the structure of the preset configuration files,
read the API reference.


HANDLING REFERENCES

When a component contains a reference field, note that the references are
copied.

For example, consider a post feed component that has a list of referenced blog
posts. When creating a new post feed from a preset, the references are copied,
not the posts. This means that if you edit a post in the new post feed, that
same post will be updated in the original post feed.


API-BASED REFERENCES

Some API content sources (e.g. Contentful) don't allow for embedded objects and
treat every embedded model as a reference. In this case, you can control how
Stackbit handles references globally in your project configuration.


EDITING PRESETS

Presets can not edited through the visual editor. Unless you want to write code,
the easiest thing to do is to:

 1. Create a component from the saved preset
 2. Adjust necessary values
 3. Delete the existing preset (see below)
 4. Save a new preset with the adjusted content

If you want to edit directly instead, see the API reference to learn about
preset files and their structure.


DELETING PRESETS

Not all presets are able to be deleted. If a preset can be deleted, there will
be a trash can icon next to the name in the thumbnail image on the new component
modal.




STORING PAGES AS PRESETS

Entire pages can be saved as a preset, too, but it requires writing code. Learn
more here.




TABLE OF CONTENTS

 * Saving New Presets
   * Eligible Objects
   * Preset Categories
 * Creating New Components from Presets
   * Handling References
   * API-Based References
 * Editing Presets
 * Deleting Presets
 * Storing Pages as Presets

Copyright © 2022 Stackbit. Made with Stackbit

TermsPrivacyLicense

GitHubTwitter