Blog Signature

The Blog Signature widget makes it easy to add a polished author signature to your blog posts. It comes pre-styled and ready to use, with flexible options to display a photo, bio, contact info, and social media links—all in a clean, professional layout.

For a more powerful setup, you can connect the widget to an Airtable that holds all your blog authors. This lets you store author profiles permanently on your site and instantly select the right signature for each post, with no copy-pasting or re-entry required.

Preview: https://demo.wocode.com/blog-signature

Tutorial Video

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it in a row or column where you want the Blog Signature widget to appear.

WIDGET OPTIONS

There are two methods for adding content to this widget: Manually or through Connect To Data. The recommended approach is Connect To Data, because this will allow you to store author profiles permanently on your site and select stored authors per post.


Manually Adding an Author:

In the Content tab, use the Author section to manually enter an author’s name and relevant details.


Place Each Author In Separate Box:

When enabled, this toggle places each author in their own separate box. When disabled, all authors are grouped together in a single box.


Load FontAwesome 6 (6.7.2):

This is required for the Social Icons to be working properly. If you don't use Social Icons, you can safely disable it.


Airtable Template Hyperlink:

Opens the Airtable template you can use to store authors.


Blog Signature Training Doc:

Takes you to the training guide for setting up and customizing the Blog Signature widget.

Connecting an Author via Connect To Data:

To link an author from an Airtable-linked internal collection:

  1. Click the gear icon at the top of the widget’s content panel.
  2. Select Connect To Data.
  3. Use the Connect Author To dropdown to choose your internal collection containing author details.

For full guidance on setting up an internal collection, refer to the Creating Internal Collection section of this training document.

DESIGN SETTINGS

The Design tab of the widget contains extensive options. Almost every element of the widget can be customized. The majority of these settings are labeled with their exact function and are self-explanatory, and will not be discussed individually here. However, there are a few unique settings we will mention.

Widget Styling:

• Shadow Blur (px): Adjusts the blur effect of the shadow behind the widget.

• Shadow Color: Defines the color of the widget’s background shadow.


Photo Styling:

• Photo Gap (px): Controls the spacing between the author’s photo and the text content.


CREATING AIRTABLE COLLECTION

To set up your Blog Signature content using a prebuilt Airtable collection, follow these steps:

  1. Open the widget's option panel and click the provided Airtable hyperlink.
  2. Once the Airtable template opens, click Duplicate Base to create a copy in your own Airtable account.
  3. In your project, create a new Airtable collection.
  4. Connect your new collection to the Airtable sheet you just duplicated.

  5. For detailed instructions on connecting your collection to Airtable, see our training guide here:

    Dynamic Pages Using Airtable to Create a Collection

Changing Font Awesome Icon In Airtable:

The Airtable template includes a dropdown with a selection of popular Font Awesome icons for social media platforms, allowing for quick icon selection. If you prefer to use a custom icon, paste your Font Awesome code into the "Find an option" field and click "Add option" to include it.

CREATING INTERNAL COLLECTION

When creating your internal collection (Content > Collections > + Add Collection > Internal Collection), you'll need to add specific fields into the collection to allow the widget to pull in the content:

Note: When adding Author Expertise labels, you can add multiple by using a semicolon.

For example: tech;cooking;football

GETTING FONT AWESOME ICON CODE

You can browse Font Awesome icons on their website: https://fontawesome.com/icons.

To get an icon code, click on an icon to open its details. In the popup window, you'll find the HTML code for the icon. Extract the portion within the class attribute that contains the icon name (between the quotation marks) and paste it into your collection or Airtable sheet.

Example:

If the code is: <i class="fa-solid fa-circle-user"></i>

Then the icon name to use is: fa-solid fa-circle-user

CONNECTING WIDGET TO COLLECTION

To start you will first need to open a blog post and add the Blog Signature widget into the post. Then connect the widget the blog author internal collection:

Step 1: Insert the Widget

  1. Open a blog post and add the Blog Signature widget.

  2. Connect the widget to the blog author internal collection:

    • Click the gear icon in the widget’s content panel.

    • Select Connect To Data.

    • Use the Connect Author To dropdown to select your internal collection containing author details.

    • Map each field (e.g., Full Name, Author Photo) by selecting the corresponding options from the collection.

Step 2: Filter & Sort

  1. Open the Filter & Sort tab and under Fixed Filters, click + Add Filter.
  2. From the dropdown, select Full Name.
  3. In the text field, enter the blog post author’s full name as listed in the internal collection.
  4. Click the Done button.

Your Blog Signature widget is now added and linked to your internal collection. For future blog posts, duplicate the post containing the widget, update the content of the blog post, and change the author’s name in the Filter & Sort section of the widget to select the author.

Tips to Easily Add a Blog Signature in All Your Blog Posts

To add the Blog Signature widget to multiple blog posts, first set it up on one post, then copy and paste that configured widget onto other posts.

If you need to update the blog author, use the Filter & Search function to change the Full Name used by the widget for each post.

For sites with only one blog post, you can add the Blog Signature widget and then duplicate that post, update its content, and adjust the Filter & Search for each author.

If you already have multiple blog posts and have added the Blog Signature widget to all existing posts, simply duplicate the last post and update its content and widget settings.

These shortcuts streamline the process, making it easier to add the widget to future posts.