Calling Out Information with a Billboard
Use the billboard block to add text and other content to a large banner.
Meet the billboard block
Billboards are full-width “statement pieces” for your page, used to highlight can’t-miss information and quotes:
- Standalone quotes
- Core values
- Calls-to-action
- Application deadlines
- Testimonials
- And more!
How to use the billboard block
New to building pages in blocks? Get to know the block editor »
1. Insert the billboard block on the page or post
2. Add and edit content inside the billboard block
- First, add a title to your block in the area that says “Write heading…”. Change the heading level using Heading Settings in the top toolbar or the block settings in the right panel.
- Click on the placeholder text inside the billboard; a gray outline should appear around the text block. Add your text.
- Edit or remove the button. A button is placed in the card by default. If you do not remove the button, it will still appear on the page. See our tutorial for more on editing buttons.
- Insert additional content blocks, such as columns, quotes, lists and more, by selecting the Add Block icon (it looks like an encircled plus sign).
3. Select text alignment
- By default, text within the billboard block is centered. In general, we recommend changing text to be left-aligned; however, centered alignment can be appropriate to highlight very important content.
- To change text alignment for the entire block, select the block and click the Text Alignment icon in the top toolbar.
- To change alignment for a specific element within the billboard (an inner block), select the inner block and click the Text Alignment icon in the top toolbar. This is helpful if you want to left-align certain elements (like a quote), but right-align others (like a citation).
Get noticed
Increase the size of your text (as we have here) by changing the billboard block style to Larger Text, found under the Styles section of the settings panel on the right.
4. Select a background color
- Select a Background Color from the dropdown menu, located under Display Settings in the block settings panel on the right. Color options include light gray (default), red, dark gray, turquoise, blue or yellow.
Selecting blocks within blocks
Billboards can be tricky to work with since the blocks are nested — the parent billboard block contains inner blocks for paragraphs, buttons, etc. The nested blocks tutorial demonstrates how to select different levels of parent and inner blocks so they’re easier to work with.
Billboard examples
Below we feature examples of using a billboard to highlight important information, like your school or department’s core values.
Fostering a welcoming culture
We are committed to ensuring that WashU is a community where everyone is valued and respected. By working collaboratively, we will create a better, stronger university that is a leader in educating students to live and work in an increasingly diverse world.
“Enhancing our diversity, while making Washington University a more inclusive place, is not an option. It is an imperative. And, we know that we have work to do.”
–Mark S. Wrighton
Educating future leaders in a global environment is one of the world’s greatest opportunities.
John F. McDonnell
Combining blocks within billboards
To include a link in a billboard, use the button element, as shown in the red and gray billboards below.
To make a button stand out, give it a row of its own at the bottom of the billboard. If the billboard text is centered, center the button. If the text is left-aligned, the button should be, too. Consistent alignment makes the content easier to read.
Creating your new site is easy!
In just a few simple steps, you can begin creating and managing your own website.
Connect. Learn. Contribute.
Thought leaders from industry and universities across the country visit Washington University to share ideas.
To create columns or display a photo in a billboard, simply insert or drag additional blocks into the mix.
The turquoise example below includes paragraph blocks inside columns. Columns are versatile, used to create flexible page layouts or visual interest within “container blocks” like billboards.
Application deadlines
- May 3: Undergraduates
- May 5: Transfer students
- May 10: Graduate students (full-time)
- May 12: Graduate students (part-time)
- May 13: University College
In the example below, we inserted an image block inside a column block, which is an inner block of the billboard. We then inserted a quote block on the right side of the column block.
“Call it St. Louis in context, as each part contextualizes the others and allows you to see connections, not just isolated, anecdotal incidents and destinations.”
Professor Bob Hansman,
on his community tours of St. Louis
You can insert a column block with varying column sizes (e.g. a one-third / two-thirds layout, two columns of equal size or a three-column layout). Learn more about using columns.