Back to Community
Home / Community / General

How to Control Heading Tags and Typography in the Otter Blocks Posts Block

21 threads Sep 16, 2025

Content

If you're using the Otter Blocks plugin to display your latest posts, you might have noticed that the post titles default to an H5 tag. This can be problematic for SEO and visual hierarchy, as you may prefer a larger heading like H2 or H3. This guide will explain why this happens and show you how to take control of your post block's typography.

Why Do Post Titles Default to H5?

Based on community discussions, this behavior is often related to your active WordPress theme. Many themes are designed to handle the styling of post titles and links to maintain a consistent look across your entire website. The Otter Blocks plugin sometimes defers to the theme's default styles, which can result in titles appearing as H5, even if you've configured them differently in the block editor.

How to Change the Title Tag

You can configure the HTML tag for your post titles directly within the Otter Posts block settings. Here's how:

  1. Edit the page or post containing your Otter Posts block.
  2. Select the Posts block.
  3. In the block settings sidebar, navigate to the Style tab.
  4. Open the Typography section.
  5. Locate the Title Tag dropdown menu.
  6. Select your preferred heading tag (e.g., H2, H3, H4).
  7. Update or publish the page to save your changes.

What If the Change Doesn't Appear on My Live Site?

If the heading tag change works in the editor but not on the front end of your site, your theme's CSS is likely overriding it. This is a common issue. The solution is to add a small amount of custom CSS to enforce your chosen style.

You can add the following CSS code to your theme's "Additional CSS" section (found in Appearance > Customize > Additional CSS in your WordPress dashboard). This example forces all titles within the Posts block to use the H2 tag's typical styling; you may need to adjust the values to match your theme.

.otter-posts .entry-title {
    font-size: 2em !important; /* Adjust size as needed */
    font-weight: bold !important;
}

Note: Using !important is sometimes necessary to override strong theme styles, but use it sparingly. You may need to inspect your page with a browser tool to find the exact CSS selector your theme is using.

Additional Typography and Spacing Controls

The Otter Posts block offers extensive typography controls for the title, meta information, and excerpt. In the Style > Typography section of the block settings, you can also adjust:

  • Font Size
  • Line Height (to reduce gaps between lines)
  • Letter Spacing

For even more specific adjustments, particularly for mobile spacing, you may need to use custom CSS, as the plugin's UI does not have dedicated settings for every scenario.

Troubleshooting Summary

  • Problem: Post title tags are H5 or not respecting block settings.
  • Cause: The active WordPress theme's styles are overriding the block's settings.
  • Solution 1: Use the Title Tag dropdown in the block's Typography settings.
  • Solution 2: If Solution 1 doesn't work, add custom CSS to override the theme's styles.

By following these steps, you should be able to successfully control the heading levels and typography of your post titles, ensuring they fit your site's design and SEO structure.

Related Support Threads Support