Create new content models and fields all from Stackbit. Let's create a new content model and add it to our site.

Create a New Data Type

  1. Click Code in the top nav.
  2. In the left panel, click Code Editor.
  3. Open the file stackbit.yaml and paste the following code at the bottom of the file to add a new component type called text_section with id, title, and content fields, being sure to preserve indentation so it lines up with other field models:

    text_section:
     type: object
     label: Text Section
     extends:
       - section
     fields:
       - name: content
         type: markdown
         label: Content
         description: The text content of the section
    
  4. Scroll up to the definition of models > advanced > fields, and in the field named sections, paste the following into a new line under its items > models property, preserving indentation so that it lines up with feature_section and hero_section.

    - text_section
    
  5. Save your work (command + s) and close stackbit.yaml.

Render the Component

  1. Under src > components, create a new file called TextSection.js, populate it with our simple component code, and save your work:

    import React from 'react';
    import _ from 'lodash';
    
    import { markdownify } from '../utils';
    
    export default class TextSection extends React.Component {
     render() {
       const section = _.get(this.props, 'section');
       const sectionId = _.get(section, 'section_id');
       const title = _.get(section, 'title');
       const content = _.get(section, 'content');
    
       return (
         <section id={sectionId} className="section">
           <div className="container container--small">
             {title && <h1 className="section__title">{title}</h1>}
             {content && <div className="section__copy">{markdownify(content)}</div>}
           </div>
         </section>
       );
     }
    }
    
  2. Open src > components > index.js. Copy and paste all three lines of code that refer to HeroSection onto new lines. Edit the pasted code to say TextSection instead of HeroSection and save your work.

Add Content Using the New Component

  1. Click Content in the top nav.
  2. Hover over the whitespace within home page's hero section in the preview panel.
  3. Click Add in the bottom right of the highlight.
  4. Choose an item type of Text Section and click Create.
  5. A new section with lorem ipsum placeholder text will be added to the home page in your Stackbit preview panel.

Example CTA Section