Page Builder Sandwich: レイアウトおよびデザインシステム

機能

• Flexbox および CSS Grid コンテナ — ビジュアルグリッドエディターを含む完全な flex および grid コントロールを備えたセクションとコンテナ: ドラッグして列と行を設定できます。
• 3つの組み込みブレークポイント — デスクトップ、タブレット、モバイル向けに個別に設定でき、リアルタイムでプレビュー可能です。
• テーマと共有されるグローバルカラーとフォント — テーマの設定 (theme.json) と相互に読み書きされるサイト全体のカラーとタイポグラフィにより、ビルダーとテーマが常に一致します。
• 要素間およびサイト間でのスタイルのコピー＆ペースト — 要素のスタイルやセクション全体をコピーして、別のページや別のウェブサイトに貼り付けることができます。
• パレットカラーのシェードと不透明度 (OKLCH) — カラーピッカー内で直接、パレットの任意の色を明るく、暗く、または透明に調整できます。OKLCH で調色されるため色相が忠実に保たれ、パレットカラーとのリンクを維持しつつ、古いブラウザ向けの単色フォールバックも備えています。
• スタイルビルダーの条件設定 (media、container、supports の各@-rules) — 印刷時、ダークカラー設定時、視覚効果の抑制時、またはマウスデバイス時のみ要素にスタイルを適用できます。開発者は pbsw_style_at_rules PHP フィルターを使用して独自の media、container、supports のプリセットを追加できます。
• カスタムブレークポイント (Pro) — 独自の画面サイズ (大型デスクトップ、小型スマートフォン、横向きタブレットなど) を追加できます。
• グローバルクラスと CSS 変数 (Pro) — プロ向けビルダーのようなクラスマネージャー: 一度スタイルを設定すればどこでも再利用でき、1か所で変更可能です。
• デザイントークン: 余白、角丸、シャドウのスケール (Pro) — サイト全体で一貫した間隔とスタイルのプリセットを提供します。
• 要素ごとおよびページごとのカスタム CSS (Pro) — 独自の CSS を記述したい方向けの、シンタックスハイライト付き機能です。
• ウェブサイトのダークモード (Pro) — サイトのカラーのライト版とダーク版を作成可能。訪問者は切り替えたり、デバイスの設定に合わせたりできます。
• ブランドキット (Pro) — ロゴ、カラー、フォント、ブランドのトーンを一度保存すれば、AI やテンプレートが自動的にそれらを使用します。
• グローバルクラスとデザイントークンのカテゴリー (Pro) — クラス、スケールステップ、変数を独自のカテゴリーにグループ化し、それらでリストを絞り込んだり、エディターでカテゴリー別にクラスやプリセットを選択したりできます。
• デザインシステムのインポートとエクスポート (Pro) — カテゴリー、グローバルクラス、変数、スケール、カスタムカラーを1つの JSON ファイルとしてダウンロードし、別のサイトにインポートできます。検証とバージョン管理が行われ、統合または置換が可能で、実際に書き込まれる前に変更内容をプレビューできます。

無料版または Pro 版

• (Pro) とマークされている機能には Pro ライセンスが必要です。 (Agency プラン)* には Agency プランが必要です。それ以外はすべて無料版に含まれています。