Shape Dividers
Bentuk dekoratif SVG di tepi section/container/block untuk transisi visual antar section.
Shape Divider adalah bentuk dekoratif (SVG) yang menempel di tepi sebuah section, container, atau block. Tujuannya: membuat transisi visual antar section yang lebih menarik — bukan cuma garis lurus horizontal, tapi gelombang, segitiga, zigzag, dll.
Cara pakai
Tambahkan field shapeDividers di top-level layout element (bukan di dalam style). Field-nya berupa array — bisa beberapa shape per element (misalnya wave di atas + tilt di bawah).
{
"type": "section",
"shapeDividers": [
{ "shape": "waves", "fill": "#ffffff", "height": "80px" }
],
"children": []
}
29 Preset Shape
Horizontal (menempel di tepi atas/bawah):
waves,wave,wave-brushtriangle,triangle-concave,triangle-convex,triangle-doubletilt,zigzag,stroke,stroke-2cloud,drops,grid-round,grid-square,round,square
Vertical (menempel di tepi kiri/kanan, semua di-prefix vertical-):
vertical-waves,vertical-wave,vertical-wave-brushvertical-triangle,vertical-triangle-double,vertical-tiltvertical-zigzag,vertical-stroke,vertical-stroke-2vertical-cloud,vertical-drops,vertical-pixels
Plus custom — paste SVG markup sendiri.
Field Reference
| Field | Type | Default | Keterangan |
|---|---|---|---|
shape | enum | (wajib) | Nama preset di atas, atau "custom" |
shapeCustom | string | — | Raw SVG markup (saat shape: "custom"). Disanitasi otomatis untuk XSS safety. |
fill | CSS color | currentColor | Warna fill |
height | CSS length | 80px | Tinggi shape |
width | CSS length | 100% | Lebar shape |
rotate | number (deg) | 0 | Rotasi |
flipHorizontal | boolean | false | Mirror sumbu X |
flipVertical | boolean | false | Mirror sumbu Y |
front | boolean | false | true = di atas konten, false = di belakang konten |
overflow | boolean | false | true = shape boleh keluar dari box element |
horizontalAlign | enum | — | flex-start | center | flex-end |
verticalAlign | enum | — | flex-start | center | flex-end |
top / right / bottom / left | CSS length | — | Override align via offset eksplisit |
Default behavior: kalau verticalAlign/top/bottom semua kosong, shape di-pin ke tepi bawah.
Use Case Umum
1. Hero-to-body transition — wave di bawah hero section:
{
"type": "section",
"shapeDividers": [{ "shape": "waves", "fill": "#ffffff", "height": "90px" }],
"style": { "desktop": { "background": { "color": "#0a1312" } } }
}
2. Dual divider — wave di atas + tilt di bawah:
{
"shapeDividers": [
{ "shape": "wave", "fill": "#0a1312", "height": "70px", "verticalAlign": "flex-start", "flipVertical": true },
{ "shape": "tilt", "fill": "#0a1312", "height": "80px" }
]
}
3. Custom SVG dari designer:
{
"shapeDividers": [
{
"shape": "custom",
"shapeCustom": "<svg viewBox='0 0 1200 100' preserveAspectRatio='none'><path d='M0,0 L1200,100 L0,100 Z'/></svg>",
"fill": "#1a1a1a"
}
]
}
Inspector UI
Buka tab Style → grup Shape Dividers (hanya muncul untuk section/container/block). Klik Add untuk menambah divider baru, lalu konfigurasi via dropdown shape + color picker + dimension fields. Beberapa divider? Reorder via tombol ↑/↓, hapus via 🗑.
Security
shapeCustom melewati sanitizer server-side sebelum di-render — menghapus <script>, event handler (onload, onclick, dll), dan referensi eksternal. Hanya tag visual yang lolos: path, polygon, g, rect, dll. Aman untuk input user.
Tips
- Pakai
fillyang match warna section berikutnya untuk transisi seamless. Kalau section berikutnya#ffffff, set dividerfill: "#ffffff". flipVertical: truepada shape yang default-nya di bawah membuat shape "muncul ke atas" — berguna untuk hero divider.- Untuk responsive: sementara satu nilai berlaku untuk semua device. Versi device-mode menyusul.