Inline Notice Block

Inline Notice Block allows you to highlight important information on your page.

How To Add The Inline Notice Block

  1. Open a page or a post and click on the plus icon to add a new block and look for the Inline Notice or you can search for it if it doesn’t pop up quickly for you.

  2. By default, you'll get the below design-

How To Configure The Inline Notice Block

Under the Content Tab, General Settings like Layout, Notification Type, Heading tag, and options to display type are available.

Layout

There are two types of layouts available. Modern and Default.

Notification Type

This setting allows you to set the color for your notice according to the notification type. The different types of notification available are Default, Warning, Error, Information, Notification.

Primary Heading

This setting allows you to choose the tag for your notification title. The different tags available are - H1, H2, H3, H4

Notice Display

This setting allows you to choose if the user should get an option to dismiss the notice or not. The options available are - Always Dismiss and Always Allow.

Always Dismiss: Selecting this option will provide two options-

  1. To select Icon

  2. To enable cookies

If you enable cookies, you will get an option to set the number of days for cookies. Enabling cookies will make sure that if a user has dismissed notifications, it will not appear again on refresh.

How To Style The Inline Notice Block

Under the Style Tab, various style settings for Colors, Typography, and Padding for Inline notice are available.

Colors

This panel has the following options-

  1. Title Color - Choose the color for the notice title.

  2. Highlight Color - Choose the highlight color for notification. This option will be available if you have selected the ‘Default’ notification type in the Content Tab.

  3. Content Color- Choose the color for your notice text.

  4. Content Background Color - Choose the background color for your notice text.

Typography

Choose the values for font family, font size, font weight, line height and letter spacing for your notification title and content.

Padding

This panel provides options to set notification padding for desktop, tablet, and mobile devices.

The settings available are - Title Padding Horizontal, Title Padding Vertical, Content Padding Horizontal, and Content Padding Vertical.

Advanced Settings

Under the Advanced Tab, padding, margin, and default advanced settings for the notification block are available.

Block Padding

This setting provides options to set padding for the entire block for desktop, tablet and mobile devices.

Block Margin

This setting provides options to set margin for the entire block for desktop, tablet and mobile devices.

Advanced

This panel provides a z-index setting for your block.

Last updated