استخدم كتلة الأزرار (Buttons block) لإضافة زر واحد أو أكثر إلى صفحتك أو مقالتك.
إضافة كتلة أزرار
إضافة كتلة الأزرار إلى صفحة، انقر على زر + أداة إدراج الكتل (Block Inserter) في الزاوية العليا اليسرى للمحرر واختر كتلة الأزرار.
يمكنك أيضاً كتابة /buttons والضغط على مفتاح Enter داخل كتلة فقرة جديدة لإدراج كتلة أزرار بسرعة.
تعليمات تفصيلية حول إضافة الكتل.
تأتي كتلة الأزرار مع كتلة زر فردية واحدة بشكل افتراضي. يمكنك تخصيص النص والرابط والنمط لهذا الزر. لإضافة المزيد من الأزرار، انقر على زر زائد إضافة كتلة (Add block) في الزاوية السفلية اليمنى داخل كتلة الأزرار، وسيظهر زر جديد. لاحظ أن الزر الجديد سيتبع نفس نمط الزر الموجود.
شريط أدوات الكتلة
لعرض شريط أدوات الكتلة، انقر فوق الكتلة وسيتم عرض الشريط.
تأتي كل كتلة بأيقونات شريط أدوات فريدة وعناصر تحكم خاصة بالمستخدم تتيح لك التعامل مع الكتلة مباشرة في المحرر. تحتوي كتلة الأزرار على شريط أدوات للزر الفردي وشريط أدوات للكتلة بأكملها.
للصلة بالكتلة بأكملها
يحتوي شريط الأدوات الرئيسي للكتلة بأكملها على الأزرار التالية:
- التحويل إلى (Transform to)
- عناصر تحكم التحريك (Move controls)
- تغيير محاذاة العناصر (Change items justification)
- تغيير المحاذاة العمودية (Change vertical alignment)
- محاذاة (Align)
- خيارات (Options)
التحويل إلى
انقر على زر التحويل لتحويل كتلة الأزرار إلى كتلة مجموعة (Group) أو تفاصيل (Details) أو أعمدة (Columns).
أدوات التحريك
استخدم أدوات تحريك الكتلة لتحريك كتلة الأزرار.
تتيح لك أيقونة السحب أو النقاط الست إعادة وضع الكتلة بحرية في أي مكان داخل المحرر عن طريق الضغط باستمرار على الأيقونة وسحبها إلى الموقع الجديد.
يمكنك أيضاً استخدام أيقونات الأسهم لتحريك الكتلة لأعلى أو لأسفل داخل مجموعة الكتل المتداخلة أو عند وجود عدة كتل.
احصل على مزيد من المعلومات حول تحريك الكتلة داخل المحرر.
المحاذاة
استخدم أداة تغيير المحاذاة لمحاذاة كتلة الأزرار. اختر أحد الخيارات التالية:
- بلا (None) – يترك الكتلة بالحجم الحالي.
- عرض واسع (Wide width) – يزيد عرض الكتلة متجاوزاً حجم المحتوى.
- عرض كامل (Full width) – يمدد الكتلة لتغطية العرض الكامل للشاشة.
يجب تمكين إعدادات المحاذاة ذات العرض الواسع والعرض الكامل بواسطة قالب ووردبريس الخاص بك.
تغيير محاذاة العناصر
يتيح إعداد محاذاة العناصر ضبط الأزرار إلى اليسار، أو المركز، أو اليمين. وهناك أيضاً خيار "مسافة بين العناصر" (Space between items). إذا تم تحديده، سيتم توسيط كتلة الأزرار مع وجود مسافات متساوية بين الأزرار.
تغيير المحاذاة العمودية
استخدم خيار تغيير المحاذاة العمودية لمحاذاة الأزرار عمودياً مع أربعة خيارات ممكنة:
- محاذاة لأعلى (Align top)
- محاذاة للوسط (Align middle)
- محاذاة لاسفل (Align bottom)
- التمدد لملء الفراغ (Stretch to fill)
المزيد من الخيارات
تمنحك قائمة المزيد من الخيارات الممثلة بـ ثلاث نقاط عمودية في أقصى يمين شريط الأدوات ميزات إضافية مثل إمكانية تكرار أو إزالة الكتلة.
للزر الفردي
إذا قمت بتحديد زر معين، سيظهر شريط أدوات جديد بهذه الخيارات الجديدة:
- تغيير نمط الكتلة (Change block style)
- أدوات تحريك الكتلة (Block-moving tools)
- محاذاة الكتلة (Align block)
- المحاذاة (Justification)
- المحاذاة العمودية (Vertical alignment)
- محاذاة النص (Align text)
- رابط (Link)
- عريض (Bold)
- مائل (Italic)
- عناصر تحكم النصوص المنسقة الإضافية (More Rich Text controls)
- خيارات (Options)
تغيير نمط الكتلة
استخدم خيار تغيير نمط الكتلة لتغيير نمط زر معين.
رابط
استخدم خيار الرابط لإضافة رابط إلى الزر. ومن الممكن أيضاً تعيينه لفتح الرابط في علامة تبويب جديدة.
اقرأ عن المزيد من خيارات تحرير الروابط.
عريض ومائل
يمكنك تحديد نص الكتلة واستخدام خيار "عريض" (Bold) أو اختصار لوحة المفاتيح Ctrl+B / Cmd+B لتجعله عريضاً، والذي عادةً ما يكون أثقل من النص المحيط.
يمكنك تحديد نص الكتلة واستخدام خيار "مائل" (Italic) أو اختصار لوحة المفاتيح Ctrl+I / Cmd+I لتجعله مائلاً، والذي عادةً ما يظهر مائلاً نحو اليمين.
خيارات النصوص المنسقة الإضافية
تحتوي القائمة المنسدلة الواقعة إلى يسار قائمة المزيد من الخيارات على مجموعة من خيارات تحرير النصوص المنسقة الإضافية مثل تمييز النص (highlighting)، الكود المضمن (inline code)، يتوسطه خط (strikethrough)، والمزيد.
اقرأ عن المزيد من خيارات تحرير النصوص المنسقة.
المزيد من الخيارات
تمنحك قائمة المزيد من الخيارات الممثلة بـ ثلاث نقاط عمودية في أقصى يمين شريط الأدوات ميزات إضافية مثل إمكانية تكرار أو إزالة الكتلة.
إعدادات الكتلة
تحتوي كل كتلة على خيارات محددة في الشريط الجانبي للمحرر بالإضافة إلى الخيارات الموجودة في شريط أدوات الكتلة. إذا لم ترى الشريط الجانبي، فانقر على زر الإعدادات (Settings button) بجوار زر الحفظ/النشر.
تنقسم لوحة إعدادات كتلة الأزرار إلى ثلاث علامات تبويب – عرض القائمة (List View)، والإعدادات (Settings)، والأنماط (Styles).
عرض القائمة
تتيح لك علامة تبويب عرض القائمة (List view tab)، الممثلة بثلاث خطوط أفقية، إعادة ترتيب كتل الأزرار الفردية داخل كتلة الأزرار.
تعرف على المزيد حول الخيارات والإعدادات المتاحة في عرض القائمة.
الإعدادات
عند تحديد علامة تبويب الإعدادات (Settings tab)، الممثلة بأيقونة ترس، سترى الإعدادات التالية في الشريط الجانبي:
التخطيط
توفر كتلة الأزرار إعدادات التخطيط لتغيير محاذاة العناصر والاتجاه.
يوجد أيضاً خيار لإلغاء تفعيل "السماح بالالتفاف إلى أسطر متعددة" (Allow to wrap to multiple lines) لإبقاء جميع الأزرار في خط أفق واحد حتى على الشاشات الأصغر مثل الجوال.
تقدم هذه المقالة تفاصيل حول إعدادات التخطيط.
متقدم
توفر كتلة الأزرار خيارات الإعدادات المتقدمة التالية: مرساة HTML، فئات CSS إضافية، CSS إضافي، والأنماط.
تعرف على المزيد حول الإعدادات المتقدمة
الأنماط
عند النقر على علامة تبويب الأنماط (Styles tab)، الممثلة بدائرة نصف ملئت، داخل الشريط الجانبي لإعدادات الكتلة، سترى الخيارات التالية:
اللون
توفر كتلة الأزرار خيارات إعدادات الألوان لتغيير ألوان الخلفية.
راجع هذا الدليل لمزيد من المعلومات حول تغيير الألوان.
الخطوط
توفر كتلة الأزرار إعدادات للخطوط لتغيير عائلة الخط، الحجم، المظهر، ارتفاع السطر، حالة الأحرف، تباعد الأحرف، والتزيين.
احصل على مزيد من التفاصيل حول تغيير إعدادات الخطوط.
الأبعاد
توفر كتلة الأزرار خيارات إعدادات الأبعاد لتغيير حشو الحواف (padding) وحجم الهوامش (margin).
تعرف على المزيد حول عناصر تحكم الأبعاد.
الحدود
تتيح إعدادات الحدود خيارات للتحكم في عرض ونصف القطر (radius) لكتلة الأزرار.
تعرف على المزيد حول إعدادات الحدود.
إعدادات كتلة الزر الفردي
عند تحديد زر فردي، هناك العديد من الإعدادات والأنماط التي يمكنك تطبيقها.
الحالات التفاعلية
تتيح لك الحالات التفاعلية منح زر واحد أنماط التحويم (hover)، والتركيز (focus)، والضغط (active) الخاصة به. باستخدام الحالات التفاعلية، يمكنك تنسيق مظهر تحويم زر واحد دون التأثير على الأزرار الأخرى.
عند تحديد زر، يظهر محدد الحالة في أعلى الشريط الجانبي لإعدادات الكتلة، في رأس بطاقة الكتلة. استخدمه للتبديل بين الحالة الافتراضية والحالات التفاعلية:
- التحويم (Hover) – كيف يظهر الزر عندما يحرك الزائر مؤشر الماوس فوقه.
- التركيز (Focus) – كيف يظهر الزر عندما يتم التركيز عليه، على سبيل المثال عندما ينتقل إليه الزائر باستخدام لوحة المفاتيح.
- النشط (Active) – كيف يظهر الزر أثناء الضغط عليه.
تعيين الأنماط لحالة معين
- حدد الزر الذي تريد تنسيقه.
- افتح محدد الحالة في رأس إعدادات الكتلة واختر حالة، مثل التحويم (Hover).
- اضبط أنماط تلك الحالة. يمكن تعيين نفس لوحات الأنماط المتاحة للحالة الافتراضية لكل حالة: اللون، الخلفية، الخطوط، الحدود، والأبعاد.
- التبديل مرة أخرى إلى الحالة الافتراضية، أو إلى حالة أخرى، لمواصلة التحرير.
تنطبق الأنماط التي تعينها على الحالة المحددة فقط، وعلى هذا الزر الفردي فقط. تؤدي إعادة تعيين أنماط إحدى الحالات إلى ترك الحالات الأخرى للزر دون تغيير.
عرض الحالة على لوحة الرسم
يتم تشغيل مفتاح عرض الحالة على لوحة الرسم (Show state on canvas) افتراضياً. أثناء تشغيله، يعرض المحرر معاينة لأنماط الحالة المحددة مباشرة على لوحة الرسم، حتى تتمكن من رؤية مظهر التحويم، أو التركيز، أو الضغط دون الحاجة إلى تحويم المؤشر أو التركيز على الزر بنفسك. قم بإيقاف تشغيله لعرض الزر في حالته الافتراضية بينما تستمر في التحرير.
عندما تقوم بالحفظ وعرض المقالة، فإن أنماط الحالة تنطبق فقط على الزر الذي قمت بتعيينها عليه. تحتفظ الأزرار الأخرى في الصفحة بتصميمها الخاص.
الأنماط
من الممكن تغيير نمط الزر الفردي بناءً على القالب الخاص بك. قم بالتحويم فوق نمط معين لمعرفة كيف سيظهر نمط مثل التعبئة (fill) أو الإطار الخارجي (outline). قد تختلف خيارات الأنماط اعتماداً على القالب الخاص بك.
الخطوط
توفر كتلة الزر إعدادات الخطوط لتغيير عائلة الخط، الحجم، المظهر، ارتفاع السطر، حالة الأحرف، تباعد الأحرف، والتزيين.
احصل على مزيد من التفاصيل حول تغيير إعدادات الخطوط.
اللون
توفر كتلة الزر خيارات إعدادات الألوان لتغيير ألوان النص والخلفية وتطبيق تدرج خلفية.
راجع هذا الدليل لمزيد من المعلومات حول تغيير الألوان.
الأبعاد
توفر كتلة الزر خيارات إعدادات الأبعاد لتغيير حشو الحواف (padding) وحجم الهوامش (margin).
تعرف على المزيد حول عناصر تحكم الأبعاد.
الحدود والظل
تتيح إعدادات الحدود خيارات للتحكم في عرض ونصف القطر (radius) لكتلة الزر. يمكنك أيضاً تطبيق ظل.
تعرف على المزيد حول إعدادات الحدود والظل.
الإعدادات المتقدمة
توفر كتلة الزر خيارات الإعدادات المتقدمة التالية: مرساة HTML، فئات CSS إضافية، CSS إضافي، عنصر HTML، علاقة الرابط (Link relation)، والأنماط.
استخدم إعداد علاقة الرابط (Link relation) لإضافة سمة rel إلى رابط الزر. يوضح هذا للمتصفحات ومحركات البحث طبيعة العلاقة بين صفحتك والصفحة التي ترتبط بها.
للتعرف على المزيد حول القيم الشائعة، مثل nofollow، وnoopener، وnoreferrer، يرجى الرجوع إلى توثيق MDN حول سمة rel.
