Yehi

Wiliba

<p>Advanced Notifications allows you to create beautiful custom notifications that appear on pages or posts of your choice.</p>
<p>Demos – <a href="https://advanced-notifications.com/demos/" rel="nofollow ugc">Advanced Notifications – Live Preview</a></p>
<h4>In development:</h4>
<ul>
<li>More designs</li>
<li>More animations</li>
</ul>
<h4>Features:</h4>
<p>Here’s a list of the Basic version features in plain text format:</p>
<p><strong>Notifications</strong></p>
<ul>
<li>Number of Notifications: Unlimited</li>
<li>Types: Editor, Image, HTML</li>
<li>Notification by User Role Types: Always all users & visitors, All users & visitors</li>
<li>Scheduled Notification: No</li>
<li>Notification by Devices Types: All devices, Desktop, Desktop & Tablet, Tablet, Only Tablet & Mobile, Mobile</li>
<li>Delay Before Show: Yes</li>
<li>Show Time: Yes</li>
<li>Publish Type: All site pages, Custom post types & taxonomies, Only on specific pages</li>
<li>Limiting the Number of Shows per Period: Yes</li>
<li>Animations In & Out: Basic</li>
<li>APIs for Developers: Yes</li>
</ul>
<p><strong>Locations</strong></p>
<ul>
<li>Number of Locations: Unlimited</li>
<li>Locations: Bottom & Left, Bottom & Right, Top & Left, Top & Right</li>
<li>Custom Location Options: Basic</li>
<li>Responsive: Yes</li>
</ul>
<p><strong>Designs</strong></p>
<ul>
<li>Number of Designs: Unlimited</li>
<li>Designs: Default, Success, Info, Warning</li>
<li>Custom Design Options: Basic</li>
<li>Responsive: Yes</li>
</ul>
<p><strong>Triggers</strong></p>
<ul>
<li>Number of Triggers: Unlimited</li>
<li>Number of Triggers per Notification: Only one</li>
<li>Notifications Mode: Page is loaded and in triggers</li>
<li>Triggers: Mouse leave from top, On click, On hover</li>
<li>Trigger Action: Only show notification</li>
</ul>
<p>Full Features – <a href="https://advanced-notifications.com/features/" rel="nofollow ugc">Advanced Notifications – Features</a></p>
<h4>Feedback</h4>
<p>If you like this plugin, then please leave us a good rating and review.<br />
<a href="https://wordpress.org/support/plugin/advanced-notifications/reviews/" rel="ugc">Advanced Notifications – Reviews</a></p>


Advanced Notifications

Advanced Notifications allows you to create beautiful custom notifications that appear on pages or posts of your choice.

Roel Magdaleno

<p>The callout box includes an icon, and the post content. This plugin uses <a href="https://heroicons.com" rel="nofollow ugc">Heroicons</a> and  <a href="https://github.com/roelmagdaleno/php-heroicons" rel="nofollow ugc">php-heroicons</a> PHP package.</p>
<h3>Icons</h3>
<p>A callout box includes an icon that describes what’s the purpose of the callout box.</p>
<p>The plugin is using <a href="https://heroicons.com" rel="nofollow ugc">Heroicons</a> so you can go to its website and see what icons are available to use within this plugin.</p>
<p>You can use <code>solid</code> and <code>outline</code> icons.</p>
<h3>Types</h3>
<p>A callout box can have multiple types:</p>
<ul>
<li><code>primary</code></li>
<li><code>success</code></li>
<li><code>danger</code></li>
<li><code>warning</code></li>
</ul>
<p>By default, the callout box is <code>primary</code>.</p>
<h3>Icon Methods</h3>
<p>The icon method can be 2 types:</p>
<ul>
<li><code>solid</code></li>
<li><code>outline</code></li>
</ul>
<p>By default, for shortcodes and Gutenberg the icon method is <code>solid</code>.</p>
<h3>Shortcode</h3>
<p>For WordPress Classic Editor or even Gutenberg, you can use the shortcode:</p>
<pre><code>[wp-callout icon="check-circle" type="primary" method="solid"]
Welcome to WordPress. This is the post content.
[/wp-callout]
</code></pre>
<p>The shortcode supports 3 attributes:</p>
<ul>
<li><code>icon</code>. The icon to show in the callout box. (Default: <code>check-circle</code>)</li>
<li><code>type</code> Callout box type. (Default: <code>primary</code>)</li>
<li><code>method</code> (Default: <code>solid</code>)</li>
</ul>
<h3>Gutenberg Block</h3>
<p>For Gutenberg users, you can use <strong>Callout Box</strong> block.</p>
<p>Every Gutenberg Callout Box, you can change the icon, type and method using the block properties.</p>
<p>Those properties are the same for the shortcode.</p>
<p>Then, you just type your callout box content inside the Gutenberg block.</p>
<h3>Block Presets</h3>
<p>When you insert a new Gutenberg Block Callout you can select 1 of the 4 presets installed in the plugin:</p>
<ul>
<li>Information</li>
<li>Success</li>
<li>Danger</li>
<li>Warning</li>
</ul>
<p>After you select one preset, your callout box will change its background color and icon.</p>


Callout Boxes

Insert callout boxes in your posts and pages using shortcodes and Gutenberg blocks.

Advanced Notifications vs Callout Boxes