{"id":4639,"date":"2022-08-22T08:30:00","date_gmt":"2022-08-22T14:30:00","guid":{"rendered":"https:\/\/wpengine.com\/builders\/?p=4639"},"modified":"2023-04-14T09:57:40","modified_gmt":"2023-04-14T15:57:40","slug":"call-to-action-bar","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/call-to-action-bar\/","title":{"rendered":"Create a Top Call-to-Action Bar with Blocks"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

Compared to older methods<\/a><\/strong>, 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.<\/p>\n\n\n\n

Top Call-to-Action Bar Example<\/h2>\n\n\n\n

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

\"Learn<\/figure>\n\n\n\n

How to Create a Top Call-to-Action Bar<\/h2>\n\n\n\n

Let’s build a call-to-action bar using Full Site Editing! Here are the steps:<\/p>\n\n\n\n

  1. From the WordPress dashboard, navigate to Appearance<\/strong> > Editor<\/strong>. This is the Site Editor. From here, we will have the ability to edit the Header, which will display across the entire website.<\/li><\/ol>\n\n\n\n
    \n
    \n
    <\/path><\/svg><\/div><\/div>\n\n\n\n

    Quick Tip<\/h3>\n<\/div>\n\n\n\n

    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:<\/p>\n\n\n\n

    \"\"<\/figure>\n<\/div>\n\n\n\n
    1. Within the List View, find and expand the Header. Click “Insert Before<\/strong>” on the top block.<\/li><\/ol>\n\n\n\n
      \"Learn<\/figure>\n\n\n\n
      1. Add a Paragraph block and then type in your call to action. <\/li><\/ol>\n\n\n\n
        \"Learn<\/figure>\n\n\n\n
        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. <\/li><\/ol>\n\n\n\n
          \"Learn<\/figure>\n\n\n\n

          Here are the settings for the Group block used in the example:<\/p>\n\n\n\n