Add COVID-19 Announcement Notification To WordPress Website Using Divi Module

Urgent public notices and operational updates require prominent notification banners across your website.

The Special Announcement Divi module allows you to create customizable notification bars at the top or bottom of your site.

Key features include:

• Full design control over title typography, description text, background colors, padding, and close button icons inside the Divi Builder.
• Automatically generates valid Special Announcement Schema structured data for search engine indexers.
• No programming or custom CSS required.

Pre-Requisites

• A WordPress Website (5.0 or higher)
• Divi Theme or Divi Builder (optional, for Divi Modules)
• WordPress Schema Plugin For Divi, Gutenberg & Shortcodes

Add Special Announcement Schema In SEO Schema Settings

1. Log in to WordPress Admin > SEO Schema > Special Announcement.

2. Create and configure your announcement schema settings.

3. Click Save Schema Settings.

4. For detailed instructions on schema field mapping, refer to the Special Announcement Schema Guide.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Edit WordPress Page In Divi Visual Builder

1. Open any page on your website front-end (for example, your homepage).

2. Click Enable Visual Builder in the top WordPress admin bar to launch Divi’s front-end editor.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Add Special Announcement Divi Module

1. Add a new Regular or Fullwidth section in Divi.

2. Click + Add Module and select the Special Announcement Divi module.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Configure Special Announcement Divi Module Settings

1. The Special Announcement Divi module settings allow you to connect schema content and design your banner layout:

   • Special Schema Page Section:

     • 

       Special Schema Page Section - Divi Module - WordPress Schema Plugin

     • Enable Dev Module:

       • When toggled OFF, closing the notification bar stores the user’s preference in browser storage so it does not reappear on subsequent page visits.
       • Toggle ON during testing to make the notification bar reappear every time the page reloads.
       • (Note: For production websites, keep this setting toggled OFF.)

     • Select Special Schema Page:

       • Select the page configured with Special Announcement schema from the dropdown menu.
   • Background Section:

     • 

       Special Background Section - Divi Module - WordPress Schema Plugin

     • Configure background colors, gradients, or images for the notification bar.

   • Title Section:

     • 

       Special Title Section - Divi Module - WordPress Schema Plugin

     • Customize typography for the announcement headline:

       • Margin and padding spacing
       • Font family, font weight, text style, alignment, text color, font size, letter spacing, and line height.
   • Description Section:

     • 

       Special Description Section - Divi Module - WordPress Schema Plugin

     • Customize typography for the announcement description:

       • Margin and padding spacing
       • Font family, font weight, text alignment, text color, and line height.
   • Close Button Section:

     • 

       Special Close Button Section - Divi Module - WordPress Schema Plugin

     • Style the dismiss close icon:

       • Diameter: Adjust the close button circular container size.
       • Color: Choose the close button icon and stroke color.
       • Margin and padding spacing.
   • Spacing Section:

     • 

       Special Spacing Section - Divi Module - WordPress Schema Plugin

     • Adjust margin and padding around the module container.

   • Custom CSS Section:

     • 

       Special Custom CSS Section - Divi Module - WordPress Schema Plugin

     • Add custom CSS rules targeting specific notification bar elements:

       • Title element
       • Description text
       • Close Button Link
       • Close Button SVG icon

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Save Section to Divi Library

1. Click the section options icon (three vertical dots) on the Divi section containing your announcement module.

2. Select Save to Library from the options menu.

3. In the Add to Library modal, enter a Layout Name, check Make this a global item, and click Save to Library.

   

   Special Add To Divi Library Input Modal - WordPress Schema Plugin

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Remove Section and Save Page

1. Delete the temporary section from the current page body.

2. Save your Divi page changes.

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Assign Announcement Layout in Plugin Settings

1. Go to WordPress Admin > SEO Schema > Divi Settings.

2. Scroll to the Special Announcement section.

3. Select your saved global Divi Library layout from the Select Special Announcement Divi Layout dropdown.

4. Choose Top or Bottom from the Announcement Location dropdown.

5. Click Save Changes.

6. (Alternatively, you can embed the saved Divi Library layout directly into your custom Global Header or Global Footer using Divi Theme Builder).

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial

Test Notification Bar Display

1. Open any published page on your website.

2. The announcement notification bar should display at your chosen top or bottom location.

3. (Note: If the notification bar does not display, you may have clicked the close button previously. If using Google Chrome, open developer tools to clear local storage data and refresh the page.)

FREE DOWNLOAD

Start your FREE trial. No credit card required.

Start Risk-Free Trial