Categories
blog cms officialstupid

Sumnima CMS Templating Guide

This is your Sumnima CMS Templating Guide. Use these tags and classes in your index.html to make the editor work perfectly.

1. Drag & Drop (Moving Blocks)

To make a block moveable, use these standard tags. The editor looks for them automatically:

  • Big Blocks: <section>, <article>, <header>, <footer>
  • Small Blocks: Use class card or cell.
    • Example: <div class="card">...</div> or <div class="cell">...</div>
  • Tip: Keep elements you want to swap as “siblings” (inside the same parent div).

2. Text Editing

The editor automatically makes these tags editable if they contain text:

  • <h1>, <h2>, <h3>, <h4>
  • <p>, <span>, <a>
  • <button>
  • <li> (Supports Enter for new bullet points)
  • Note: Don’t put a div inside a p tag, or the editor might get confused.

3. Images (Click to Swap)

  • Standard: All <img> tags are automatically clickable to upload a new photo.
  • Theory Template: SVG <image> tags are also supported.

4. Background Photos (BG Mode)

To change the background image of a section or div, add this attribute:

  • data-editable-bg="true"
  • Example:
    <section style="background-image: url('img.jpg')" data-editable-bg="true">
  • How to edit: Switch to BG mode in the top bar, then click the section.

5. Footers & Menus (Columns)

To make footer columns or menu items reorderable, use the .cell class:

  • Example:
 <footer style="display:flex">
       <div class="cell">Column 1 Content</div>
       <div class="cell">Column 2 Content</div>
</footer>

🚀 The “Perfect Block” Example

Copy this structure for a clean, fully editable section:

<section data-editable-bg="true" style="background-image: url('bg.jpg')">
    <div class="container">
        <h1>Editable Title</h1>
        <p>This is a paragraph you can edit or right-click to add a list.</p>

        <div style="display:flex">
            <div class="card">
                <img src="thumb1.jpg">
                <h3>Feature 1</h3>
            </div>
            <div class="card">
                <img src="thumb2.jpg">
                <h3>Feature 2</h3>
            </div>
        </div>
    </div>
</section>

Cheat Sheet Summary:

  • Move: Use <section>, .card, or .cell.
  • Edit: Use <h1>, <p>, <li>.
  • BG: Use data-editable-bg="true".
  • Add: Right-click any existing text/image to insert a new element below it.