ElementorとNotificationXで通知バーを設計する方法

NotificationX で見事な通知バーをデザインすることができます Elementorページビルダー. With the introduction of Elementor integration, you will have the flexibility to choose and customize beautifully designed ready-made Elemetor templates on your WordPress website for free.

You can display your latest sales, discounts, or urgent announcements amazingly on the website to influence your potential customers to buy your products or take your services.

How To Configure Notification Bar On Your Elementor Website #

Follow the below guideline to see how to configure the 「通知バー」 using NotificationX and Elementor.

ステップ1：通知バーを作成する #

WordPressダッシュボードに移動して、 wp-admin ->  NotificationX-> All NotificationX。次に、右上にある ‘Add New’. Or you can also simply go to the ‘Add New’ tab from the sidebar.

完了すると、にリダイレクトされます 'ソース' Tab page of your NotificationX user interface.  Give a title if you want and select  「通知バー」 as your notification type. Then click on the '次' ボタン。

ステップ2：デザインを構成する  #

から '設計' タブをクリックすると、いくつかの事前に作成されたテーマから選択できます。 「Elementorでビルド」 option when you turn the 「高度なデザイン」 toggle on. Simply by clicking on the button, you will find all the pre-made layouts for your Notification Bar.

Note: Make sure you have Elementor installed on your WordPress website. Or, click on the ‘Install Elementor’ button to proceed.

お好みのテンプレートを選択したら、先に進んで ‘Import’ button, as shown above.

In ‘高度なデザイン’ you also get the flexibility to use the option to modify the notification bar to reach the maximum potential of it.

下 '設計' option, you can do a lot of customization to make your notification bar stand out. Such as changing the background color and image, making your own button color, countdown background color, countdown text color, closing button color, close button size, and position.

Plus, you can also customize the Link Button, Typography  & add Custom CSS to your Gutenberg Notification from this section.

Once the design is imported, you will find the button on the user interface ‘Elementorで編集'. それをクリックすると、Elementorエディターにリダイレクトされ、好みのスタイルオプションを使用して通知バーセクションを任意の方法で設計およびカスタマイズできます。

If you want, you can add new Elementor widgets and customize the design as per your preference, and create a stunning notification bar.

Publish your designed notification bar from the Elementor editor & revert back to the NotificationX dashboard to customize your bar more and make it publish finally.

Step 3: Set Your Notification Bar Visibility #

の中に '表示' tab, you can now configure its settings to choose the location of your site where you want to display your notification bar and for whom you want to display the alert.

Step 4: Customize Your Notification Bar As You Prefer #

その後、から設定を構成するだけです 'カスタマイズ' タブをクリックして、通知バーの外観、タイミング、および動作を構成します。 WordPress Webサイトで通知バーを表示する場所の位置、モバイルデバイスで通知バーを表示するかどうか、および閉じるボタンを追加するかどうかを選択できます。 

とともに ‘Targeting’ option, you can target users who will be able to see the bar and who are not. The timing of the notification bar can also be customized from the ‘Timing’ section.

If you want to hide your bar automatically, you can do that by simply clicking on the ‘Auto Hide’ option. You have the flexibility of setting the timer for your auto-hiding.

If you want your notification bar will pop up after a few seconds your visitor come to your website, you can set that as well. You can also this based on your visitor’s scrolling timing here.

After you have completed all the steps, click on the 「公開」 ボタン。

最終結果 #

By following these mentioned steps and a bit more modifying, this is how your Notification Bar will appear on your Elementor website. For more information on 通知バーの設定方法、 あなたはできる この詳細なドキュメントを確認してください.

NotificationXの助けを借りて、これはあなたが簡単に素晴らしいものを作成してデザインする方法です Elementorを備えた通知バー ＆その過程であなたのコンバージョンを増やします。

はまる？問題や質問に直面した場合は、 サポートチームにお問い合わせください.