Quick Start Partial Templates for Bootstrap5

Quick Start Snippet for A Partial Template

Instructions:

1. Create a new partial template
   In your project, create a new partial template file where you want this section to live.
2. Copy the snippet
   Copy the code block below into your new partial template file.
3. Update the section ID prefix
   Locate this line:
   {%- id section_id = prefix:'Related_Services_Section_' -%}
   Change Related_Services_Section_ to a unique, descriptive name (e.g., Hero_Banner_Section_, Team_Section_).
4. Replace the placeholder field name
   Find this condition:
   {% if entity.REPLACE.on %}
   Replace REPLACE with the correct field name from your custom fields (for example, show_section).
5. (Optional) Add custom fields
   If you’re using custom fields, refer to the JSON structure in the Quick Start Snippet for A Partial Template (Custom Fields) section below. Ensure the FieldID (like "show_section") matches the field name you used in the snippet (entity.show_section.on).

{%- var section_class = section_class | default:"py-7 text-bg-light" -%}
{%- id section_id = prefix:'Related_Services_Section_' -%}

{% if entity.REPLACE.on %}
<section id="{{section_id}}" class="{{section_class}}">
    <div class="container">
        
    </div>
</section>
{% endif %}

{%- var image_preset = image_preset | default:"1200x675-crop" -%}
<img src="{%- image_url = image | preset:image_preset -%}" 
     alt="{{ image.alt.value | escape }}" 
     class="img-fluid" 
     style="object-fit: cover;" 
     loading="lazy">

Quick Start Snippet for A Partial Template (Custom Fields)

[
    {
        "Type": "group",
        "Label": "Section",
        "Collapsible": true,
        "Collapsed": false,
        "Fields": [
            {
                "Type": "toggle",
                "FieldID": "show_section",
                "Label": "Show Section?",
                "OnLabel": "On",
                "OnValue": "On",
                "OnColor": "green",
                "OffLabel": "Off",
                "OffValue": "Off",
                "OffColor": "gray",
                "DefaultValue": true
            },
            {
                "Type": "group",
                "Label": "Section Settings",
                "Condition": {
                    "FieldID": "show_section",
                    "Type": "eq",
                    "Value": "On"
                },
                "Collapsible": true,
                "Collapsed": false,
                "Fields": []
            }
        ]
    }
]