Category: blog

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.