On this Page

Note:

The sections in this page has video tutorials in the bottom of the page. If you do not understand the written text and use the video as reference.

Overview

HTML Markup can be applied to both a Field and a Section inside Carbon Editor. HTML Markup utilizes Django template language. Using HTML markup gives you the ability to apply quick styles to your content without having to flesh out a theme file.

For example, say you just want Heading Fields to be H1 - you can easily do this with HTML markup without impacting the other fields.

HTML Markup uses Django's Template language:

Django's Template Language is designed for people who've used HTML before and other coding languages. It may look daunting but it's easy to pickup.

HTML Markup for Fields

To apply HTML Markup for a Field:

Ensure you're in the correct Organisation and Space
Click the drop-down of the Space and click Administer
Click Fields
Click on the drop-down on an existing field
Click on Edit HTML Markup
A live-text editor will appear where you can enter relevant HTML tags.
Enter a HTML Tag like <h1></h1>
Inside the tag enter {{content}} .This will apply the HTML tag to any content added into this field
Click Save

HTML Markup for Sections

Markup for sections is especially useful. A block of HTML Markup applied to a section can render logic and different outputs depending on what's been added. Below is an example of some HTML Markup that can be added to a Section:

Example of Section HTML Markup

<section class="section list-of-stuff">

    
Start of Page Section Type HTML markup:


<div class="carousel">
    <ul>
        {% for field in fields %}
            {% if field.field_type_slug != 'list-title' %}
            <li>
                <div class="carousel-item">
                    {% if field.field_type_slug == 'photo' %}
                        <div id="{{ field.uuid }}" class="field {{ field.field_type_slug }}">
                            <img src="{{ field.data }}" alt="This is a photo in the carousel" />
                        </div>
                    {% else %}
                        {{ field.render }}
                    {% endif %}
                </div>
            </li>
            {% endif %}
        {% endfor %}
    </ul>

    {% for field_group in field_groups %}
        {% for field in field_group.fields %}
            {% if field.field_type_slug == 'list-title' %}
            <div class="caption">
                {{ field.render }}
            </div>
            {% endif %}
        {% endfor %}
    {% endfor %}

</div>


End of Page Section Type HTML markup


</section>

Ensure you're in the correct Organisation and Space
Click the drop-down of the Space and click Administer
Click Page Sections
Click on the drop-down on an existing Section
Click on Edit HTML Markup
A live-text editor will appear where you can enter relevant HTML tags.
Enter a HTML Markup or templates detailed in Django Template Language.
Using tags and some logic, you can build a text file that spits out some altering outputs depending of the contents of the field
Click Save

Video Tutorial

Watch the video tutorial that follows the guide.

The video tutorial starts with the correct space in the organisation

HTML Markup for Fields

HTML Markup for Sections

Browser not supported