كيفية إضافة زر فوق صورة في ووردبريس

بالنسبة للعديد من المتحمسين لـ WordPress، فإن القدرة على إضافة زر فوق صورة أمر ضروري لجعل المحتوى أكثر تفاعلية وجاذبية. قد تنبع دوافعهم من الرغبة في إثراء تفاعلات المستخدم، أو الاستفادة من قدرات WordPress، أو معالجة القيود في السمات أو المكونات الإضافية. سواء كان الأمر يتعلق بتحسين تنقل المستخدم، أو التغلب على تحديات التصميم، أو ببساطة تبني اتجاهات تصميم الويب الحديثة، فقد تساعد هذه الميزة المستخدمين على معالجة تحديات التصميم أو تبني اتجاهات التصميم الحديثة دون الحاجة إلى مهارات متقدمة.

لحسن الحظ، تجعل كتلة الغلاف المضمنة في WordPress هذه العملية بسيطة وسهلة الوصول إليها. في هذا الدليل، سنوضح لك كيفية تحقيق ذلك خطوة بخطوة.


الخطوة 1: إضافة كتلة غلاف

للبدء، افتح الصفحة أو المنشور الذي تريد وضع صورتك المفضلة فيه باستخدام الزر. في محرر WordPress، انقر فوق الزر "+" لإضافة كتلة وابحث عن "Cover". بمجرد العثور عليها، حدد كتلة Cover. 

إضافة كتلة غلاف

الخطوة 2: إدراج صورة

بمجرد إضافة الكتلة، تحتاج إلى رفع الصورة التي اخترتها أو اختر واحدة من مكتبة الوسائطستكون هذه الصورة الآن بمثابة الخلفية لتصميمك.

إدراج صورة

الخطوة 3: إضافة عنوان للصورة (اختياري)

بمجرد تثبيت كتلة الغلاف، ستلاحظ نصًا بديلًا يقول "اكتب عنوانًا..." داخل الصورة. انقر فوق هذا النص واكتب العنوان أو العنوان الرئيسي الذي تريد عرضه فوق الصورة. 

أضف عنوانًا للصورة

الخطوة 4: إضافة زر فوق الصورة

بمجرد أن تصبح كتلة الغلاف جاهزة، انقر فوق الصورة، وسيظهر لك مُدخل الكتلة. انقر الآن فوق علامة "+"، وابحث عن "الأزرار" وأضف الكتلة.

إضافة زر فوق الصورة

الخطوة 5: تخصيص التصميم

من أجل ضبط كل التفاصيل، قمنا بتقسيم هذا القسم إلى ثلاثة أجزاء. سنبدأ بالعنوان، ثم الأزرار، وننتهي بغطاء الصفحة بالكامل للحصول على مظهر احترافي.  

5.1 تخصيص نص العنوان

انقر على النص الذي وضعته كعنوان ضمن كتلة الغلاف لتحديده. استخدم شريط أدوات الكتلة لضبط نمط النص - غامق أو مائل أو محاذاة. إذا كنت تريد تخصيصًا إضافيًا، فانتقل إلى إعدادات الكتلة في الشريط الجانبي الأيمن لتغيير حجم الخط ولونه وأسلوب الطباعة. 

تخصيص نص العنوان

5.2 تخصيص الزر

حدد كتلة الزر، واكتب النص الذي تريد عرضه، ثم اربطه بالصفحة أو عنوان URL ذي الصلة من خلال النقر فوق أيقونة السلسلة (1) في شريط الأدوات. استخدم شريط أدوات الكتلة لمحاذاة الزر وضبط نمطه.

تخصيص الزر باستخدام شريط الأدوات

الآن، انتقل إلى لوحة إعدادات الكتلة على الجانب الأيمن. علامة التبويب العامة (1) يسمح لك بتعديل عرض الزر بالنسبة لحاويته، و علامة التبويب "الأنماط" (3) يتيح لك تخصيص أنماط الأزرار وألوانها وأسلوب كتابتها وأبعادها وحدودها. 

تخصيص الزر باستخدام إعدادات الكتلة

5.3 تخصيص كتلة الغلاف الشاملة

انقر فوق كتلة الغلاف للوصول إلى إعداداتها في علامة التبويب العامةمن هناك، قم بضبط إعدادات التخطيط لتقييد الكتل المتداخلة، قم بتمكين خلفية ثابتة للحفاظ على الخلفية ثابتة أثناء التمرير أو الخلفية المتكررة إذا كانت صورتك أصغر من الكتلة وتحتاج إلى التبليط لملء المساحة، فاضبط نقطة محورية للحفاظ على المناطق المهمة من الصورة مرئية.

قم بتخصيص كتلة الغلاف الشاملة باستخدام علامة التبويب "عام".

بعد ذلك، قم بالتبديل إلى علامة التبويب "الأنماط"من هناك، يمكنك ضبط اللون العام، والتعتيم، والطباعة، والأبعاد، ونسبة العرض إلى الارتفاع، والحدود، والمزيد. 

قم بتخصيص غلاف المجموعة بالكامل باستخدام علامة التبويب "الأنماط".

الخطوة 6: المعاينة والنشر

قم بمراجعة الصفحة بأكملها مرة أخرى للتأكد من ظهور الزر والصورة بالشكل المطلوب. عندما يبدو كل شيء على ما يرام، قم بنشر المحتوى أو تحديثه لجعله نشطًا.

العرض التوضيحي النهائي

خاتمة

تتيح لك إمكانية إضافة زر إلى صورة في WordPress إمكانيات إبداعية لجعل المحتوى الخاص بك أكثر تفاعلية وجاذبية بصريًا. تتيح لك كتلة الغلاف في WordPress وضع الأزرار فوق الصور وإنشاء تصميمات تفاعلية وجذابة بصريًا دون الحاجة إلى أدوات إضافية أو ترميز. كما توفر مرونة كاملة لتخصيص العناوين والأزرار وتفاصيل التصميم لتسهيل محاذاة المحتوى الخاص بك مع اتجاهات التصميم الحديثة. باتباع هذا الدليل، يمكنك تحقيق نتيجة احترافية تعزز كل من تصميم ووظائف موقع الويب الخاص بك. باتباع هذا الدليل، يمكن أن يبرز تصميم موقعك من خلال التنقل بشكل أفضل واللمسة النهائية المحسّنة.



فريق Tableberg