Organize post keywords and help users discover related content with the customizable Post Tag Builder Block. It automatically retrieves and displays the keywords assigned to your post, improving navigation and supporting better SEO. You can enhance the presentation with descriptive headings, custom icons, and modern separators to ensure your tags align with your design.
How to Add and Use the Post Tag Block:
- Enable the Block: Navigate to Smart Post > Blocks > Website Builder Blocks and toggle Post Tag to ON.
- Open the Editor: Go to Appearance > Editor > Templates and select a Single Post or Archive template.
- Insert the Block: Click the (+) inserter, search for Post Tag, and drop it into your template.
- Configure: Use the sidebar settings to define your layout, icons, and separators, then save the template to apply it site-wide.
General Settings:
From this panel, you can easily configure the core structural and functional settings to define how your post tags are presented.
- Tag Separator & Gap: Add modern separator from multiple separators, such as Dot, Slash, Double Slash, Dash, Straight Line, and Custom to ensure a clean, readable list.
- Tag Alignment: Set the Tag alignment to Left, Center, or Right as needed.
- Tag Heading: Enable a custom Heading & Add Label (e.g., “Tags”) and set a gap. An icon from the library to prefix your tag list.
- Tag Icon: Add and adjust tag icons’ size from multiple icon styles, such as Default, Bold, Outline, Secure, Mark, and Fill, before each tag name for better visual recognition.
Style Post Tag:
From this panel, you can add style & personalize the visual identity of your tags and their interactive states. Besides, you can manage Typography and Color settings for the Heading, Separator, Icons, and individual Tags. You can also define specific Hover Colors for the tags to improve user engagement and adjust the Padding and Margin for each element to create a professional, balanced layout.
Advanced Settings:
This panel gives you full control over the block container with custom backgrounds, borders, margins, padding, and box shadows for added visual depth. Besides, you can easily control visibility across Desktop, Tablet, and Mobile devices for a fully responsive display. Moreover, you can also add custom CSS code to style or control the block. For more details, please visit here.
