Kadence Tutorial: How to Create and Set Up Notification Bars in Kadence Themes

existWordPressAdding a notification bar during the website building process can be an effective way to boost your website's conversion rate, especially when it comes to promoting promotions, online courses, services, or free resources such as eBooks, checklists, and more. UseKadencetheme, merchants can easily set up an eye-catching notification bar.

图片[1]-如何在Kadence主题中创建和设置通知栏

Installing Kadence Themes and Plugins

First, it is necessary to install theKadenceThemes and their premium plug-ins.Kadence offers powerful customization options, and plug-ins can be purchased by visiting the Kadence website, or by choosing to purchase theKadence Propackage for more functionality.

existWordPressIn the plug-in management interface of the backend, click "Add New Plug-in" to upload and install the Kadence Premium Plug-in. After installation, activate the plug-in and enter the license key.

图片[2]-如何在Kadence主题中创建和设置通知栏

Activate Element Options for Kadence Themes

existKadenceThe Activate Elements option in the theme settings is necessary to enable the notification bar feature. Below are the steps to do so:

  • Go to "exterior condition">"Kadence".
  • Enable"elemental"Options.

Once enabled, merchants will see a new option in the settings - "elemental". Click Add New Element to start adding the notification bar.

图片[3]-如何在Kadence主题中创建和设置通知栏

Designing the notification bar

utilizationKadenceThe notification bar is designed with the Column Layout feature. The procedure is as follows:

  • Create a new element and select "set rigidly in place" layout to make sticky notification bars.
图片[4]-如何在Kadence主题中创建和设置通知栏
  • Add a two-column layout and resize the Ready to Set button and countdown block.
图片[5]-如何在Kadence主题中创建和设置通知栏
  • Set the background color, font color, etc. to match the overall style of the site.
图片[6]-如何在Kadence主题中创建和设置通知栏

This is what it looks like after setting it up:

图片[7]-如何在Kadence主题中创建和设置通知栏

Adding a countdown and text content to the notification bar

First, set the background color and add the countdown content. The steps are as follows:

  • Click and add a new block, search and select the countdown block.
图片[8]-如何在Kadence主题中创建和设置通知栏
  • Set a countdown for a promotion, such as a seven-day countdown.
图片[9]-如何在Kadence主题中创建和设置通知栏

Add Prefix Text

To add explanatory text before the countdown, proceed as follows:

  • In the countdown layout, search for and add the leading text.
  • Enter text content such as "Time is almost over, hurry up and enjoy the best offer of the year with 25% discount".
图片[10]-如何在Kadence主题中创建和设置通知栏
  • Set text to in-line mode so that the countdown and text are displayed on the same line.
图片[11]-如何在Kadence主题中创建和设置通知栏
图片[12]-如何在Kadence主题中创建和设置通知栏

Adjusting text color

If desired, adjust the color of the text to ensure that it contrasts appropriately with the background, as follows:

  • In the Line Layout settings, set the text color to white to ensure that the text is clearly visible.
图片[13]-如何在Kadence主题中创建和设置通知栏

This completes the setup of the countdown timer and text to be displayed on demand in the notification bar.

Add button

In the notification bar, buttons will direct the user to further actions, such as a link to a promotional page or a contact page.

  • Add a button and set the button text like "Get Discounts Now".
图片[14]-如何在Kadence主题中创建和设置通知栏
  • In the button settings, link to the target page (e.g. promotion page or contact page).
图片[15]-如何在Kadence主题中创建和设置通知栏

Setting the position of the notification bar

Fix the notification bar at the top of the page and set a delayed display distance. This way, the notification bar remains visible when the user scrolls the page.

  • In Element Settings, select "Fixed at the top".
图片[16]-如何在Kadence主题中创建和设置通知栏
  • Set the pixel value for delayed display, for example 100 pixels, so that the notification bar is displayed after a certain distance of page scrolling.
图片[17]-如何在Kadence主题中创建和设置通知栏
  • Select "Display across all pages" to make the notification bar appear on every page of the site.
图片[18]-如何在Kadence主题中创建和设置通知栏

Set notification bar expiration time

An expiration time can be set for the notification bar to ensure it automatically disappears when the promotion ends. This works great for limited time events.

  • Enable"expiration setting"Options.
图片[19]-如何在Kadence主题中创建和设置通知栏
  • Set the expiration date of the notification bar, e.g. after seven days, the notification bar will disappear automatically when the promotion ends.

Publish and view results

After completing all the settings, click "post", and then check the website results. Scroll through the page to see the notification bar fixed at the top and make sure it displays correctly as set.

图片[20]-如何在Kadence主题中创建和设置通知栏

summarize

By using theKadenceAdvanced plug-ins andKadence BlocksNotifications can be easily set up by merchants to advertise promotions, direct users to sign up, or push out other information. Simplified setup steps make it efficient to create a notification bar that boosts conversions and attracts more visitors to an event or subscription service.


Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!
客服微信
Customer Service
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) E-mail: [email protected]
Working hours: Monday to Friday, 9:30-18:30, holidays off
© Reprint statement
本文作者:托尼屎大颗
THE END
If you like it, support it.
kudos831 share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments