This section guides users on how to use each tab in the Thim Blocks sidebar settings. This configuration is applied similarly to most blocks.
Overview
When selecting a Thim Blocks block in the Gutenberg editor, the sidebar displays several setting tabs. Each tab controls a specific aspect of the block, making it easier to manage content, layout, and advanced customization.
1. Overview: Block Settings Tabs
Common tabs include:
- Content / General – Main block content
- Layout / Display – Structure and visibility
- Style – Colors, typography, spacing
- Thim Animation – Entrance animations
- Thim Custom CSS – Custom CSS per block
- Advanced – Native Gutenberg advanced options
2. Content / General Tab
The Content / General tab controls the core content of the block and should be configured first.
Common Options:
- Title / Heading: Main block title.
- Description / Text: Supporting content.
- Items / Slides / Tabs: Repeater items.
- Media (Image / Icon / Video URL): Media sources.
Best Practices:
- Always complete content setup before styling.
- Add all items first for list-based blocks.
3. Layout / Display Tab
The Layout / Display tab controls how the block appears on the frontend.
Common Options:
- Alignment: Left / Center / Right.
- Columns / Items Per Row: Layout columns.
- Spacing: Gap between items.
- Visibility: Device-based visibility.
4. Style Tab
The Style tab allows visual customization without writing CSS.
Common Options:
- Colors: Text, background, icon, hover.
- Typography: Font settings.
- Border & Radius: Border styling.
- Padding & Margin: Spacing control.
5. Thim Animation Tab
The Thim Animation tab adds entrance animations when the block appears.
Options:
- Animation Type: Fade, Slide, Zoom…
- Delay: Animation delay.
- Duration: Animation duration.
6. Thim Custom CSS Tab
Allows adding block-specific CSS without affecting other elements.
Usage Notes:
- Use only when Style tab is insufficient.
- Intended for advanced users.
7. Advanced Tab (Gutenberg)
The Advanced tab contains native Gutenberg settings.
Options:
- HTML Anchor: Assign block ID.
- Additional CSS Class(es): Custom classes.
- Z-Index: Stacking order.