Skip to content
  • There are no suggestions because the search field is empty.

Custom HTML Sections (Collection 2.0)

A Custom HTML section lets you add your own markup to your layout. It’s perfect for adding buttons, banners, link lists, and call-to-action (CTA) areas inside your Home Page or My Account sections that point users to internal pages or external sites.

How to add a Custom HTML section 

  1. Open your layout (e.g., Collection 2.0 → Home Page or My Account).

    1. For Home Page, add a Custom HTML Section

    2. For My Account, choose Add under Custom Rows

  2. Select Modify HTML to open the HTML editor window.

  3. Copy and paste one of the provided HTML templates (or your own code) into the editor.
    - You can adapt it with custom text, links, or buttons as needed.

  4. Click Save, then check the Channel Preview to confirm the content appears correctly.

Templates

1. Simple Text Link (inline)

This is the most basic option. It turns a word or phrase into a clickable link.
  • Use it for: linking to another page (like your “About” or “Contact” page).
  • Example: “Read our statement of faith.”

<p>
  Looking for our statement of faith?
  <a href="https://example.org/faith" target="_blank" rel="noopener noreferrer">Read it here</a>.
</p>


2. Link List (clean, compact)

Creates a clean list of several text links stacked vertically.

  • Use it for: menus, resource lists, or quick navigation links.
  • Tip: Add or remove <li> lines for more or fewer links.

<ul style="list-style:none;padding:0;margin:0;">
  <li style="margin:8px 0;">
    <a href="/about" style="text-decoration:none;color:#0A6CF1;">About Us</a>
  </li>
  <li style="margin:8px 0;">
    <a href="/events" style="text-decoration:none;color:#0A6CF1;">Events</a>
  </li>
  <li style="margin:8px 0;">
    <a href="https://example.org/support" target="_blank" rel="noopener noreferrer"
       style="text-decoration:none;color:#0A6CF1;">Support</a>
  </li>
</ul>

 

3. Image Banner → Clickable Link

Shows a large image that acts as a clickable banner.

  • Use it for: promoting a featured series, event, or announcement.
  • Tip: Replace the src URL with your own image link.

<a href="/featured" style="display:block;">
  <img src="https://example.org/images/featured-banner.jpg"
       alt="Explore our featured series" style="width:100%;height:auto;border-radius:12px;">
</a>

 

4. CTA Strip (Full-Width Callout)

Adds a full-width colored bar with text on one side and a button on the other.

  • Use it for: announcements, featured messages, or big calls to action.
  • Tip: Adjust the gradient colors to match your site theme

<div style="padding:16px 20px;border-radius:12px;background:linear-gradient(90deg,#0A6CF1,#5B9CFF);
            color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;">
  <div style="font-weight:600;">New here? Start with our most-watched sessions.</div>
  <a href="/collections/most-watched"
     style="padding:10px 16px;border-radius:8px;background:#111827;color:#fff;text-decoration:none;font-weight:600;">
     View Top Sessions
  </a>
</div>

 

5. Card Link (Image, Title, Description)

Shows a clickable “card” with an image, headline, and short text.

  • Use it for: featured content previews (like a sermon series or event).
  • Tip: Replace the image and text to match your content; users can click anywhere on the card.

<a href="/series/leadership" style="display:block;text-decoration:none;color:inherit;">
  <div style="border:1px solid #E5E7EB;border-radius:12px;overflow:hidden;">
    <img src="https://example.org/images/leadership.jpg" alt="Leadership Series"
         style="width:100%;height:auto;display:block;">
    <div style="padding:12px 14px;">
      <h3 style="margin:0 0 6px 0;font-size:1.1rem;">Leadership Series</h3>
      <p style="margin:0;color:#6B7280;">Practical sessions for teams and leaders.</p>
    </div>
  </div>
</a>

 

6. Quick Copy Block (Mixed Links)

Combines multiple buttons with different colors or actions in one flexible row.

  • Use it for: quick-access buttons at the top or bottom of a page.
  • Tip: Adjust colors to create a visual hierarchy (like red for “Live” and blue for “Search”).

<div style="display:flex;gap:14px;flex-wrap:wrap;align-items:center;">  <a href="/live"     style="display:inline-block;padding:10px 14px;border-radius:8px;background:#DC2626;color:#fff;            text-decoration:none;font-weight:600;">Watch Live</a>  <a href="/search"     style="display:inline-block;padding:10px 14px;border-radius:8px;border:2px solid #0A6CF1; color:#0A6CF1;            text-decoration:none;font-weight:600;background:transparent;">Search Library</a>  <a href="https://example.org/donate" target="_blank" rel="noopener noreferrer"     style="display:inline-block;padding:10px 14px;border-radius:8px;background:#16A34A;color:#fff;            text-decoration:none;font-weight:600;">Donate</a></div>

 

<-- Return to Collection 2.0 Overview