ナレッジベース

Page Builder Sandwich: レイアウトおよびデザインシステム、パート 1/2

Page Builder Sandwich がレイアウトとデザインシステムにもたらすもの、パート1 (全2回)、およびそのうち無料の機能。

機能概要

Flexbox および CSS Grid コンテナ — ビジュアルグリッドエディターを含む、完全な flex および grid コントロールを備えたセクションおよびコンテナ: ドラッグして列と行を設定できます。
3つの内蔵ブレークポイント — デスクトップ、タブレット、モバイル用に個別の設定を用意し、リアルタイムでプレビューできます。
テーマと共有されるグローバルカラーおよびフォント — テーマの設定 (theme.json) と相互に読み書きを行うサイト全体のカラーとタイポグラフィにより、ビルダーとテーマが常に一致します。
要素間およびサイト間でのスタイルのコピー＆ペースト — 要素のスタイルやセクション全体をコピーして、別のページや別のウェブサイトに貼り付けることができます。
パレットカラーのシェードと不透明度 (OKLCH) — カラーピッカー内でパレットカラーを直接、明るく、暗く、または透明にできます。OKLCH で混色されるため色相が忠実に保たれ、パレットカラーとのリンクも維持されつつ、古いブラウザ用の単色フォールバックも備わっています。
スタイルビルダーの条件 (media、container、supports at-rules) — 印刷時、ダークカラー設定時、視覚効果の抑制時、またはマウスデバイス上でのみ要素にスタイルを適用できます。開発者は pbsw_style_at_rules PHP フィルターを使用して独自の media、container、supports のプリセットを追加できます。
行や列を含むすべてのブロックの変形オプション — 画面サイズごとおよびホバー時に、任意のブロックを回転、拡大縮小、傾斜、移動できます。移動は右から左に記述する言語の読み取り方向に従います。
グループおよび反復可能ブロックのデフォルトアイテムスタイル — 行、セクション、アコーディオン、タブ内のすべてのアイテムのスタイルを、画面サイズごとおよびホバー時に一度に設定できます。アイテム独自の値が常に優先されます。
行とセクションの命名 — 設定から任意の行、セクション、コンテナにラベル (「料金設定」、「Hero」など) を付けることができます。ラベルはキャンバス内の行やレイヤーに表示されるため、長いページでも迷わず操作できます。ページ上に印刷されることはありません。