Title: Vivido – Callout Boxes, Colored Notes & Dividers Author: infyon Published: 2026년 9월 30일 Last modified: 2026년 9월 30일 --- 플러그인 검색 ![](https://ps.w.org/vivido/assets/banner-772x250.png?rev=3721513) ![](https://ps.w.org/vivido/assets/icon-256x256.png?rev=3721513) # Vivido – Callout Boxes, Colored Notes & Dividers 작성자: [infyon](https://profiles.wordpress.org/infyon/) [다운로드](https://downloads.wordpress.org/plugin/vivido.1.4.1.zip) * [세부사항](https://ko.wordpress.org/plugins/vivido/#description) * [평가](https://ko.wordpress.org/plugins/vivido/#reviews) * [설치](https://ko.wordpress.org/plugins/vivido/#installation) * [개발](https://ko.wordpress.org/plugins/vivido/#developers) [지원](https://wordpress.org/support/plugin/vivido/) ## 설명 **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. ## 스크린샷 [⌊Interactive Callout Box Generator with live preview.⌉⌊Interactive Callout Box Generator with live preview.⌉[ Interactive Callout Box Generator with live preview. [⌊Colored Bullet List & Badge Styler.⌉⌊Colored Bullet List & Badge Styler.⌉[ Colored Bullet List & Badge Styler. [⌊Horizontal Divider & Separator Designer.⌉⌊Horizontal Divider & Separator Designer .⌉[ Horizontal Divider & Separator Designer. [⌊Code Placer Builder with One-Click Copy functionality.⌉⌊Code Placer Builder with One-Click Copy functionality.⌉[ Code Placer Builder with One-Click Copy functionality. ## 설치 1. Upload the `vivido` folder to the `/wp-content/plugins/` directory, or install the `vivido.zip` package directly via **Plugins > Add New > Upload Plugin**. 2. Activate the plugin through the **Plugins** screen in WordPress. 3. Access the interactive shortcode generators under **Vivido** in your WordPress admin menu. ## FAQ ### Does Vivido slow down my website? No. Vivido does not load external web fonts or large script libraries. All styles and scripts are lightweight vanilla assets under 10KB total. ### Can I use Vivido with Gutenberg? Yes. You can paste generated shortcodes inside standard Gutenberg Shortcode or Paragraph blocks. A toolbar button is also provided for inline callout wrapping. ### Can I use custom hex colors? Yes. All shortcodes accept custom `#hex` color values for backgrounds, text, borders, dividers, and icon badges. ### Where can I get support or request features? Visit [Infyon.com/infyon](https://infyon.com/infyon) or post on the WordPress.org support forum for Vivido. ## 후기 이 플러그인에 대한 평가가 없습니다. ## 기여자 & 개발자 “Vivido – Callout Boxes, Colored Notes & Dividers”(은)는 오픈 소스 소프트웨어입니다. 다음의 사람들이 이 플러그인에 기여하였습니다. 기여자 * [ infyon ](https://profiles.wordpress.org/infyon/) [자국어로 “Vivido – Callout Boxes, Colored Notes & Dividers”(을)를 번역하세요.](https://translate.wordpress.org/projects/wp-plugins/vivido) ### 개발에 관심이 있으십니까? [코드 탐색하기](https://plugins.trac.wordpress.org/browser/vivido/)는, [SVN 저장소](https://plugins.svn.wordpress.org/vivido/) 를 확인하시거나, [개발 기록](https://plugins.trac.wordpress.org/log/vivido/)을 [RSS](https://plugins.trac.wordpress.org/log/vivido/?limit=100&mode=stop_on_copy&format=rss) 로 구독하세요. ## 변경이력 #### 1.4.1 * Enqueued admin generator styles and scripts via `admin_enqueue_scripts` to meet WordPress.org directory standards. * Added `wp_kses_post` output sanitization across all shortcodes to prevent XSS vulnerabilities. * Fixed list layout container margins to maintain proper post alignment across block themes. * Enhanced clipboard copy engine with timer protection and textarea fallback for non-HTTPS contexts. * Confirmed compatibility with WordPress 7.1. #### 1.4.0 * Added dedicated visual builder for Horizontal Dividers (`vivido-dividers`). * Added dedicated visual builder for Code Placers with live copy testing (`vivido- code-blocks`). #### 1.3.0 * Added dedicated visual builder for Colored Bullet Lists (`vivido-bullets`). * Added 4 distinct badge styles: Flat, Solid, Soft Tint, and Outlined. * Improved hex-to-rgba converter for pastel list accents. #### 1.2.0 * Added dedicated top-level WordPress admin menu for Vivido. * Added interactive Callout Box Generator with live preview. * Added global settings for default border styles and corner radiuses. #### 1.0.0 * Initial release. ## 기초 * 버전 **1.4.1** * 최근 업데이트: **22시간 전** * 활성화된 설치 **10보다 적음** * 워드프레스 버전 ** 5.8 또는 그 이상 ** * 다음까지 시험됨: **7.1.2** * PHP 버전 ** 7.4 또는 그 이상 ** * 언어 * [English (US)](https://wordpress.org/plugins/vivido/) * 태그: * [callout box](https://ko.wordpress.org/plugins/tags/callout-box/)[code block](https://ko.wordpress.org/plugins/tags/code-block/) [icon list](https://ko.wordpress.org/plugins/tags/icon-list/)[info box](https://ko.wordpress.org/plugins/tags/info-box/) * [고급 보기](https://ko.wordpress.org/plugins/vivido/advanced/) ## 평점 아직 제출된 리뷰가 없습니다. [Your review](https://wordpress.org/support/plugin/vivido/reviews/#new-post) [모든 리뷰 보기](https://wordpress.org/support/plugin/vivido/reviews/) ## 기여자 * [ infyon ](https://profiles.wordpress.org/infyon/) ## 지원 할 말 있으신가요? 도움이 필요하신가요? [지원 포럼 보기](https://wordpress.org/support/plugin/vivido/) ## 기부 이 플러그인이 발전하도록 도우시겠습니까? [ 이 플러그인에 기부하기 ](https://infyon.com/infyon)