This documentation provides comprehensive insights into the Notice Block developed by Zoloblocks.

Adding a block to the editor

1. Click the Toggle Block Inserter icon and a sidebar will appear on the left side, All the blocks will be visible here.
2. Search by the Notice block name.
3. Then select the appear blocks ( with zoloblocks logo T.R corner).
4. After Drag and Drop it on the page.

After Inserting the blocks, Follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Here appears the Notice block.
3. After on the right side, Click on the Block. Then the Notice details appear.
4. Here shows all the control tabs( Basic, Style, Extra ) of a block.

Basic Tab

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences.

General Section

Go to Basic > General

This section provides control for the notice,

1. Layouts: Set the style for the layout (e.g.: Style 1, Style 2).
2. Notice Type: Set the type for the notice ( e.g.: Success, Info, Warning, Danger ).
3. Layout Direction: Set the direction for it (e.g.: Left, Right)

4. Icon: Enable the switcher to show the Icon.
5. Title: Enable the switcher to show the Title.
6. Description: Enable the switcher to show the Description.

7. Is Dismissible Notice: Enable the switcher to dismissible it. It can be dismiss by close button.
8. infinite Repetitions: Enable this to repetition it infinite time.

Content Section

Go to Basic > Content

Let’s customize the content by following,

1. Icon Type: Set type for the Icon (e.g.: Image, Icon).
2. Select Icon: Select the icon from the icon library.
3. Title Tag: Set any HTML Tag for Title ( H1, H2, H3, H4, H5, H6, p, span ). The title tag is essential for both user experience and search engine optimization (SEO).

4. Title: Set the title for the Notice.
5. Description: Set the description of the notice.

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects visually appealing and cohesive with the overall design of the interface.

Notice Section

Go to Style > Notice

Customize the notice section by following controls, This is visual changes of it,

1. Border: Set border for the notice.
2. Border Radius: Make the border corner edges rounded by setting the border radius.
3. Margin: Set margin for outter space.
4. Padding: Set space for inner space of the content.

Normal State for Notice

The changes will appear on the normal state,

5. Background: Set the background color for it.
6. Box Shadow: Se the shadow for the box.

Hover State for Notice

The changes will appear on the mouse hover, Customize it notice by follwoing,

7. Background: Set the background for it.
8. Box Shadow: Set the shadow for the box.

Content Section

Go to Style > Content

Icon

Customize the Icon by following this,

1. Color: Set the color for the icon.
2. Background: Set background for the icon.
3. Icon Size: Set the size fo the icon.
4. Border: Set border for icon.
5. Border Radius: Make the border radius.

6. Padding: Set the padding for the icon.
7. Margin: Set margin for the icon.
8. Box Shadow: Se the shadow for the icon.

Title

Customize the title section,

9. Color: Set the color for the title.
10. Typography: Set typography for the title.
11. Margin: Set margin for title.
12. Text Shadow: Set the text shadow for the title.
13. Text Stroke: Set the stroke for the text.

Description

Set the apperance changes for the description,

14. Color: Set the color for the description.
15. Typography: Set the typography for description.
16. Margin: Set margin for the description.

Close Button Section

Go to Style > Close Button

Customize the close button appearances by following,

1. Icon Size: Set the size for the icon of close button.
2. Border: Set border of the icon.
3. Border Radius: Make the border radius.

4. Padding: Set the padding for the close button.
5. Margin: Set margin for it.

Normal State for Close button

Customize the close button in normal state, the apperance will appear on normally,

6. Color: Set the color for the close button.
7. Background: Set the background for the close button
8. Box Shadow: Set the shadow for the box.

Hover State for Close Button

Customize the close button in hover state, the apperance will appear on mouse hover,

9. Color: Set the color for the close button.
10. Background: Set the background for the close button
11. Box Shadow: Set the shadow for the box.

Extra Tab Control

The extra tabs provide the controls of any blocks. You can make different visual layouts by following these Controls.
Click to learn more>>.

Video Assist

Video Tutorial coming soon.

Check the Demo Page.

Thanks for being with us!