Tags element allows you to showcase all the tag of the blogs posts within a blogs. The tags will help your blogs visitor find the content they want as they act as references for the topics of the blog posts. This article will walk you through the main settings of the element so you do not find adjusting the stylings cumbersome.

In this section

A. Content
B. Design
Content

Layout: You can choose vertical or horizontal layout



You can see the gif below



Maximum tags to show: You can drag horizontally a bar to choose how many Tags that you want to show.
Column gap: Set gap value (padding) between columns.
Row gap: Set the size of the gap (gutter) between tags' grid rows.

Design

1. General



Alignment: Allow you align the general Tags. You can choose Align Left, Align Right or Align Center. This option available for desktop, tablet, and mobile devices.
Background: You can change the general background by changing color.
Box Shadow: Allow you add a shadow for the box by changing the Blur option, Horizontal/ Vertical options, etc... and position of the box shadow.
Border: Select the type of border.
Border radius: Change corner format of the general Tag box. This option available for desktop, tablet, and mobile devices.

2. Tag



Typography: This option lets you change the font-size, font-weight, font-family, line height, text-transform.
Text shadow: This option allows you to add a shadow to the Tags by changing the Blur, Horizontal, Vertical, etc.
Box Shadow: This option allows you to add a shadow to the Tag boxes by changing the Blur, Horizontal, Vertical, etc.

There are NORMAL and HOVER. NORMAL is the Tags that you see first when browsing the blog page. HOVER is the Tags you see when you hover on. You can customize both with different designs.

Text color: Choose a color for the text of the Tags here.
Back ground: You can change the tags' background by inserting your image or changing color.
Border: This option allows you to add and customize border for tags.
Border radius: Change corner format of all tag box. This option available for desktop, tablet, and mobile devices.
Spacing: Adjust the spacing by increasing the margin/padder between the above and below elements (available for desktop, tablet, and mobile devices).

If you are still confusing about Design Tab and Advance Go here to get more information!
Was this article helpful?
Cancel
Thank you!