デザインキャンバスには、で作成されたサイトの視覚的な出力が表示されます Blocs。 これにより、ユーザーはページをリアルタイムで操作できるため、要素の選択、移動、コンテンツの編集を行うことができます。 デザインキャンバスは、メインアプリケーションウィンドウの中央にあり、左右のサイドバーに挟まれています。
選択マーカー
デザインキャンバス上で要素をクリックすると、青いマーカーが表示されます。これは選択マーカーと呼ばれます。 選択したオブジェクトのタイプによっては、このマーカーには、ユーザーが選択した要素のサイズと位置を調整できる視覚的なスタイリングコントロールが含まれている場合もあります。 これらを次のように呼びます フリーハンドコントロール、あなたはそれらについてもっと読むことができます こちら.
キャンバス設定
デザインキャンバスには、ユーザーが現在開いているWebサイトの視覚的なレンダリングを制御できるようにするさまざまなオプションがあります。 これらのオプションは、 左下の デザインキャンバスのコーナー。
ワイヤーフレームモード
ワイヤーフレームモードでは、レイアウト以外の重要なスタイルがすべて削除され、ユーザーはページのコンテンツと構造に集中できます。
アウトラインモード
アウトラインモードでは、ページ上のすべての要素の境界領域の周りに薄い青い長方形が表示され、ユーザーは基礎となる構造を表示できます。
ダークサイトモード
ダークサイトモードは、の色を反転します + ボタン、暗い背景でそれらをより区別できるようにします。 また、OSダークモードをシミュレートし、 暗いテーマ 現在のページのbodyタグへのクラス。
表示追加 Bloc ボタン
の可視性を切り替えます + 追加に使用されるボタン Blocs ページに。このオプションは、キーボード ショートカットを使用してオンとオフを切り替えることもできます。 ⌥+⌘+4.
表示追加 Bric ボタン
の可視性を切り替えます + 追加に使用されるボタン Brics ページに。このオプションは、キーボード ショートカットを使用してオンとオフを切り替えることもできます。 ⌥+⌘+5.
改行タグを表示する
改行タグ デフォルトでは表示されません。このオプションを使用すると、ユーザーはデザインキャンバス上での視覚的なレンダリングを切り替えることができます。
視覚障害フィルター
このオプションを使用すると、さまざまなタイプの色覚異常フィルターから選択でき、視覚障害のある人にサイトがどのように表示されるかを確認できます。
デザインキャンバスのレンダリング設定はアプリ内でのみ有効であり、プレビューまたはエクスポートした後はサイトに影響を与えません。これらは単にアプリ内の視覚的なデザイン支援です。