Create Stylish Alert Blocks Easily

guide for n.w
1 / 26
Embed
Share

Learn how to create and customize attractive alert blocks for your website. Follow a simple guide to set titles, styles, icons, and more to make your alerts stand out. Improve user experience with dismissible alerts and targeted audience displays.

  • Alerts
  • Styling
  • Customization
  • Website
  • User Experience

Uploaded on | 0 Views


Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.

E N D

Presentation Transcript


  1. Guide for Alerts Block

  2. First click the small plus symbol. Then click Alerts to begin creating an Alerts block.

  3. At the top you can write Title.

  4. Going live we can see our Title text have been added. We will get to the styling of the alert later.

  5. Beneath Title you can set Alert style. You can see examples of the different alerts here: https://getbootstrap.co m/docs/5.0/components /alerts/ Let s change it to Success.

  6. Going live we can see the new Alert style.

  7. Beneath Alert style you can set Alert icon. Let s set it to Info.

  8. Going live we can see our Alert icon have been added.

  9. Beneath Alert icon you can set Close. This makes it possible to dismiss the alert. Here we change it to True.

  10. Going live we can see a x have been added. If reader clicks this, the alert will disappear.

  11. Below Close, you can select when or for whom the block will be shown. Always: Will always show. Logged out: Only shows when viewer is logged out. Logged in: Only shows when viewer is logged in. Is customer: Only shows when viewer is a customer. Is staff: Only shows if viewer is a staff. Is admin: Only shows when viewer is an admin.

  12. Beneath Show block you can write Text before and Text after an optional link. We will add the link later.

  13. Going live we can see our two Text sections.

  14. Beneath Text after you can write Link text. This will only show once we add a link below.

  15. Beneath Link text you can Choose a page as an Internal page link.

  16. In the page chooser window, you can search for the page here.

  17. If a page on the list have pages under it, you can click here to see them.

  18. You select a page by clicking here.

  19. Beneath Choose a page you can set an External link URL.

  20. Going live we can see the link have been added between our two text sections.

  21. Beneath External link URL you can set Open in new tab. If set to True, like here, it will make the browser open the link in a new tab.

  22. Beneath Open in new tab, you can set Line. Let s change it to True.

  23. Going live we can see a line have been added beneath the other elements.

  24. To add another item, click the plus icon.

  25. Fill out the fields as before.

  26. Going live we can see our new item added beneath the line.

Related


More Related Content