الأنماط هي ميزة تتيح لك تعيين الجماليات والتخطيط العام لموقعك على مستوى شامل، بدلاً من تعديل الكتل أو الصفحات الفردية. يتم تضمينها في قوالب الكتل وتتطلب ووردبريس 5.9 أو أعلى[cite: 1].
يمكنك تعيين الألوان، والخطوط، والتخطيط، والتباعد، والمزيد عبر الموقع بأكمله، مما يمنح موقعك مظهرًا متناسقًا يعرض علامتك التجارية[cite: 1].
يمكنك أيضًا تعديل المظهر الافتراضي للكتل تبسيطاً لمظهر وإحساس موقعك - أضف ألوانك الفريدة لإنشاء كتلة زر تحمل علامتك التجارية، أو اضبط كتلة العنوان بحجم الخط المفضل لديك[cite: 1].
كيف تعمل الأنماط
الأنماط التي تقوم بتعيينها من داخل واجهة الأنماط تؤثر على موقعك بأكمله. على سبيل المثال، إذا قمت بتغيير لون الخلفية هنا، فسيتغير لون خلفية جميع مقالاتك، وصفحاتك، وقوالبك[cite: 1].
في لوحة الأنماط، ستجد الأنماط والإعدادات الافتراضية المقدمة من القالب الخاص بك وتلك التي تأتي مع ووردبريس[cite: 1].
يمكنك تجاوز هذه الإعدادات باختياراتك الخاصة من خلال الأنماط. على سبيل المثال، يمكنك إضافة ألوانك المخصصة إلى لوحة الألوان، وتغيير أبعاد التخطيط، والمزيد[cite: 1].
الشريط الجانبي للأنماط
يمكنك أيضًا تخصيص مظهر كتل محددة للموقع بأكمله. على سبيل المثال، يمكنك اختيار لون خلفية وتعيين حجم الخط وارتفاع السطر لجميع كتل الاقتباسات على موقعك، باستخدام الأنماط > الكتل[cite: 1].
كيفية استخدام لوحة الأنماط
للوصول إلى هذه الميزة، ستحتاج إلى تثبيت وتنشيط قالب كتل وأن تكون تستخدم ووردبريس 5.9 أو أعلى[cite: 1].
انتقل إلى المظهر > المحرر. حدد أيقونة الدائرة المظللة نصفياً في الزاوية العلوية اليمنى من الشاشة، أعلى الشريط الجانبي لإعدادات الكتل، للوصول إلى لوحة الأنماط. أيقونة الأنماط متاحة في محرر الموقع، وعند تحرير القالب أو أجزاء القالب[cite: 1].
في لوحة الأنماط، سترى أقسامًا لكل من الخطوط، والألوان، والتخطيط. أي تغييرات يتم إجراؤها من هنا ستؤثر على الموقع بأكمله[cite: 1].
ستجد أيضًا قسمًا للـكتل. النقر على قسم الكتل سيعرض لك قائمة بجميع الكتل. يمكنك تحديد أي نوع كتلة وتخصيص مظهر تلك الكتلة الخاصة عبر الموقع بأكمله[cite: 1].
دليل الترحيب بالأنماط
عند فتح لوحة الأنماط لأول مرة، سيتم توجيهك إلى مربع حوار دليل الترحيب. يمكنك النقر خلال الدليل باستخدام رابطي التالي والسابق في الأسفل أو إغلاق مربع الحوار بالنقر فوق أيقونة X في الزاوية العلوية اليمنى من مربع الحوار[cite: 1].
دليل الترحيب
إذا كنت تريد الوصول إلى دليل الترحيب في المستقبل، يمكنك العثور عليه بالنقر فوق أيقونة النقاط الرأسية الثلاث في الزاوية العلوية اليمنى وتحديد دليل الترحيب[cite: 1].
تنويعات الأنماط
تنويعات الأنماط هي ميزة جديدة لـ قوالب الكتل تم تقديمها في ووردبريس 6.0[cite: 1].
باستخدام تنويعات الأنماط هذه، يتم تقديم إصدارات بديلة من قالب الكتل الخاص بك مع مجموعات مختلفة من الألوان، والخطوط، والطباعة، والتباعد، وإعدادات الكتل، والمزيد. يمكنك بسهولة تبديل تنويعات الأنماط وتغيير مظهر وإحساس موقعك دون تغيير القالب الخاص بك[cite: 1].
- في لوحة الأنماط، يمكنك العثور على لقطة شاشة لتنويع النمط الذي يستخدمه موقعك حاليًا[cite: 1].
- حدد تصفح الأنماط في أسفل لقطة الشاشة لاستكشاف تنويعات الأنماط المختلفة المتاحة مع قالب الكتل الخاص بك. من الخيارات المتاحة، يمكنك اختيار مجموعة أنماط مختلفة ومعاينة شكل موقعك فورًا مع تنويع النمط هذا في المحرر[cite: 1].
- انقر فوق أيقونة السهم الأيسر للعودة إلى لوحة الأنماط[cite: 1].
فيديو يوضح كيفية استخدام تنويعات الأنماط
تنويعات أنماط الألوان والخطوط
تنويعات الألوان والخطوط هي مجموعات فرعية من نظام تنويعات الأنماط العامة الحالي والتي تم تقديمها في ووردبريس 6.6. تقتصر تنويعات الألوان والخطوط في نطاقها -كما تدل أسماؤها- على الألوان والخطوط فقط[cite: 1].
عند توفرها، تظهر هذه التنويعات كخيارات جديدة في اللوحة الجانبية للمظهر > المحرر > الأنماط وفي أماكن أخرى[cite: 1]:
فيديو يوضح كيفية التبديل بين تنويعات الألوان والخطوط
الخطوط
يتيح لك هذا القسم إدارة إعدادات الخطوط المختلفة للعناصر المختلفة - النص، والروابط، والعناوين، والأزرار - للموقع بأكمله[cite: 1].
- انقر فوق الخطوط لفتح لوحة الخطوط. حدد العنصر الذي تريد تخصيصه، وسيتم فتح لوحة الخطوط الخاصة بهذا العنصر[cite: 1].
خيارات الخطوط المعدة مسبقًا متاحة الآن في واجهة الأنماط. توفر هذه الإعدادات المسبقة، التي يحددها القالب، مجموعة منسقة من أحجام الخطوط، وارتفاعات الأسطر، والقيم النصية الأخرى التي تساعد في الحفاظ على الاتساق عبر موقعك[cite: 1].
- يمكنك تغيير إعدادات الخطوط، بما في ذلك نوع الخط، وحجم الخط، والمظهر، وارتفاع السطر، وتزيين النص. أثناء اختيارك للخيارات، يمكنك رؤية معاينة لشكلها[cite: 1].
- أثناء محاولتك تغيير نوع الخط، يعرض كل خيار في القائمة المنسدلة معاينة للخط[cite: 1].
- يمكنك اختيار حجم خط من الخيارات المعدة مسبقًا: S، وM، وL، وXL، وXXL، أو تحديد حجم مخصص باستخدام وحدات مثل px، أو em، أو rem[cite: 1].
فيديو يوضح كيفية تغيير حجم الخط
- يمكنك تغيير إعدادات الخطوط لعناصر العناوين من
H1إلىH6[cite: 1].
فيديو يوضح كيفية استخدام إعدادات الخطوط في الأنماط
- يمكنك تخصيص إعدادات الخطوط لعناصر العناوين من H1 إلى H6، بما في ذلك[cite: 1]:
- عائلة الخط: اختر من بين مجموعة من الخطوط المتاحة، وكل منها يحتوي على معاينة حية[cite: 1].
- حجم الخط: اختر من الأحجام المعدة مسبقًا (S، وM، وL، وXL، وXXL) أو حدد قيمًا ووحدات مخصصة[cite: 1].
- نمط الخط: اختر من الافتراضي (الموروث من إعدادات الخطوط العامة)، أو عريض (Regular)، أو غامق (Bold)، أو مائل (Italic)، أو غامق مائل (Bold Italic)[cite: 1].
- ارتفاع السطر وتباعد الحروف: اضبط كلاً منهما بوحدات قابلة للتخصيص[cite: 1].
- تزيين النص: قم تطبيق أنماط مثل بلا (None)، أو تحته خط (Underline)، أو يتوسطه خط (Strikethrough)[cite: 1].
- اتجاه النص وحالة الأحرف: قم بتعديل اتجاه النص وتحويل حالة الأحرف حسب الحاجة[cite: 1].
الإعدادات المسبقة لحجم الخط
توفر الإعدادات المسبقة لحجم الخط مجموعة من خيارات الحجم المحددة مسبقًا والتي يمكن تطبيقها بشكل متسق عبر الكتل والعناصر. يتم تعريف هذه الإعدادات المسبقة بواسطة القالب وتظهر في عناصر تحكم الخطوط كخيارات مسماة مثل صغير (Small)، ومتوسط (Medium)، وكبير (Large)، وكبير جداً (Extra Large)، وكبير جداً جداً (Extra Extra Large)، مما يسهل على المستخدمين تحديد أحجام الخطوط المناسبة دون إدخال القيم يدويًا[cite: 1].
يمكنك تعديل الإعداد المسبق لحجم الخط بالنقر فوق الخيار الذي تريد تغييره. في هذا المثال، سنقوم بضبط الإعداد المسبق المسمى صغير (Small). سترى معاينة حية إلى جانب خيارات تعيين حجم مخصص باستخدام وحدات مختلفة مثل px، وem، وrem، وvw، وvh. يمكنك استخدام شريط التمرير لضبط القيمة أو إدخال حجم محدد يدويًا[cite: 1].
ملاحظة: سيتم تعطيل إدخال الحجم القياسي إذا قمت بتمكين القيم المرنة المخصصة[cite: 1].
عند استخدام القيم المرنة المخصصة، يمكنك تحديد الحد الأدنى والحد الأقصى للحجم، مع نفس نطاق الوحدات المدعومة مثل خيار الحجم القياسي[cite: 1].
الألوان
يتيح لك هذا القسم إدارة لوحات الألوان واللون الافتراضي للعناصر العامة المختلفة على الموقع. يتضمن ذلك لون خلفية موقعك، وألوان النصوص، والروابط، والعناوين، والأزرار[cite: 1].
- انقر فوق الألوان لفتح لوحة اللون. في الأعلى، ستجد لوحة الألوان المستخدمة بواسطة تنويع النمط لقالب الكتل النشط الخاص بك. ستجد أيضًا قائمة العناصر التي يمكن تخصيص لونها العالمي الافتراضي من خلال لوحة إعدادات الألوان[cite: 1].
ملاحظة: في حال لم يكن قالبك يحتوي على أي لوحات ألوان، سترى زر إضافة ألوان مخصصة. انقر عليه للبدء في إنشاء لوحتك المخصصة[cite: 1].
تخصيص الألوان في لوحة القالب
- من لوحة إعدادات اللون، انقر فوق لوحة الألوان (Palette) لفتح لوحة اللوحات. هنا يمكنك تعيين خيارات الألوان المتاحة افتراضيًا للكتل في جميع أنحاء موقع الويب الخاص بك. يمكن استخدام ألوان القالب (Theme) ضمن علامة التبويب صلب (Solid) في جميع إعدادات قالبك. يمكن استخدام الألوان الافتراضية (Default) في الكتل التي تستخدمها في صفحاتك ومقالاتك[cite: 1].
- انقر فوق أيقونة النقاط الرأسية الثلاث في الزاوية العلوية اليمنى من القالب أو الافتراضي وحدد تعديل الألوان لتغيير لون كل دائرة[cite: 1].
لن يتم عرض الألوان الافتراضية إذا كان قالبك يستبعدها بشكل محدد[cite: 1].
- ستظهر قائمة تتضمن جميع الألوان الموجودة حاليًا في تلك اللوحة. انقر فوق أحدهما لتحريره[cite: 1].
- يمكنك إما اختيار لون من منتقي الألوان أو إدخال قيم ألوان HEX أو RGB أو HSL بناءً على علامتك التجارية. انقر فوق مربعي المستطيل بجوار شريط تمرير الألوان لنسخ قيم ألوان HEX أو RGB أو HSL[cite: 1].
- بمجرد الانتهاء من اختيار الألوان، يمكنك النقر فوق تم في الزاوية العلوية اليمنى لحفظ خيارات الألوان[cite: 1].
- للتراجع عن التغييرات التي أجريتها، انقر فوق أيقونة النقاط الرأسية الثلاث وحدد إعادة تعيين الألوان. سيؤدي هذا إلى إعادة تعيين لوحة الألوان إلى خيارات تنويع النمط الأصلية للقالب[cite: 1].
فيديو يوضح كيفية تخصيص لوحة ألوان القالب
إضافة لون مخصص إلى لوحة القالب
يمكنك أيضًا إنشاء لوحة مخصصة من قسم المخصص (Custom) في لوحة لوحة الألوان (Palette)[cite: 1].
- انقر فوق أيقونة + في الزاوية العلوية اليمنى في قسم المخصص لإضافة لون[cite: 1].
- يمكنك إعطاء اسم للون الجديد[cite: 1].
- يمكنك إما اختيار لون من منتقي الألوان أو إدخال قيم ألوان HEX أو RGB أو HSL للون الجديد[cite: 1].
- انقر فوق أيقونة – على يمين اللون لإزالة هذا اللون من اللوحة المخصصة[cite: 1].
- انقر فوق تم بمجرد الانتهاء من إضافة الألوان المخصصة[cite: 1].
- انقر فوق أيقونة النقاط الرأسية الثلاث في الزاوية العلوية اليمنى وحدد إزالة كل الألوان لإزالة الألوان من اللوحة[cite: 1].
فيديو يوضح كيفية إضافة ألوان مخصصة إلى لوحة الألوان
لوحة الألوان المعدة مسبقًا
ابتداءً من ووردبريس 6.7، تقدم واجهة الألوان لوحة ألوان جديدة معدة مسبقًا توفر مجموعة منسقة من الألوان الافتراضية المصممة لتكمل تصميم قالبك. تعمل هذه الإعدادات المسبقة كأساس متسق لتطبيق اللون عبر الكتل والعناصر العامة، مما يساعد في الحفاظ على التناغم البصري وإمكانية الوصول في جميع أنحاء موقعك[cite: 1].
تخصيص تدرجات القالب
تفتح لوحة لوحة الألوان (Palette) على علامة التبويب صلب (Solid) افتراضيًا. يمكنك النقر فوق علامة التبويب تدرج (Gradient) لإضافة تدرجات إلى قالبك. من لوحة لوحة الألوان، يمكنك تعديل التدرجات الافتراضية التي جاءت مع القالب أو إضافة تدرجات مخصصة[cite: 1].
- انقر فوق أيقونة النقاط الرأسية الثلاث في الزاوية العلوية اليمنى في القسم الافتراضي وانقر فوق تعديل التدرجات للبدء في تخصيص التدرجات في القالب[cite: 1].
- ستظهر قائمة بجميع التدرجات. انقر فوق أي منها لتعديله[cite: 1].
لن يتم عرض التدرجات الافتراضية إذا كان قالبك يستبعدها بشكل محدد[cite: 1].
- سيظهر شريط تمرير يوضح نقطتي اللون اللتين تتكون منهما التدرج[cite: 1].
- يمكنك النقر فوق أي من نقطتي اللون لعرض منتقي الألوان لتغيير قيمة اللون. يمكنك إما اختيار لون من منتقي الألوان أو إدخال قيم ألوان HEX أو RGB أو HSL[cite: 1].
- يمكنك إضافة نقاط ألوان إضافية إذا أردت بالنقر فوق أيقونة + التي تظهر عند تحويم الماوس فوق شريط تمرير التدرج[cite: 1].
- تحت النوع (Type)، اختر من بين خطّي (Linear) (ينتقل في خط مستقيم) أو دائري (Radial) (ينتقل في دائرة). يمكنك أيضًا تعديل زاوية التدرج الخاص بك[cite: 1].
- بمجرد أن تكون راضيًا عن اختياراتك للألوان الخاصة بالتدرج، انقر فوق تم في الزاوية العلوية اليمنى[cite: 1].
- ل العودة إلى الألوان التي جاءت مع القالب، انقر فوق أيقونة النقاط الرأسية الثلاث في الزاوية العلوية اليمنى وانقر فوق إعادة تعيين التدرج[cite: 1].
فيديو يوضح كيفية تخصيص تدرجات القالب
إضافة تدرج مخصص
يمكنك إضافة تدرجات مخصصة من قسم المخصص (Custom) في علامة التبويب تدرج (Gradient)[cite: 1].
- انقر فوق أيقونة + في الزاوية العلوية اليمنى لإضافة تدرج جديد[cite: 1].
- انقر فوق التدرج في القائمة لتحديد نقطتي اللون، وإضافة نقاط ألوان إضافية، وتحديد النوع والزاوية للتدرج المخصص[cite: 1].
- يمكنك تغيير اسم التدرج لجعهله أكثر سهولة في الفهم[cite: 1].
- انقر فوق أيقونة – بجوار التدرج في القائمة لحذف تدرج مخصص[cite: 1].
- انقر فوق تم بمجرد أن تكون راضيًا عن التدرجات المخصصة التي أنشأتها[cite: 1].
- انقر فوق أيقونة النقاط الرأسية الثلاث في الزاوية العلوية اليمنى وحدد إزالة جميع التدرجات لحذف جميع التدرجات المخصصة بنقرة واحدة[cite: 1].
فيديو يوضح كيفية إضافة تدرج مخصص
تخصيص لون العناصر
من لوحة الألوان، تحت العناصر (Elements)، يمكنك تغيير لون خلفية موقعك، والنصوص، والروابط، والعناوين، والأزرار[cite: 1].
- انقر فوق العنصر الذي تريد تحريره لفتح لوحة جديدة تحتوي على خيارات الألوان لهذا العنصر[cite: 1].
- بينما تقوم بإجراء التغييرات، سترى تصميم موقعك يتحدث على اليسار[cite: 1].
- يمكنك النقر فوق رابط مسح (Clear) في الزاوية العلوية اليمنى في لوحة العنصر لمسح اختيارات الألوان التي قمت بها لهذا العنصر[cite: 1].
- بالنسبة لـ الخلفية (Background)، يمكنك تعيين لون صلب أو تدرج[cite: 1].
فيديو يوضح كيفية تغيير لون خلفية الموقع
- بالنسبة لـ النص (Text)، يمكنك تعيين لون افتراضي سيتم استخدامه في جميع أنحاء الموقع. يمكنك إما اختيار لون من منتقي الألوان أو إدخال قيم ألوان HEX أو RGB أو HSL للون الجديد[cite: 1].
فيديو يوضح كيفية تغيير لون نص الموقع
- بالنسبة لـ الروابط (Links)، يمكنك تعيين اللون الافتراضي للروابط عبر الموقع. يمكنك أيضًا تعيين حالة التحويم (hover state) للروابط[cite: 1].
فيديو يوضح كيفية تغيير لون الرابط وحالة التحويم
- بالنسبة لـ العناوين (Headings)، حدد مستوى العنوان -
H1، وH2، وH3، وH4، وH5، وH6وبعد ذلك يمكنك تعيين اللون الافتراضي لهذا المستوى عبر الموقع. يمكنك أيضًا تعيين لون الخلفية لمستوى العنوان المحدد إلى لون صلب أو تدرج. اختيار الكل (All) في علامة تبويب مستوى العنوان سيجعل التغييرات لجميع مستويات العناوين مرة واحدة[cite: 1].
فيديو يوضح كيفية تغيير النص والخلفية لمستويات العناوين
- بالنسبة لـ الأزرار (Buttons)، يمكنك تعيين النص الافتراضي ولون الخلفية للأزرار عبر الموقع[cite: 1].
فيديو يوضح كيفية تغيير النص والخلفية للأزرار
التخطيط
يتيح لك هذا القسم تعيين عرض منطقة المحتوى الرئيسية لموقعك عالمياً[cite: 1].
يمكنك تعيين عرض المحتوى (content) وعرض العريض (wide) بوحدات PX، و%، وEM، وREM، وVW، وVH. سيكون عرض المحتوى المحدد هنا هو العرض الافتراضي للكتل عندما يتم ضبط المحاذاة (Align) على بلا (None) في شريط أدوات الكتل. سيكون العرض العريض المحدد هنا هو عرض الكتل عندما يتم ضبط المحاذاة (Align) على عرض عريض (Wide width) في شريط أدوات الكتل[cite: 1].
لإعادة تعيين قيم المحتوى والعريض، انقر فوق أيقونة النقاط الرأسية الثلاث وحدد حجم المحتوى أو الحجم العريض، وسيتم التراجع عن التغييرات التي أجريتها[cite: 1].
يمكنك أيضًا تعيين الحشو (Padding) أو المساحة الفارغة حول موقع الويب الخاص بك من لوحة التخطيط[cite: 1].
- يمكنك تعيين الحشو على الجوانب الأربعة: الأعلى، واليمين، والأسفل، واليسار[cite: 1].
- بشكل افتراضي، يكون الحشو مقفلاً، مما يعني أنه عندما تقوم بضبط قيمة الحشو، فإنها تنطبق على الجوانب الأربعة. إذا نقرت فوق أيقونة الرابط، فسيؤدي ذلك إلى إلغاء ربط الجوانب، ويمكنك تعيين الحشو على كل جانب على حدة[cite: 1].
الحشو مرتبط
يمكن تعيين الحشو بوحدات PX، و%، وEM، وREM، وVW، وVH[cite: 1].
- يمكنك إضافة قيم إلى مربع النص أو استخدام شريط التمرير لضبط القيم الخاصة بـ الحشو[cite: 1].
مضمنة في تجربة الأنماط قيم تباعد معدة مسبقًا للحشو. يمكن لكاتب القالب الخاص بك تعيين قيم أساسية للتباعد، وعندما تستخدم شريط التمرير للإعداد المسبق للحشو في الأنماط، يمكنك إنشاء تباعد متسق عبر العناصر داخل الموقع[cite: 1].
- النقر فوق أيقونة شريط التمرير الأسود في الزاوية اليمنى (بجوار أيقونة الرابط) سيظهر شريط التمرير للإعداد المسبق لمسافة الحشو[cite: 1].
- لإعادة تعيين قيم الحشو، انقر فوق أيقونة النقاط الرأسية الثلاث وحدد الحشو، وسيتم التراجع عن التغييرات التي أجريتها[cite: 1].
فيديو يوضح كيفية تعيين الحشو في الأنماط
في لوحة التخطيط، يمكنك أيضًا تعيين تباعد الكتل (Block spacing)، وهو التباعد الرأسي بين الكتل[cite: 1].
- يمكن تعيين تباعد الكتل بوحدات PX، و%، وEM، وREM، وVW، وVH[cite: 1].
- يمكنك إضافة قيم إلى مربع النص أو استخدام شريط التمرير لضبط قيم تباعد الكتل[cite: 1].
مشابهًا للحشو، يأتي ووردبريس مع إرشادات تباعد معدة مسبقًا يمكن لكاتب القالب الخاص بك تعيين قيم أساسية لها، وعندما تستخدم شريط التمرير للإعداد المسبق لتباعد الكتل في الأنماط، يمكنك إنشاء تباعد متسق بين الكتل[cite: 1].
- النقر فوق أيقونة شريط التمرير الأسود في الزاوية اليمنى (بجوار أيقونة الرابط) سيظهر شريط التمرير للإعداد المسبق لتباعد الكتل[cite: 1].
- لإعادة تعيين قيم تباعد الكتل، انقر فوق أيقونة النقاط الرأسية الثلاث، وحدد تباعد الكتل، وسيتم التراجع عن التغييرات التي أجريتها[cite: 1].
فيديو يوضح كيفية استخدام تباعد الكتل في الأنماط
الخلفية
يتيح لك قسم الخلفية في الأنماط تحميل وتطبيق صورة خلفية على موقعك[cite: 1].
إضافة صورة خلفية للموقع
الكتل
في لوحة الكتل، سترى قائمة بجميع الكتل التي يمكن تخصيصها للموقع بأكمله. يمكنك أيضًا البحث عن كتلة باسمها في مربع البحث. انقر فوق كتلة من القائمة لرؤية الخيارات المتاحة لتلك الكتلة[cite: 1].
التغييرات التي تجريها على مظاهر الكتل في لوحة الأنماط تؤثر على كل كتلة من هذا النوع ليس لها تخصيصات فردية. على سبيل المثال، إذا قمت بتغيير لون كتلة زر واحدة على صفحتك الرئيسية، فسيبقى هذا اللون، بينما ستتبع الأزرار الأخرى على الموقع أنماطك. إذا كنت ترغب في تحديث جميع كتل الأزرار في موقعك لتتطابق، انقر فوق خيارات متقدمة > تطبيق عالمياً من كتلة الزر، واختر الإعدادات التي ترغب في تطبيقها على مستوى الموقع[cite: 1].
بينما تقوم بإجراء التغييرات، اعتبارًا من ووردبريس 6.2، سترى معاينة حية لتأثير تلك التغييرات التي تقوم بها، كما هو موضح أدناه[cite: 1]:
تحتوي كل كتلة على مجموعتها الخاصة من الخيارات للتخصيص. على سبيل المثال، يمكنك تخصيص الحدود، ونصف القطر، واللون المزدوج (duotone)، وما إلى ذلك لـ كتلة الصورة أو تغيير الحشوات، والهوامش، والألوان، والخطوط لـ كتلة العنوان[cite: 1].
إعدادات الهامش للكتل
الحشو (Padding) هو المساحة بين محتوى الكتلة وحدودها، بينما الهامش (Margin) هو المساحة خارج حدود الكتلة[cite: 1].
تحتوي الكتل التالية على عناصر تحكم الهامش للأعلى (Top)، واليمين (Right)، والأسفل (Bottom)، واليسار (Left) في قسم الكتل تحت التخطيطات (Layouts)[cite: 1].
- فقرة (Paragraph)
- عنوان (Heading)
- معرض (Gallery)
- قائمة (List)
- الأرشيفات (Archives)
- صوت (Audio)
- قائمة التصنيفات (Categories List)
- الوسائط والنص (Media & Text)
- أيقونات اجتماعية (Social Icons)
- جدول (Table)
- سحابة الوسوم (Tag Cloud)
- شعر (Poetry - سابقاً Verse)
- فيديو (Video)
- شعار الموقع (Site Logo)
- عنوان الموقع (Site Title)
- شعار الموقع الفرعي (Site Tagline)
- رمز تعبيري/صورة رمزية (Avatar)
- عنوان المقال (Post Title)
- مقتطف المقال (Post Excerpt)
- الصورة البارزة للمقال (Post Featured image)
- تاريخ المقال (Post Date)
- كاتب المقال (Post Author)
- كاتب التعليق (Comment Author)
- تاريخ التعليق (Comment Date)
- رابط تحرير التعليق (Comment Edit Link)
- رابط الرد على التعليق (Comment Reply Link)
- عنوان التعليق (Comment Title)
- وصف المصطلح (Term Description)
- عنوان الاستعلام (Query Title)
- سيرة كاتب المقال (Post Author Biography)
تحتوي الكتل التالية على عنصر تحكم الهامش للـ أعلى (Top) والأسفل (Bottom) فقط في قسم الكتل تحت التخطيطات (Layouts)[cite: 1].
- أزرار (Buttons)
- كود (Code)
- غلاف (Cover)
- مجموعة (Group)
- أعمدة (Columns)
- فاصل (Separator)
- مباعد (Spacer)
- قراءة المزيد (Read More)
بشكل افتراضي، يكون الهامش مقفلاً، مما يعني أنه عندما تقوم بضبط قيمة الهامش، فإنها تنطبق على جميع الجوانب. إذا نقرت فوق أيقونة الرابط، فسيؤدي ذلك إلى إلغاء ربط الجوانب، ويمكنك تعيين الهامش على كل جانب على حدة[cite: 1].
يمكن لكاتب القالب الخاص بك تعيين قيم أساسية للتباعد، وعندما تستخدم شريط التمرير للإعداد المسبق للهامش في الأنماط، يمكنك إنشاء تباعد متسق عبر العناصر داخل الموقع[cite: 1].
النقر فوق أيقونة شريط التمرير في الزاوية اليمنى (بجوار أيقونة الرابط) سيحول عناصر تحكم الهامش من شريط التمرير المعد مسبقًا إلى عرض مربع النص. يمكنك إضافة قيم إلى مربع النص أو استخدام شريط التمرير لضبط القيم الخاصة بـ الهامش. يمكن تعيين الهامش بوحدات PX، و%، وEM، وREM، وVW، وVH[cite: 1].
لإعادة تعيين قيم الهامش، انقر فوق أيقونة النقاط الرأسية الثلاث وحدد الهامش، وسيتم التراجع عن التغييرات التي أجريتها[cite: 1].
فيديو يوضح كيفية استخدام عناصر تحكم الهامش
إعدادات الحدود ونصف القطر للكتل
تحتوي الكتل التالية على عنصر تحكم الحدود (Border) ونصف القطر (Radius) في قسم الكتل تحت التخطيطات (Layouts)[cite: 1].
- صورة (Image)
- كود (Code)
- أعمدة (Columns)
- مجموعة (Group)
- اقتباس بارز (Pullquote)
- بحث (Search)
- رمز تعبيري/صورة رمزية (Avatar)
- الصورة البارزة للمقال (Post Featured Image)
- قراءة المزيد (Read More)
- عنوان التعليق (Comment Title)
باستخدام عناصر تحكم الحدود، يمكنك تعيين الحدود حول الكتلة. يمكنك اختيار لون الحدود من منتقي الألوان. يمكنك تعيين عرض الحدود بوحدات PX، أو %، أو EM، أو REM، أو VW، أو VH عن طريق إدخال العرض في مربع النص أو باستخدام شريط التمرير لضبط القيم[cite: 1].
بشكل افتراضي، يكون عرض الحدود مقفلاً، مما يعني أنه عندما تقوم بضبط القيمة، فإنها تنطبق على جميع الجوانب. إذا نقرت فوق أيقونة الرابط، فسيؤدي ذلك إلى إلغاء ربط الجوانب، ويمكنك تعيين الحدود على كل جانب على حدة[cite: 1].
باستخدام عناصر تحكم نصف القطر (Radius)، يمكنك تدوير زوايا الحد الخارجي للكتلة. يمكنك أيضًا تعيين نصف قطر الحدود بوحدات PX، أو %، أو EM، أو REM، أو VW، أو VH عن طريق إدخال القيمة في مربع النص أو عن طريق ضبط شريط التمرير[cite: 1].
بشكل افتراضي، يكون نصف قطر الحدود مقفلاً، مما يعني أنه عندما تقوم بضبط القيمة، فإنها تنطبق على الزوايا الأربع. إذا نقرت فوق أيقونة الرابط، فسيؤدي ذلك إلى إلغاء ربط الزوايا، ويمكنك تعيين نصف القطر على كل زاوية على حدة - أعلى اليسار، وأعلى اليمين، وأسفل اليسار، وأسفل اليمين[cite: 1].
فيديو يوضح كيفية تعيين الحدود ونصف القطر
إعدادات تباعد الكتل الأفقية للكتل
تحتوي الكتل التالية على عنصر تحكم تباعد الكتل الأفقية (Horizontal Block spacing) في قسم الكتل تحت التخطيطات (Layouts)[cite: 1].
- أعمدة (Columns)
- أيقونات اجتماعية (Social Icons)
بشكل افتراضي، يكون عنصر تحكم تباعد الكتل مقفلاً، مما يعني أنه عندما تقوم بضبط القيمة، فإنها تنطبق على كل من الأفقي والرأسي. إذا نقرت فوق أيقونة الرابط، فس يتم إلغاء الارتباط، ويمكنك تعيين تباعد الكتل للرأسي والأفقي بشكل منفصل[cite: 1].
فيديو يوضح كيفية تعيين التباعد الأفقي
تعديل تنويعات الكتل
تأتي بعض الكتل مدمجة بتنويعات، وهي خيارات مختلفة لنفس الكتلة. عندما يكون الأمر كذلك، اعتبارًا من ووردبريس 6.2، سترى الخيار[cite: 1]
إضافة ظلال الصناديق إلى كتلة الزر
مع ووردبريس 6.2، هناك أربعة إعدادات مسبقة للظلال يمكنك الاختيار من بينها افتراضيًا. تأتي الخيارات التالية افتراضيًا لتستخدمها[cite: 1]:
- طبيعي (Natural)
- واضح (Crisp)
- حاد (Sharp)
- ناعم (Soft)
