Plugin Details
Home / Plug-in market / Custom HTML Design Module
Custom HTML Design Module
Custom HTML Design Module
Overview
Custom HTML is a plugin that adds a custom content module to the admin "Design → Decoration" builder. You can add an optional title and write any HTML snippet directly (supports inline styles, <style> and <script> tags). This is ideal for announcements, campaign banners, embed codes, custom forms, third-party components, and more. The module features a full-screen HTML editor for a more comfortable coding experience.
Key Features
✍️ Freely Write HTML Content
| Feature | Description |
|---|---|
| Any HTML | Supports complete HTML page snippets, including <style> and <script> |
| Multi-language support | Each language can have its own independent HTML content |
| Source code editing | Full-screen expandable editor with monospace font for better code readability |
| Content limit提示 | Automatically detects database field capacity limits with real-time character counting |
📐 Module Configuration Options
| Option | Description |
|---|---|
| Title | Optional module title (multi-language support) |
| Module width | Narrow (container) / Wide (container-fluid) / Full width (w-100) |
🎨 Smart Style Scoping
| Feature | Description |
|---|---|
| Style isolation | User-written <style> automatically gets a scope prefix – only affects the current module, does not pollute theme styles |
| Page declaration stripping | Automatically strips background colors and overflow declarations from body/html – prevents gray background boxes or content cropping |
| Viewport unit conversion | vw units automatically convert to cqw (container query width) – allows "full-width" content to be controlled by module width |
| Media query preservation | @media and @supports rules are fully preserved and properly scoped |
Technical Features
-
✅ Fully customizable : No restrictions on HTML content – from simple text to complex embedded code
-
✅ Smart CSS scoping : User styles are automatically limited to the current module – does not interfere with theme or other modules
-
✅ Full HTML support : Paste complete HTML pages (including
<head>/<body>) – automatically extracts body content and scopes styles -
✅ Container query adaptation :
vwunits automatically convert tocqw– ensures full-width content is truly controlled by the module width container -
✅ Database capacity awareness : Real-time content length提示 (settings.value field capacity) – prevents save truncation
-
✅ Independent multi-language : Each language can have different HTML content
-
✅ Full-screen editor : Popup source code editor – enlarge to view and edit large amounts of code
-
✅ Any theme compatible : Styles are completely independent – unaffected by theme changes
-
✅ Full design editor support : Real-time preview – displays placeholder when content is empty
Use Cases
-
Activity / promotional banners
-
Announcements / notification bars
-
Embed third-party code (forms, maps, social media plugins, etc.)
-
Custom ad placements
-
Brand story / rich text content
-
Timer / countdown components
-
Any custom requirements not covered by system modules
