لوحة التحرير
توجد لوحة التحرير على الجانب الأيمن من المحرر، وتعرض عناصر التحكم لما تحدده. وعندما لا تحدد أي عنصر، تتيح لك تنسيق الصفحة نفسها.
اضغط على ⌘E / Ctrl+E لإظهارها أو إخفائها. عندما تكون مخفية، انقر على السهم عند الحافة اليمنى للنافذة لإظهارها مجددًا. لا تظهر اللوحة أثناء فتح الإعدادات أو البيانات أو محرر الكود.
كل تغيير تجريه هنا يُطبَّق مباشرة في كود موقعك، وتتحدث مساحة التصميم فورًا.
فصل اللوحة
اسحب المقبض المنقّط أعلى اللوحة (اسحب للفصل) لجعلها عائمة فوق مساحة التصميم، ثم انقلها إلى المكان المناسب لك. اسحب حافتها السفلية لزيادة ارتفاعها أو تقليله.
لتثبيتها مجددًا، اسحبها إلى الحافة اليمنى للنافذة. يظهر شريط مميز يوضح موضع تثبيتها (أفلِت عند الحافة اليمنى للتثبيت). يتذكر المحرر ما إذا كانت اللوحة عائمة والموضع الذي تركتها فيه.
أنماط الصفحة
عندما لا تحدد أي عنصر، تعرض اللوحة أنماط الصفحة بأكملها: الخلفية وتنسيق الخطوط والتباعد والتأثيرات والانتقالات ومتقدم. يضبط التباعد الحشوة الداخلية للصفحة.
تطابق القيم ما تراه، حتى عندما يأتي لون الصفحة من الأنماط العامة لموقعك بدلًا من الصفحة نفسها.
تبويب النمط
حدد عنصرًا في مساحة التصميم أو في لوحة الطبقات، وستعرض اللوحة تبويبين: النمط والخصائص. تتذكر اللوحة آخر تبويب استخدمته.
يثبّت صف الأزرار في الأعلى العنصر ذا الموضع المطلق أو الثابت أو اللاصق إلى اليمين أو الوسط أو اليسار، وإلى الأعلى أو المنتصف أو الأسفل. تكون هذه الأزرار معطّلة للعناصر الأخرى. وتحتها أقسام يمكنك فتحها وإغلاقها، وتتذكر اللوحة الأقسام التي تتركها مفتوحة.
إذا حددت عدة عناصر، تُطبَّق تغييرات النمط عليها جميعًا.
التخطيط
اختر وضع العرض: كتلة أو مرن أو شبكة أو بلا عرض. تتغير الخيارات أدناه حسب اختيارك:
- كتلة: الفائض وعائم (مع مسح عند التعويم).
- مرن: الاتجاه وضبط ومحاذاة والتفاف والفجوة.
- شبكة: الأعمدة والصفوف والفجوة.
يضبط الموضع نوع التموضع: عادي أو نسبي أو مطلق أو ثابت أو لاصق. يضيف الموضعان المطلق والثابت حقلًا لكل جانب: الأعلى واليمين والأسفل واليسار.
الحجم
استخدم الأبعاد للتبديل بين العرض والارتفاع. اضبط العرض وأدنى عرض وأقصى عرض (أو ما يقابلها للارتفاع) من قيم جاهزة مثل تلقائي وكامل والشاشة والكسور، أو أدخل قيمتك الخاصة. يتحكم الفائض فيما يحدث عندما لا تتسع المساحة للمحتوى.
التباعد
بدّل بين الحشوة (المساحة داخل العنصر) والهامش (المساحة خارجه)، ثم اضبط كل جانب في المربع.
تنسيق الخطوط
العائلة والحجم والوزن والارتفاع (ارتفاع السطر) والتباعد (تباعد الأحرف) واللون ومحاذاة والنمط (مائل) والتحويل (أحرف كبيرة أو صغيرة أو تكبير الحرف الأول من كل كلمة) والزخرفة (تسطير أو خط يتوسط النص).
الخلفية والحدود والمزيد
- الخلفية: اختر اللون أو الصورة كنوع. تدعم أداة اختيار اللون الألوان الموحدة والتدرجات. وللصورة إعدادات الموضع والحجم وتكرار وإرفاق.
- الحد: اللون والعرض ونصف القطر (لكل الزوايا أو لكل زاوية على حدة) والنمط (متصل أو متقطع أو منقّط) ومحدد، لكل الجوانب أو لجانب واحد.
- التأثيرات: العتامة والظل ولونه وتمويه والسطوع والتباين والتشبع وتدرج اللون وتصفية (تدرج رمادي أو بني داكن أو عكس الألوان).
- الانتقالات: الخاصية والمدة والتوقيت والتأخير، لتحريك التغييرات بسلاسة، مثل تأثيرات تمرير المؤشر.
- المؤشر: شكل المؤشر فوق العنصر.
- متقدم: أي فئات تنسيق أخرى على العنصر. اكتب فئة واضغط على Enter لإضافتها، أو أزل فئة من القائمة.
تبويب الخصائص
يحتوي تبويب الخصائص على محتوى العنصر وإعداداته. لكل عنصر قسما عام وإمكانية الوصول، تليهما أقسام خاصة بنوعه.
- عام: وسم العنصر (مثلًا، تغيير
h2إلىh3) والمعرّف وتلميح وسمات البيانات. انقر على إضافة سمة لإضافة سمة. - إمكانية الوصول: التسمية وموصوف بواسطة والدور وترتيب التنقل والظهور لقارئات الشاشة.
تشمل الأقسام الخاصة بعناصر معينة ما يلي:
| القسم | ما يمكنك ضبطه |
|---|---|
| نص | النص نفسه، إلى جانب الخط والحجم والوزن والمحاذاة وارتفاع السطر وتباعد الأحرف واللون. يعيد تحسين بالذكاء الاصطناعي صياغة النص لك. |
| زر | التسمية، النوع (زر، إرسال، إعادة تعيين)، معطّل، الاسم، القيمة |
| الرابط | عنوان URL، الفتح في (التبويب نفسه، تبويب جديد)، العلاقة، تنزيل |
| الصورة | المصدر، النص البديل (اتركه فارغًا للصورة الزخرفية)، جارٍ التحميل |
| إدخال | النوع، الاسم، النص التوضيحي، القيمة، حدود مثل الأدنى والأقصى وأقصى طول ونمط التحقق، ومطلوب ومعطّل وللقراءة فقط |
| SVG | الأيقونة، العرض، الارتفاع، تعبئة، الحد الخارجي، عرض الحد الخارجي |
ولمناطق النص وقوائم الاختيار والنماذج والقوائم والجداول والفيديوهات والصوت وصور الخلفية أقسام خاصة بها أيضًا، وكذلك تضمينات YouTube وVimeo وGoogle Maps وCalendly وTypeform وStripe وPayPal.
النص الذي يأتي من الكود
بعض النصوص في الصفحة لا تُكتب فيها مباشرة. بل تأتي من قائمة أو خاصية أو ملف بيانات، مثل عنوان بطاقة ضمن صف من البطاقات. يخبرك قسم نص عندما يكون الأمر كذلك:
- يأتي هذا النص من بيانات أو خاصية. يؤدي الحفظ إلى تحديثه هناك. اكتب كالمعتاد. تتغير قيمة هذا العنصر فقط في موضع تعريفها.
- مشترك بين جميع عناصر هذه القائمة. النص بين {الأقواس} هو كود. يؤدي التغيير هنا إلى تغيير كل العناصر. اترك الأجزاء بين الأقواس كما هي.
- يحدده الكود متبوعًا بالكود. يُحسب النص بواسطة الكود، لذا يكون الحقل للقراءة فقط. اطلب من الذكاء الاصطناعي تغييره.
- يحتوي على عناصر متداخلة. حددها لتحريرها بشكل منفصل. انقر على العنصر الداخلي في مساحة التصميم لتحرير نصه.
نسخ الأنماط ولصقها
انسخ نمط عنصر وطبّقه على عنصر آخر:
- حدد العنصر الذي يعجبك واضغط على
⌘⌥C/Ctrl+Alt+C. - حدد العنصر الذي تريد تغييره واضغط على
⌘⌥V/Ctrl+Alt+V.
يتوفر نسخ النمط ولصق النمط أيضًا في قائمة النقر بزر الماوس الأيمن.
أثناء عمل الذكاء الاصطناعي
تعرض اللوحة الذكاء الاصطناعي يعدّل وتعطّل عناصر التحكم مؤقتًا أثناء تعديل الذكاء الاصطناعي لموقعك. وتصبح متاحة فور انتهائه.