Notionでは1ページ内で1セクションとなってしまいますが、Wraptasでは同じページ内のコンテンツを自由にセクション分けできる独自機能があります。
指定のブロックがある部分から、次の指定ブロックがある部分までが一つのセクションになります。
選択出来る項目は
になります。
見出しの場合は見出しの上で区切って、区切り線の場合は区切り線を配置した場所からセクションになります。(区切り線はコンテンツ内では非表示になります。)
セクションは次のようなdomにわけられます。
<section class="separatedSection">
<div class="separatedSection__contentsWrapper">
<h2>見出しサンプル</h2>
<p>本文サンプル</p>
</div>
</section>
.page {
background-color: #f0f7ff;
}
.container {
max-width: 100%;
padding: 0;
}
.titleSection__contentsWrapper,
.separatedSection__contentsWrapper,
.contentsFooterSection__contentsWrapper {
max-width: 800px;
margin: 0 auto;
padding: 1rem;
}
.separatedSection:nth-child(even),
.contentsFooterSection {
background-color: #fff;
}
.notion-full-width .titleSection__contentsWrapper,
.notion-full-width .separatedSection__contentsWrapper,
.notion-full-width .contentsFooterSection__contentsWrapper {
max-width: 100%;
}
サンプルとして Heading 2 でセクションを分けて色分けします。
導入し、偶数奇数でセクションごとの背景色を変えるとこのページのような表示になります。