BUILDER

Resources

Home

Forum

Github

Login

Signup

This page was made in Builder!

Creating an editable site ribbon in Builder

You can use a component model to have a single Builder component across pages, e.g. a site-wide ribbon.

To do this, let’s create a new component model. Go over to builder.io/models, select “+ create model” and choose “component”

Then give your component a name, e.g. “ribbon”

Then, let’s give this an editing URL. This is what Builder will open in the Visual Editor to edit your ribbon, so this just needs to be any URL this Builder component will display on. In our case, since this component will be site-wide, we can just enter our homepage URL (e.g. https://our-site.com)

Note - when first integrating the code you may want to make the editing URL a local one, like http://localhost:8080. That way you can add the component to your local site and test out the full flow

Then, add the component code to the top of your site.

React

Shopify

Dynamic Symbol

HTML API

Angular

import { BuilderComponent } from '@builder.io/react'

export const Header = () => <>
  <BuilderComponent model="ribbon" />
  {/* The rest of your header */}
</>

Now, let's create a ribbon. Go over to builder.io/content and choose “+ new entry” and choose “ribbon”

Then, you should see your site in the preview with a big “+ add block” at the top - drag and drop content in and publish!

Note that when using component models, just like any other content, you can use targeting & scheduling and A/B tests to dictate who sees what content for your ribbon

If you run into any issues or have any questions - don’t hesitate to ask over in our forum!

Featured Tutorials

Creating a site-wide ribbon

Was this article helpful?