編集パネル
編集パネルはエディターの右側にあり、選択した要素の設定が表示されます。何も選択していないときは、ページ全体のスタイルを設定できます。
⌘E / Ctrl+E で表示と非表示を切り替えます。非表示のときは、ウィンドウの右端にある矢印をクリックすると再表示できます。設定、データ、コードエディターを開いている間は、パネルは表示されません。
ここでの変更はサイトのコードに直接反映され、キャンバスもすぐに更新されます。
パネルのフローティング表示
パネル上部の点状のハンドル（ドラッグして切り離す）をドラッグすると、キャンバス上にフローティング表示できます。そのまま使いやすい場所に移動できます。下端をドラッグすると、高さを調整できます。
再びドッキングするには、ウィンドウの右端までドラッグします。配置される場所が帯状にハイライトされます（右端にドロップしてドッキング）。エディターは、パネルのフローティング状態と配置場所を記憶します。
ページのスタイル
何も選択していないときは、ページ全体のスタイルがパネルに表示されます。背景、タイポグラフィ、間隔、エフェクト、トランジション、詳細設定を設定できます。間隔では、ページの内側の余白を設定します。
ページの色がページ自体ではなくサイト全体のスタイルで指定されている場合も、表示される値は実際の見た目と一致します。
スタイルタブ
キャンバスまたはレイヤーパネルで要素を選択すると、パネルにスタイルとプロパティの2つのタブが表示されます。パネルは最後に使ったタブを記憶します。
上部に並ぶボタンで、絶対配置、固定配置、粘着配置の要素を、左右方向の左・中央・右と、上下方向の上・中央・下に配置できます。それ以外の要素では、ボタンは無効になります。その下には開閉できるセクションがあり、パネルは開いたセクションを記憶します。
複数の要素を選択すると、スタイルの変更がすべての選択要素に適用されます。
レイアウト
表示で、ブロック、フレックス、グリッド、非表示のいずれかを選びます。選択に応じて、その下の項目が変わります。
- ブロック：オーバーフローとフロート（フロート時はクリアも表示）。
- フレックス：方向、両端揃え、配置、折り返し、間隔。
- グリッド：列、行、間隔。
位置では、通常配置、相対配置、絶対配置、固定配置、粘着配置を設定します。絶対配置と固定配置では、上・右・下・左それぞれの入力欄が追加されます。
サイズ
サイズで幅と高さを切り替えます。幅、最小幅、最大幅（または高さの各項目）は、自動、全幅、画面幅、分数などのプリセットから選ぶか、値を直接入力して設定できます。オーバーフローでは、コンテンツが収まらない場合の動作を指定します。
間隔
内側の余白（要素の内側の空間）と外側の余白（要素の外側の空間）を切り替え、ボックス内で各辺の値を設定します。
タイポグラフィ
フォント、サイズ、太さ、高さ（行の高さ）、間隔（文字間隔）、色、配置、スタイル（斜体）、変形（大文字、小文字、各単語の先頭を大文字）、装飾（下線、取り消し線）。
背景、枠線、その他
- 背景：種類として色または画像を選びます。カラーピッカーでは単色とグラデーションを設定できます。画像には位置、サイズ、繰り返し、添付の設定があります。
- 枠線：すべての辺または1つの辺に対して、色、幅、角丸（すべての角または各角）、スタイル（実線、破線、点線）、アウトラインを設定します。
- エフェクト：不透明度、影とその色、ぼかし、明るさ、コントラスト、彩度、色相、フィルター（グレースケール、セピア、反転）。
- トランジション：プロパティ、長さ、タイミング、遅延を設定し、ホバー時の変化などを滑らかにアニメーションさせます。
- カーソル：要素に重ねたときのポインターの形です。
- 詳細設定：要素に適用するその他のスタイルクラスです。クラスを入力して Enter を押すと追加でき、一覧から削除することもできます。
プロパティタブ
プロパティタブには、要素の内容と設定が表示されます。すべての要素に一般とアクセシビリティがあり、その後に要素の種類に応じたセクションが続きます。
- 一般：要素のタグ（たとえば
h2をh3に変更）、ID、ツールチップ、データ属性。属性を追加をクリックすると、属性を追加できます。 - アクセシビリティ：スクリーンリーダー向けのラベル、説明元、ロール、タブインデックス、公開範囲。
要素の種類に応じて、次のようなセクションがあります。
| セクション | 設定できる内容 |
|---|---|
| テキスト | テキスト自体に加え、フォント、サイズ、太さ、配置、行の高さ、文字間隔、色。AI で改善でテキストを書き直せます。 |
| ボタン | ラベル、種類（ボタン、送信、リセット）、無効、名前、値 |
| リンク | URL、開き方（同じタブ、新しいタブ）、リレーション、ダウンロード |
| 画像 | ソース、代替テキスト（装飾用の画像では空欄にします）、読み込み中 |
| 入力 | 種類、名前、プレースホルダー、値、最小・最大・最大文字数・パターンなどの制限、必須、無効、読み取り専用 |
| SVG | アイコン、幅、高さ、塗りつぶし、線、線の太さ |
テキストエリア、選択欄、フォーム、リスト、表、動画、音声、背景画像にも専用のセクションがあります。YouTube、Vimeo、Google Maps、Calendly、Typeform、Stripe、PayPal の埋め込みにもあります。
コードから表示されるテキスト
ページ内のテキストには、ページに直接入力されていないものもあります。たとえば、並んだカードの1つのタイトルが、リスト、プロパティ、データファイルから取得されている場合です。その場合、テキストセクションに次のように表示されます。
- このテキストはデータまたはプロパティから取得されています。保存すると取得元が更新されます。 通常どおり入力できます。定義されている場所で、この項目の値だけが変更されます。
- このリスト内のすべての項目で共有されています。{braces} 内のテキストはコードです。 ここで変更すると、すべての項目が変わります。波括弧内の部分はそのままにしてください。
- コードで設定の後にコードが表示されます。テキストはコードで生成されるため、入力欄は読み取り専用です。変更するには AI に依頼してください。
- 入れ子の要素が含まれています。個別に編集するには、対象の要素を選択してください。 キャンバス上の内側の要素をクリックすると、そのテキストを編集できます。
スタイルのコピーと貼り付け
要素のスタイルをコピーして、別の要素に適用できます。
- コピー元の要素を選択し、
⌘⌥C/Ctrl+Alt+Cを押します。 - 変更する要素を選択し、
⌘⌥V/Ctrl+Alt+Vを押します。
右クリックメニューにもスタイルをコピーとスタイルを貼り付けがあります。
AI の作業中
AI がサイトを変更している間、パネルには AI が編集中と表示され、操作が一時的に無効になります。AI の作業が終わると、すぐに操作できるようになります。