3 Homepages, 10 patterns, 20 chat icons and uses | Week #23

By 

June 6, 2024

No content found

Howzit Creators 👋

Welcome to another weekly roundup of the latest additions to the MaxiBlocks cloud library. 

3 New homepage templates (181 total)

Dietician WordPress Block theme

Dietician WordPress homepage template

Dietician homepage

Makeup artist homepage

Plumbing services homepage

10 New block patterns (2,156 total)

WordPress block hero pattern

WordPress hero pattern

Hero block patterns

Image block patterns

Pricing table block patterns

20 Chatbot / AI icons (14,142 total)

7 Use cases for chatbot/AI icons

  1. Live chat indicator: Position an icon next to the chat button (bottom-right) to signal the availability of real-time assistance.
  2. Contact form assistance: Place an icon near forms (top-right) to suggest automated help or access to FAQs.
  3. Help centre links: Utilise icons inline with link text to provide visual cues for navigating to help documentation.
  4. User feedback widgets: Incorporate icons near submit buttons to indicate the presence of automated responses or surveys.
  5. Product feature highlights: Represent AI-powered features with icons positioned alongside each feature description.
  6. Search bar enhancement: Signify smart search capabilities by placing an icon inside or adjacent to the search bar.
  7. Pricing plans: Emphasise AI features within pricing tiers by displaying icons next to each AI-related item.

Tips

  • Maintain consistency in icon style and size throughout the website to ensure a cohesive user experience.
  • Include ALT text and ARIA labels to enhance accessibility for all users.
  • Explore the use of hover effects or animations to promote interactivity and user engagement.

Guide for implementing SVG Chatbot/AI icons in WordPress editing experience

Insert the icon

  • Click “Add Block” and choose “Icon Maxi”.
  • Click “Insert” to launch the icons library.

Search or browse to select the appropriate AI chatbot icon from the MaxiBlocks library based on your intended use case (e.g., live chat, contact form assistance, help centre links).

Customise the icon

  • Utilise the colour picker to adjust stroke and fill colours to align with your website’s design.
  • Modify the stroke width to achieve the desired line thickness.

Use margin and padding settings to optimise icon positioning and alignment with surrounding elements. Review the icon’s appearance across all responsive breakpoints (XXL to XS) to ensure proper display on various devices.

Begin experimenting with different icons and customisations to discover how they can enhance your website’s design and functionality.

Video tutorial

00:00 – Introduction
00:05 – Types of icons
00:22 – Load a shape icon
00:38 – Sidebar icon settings
01:02 – Icon hover settings
01:24 – Line icon settings

That’s a wrap for this week’s update.
Wishing you a fantastic weekend, Christiaan.

No content found