Blog posts can be organized into general topics called Blog Categories to help visitors find related content. When a client clicks on a category link, a new page opens listing all the posts assigned to the category.



1. Content:

Select blog: Picks blog categories to preview which will appear in the title bar.



Show title: use to hide, show or edit the title here.



Show Articles Count: use to show articles count.



Alignment: Allow you align the Blog Categories. You can choose Align Left, Align Right or Align Center. This option available for desktop, tablet, and mobile devices.
Direction: Select to display tags Horizontal or Vertical.
Space between: You can move the drag bar to adjust the spacing of the categories. This option available for desktop, tablet, and mobile devices.



Page setting: To know more about it, you can read Page Settings, Theme Settings, App Settings.



2. Design:

Title

Text color: Choose a color of the title "Blog Categories".



Typography: This option allow you customize the Font-size, Font-weight, Font-family, Line Height, Text-transform, etc... of the title. You can customize it on many devices.



Text Shadow: Allow you add a shadow of title by changing the Blur, Horizontal, Vertical, etc.



General

Typography: This option allow you customize the Font-size, Font-weight, Font-family, Line Height, Text-transform, etc... for the content on this element. You can customize it on many devices.



Text Shadow: Allow you add a shadow for the content by changing the Blur, Horizontal, Vertical, etc.



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.

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 categories here.



Background: You can change the categories' background by inserting your image or changing color. This option available for desktop, tablet, and mobile devices.



Border:
Border style: There are various styles for you, such as Solid, None, Dash, Doted, Default ( Beae will automatically set the Categories' style for you), etc.
Width: You can adjust both the horizontal and vertical width of the Categories' border.
Color: You can choose a color for the border of the Categories boxes.



Border radius: Change corner format of the categories box.



Spacing: Adjust the spacing by increasing the margin/padding between the above and below elements (available for desktop, tablet, and mobile devices).
Size units:
- px is not scalable, it is an absolute unit. The value assigned is fixed irrespective of the user's device screen.
- %, em, rem scale accordingly with screen size, they're responsive units.

“em” is relative to the font-size of the nearest or parent element.
“rem” is relative to the html (root) font-size (the entire page).
% relative to the width of the current container.
Note: Negative values are not allowed.



Synchronization button: The Link symbol of every option like below stands for synchronizing 4 values. If you disable it, you can set one by one value separately.



Advanced Tab

Every Basic elements always has this tab. The settings here takes effect on the whole element.



Advanced:

In the case the design tab does not has option to adjust spacing, you can always use this Advanced properties to change the spacing.



Besides the Spacing property, you can easily adjust the Width and Position of the element. These options available for desktop, tablet, and mobile devices.


Background: In the case the design tab does not has option to change background color, you can always use this Background properties to change the background color of the whole element.



Responsive: Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device.



Attributes HTML and CSS box: If you just want to add your own coding for individual element, use the Additional CSS and HTML box here.
No matter what style you choose, you can tweak CSS, HTML and overwrite that style.



However, if you want to edit any part of the categories with HTML CSS, please contact Beae's customer care support via Live Chat.
Thank you for reading our articles!
Was this article helpful?
Cancel
Thank you!