Made in Builder

Made in Builder

Webinar 👉 Visually Build at Scale with Builder.io & Netlify on 12/1

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Talk to an Expert

Pricing

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Builder Blueprints

Landing pages
Homepage
Hero Section
Navigation Links
Announcement Bar
Blog Article
Product Editorial
Product Details
Request a blueprintGo to developer docs

Integrate Blog Article Building

Builder's Visual Editor is especially powerful for creating rich blog article content. For an in-depth walkthrough of how to make a blog in Builder, see Create a drag-and-drop editable blog with Next.js.

Model definition

Create a section model named blog-article, with a few fields:

NameTypeNotes

Title

text

This is the article title when listing articles and for the page <title> tag for SEO; for example, "Announcing our new product line".

Handle

text

This is the URL handle; for example, new-product-line.

Image

file

This is the main image for the blog post—for example, when listing articles—as well as the og:image for previewing on social media sites like Facebook.

Date

timestamp

This is the date for displaying when this was posted and for filtering by date posted.

Blurb

text

Optional

This is the preview text when listing blog articles, and optionally can be the SEO meta description as well.

Author

reference

Optional

Use this to list info about authors. We recommend making a new data model—for example, with fields full name of type text and photo or type file—and using a reference type to reference the author for an article.

You can create as many additional fields as you like, for additional product info.

Example Code

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Sign up

Log in

DEVELOPERS

Builder for Developers

Developer Docs

Github

JSX Lite

Qwik

INTEGRATIONS

React

Angular

Next.js

Gatsby

PRODUCT

Product features

Pricing

RESOURCES

User Guides

Blog

Forum

Templates

COMPANY

About

Careers 🚀

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.
Get Started
Log in

DEVELOPERS

Builder for Developers

Developer Docs

Open Source Projects

Performance Insights

PRODUCT

Features

Pricing

RESOURCES

User Guides

Blog

Community Forum

Templates

Partners

Submit an Idea

INTEGRATIONS

React

Next.js

Gatsby

Angular

Vue

Nuxt

Hydrogen

Salesforce

Shopify

All Integrations

© 2022 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

By clicking “Subscribe”, I agree to Builder.io's Terms of Service and Privacy Policy.