Create a Top Call-to-Action Bar with Blocks

Sam Munoz Avatar

·

Create a Top Call-to-Action Bar with Blocks

A call-to-action bar at the top of a website can help drive traffic to focused links. This bar will appear on every page of the website; wherever a visitor lands, they will always see the most important call to action.

Compared to older methods, Full Site Editing has made creating a top call-to-action bar simple. Instead of requiring additional plugins or extra code, a beautiful CTA bar can be built into the header of a website through the Site Editor.

Top Call-to-Action Bar Example

Here is an example of a top call-to-action bar created with the Frost WordPress theme, although this tutorial will work for any block theme:

Learn how to create a simple top call-to-action bar with WordPress blocks using full site editing through the Site Editor.

How to Create a Top Call-to-Action Bar

Let’s build a call-to-action bar using Full Site Editing! Here are the steps:

  1. From the WordPress dashboard, navigate to Appearance > Editor. This is the Site Editor. From here, we will have the ability to edit the Header, which will display across the entire website.

Quick Tip

Using the List View can help keep track of where you are placing a block, making it easier to combine blocks together into Groups, Columns, or Rows. Click this icon to open the List View:

  1. Within the List View, find and expand the Header. Click “Insert Before” on the top block.
Learn how to create a simple top call-to-action bar with WordPress blocks using full site editing through the Site Editor.
  1. Add a Paragraph block and then type in your call to action.
Learn how to create a simple top call-to-action bar with WordPress blocks using full site editing through the Site Editor.
  1. Next, we’ll want to make the Paragraph block into a Group so we can add a background, update the text settings, and adjust the padding using the settings panel on the right-hand side.
Learn how to create a simple top call-to-action bar with WordPress blocks using full site editing through the Site Editor.

Here are the settings for the Group block used in the example:

  • Color:
    • Text: #ffffff
    • Background: #990099
    • Link: #ffffff
  • Typography:
    • Size: 14px
    • Letter case: AB
    • Letter spacing: 1px
  • Padding: 10px (top & bottom)

Which achieves the following look:

Learn how to create a simple top call-to-action bar with WordPress blocks using full site editing through the Site Editor.
  1. Finally, ensure that your call to action links somewhere by adding a URL to the link settings for the Paragraph block.
Learn how to create a simple top call-to-action bar with WordPress blocks using full site editing through the Site Editor.

You have now created a functional, top call-to-action bar! 🎉 🎉


Adding an Icon to the Top Call to Action Bar

Consider adding an icon to the call-to-action bar for extra flair. We will be using the free Icon Block plugin by Nick Diego to accomplish this.

  1. Either before or after your Paragraph block, insert an Icon block.
Learn how to create a simple top call-to-action bar with WordPress blocks using full site editing through the Site Editor.
  1. Once you choose your icon, you’ll want to combine the Paragraph and Icon blocks into a row to achieve the look shown in the example. Select both blocks in the List View, then select “Row.”
Learn how to create a simple top call-to-action bar with WordPress blocks using full site editing through the Site Editor.
  1. Rearrange the blocks as necessary and adjust the Block spacing setting to bring the two blocks closer or further apart, depending on your preference.
Learn how to create a simple top call-to-action bar with WordPress blocks using full site editing through the Site Editor.

Here are the settings for the Row block used in the example:

  • Justification: center
  • Orientation: horizontal
  • Vertical alignment: align middle
  • Block spacing: 10px

There you have it! A simple top call-to-action bar will be displayed on every page. The possibilities are endless – I can’t wait to see what you create. Be sure to tag @hellosammunoz on Twitter if you use this tutorial in one of your projects.