Learn how to build an announcement bar that spans the full width and displays a short message.
Announcement bars help show business related updates, promotions, or other quick messages without interrupting the layout.
- Create an announcement bar using a Section and Text block.
- Customize the blocks in the Style tab.
Use a Section block as the container for the announcement bar.
To insert a Section block:
- Click Insert tab.
- Drag a Section block onto the canvas.
Tip: To check the block's position in the layout, use the Layers tab.
The video below demonstrates adding a Section block onto the work area as the container for the announcement bar:
Add a Text block to the Section to display the announcement message.
To add a Text block:
- Drag a Text block to the Section.
- Double-click the default text to add the announcement message. Alternatively, select the block and use the Options tab to add the message.
The next video shows dragging and dropping a Text block into the Section block and adding an announcement message:
Choose a background color for the Section to make the announcement bar stand out.
To change the background color:
- Select the Section block.
- On the Style tab, go to Background > Fill color and pick a color.
The video below shows choosing a background color for the Section block to make the announcement bar stand out:
Apply a contrasting text color to the announcement message for readability.
To change the text color:
- Select the Text block.
- In the Style tab, go to Typography > Text color and choose a color.
The following video shows how to select the Text block and apply a contrasting text color to the announcement message for better readability.
Preview changes before publishing to understand how the content displays on your page.
To preview from the Visual Editor, do any of the following:
- Click the Preview in the toolbar.
- Select Quick preview to open a fast in-editor preview.
- Select View current draft to open the entry in a new tab.
- Select View live page if the content has already been published.
When everything is correct, click Publish to make the announcement bar live.
The video below shows previewing the changes using the Preview on the toolbar before publishing the announcement bar:
From the Style tab, adjust properties to customize the appearance of the announcement bar. Change the font size, update the font weight, add borders, set margins, or adjust padding as needed. Preview and republish changes as often as needed.
For details on available style settings, see Style tab.
- To customize a prebuilt example, go to Integrate Announcement Bars.
- For general information about models, see Intro to Models.
- To learn more about Builder, see Learn Builder.