Made in Builder

Made in Builder

×

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

Integrating Sections

You can use Builder Sections to create reusable content across multiple pages. You can manage the code within your codebase and teammates in the UI can iterate in the Visual Editor. Examples include:

This tutorial shows you how to create and add an announcement bar section to a page.

For more conceptual information Section Models, refer to the Section Models documentation.

Prerequisites

To follow along with this tutorial, you should have the following:

  • a Builder account
  • an app in the framework of your choice with the appropriate Builder SDK installed

Tip: If you need to create an app, follow the steps for your framework in the Create an app section of Integrating Page Building.

Add an announcement bar section to your app

Creating a Section model

In the Builder UI, create a Section model so you can create your announcement bar.

You can start by clicking Models in the left side nav on the Dashboard.

Click +Create Model.

Select Section from the list.

Enter Announcement bar as the name for your new Section model and click Create.

Change the Preview URL on the Model Options page to the URL of the page that you added code to display your section.

When you create or edit an Announcement bar section, the Visual Editor will display your content embedded within your Preview URL page, providing important visual context and importing styles from your site. It's a live view of your section as it will look on one of your pages once you publish.

Tip: Published sections typically appear across multiple pages with different URLs depending on how they're targeted. When previewing in the editor, however, they only appear within the Preview URL's page. For more information, refer to Editing and Previewing Your Site.

Tip: Make sure to use the correct port for your development server.

For more information what Section Models are and how to use them, refer to the Section Models documentation.

Creating an Announcement bar content item

Now that your Section model is set up, you can create an Announcement bar content item to add an announcement bar to your site.

Click on Content in the left side nav in the Dashboard.

Select Announcement bar in the Models list. Click the +New button.

Click on Announcement bar.

Your new Announcement bar content item is ready for editing within the Visual Editor, which displays a page preview split into two areas:

  • The editing area is where you add blocks to build your content.
  • The non-editable preview renders the rest of your Preview URL page.

Create an announcement bar by following these steps:

  1. Type "Landing page" in the Content Entry Name field. In general, your section names should reflect the area of your site where they will appear.
  2. Use blocks to create your announcement bar. The example below consists of a Text block nested within a Box block.
  3. Click Edit Targeting to set targeting conditions.

After clicking Edit Targeting, click +Target.

Create a new Url path targeting condition where the Url path is /.

Click Publish when you're finished.

Refresh your site to see your new announcement bar rendered on your page.

Tip: If you're using Gatsby, you may need to restart your app in order to make the announcement bar visible.

Next steps


Need Expert help?

Submit a project to our partners, BuildQuick, and be matched with a Builder expert.

Submit a project

Was this article helpful?