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

With Covid-19 disrupting most businesses, there is a need to keep users updated about any changes.

The Covid-19 Announcement module helps create notification bar on your website.

With it :-

  • Style title, description, background, close button etc from within the divi module
  • Covid-19 Special Announcement Schema is auto-created.
  • No programming skills required.

Pre-requisites

  1. A WordPress website
  2. WordPress Schema Plugin plugin
  3. Divi / Extra Theme by Elegant Themes

Tools

  1. Computer

Total Duration : 8 minutes

FREE DOWNLOAD

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 1 - Add Covid-19 Announcement Schema In SEO Schema Settings

Add Covid-19 Announcement Schema In SEO Schema Settings
  1. Goto WordPress Admin > Seo Schema > Covid-19 Announcement
  2. Create and add an announcement settings.
  3. Save the settings.
FREE DOWNLOAD

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 2 - Edit WordPress Page In Divi Visual Builder

Edit WordPress Page In Divi Visual Builder
  1. Open a WordPress page on the frontend. In our case, its the home page.
  2. Click on Enable Visual Builder. This loads a divi visual builder
FREE DOWNLOAD

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 3 - Add Covid-19 Announcement Divi Module

Add Covid-19 Announcement Divi Module
  1. Create a regular or fullwidth section
  2. Add Covid-19 Announcement divi module
FREE DOWNLOAD

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 4 - Setup Covid-19 Announcement Divi Module

Setup Covid-19 Announcement Divi Module
  1. The Covid-19 Announcement Divi Module has settings that you can use to select an announcement schema (for data) and style elements of the notification bar.
    • Covid-19 Schema Page Section
      • Covid-19 Schema Page Section - Divi Module - WordPress Schema Plugin
        Covid-19 Schema Page Section - Divi Module - WordPress Schema Plugin
      • Enable Dev Module
        • When toggle is OFF and If a user closes the notification bar, notification doesn't reappear on the same browser.
        • Set toggle ON to make the notification reappear on the browser.
        • Default if OFF.

        • On a production website, the value should be OFF.

      • Select Covid-19 Schema Page
        • Select a page from the dropdown that has covid-19 schema included.
    • Background Section
      • Covid-19 Background Section - Divi Module - WordPress Schema Plugin
        Covid-19 Background Section - Divi Module - WordPress Schema Plugin
      • Use this section to set background for the notification bar.
    • Title Section
      • Covid-19 Title Section - Divi Module - WordPress Schema Plugin
        Covid-19 Title Section - Divi Module - WordPress Schema Plugin
      • Use this section to style the title of the announcement
      • Styling options include.
        • Margin and padding
        • Typography like font, font weight, font style, text alignment, text color, text size, letter spacing, line height etc.
    • Description Section
      • Covid-19 Description Section - Divi Module - WordPress Schema Plugin
        Covid-19 Description Section - Divi Module - WordPress Schema Plugin
      • Use this section to style the description of the announcement
      • Styling options include.
        • Margin and padding
        • Typography like font, font weight, font style, text alignment, text color, text size, letter spacing, line height etc.
    • Close Button Section
      • Covid-19 Close Button Section - Divi Module - WordPress Schema Plugin
        Covid-19 Close Button Section - Divi Module - WordPress Schema Plugin
      • Use this section to style the close button
      • Styling options include
        • Diameter Set the diameter of the circle that represents the close button
        • Color Set the color of the close button.
        • Margin and padding.
    • Spacing Section
      • Covid-19 Spacing Section - Divi Module - WordPress Schema Plugin
        Covid-19 Spacing Section - Divi Module - WordPress Schema Plugin
      • Set the margin and padding for the divi module.
    • Custom CSS Section
      • Covid-19 Custom CSS Section - Divi Module - WordPress Schema Plugin
        Covid-19 Custom CSS Section - Divi Module - WordPress Schema Plugin
      • Add custom css for elements of the notification bar. They are
        • Title
        • Description
        • Close Button Link
        • Close Button SVG
FREE DOWNLOAD

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 5 - Save Section As Divi Library

Save Section As Divi Library
  1. Click on the ellipsis (3 vertical dots) for the divi section (regular/fullwidth) that contains the announcement module.
  2. A context-menu shows up. Click on Save to Library
  3. An Add to library modal appears. Assign a Layout Name, check the Make this a global item and Save to library.
    Covid-19 Add To Divi Library Input Modal - WordPress Schema Plugin
    Covid-19 Add To Divi Library Input Modal - WordPress Schema Plugin
FREE DOWNLOAD

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 6 - Delete Section And Save WordPress Page

Delete Section And Save WordPress Page
  1. Delete the section that contains the announcement module.
  2. Save the WordPress page.
FREE DOWNLOAD

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 7 - Set Announcement Divi Layout In Settings

Set Announcement Divi Layout In Settings
  1. Goto WordPress Admin > SEO Schema > Divi Setting
  2. Goto the Covid-19 Announcement section.
  3. Select the saved divi library item for the Select Covid-19 Announcement Divi Layout dropdown
  4. Select top/bottom as the option for Announcement Location dropdown.
  5. Click on Save Changes

  6. Alternatively : You can add the divi library in Global Header or Global Footer

FREE DOWNLOAD

Start your FREE trial. You can cancel your trial anytime within the trial period.

Step 8 - Test Announcement Notification Bar

Test Announcement Notification Bar
  1. Load a WordPress page on your website.
  2. You should see the notification bar loaded on the page.

  3. If you don't see the notification bar loaded, it is quite likely that you have clicked on the close button and your browser has saved your preference. For google chrome here is how to clear local storage

FREE DOWNLOAD

Start your FREE trial. You can cancel your trial anytime within the trial period.