Call Out Block
Intermediate Training Module 2: Common Content Blocks
The Call Out block is used to highlight important information and draw a visitor’s attention to a specific message. It creates a visually distinct section on the page, making it ideal for announcements, key information, deadlines, reminders, and calls to action.
Call Out blocks help important content stand out from the surrounding page content and encourage visitors to take action.
Common uses include:
- Important announcements
- Registration deadlines
- Program highlights
- Service updates
- Key contact information
- Calls to action
When to Use a Call Out Block
Use a Call Out block when information deserves additional attention.
Examples include:
Important Notice
Applications close on September 30.
Call to Action
Interested in learning more about our programs? Explore your options today.
Featured Information
Registration is now open for upcoming workshops and information sessions.
Call Out blocks work best when they focus on a single message or action.
Adding a Call Out Block
To add a Call Out block:
- Click the + button and search for Call Out.
- Select the block.
- Enter a title or heading.
- Add supporting content.
Your content may include:
- Paragraph text
- Buttons
- Links
- Additional supporting information
The block is designed to remain concise and focused.
Adding Content
A typical Call Out block contains:
Heading
A short, attention-grabbing title.
Examples:
- Important Update
- Upcoming Deadline
- Registration Now Open
- Need Help?
Supporting Text
One or two short sentences that explain the message.
Example:
Applications for the Winter term close on September 30. Submit your application before the deadline.
Button (Optional)
Include a button when you want visitors to take action.
Examples:
- Apply Now
- Register Today
- Learn More
- Contact Us
Layout Options
The block settings provide options for controlling the layout and appearance of the Call Out.
Content Alignment
Use the Justify Content option to control the positioning of the content within the block.
Common options include:
- Left aligned
- Center aligned
- Right aligned
Block Width
Use the Max Width setting to control how wide the Call Out appears on the page.
Different widths may work better depending on where the block is placed and how much content it contains.
Best Practices
Keep Messages Focused
Each Call Out should highlight a single idea, message, or action.
Use Clear Headlines
Visitors should immediately understand why the content is important.
Good Examples:
- Registration Now Open
- Important Deadline
- Featured Resource
Avoid:
- Information
- Update
- Details
Include a Call to Action
Whenever appropriate, provide a button that helps visitors take the next step.
Keep Content Concise
Call Out blocks are designed to draw attention, not contain large amounts of content.
Use Sparingly
Too many highlighted sections can compete for attention and reduce their effectiveness.
-
Welcome to this video on how to use the Callout Block. The Callout Block is a really versatile tool that lets you highlight important information—things like key messages, announcements, or special offers. It helps you make content stand out, ensuring that visitors don’t miss important information.
To add a Callout Block, follow these steps:
- Add the block using the Block Inserter.
- Once you’ve added the block, enter your title here.
- Then, enter the details about whatever you’re highlighting.
You also have the option to add a button (or two), which is great as a call to action. Let’s center that button.
Next, you’ll notice over here on the right, there are some additional options for the Callout Block. You can choose to display it aligned to the center, left, or right. You can also adjust the width to be small, medium, or large.
Let’s have a look at how that looks on the front end of our website.
And that’s it! You’ve successfully added a Callout Block to your website.
Try it Out
Practice working with the Call Out block.
- Add a Call Out block to a page.
- Add a heading.
- Add one or two sentences of supporting text.
- Add a button linking to another page.
- Experiment with different alignment and width options.
- Preview the page and review how the block stands out from surrounding content.