Baton WordPress theme: Features 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 Features.

Baton Features Explained

Baton Features is a display type of our free widget, Note. Baton Features is meant to showcase multiple features of anything you’d like to showcase. The best use for Baton Features would be displaying the features of a product or service. When a user browses your site looking to purchase a product/service it’s best to keep the explanation of that product/service short and to the point. Baton Features can do just that. Another use for Baton Features would be if you wanted to display your content in a grid. Baton Features was designed to display content in a grid without the need for code.

Multiple Display Layouts

Baton Features has two different display layouts: Baton Features 1 and Baton Features 2.

Baton Features 1

Below is a screenshot of a Baton Features 1 widget that features the Baton Features 1 display layout. That widget has a title, a subtitle and four features.

Baton Features 2

Below is a screenshot of a Baton Features 2 widget that features the Baton Features 2 display layout. That widget has a title, a subtitle, and four features.

Easy to Create

The Baton Features widget was designed to be easy to create. To create a Baton Features widget follow these steps:

1. From your WordPress Dashboard navigate to Appearance > Customize.
2. In the left panel of the Customizer click on Widgets.
3. Next choose a widget area for your Baton Features widget.
4. Click on the Add a Widget button in the sidebar you have chosen.
5. In the Widget Panel select Note Widget.
6. In the options of the Note widget you created there is a dropdown menu labeled Display Layout. This is where you choose which type of Note Widget you would like ot create. Select either Baton Features 1 or Baton Features 2 from the Display Layout dropdown.
7. Once your widget is created be sure to save your changes by clicking on the Save & Publish button in the top-right corner of the left panel of the Customizer.

Creating Features

At this point you have your Baton Features widget, but there’s probably not much content yet. Baton Features widgets were made to be simple to edit. The way this was done was by having each “feature” be its own section of the widget. Because Baton Features is a layout of Note, editing a Baton Features widget works the same way as editing a Note widget: click the section you’d like to edit and start typing. To edit a feature, just click on the feature’s section and start typing. Below are images that label each section of Baton Features 1 and Baton Features 2.

Baton Features 1 Sections

Baton Features 2 Sections

Adding & Removing Features

Need more features in your widget? Are there too many features by default? Don’t worry, Baton Features has the ability to add or remove feature sections. Here are the steps as to how to add/remove rows and columns:

1. On the front-end of your WordPress website navigate to the page that holds the Baton Features 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. Now that you’re in the Customizer navigate to the widget area that your Baton Features widget is in.
4. In the options of your Baton Features widget there are two sections, one labeled “Number of Columns” and one labled “Number of Rows”. Move the slider under these two labels to choose how many columns and rows you would like. You can have up to 6 columns and 10 rows.
5. Once you have as many (or as little) features as you want be sure to click on the Save & Publish button in the top-right corner of the left panel in the Customizer.

Color Scheme Integration

All of our Baton and Note combinations have some sort of color scheme integration. This even includes the Baton Hero display layout that we mentioned earlier. Below are some screenshots as to how Baton Features can be changed by simply changing the color scheme of your site.

Default Color Scheme

Blue Color Scheme

Green Color Scheme

Red Color Scheme

Expanding Options with CSS

While the color scheme integration gives a few color options, what if you wanted a custom color for your widgets? If this sounds like a question you would like answered, then we have just the answer for you, CSS. With CSS you can customize any part of your Baton Features widget. Below is a screenshot of each type of Baton Features widget, both of them have been customized with CSS. Below that is the CSS that goes along with each widget.

/**
 * The class attached to the Baton Features 1 widget is baton-features-1
 *
 * The class attached to the Baton Features 2 widget is baton-features-2
 */

/* Baton Features 1 */

/* Changes the font family of the title in the first column of the Baton Features 1 widget.*/
.baton-features-1 .note-col-1 h6 {
    font-family: "Times New Roman", serif;
}

/* Changes the underline of the title of the second column of the Baton Features 1 widget. */
.baton-features-1 .note-col-2 h6:after {
    border-bottom-color: #f00 !important;
}

/* Changes the background of the button of the third column of the Baton Features 1 widget. */
.baton-features-1 .note-col-3 a.button {
    background: #0f0;
}

/* Baton Features 2 */

/* Changes the font family of the title in the first column of the Baton Features 2 widget.*/
.baton-features-2 .note-col-1 h5 {
    font-family: "Times New Roman", serif;
}

/* Changes the underline of the title of the second column of the Baton Features 2 widget. */
.baton-features-2 .note-col-2 h5 span:after {
    border-bottom-color: #f00 !important;
}

/* Changes the background of the section of the third column of the Baton Features 2 widget. */
.baton-features-2 .note-col-3 {
    background: #0f0 !important;
}

The Combination of Baton and Note

Baton Features is a unique combination of one of our themes and one of our plugins. 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.