Vivido – Callout Boxes, Colored Notes & Dividers

Vivido is a lightweight, zero-dependency WordPress plugin that helps you design eye-catching content callouts, alert boxes, colorful dividers, syntax placers, and colored icon list markers without touching complex CSS.

Whether you run a technical blog, documentation hub, tutorial site, or lifestyle blog, Vivido makes your key takeaways, warnings, quotes, and code snippets scannable and visually engaging.

Why Use Vivido?

• Zero Bloat & Zero Dependencies: Pure vanilla CSS and JavaScript. No bulky external frameworks or third-party fonts slowing down your page speed.
• Interactive Admin Builders: Dedicated visual generators with live real-time previews for callouts, bullets, dividers, and code blocks.
• WYSIWYG & Block Ready: Use interactive shortcodes anywhere—in Classic Editor, TinyMCE toolbars, Gutenberg Shortcode blocks, or page builders like Elementor.
• 1-Click Code Copier: Clean syntax blocks featuring automatic clipboard copying for commands, snippets, and scripts.

Core Features

• Clean Alert & Notice Boxes ([color_box]):

  • One-click presets: Tip (Green), Info (Blue), Warning (Amber), and Danger (Red).
  • Deep customization: Solid, dashed, dotted, or double border strokes.
  • Border options: Full-frame box or minimalist left-accent quote bar.
  • Rounded corner radius controls and optional Call-To-Action (CTA) buttons.

• Minimalist Quote Notes ([color_note]):

  • Sleek, distraction-free notice banners with a 4px left-hand border accent.

• Colored Horizontal Dividers ([color_divider]):

  • Custom stroke thickness (1px–10px) and line styles (solid, dashed, dotted).
  • Width scaling (20% to 100%) and alignment controls (Left, Center, Right).

• Colored Icon List Bullets ([vivido_list] & [vivido_item]):

  • Replace ordinary bullet dots with expressive status icons: Checkmarks, Stars, Warning Triangles, Crosses, Pointers, and Colored Dots.
  • 4 Badge Styles: Flat glyph, Solid filled circle, Soft pastel tint (duotone), and Outlined frame.

• Syntax Placer with Quick Copy ([vivido_code]):

  • Formatted code blocks with clean language labels (BASH, PHP, JS, Python, SQL, etc.).
  • Native clipboard API copy button with instant “Copied!” visual feedback and fallback support.