sumnima – tiny website builder – CMS Template Creation Guide

Overview

This CMS allows you to create editable templates with drag-and-drop image support, text editing, background customization, and video embedding.

1. Editable Text Elements

Any text-containing element becomes automatically editable in EDIT mode:

html

<!-- Headings -->
<h1>Editable Heading</h1>
<h2>Editable Subheading</h2>

<!-- Paragraphs -->
<p>This text will be editable.</p>

<!-- Spans -->
<span>Editable inline text</span>

<!-- List items -->
<ul>
    <li>Editable list item</li>
    <li>Another editable item</li>
</ul>

<!-- Buttons -->
<button>Editable Button Text</button>

<!-- Divs with text only -->
<div>This div text is editable</div>

<!-- Links -->
<a href="#">Editable Link Text</a>

What happens in EDIT mode:

Text becomes directly editable
Shows dashed outline on hover
Focus shows solid outline
Changes auto-save after 2.5 seconds

2. Editable Background Images

Use `data-editable-bg="true"` attribute:

html

<!-- Section with editable background -->
<section class="hero" data-editable-bg="true" style="background-image: url(initial.jpg)">
    <h1>Hero Content</h1>
</section>

<!-- Div with editable background -->
<div class="content__bg" data-editable-bg="true" style="background-image: url(bg.jpg)">
    <p>Content here</p>
</div>

<!-- Grid item with background -->
<div class="grid__item-img" data-editable-bg="true" style="background-image: url(image.jpg)">
</div>

In BG mode:

Click element → Opens Media Panel
Select image → Updates background
Drag from desktop → Updates background
Use color/gradient pickers

CSS Classes that auto-work in BG mode (no attribute needed):

.content__bg
.grid__item-img
.cover
.thumb

3. Editable SVG Images (with clip-path)

Use `data-editable-image="true"` on `<image>` tag:

html

<svg class="image-clip" width="500px" height="750px" viewBox="0 0 500 750">
    <defs>
        <clipPath id="shape1">
            <path d="M 0 0 L 500 0 C 331 608 485 551 500 750 L 0 750 Z"></path>
        </clipPath>
    </defs>
    <image data-editable-image="true" 
           clip-path="url(#shape1)" 
           xlink:href="https://picsum.photos/1200/800?random=1" 
           x="0" y="0" 
           width="500" height="750">
    </image>
</svg>

In EDIT mode:

Click SVG → Opens Media Panel
Select image → Updates xlink:href
Drag from desktop → Updates SVG
Grabber appears on hover for moving

4. Regular Images (no SVG)

Standard `<img>` tags:

html

<img src="image.jpg" alt="Description">

In EDIT mode:

Click → Opens file upload
Drag from desktop → Replaces image
Grabber for moving

5. Video Elements

Auto-embed from YouTube/Vimeo URLs:

html

<!-- Videos added via CMS will appear as: -->
<div class="cms-video-res" 
     data-video-url="https://youtu.be/xxx" 
     data-video-id="xxx" 
     data-video-platform="youtube">
    <iframe src="https://www.youtube.com/embed/xxx" 
            allowfullscreen></iframe>
</div>

Video Features:

16:9 aspect ratio maintained
Alignment: Left, Center, Right
Edit URL via click
Gallery stores all videos

6. Spacer Elements

Add spacing between elements:

html

<hr class="cms-spacer">

In EDIT mode:

Hover shows dashed outline
Can be moved/deleted
Adds 1rem spacing

7. Right-Click Menu Items

Elements that can be added via right-click:

Option	Creates
Heading	`<h2>New Text</h2>`
Paragraph	`<p>New Text</p>`
List	`<ul><li>New Item</li></ul>`
Image	Opens Media Panel
Video	Opens URL prompt
Button	`<button>Button</button>`
Space	`<hr class="cms-spacer">`

8. Complete Template Example

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Template</title>
    <style>
        /* Your styles here */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .content__bg {
            padding: 100px 20px;
        }
        .grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        .grid__item-img {
            aspect-ratio: 1;
            background-size: cover;
            background-position: center;
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <!-- Editable Hero Section -->
    <section class="hero" data-editable-bg="true" 
             style="background-image: url(https://picsum.photos/1920/1080?random=1)">
        <div>
            <h1>Welcome to My Site</h1>
            <p>This text is fully editable</p>
            <button>Get Started</button>
        </div>
    </section>

    <!-- Content Section with Background -->
    <section class="content__bg" data-editable-bg="true"
             style="background-image: url(https://picsum.photos/1920/1080?random=2)">
        <h2>About Us</h2>
        <p>Edit this text to describe your business.</p>
    </section>

    <!-- Image Grid -->
    <div class="grid">
        <div class="grid__item-img" data-editable-bg="true"
             style="background-image: url(https://picsum.photos/800/800?random=3)">
        </div>
        <div class="grid__item-img" data-editable-bg="true"
             style="background-image: url(https://picsum.photos/800/800?random=4)">
        </div>
    </div>

    <!-- SVG with Clip-path -->
    <svg class="image-clip" width="500px" height="500px" viewBox="0 0 500 500">
        <defs>
            <clipPath id="circle">
                <circle cx="250" cy="250" r="250"></circle>
            </clipPath>
        </defs>
        <image data-editable-image="true" 
               clip-path="url(#circle)" 
               xlink:href="https://picsum.photos/500/500?random=5" 
               x="0" y="0" width="500" height="500">
        </image>
    </svg>

    <!-- Regular Image -->
    <img src="https://picsum.photos/800/600?random=6" alt="Editable image">

    <!-- Footer -->
    <footer>
        <p>© 2024 My Site. All rights reserved.</p>
    </footer>
</body>
</html>

9. CMS Toolbar Modes

Mode	Function
EDIT	Edit text, click images/SVG to change
CLONE	Click element to duplicate
MOVE	Drag elements to reorder
BG	Click backgrounds to change (opens Media Panel)
DEL	Click element to delete
MEDIA	Open media manager
VIDEO	Open video gallery
UNDO	Undo last action
EXIT	Exit edit mode

10. Quick Reference Table

Feature	Attribute/Class	Click Action	Drop Action
Text	(automatic)	Edit inline	–
BG Image	`data-editable-bg="true"`	Open Media Panel	Replace BG
BG Image	`.content__bg`, `.grid__item-img`	Open Media Panel	Replace BG
SVG Image	`data-editable-image="true"`	Open Media Panel	Replace SVG
Regular Image	`<img>`	File upload	Replace image
Video	`.cms-video-res`	Edit URL	–

11. Tips

Always add data-editable-bg="true" to elements that should have changeable backgrounds
Use semantic HTML – headings, paragraphs, lists auto-become editable
SVG images need data-editable-image="true" on the <image> tag
BG mode only affects elements with the attribute or specific classes
Videos maintain 16:9 ratio – ensure container has space
Right-click anywhere for quick element insertion

Overview

1. Editable Text Elements

Any text-containing element becomes automatically editable in EDIT mode:

2. Editable Background Images

Use data-editable-bg="true" attribute:

3. Editable SVG Images (with clip-path)

Use data-editable-image="true" on <image> tag:

4. Regular Images (no SVG)

Standard <img> tags:

5. Video Elements

Auto-embed from YouTube/Vimeo URLs:

6. Spacer Elements

Add spacing between elements:

7. Right-Click Menu Items

Elements that can be added via right-click:

8. Complete Template Example

9. CMS Toolbar Modes

10. Quick Reference Table

11. Tips

Use `data-editable-bg="true"` attribute:

Use `data-editable-image="true"` on `<image>` tag:

Standard `<img>` tags: