Paragraphs - creating page sections

Paragraphs are HTML content blocks that make up the page’s content.

Paragraph Structure

Priority and Order

Paragraphs are sorted in descending order by priority:

Priority 100 → Hero (top of the page)
Priority 80  → Features
Priority 60  → Pricing
Priority 40  → Testimonials
Priority 20  → Contact Form
Priority 10  → Footer CTA (bottom of the page)

Sample Sections

Hero Section

<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-950 to-emerald-950">
  <div class="text-center px-6">
    <h1 class="text-5xl font-bold text-white mb-4">{{ title }}</h1>
    <p class="text-xl text-slate-300 mb-8">{{ tagline }}</p>
    <a href="#contact" class="bg-emerald-500 text-white px-8 py-3 rounded-full">
      Get Started
    </a>
  </div>
</section>

Features Grid

<section class="py-20 bg-slate-900">
  <div class="max-w-6xl mx-auto px-6">
    <h2 class="text-3xl font-bold text-center text-white mb-12">Features</h2>
    <div class="grid md:grid-cols-3 gap-8">
      <div class="bg-slate-800 p-6 rounded-xl">
        <div class="text-emerald-400 text-4xl mb-4">📊</div>
        <h3 class="text-xl font-semibold text-white mb-2">Monitoring</h3>
        <p class="text-slate-400">Real-time data tracking</p>
      </div>
      <!-- more cards... -->
    </div>
  </div>
</section>

Contact Form (with Sugester 2 Forms)

<section id="contact" class="py-20 bg-slate-950">
  <div class="max-w-md mx-auto px-6">
    <h2 class="text-3xl font-bold text-center text-white mb-8">Contact</h2>
    <div data-form="contact_form_id"></div>
  </div>
</section>
<script src="https://domena.com/form/embed.js"></script>

Page Assignment

Option 1: One paragraph = one page

Provide page_id when creating:

{
  "paragraph": {
    "name": "Hero Dashboard PL",
    "page_id": 1030,
    "content": "..."
  }
}

Option 2: One paragraph = multiple pages

Use the same paragraph on multiple pages via the UI (Assignments).

Variables in Paragraphs

Paragraphs have access to page variables:

<h1>{{ title }}</h1>
<p>{{ tagline }}</p>
<a href="mailto:{{ contact_email }}">{{ contact_label }}</a>

Organization

Naming Convention

[Section] [Page/Language]

Hero Dashboard PL
Hero Dashboard EN
Features MyCompany
Contact Form Universal

Shared Paragraphs

For common elements (e.g. footer, testimonials), create one paragraph and assign it to multiple pages.

Styling with Tailwind

The CMS loads Tailwind from a CDN, so you can use all classes:

<div class="bg-gradient-to-r from-purple-600 to-purple-800 
            text-white p-8 rounded-2xl shadow-xl 
            hover:shadow-2xl transition-shadow">
  ...
</div>

Debugging

If the paragraph does not display:

1. Check if it is assigned to the page
2. Check priority (it may be too low/high)
3. Check if the layout has {% for p in paragraphs %}{{ p }}{% endfor %}