プレビュー(上のグループ → 斜めのグループ → 下のグループ)
出力のCSSをそのまま当てて、画面いっぱいの幅で境目の角度を確かめます。
出力(製品版でコピーできます)
製品版では、ここで作った見た目のまま、グループブロックの「追加CSS」に貼るCSSをコピーできます。
1. 上のグループ
上と色をつなぐ時だけ。
体験版のため、コードは表示されません。製品版で実際のコードを確認・コピーできます。
体験版のため、コピーはできません
2. 斜めのグループ(本体)
斜めにしたい全幅グループの「追加CSS」へ。
体験版のため、コードは表示されません。製品版で実際のコードを確認・コピーできます。
体験版のため、コピーはできません
3. 下のグループ
下と色をつなぐ時だけ。
体験版のため、コードは表示されません。製品版で実際のコードを確認・コピーできます。
体験版のため、コピーはできません
貼る場所(ここだけ間違えやすい)
追加CSSクラス 触らない
has-st-margin-bottom is-style-st-wide-background …
追加CSS ここへ貼る
background: linear-gradient(171deg, #f1f3f5 0 54%, #ffffff 54% 100%);
margin-top: 0;
margin-bottom: 0;
padding-top: 80px;
padding-bottom: 64px;
margin-top: 0;
margin-bottom: 0;
padding-top: 80px;
padding-bottom: 64px;
1 斜めにしたいグループブロックを選び、「ワイドにする」をON(全幅)にします。
2 右側の「高度な設定」を開き、「追加CSS」の欄に「2. 斜めのグループ」のCSSを貼ります。「追加CSSクラス」の欄には貼りません(クラス名の欄にCSSを入れると、エラーになって背景が出ません)。
3 プレビューで背景が斜めになったら、上のグループ・下のグループにも同じ手順で「1」「3」のCSSを貼ると、色がつながります。
隙間が出たら グループとグループの間に空の段落やスペーサーが無いか確かめます。出力には上下の外側余白を0にする指定が入っています。