Get Started - Tutorial
Configure a Section
Prerequisites
Before you continue, make sure you have already created and synced your theme.json
with our CLI. This step is explained in section 4 of this tutorial
Configuring a Section's visual editor is done in two parts:
- Set
data-pf
attributes on Sections - Dynamically add class names for Section Designer
1. Set data-pf
attributes
You configure a section by adding a JSON object containing a sectionId
and a title
in a data-pf
attribute to the HTML element you want to assign as a Section.
<div class="sc-outer">
<div
class="sc-inner"
data-pf='{"sectionId":"1", "title": "Grid Section"}'
>
<!-- Insert Component(s) -->
</div>
</div>
2. Get new styles by using our Helpers
The last step is to retrieve new styles server-side
from our Runtime API
. You can do so by using our Runtime API or by using our Helpers Package
that will do the hard work for you.
We wrote a complete guide to help you implement our helpers in your setup. Please read this article
Developers Ressources
- Learn more about
data-pf
attributes - How to install and use our Helpers
- Install our Browser Extension to inspect
data-pf
attributes