Baton WordPress theme: Hero Widgets

With the release of our new feature-packed theme, Baton Pro, there are a few select features we’d like to talk about. Today we proudly introduce to you, Baton Hero.

What is Baton Hero?

Baton Hero is a display type of our free widget, Note. The main purpose of the Baton Hero layout is to showcase content with an image behind it. This is great for a piece of content that you would love to feature on your website! Baton Hero was designed to be used on the Front Page of your website. Why you ask? The Front Page is the first place your viewers will end up on your site. Why not give them some spectacular content to start their browsing with?

Here is an example of what a Baton Hero widget looks like:

There are four different types of Baton Hero layouts: Baton Hero 1, Baton Hero 2, and Baton Hero 3 (Content Left), and Baton Hero 3 (Content Right).

Baton Hero 1

At first glance Baton Hero 1 features left-aligned large text and a button that can be used as a link. Below is a Baton Hero 1 widget with text, a background image, and a button.

Baton Hero 2

At first glance Baton Hero 2 features centered text and a button that can be used as a link. Below is a Baton Hero 2 widget with text a background image, and a button.

Baton Hero 3 (Content Left)

At first glance Baton Hero 3 (Content Left) features text on the left side of the widget with a background color to that half. Below is a Baton Hero 3 (Content Left) widget with text and a background image.

Baton Hero 3 (Content Right)

At first glance Baton Hero 3 (Content Right) features text on the right side of the widget with a background color to that half. Below is a Baton Hero 3 (Content Right) with text and a background image.

What are the Features of Baton Hero?

Baton Hero has multiple features that make it a special display layout for Note:

1. The ability to have a background image for your content.
2. The ability to display your links as a button.
3. The ability to have your Note widget be the full width of your page. (This feature is specific to the Front Page and Note Sidebars)

How Do I Create a Baton Hero Widget?

1. From your WordPress Dashboard navigate to Appearance > Customize.
2. In the left panel of the Customizer click on Widgets.
3. Select the widget area you would like to add a Baton Hero widget to. (We recommend the Front Page sidebar)
4. Click on the Add a Widget button once you’ve chosen your desired sidebar.
5. In the Widget Panel select Note Widget.
6. In the options of your newly created Note Widget there is a dropdown menu labeled Display Layout. This is where you choose which type of Note Widget you’d like to create. Select the type of Baton Hero widget you would like to create under the Display Layout dropdown.
7. When your widget is created click on the Save & Publish button in the top-right corner of the left panel of the Customizer.

How Do I Set a Background Image to My Baton Hero Widget?

1. On the front-end of your WordPress website navigate to the page that holds the Note widget you would like to edit. (If you’re already viewing your widget in the Customizer skip to step 3)
2. In the admin bar at the top of the page click on Customize.
3. In the preview panel of the Customizer (the section that displays your page) hover over the Baton Hero widget you would like to add a background image to. At the top of the widget a pencil icon and an image icon should appear. Click on the image icon after hovering over your Note widget.
4. Now you should be looking at your Media Library. Select an image from your Media Library or upload an image using the Upload FIles tab, then
   click the Save button in the bottom-right corner of the Media Library.
5. Your Baton Hero widget should now have a background image to it. To confirm your changes click on the Save & Publish button in the top-right corner of the left panel of the Customizer.

How Can I Format My Link as a Button?

1. On the front-end of your WordPress website navigate to the page that holds the Note widget you would like to edit. (If you’re already viewing your widget in the Customizer skip to step 3)
2. In the admin bar at the top of the page click on Customize.
3. In the preview panel of the Customizer (the section that displays your page) click and drag across the link you would like to turn into a button.
4. Once the text is highlighted the Note toolbar should appear above the highlighted text. Click on the second dropdown menu from the left (labeled Formats). The last two options in the list should be Button or Button Alternate. Those are the two types of buttons you can format your link as. Click on Button or Button Alternate under Formats.
5. To save your changes click on the Save & Publish button in the top-right corner of the left panel of the Customizer.

The Combination of Baton and Note

Baton Hero is a unique combination of one of our plugins and one of our themes. All of the features we’ve talked about in this post are specific to Baton and Note as a couple. If you’re interested in Baton or Note (or even both) be sure to check our Baton theme page and our Note plugin page.