قد تبدو الأزرار وكأنها شيء صغير، لكنها يمكن أن تقوم بالكثير من المهام الثقيلة على موقعك الإلكتروني. الأزرار هي واحدة من أبسط الطرق لتوجيه الزوار نحو الإجراء الذي تريد منهم اتخاذه.
بدءًا من توجيه الأشخاص إلى صفحة منتجك إلى حثهم على قراءة المزيد أو الاشتراك، يمكن للزر حسن المظهر أن يحدث فرقًا كبيرًا. والخبر السار هو أنك لا تحتاج إلى مهارات البرمجة لتصميمها.
يحتوي ووردبريس على خيارات مدمجة، وبقليل من المساعدة من إضافة مكوِّن إضافي، يمكنك الحصول على مزيد من التحكم في شكل أزرارك ومظهرها.
في هذا المنشور، سأرشدك في هذا المنشور إلى ثلاث طرق سهلة لإنشاء أزرار أنيقة في ووردبريس.
سنبدأ بالمحرر الافتراضي، ثم ننتقل إلى إضافة تقدم المزيد من المرونة، وننتهي بطريقة إضافية لإضافة الأزرار داخل الجداول. لنبدأ.
إنشاء جداول جميلة
مع محرر الكتل
✅الطريقة 1: استخدام كتلة الأزرار الافتراضية
يحتوي ووردبريس على مكوِّن أزرار مدمج يعمل بشكل جيد في معظم الحالات. ستجده داخل محرِّر المكوِّن عندما تنقر على أيقونة (+) الصغيرة وتبحث عن "أزرار".
عندما يتم إدراج مكوِّن الزر، سيخبرك بإضافة نص داخل الزر.
بمجرد إدراج المكوِّن، يمكنك إضافة زر واحد أو عدة أزرار جنبًا إلى جنب. يمكن تخصيص كل زر مباشرةً من الشريط الجانبي الأيمن. ستجد خيارات لـ
- عرض الزر (كامل أو تلقائي)
- النص ولون الخلفية
- الحشو والمحاذاة
- نصف قطر الحدود (للزوايا المستديرة)
إنها نقطة بداية جيدة، خاصة إذا التزمت بالتصميم البسيط.⚠️لكنك ستصل سريعًا إلى الحد الأقصى إذا كنت بحاجة إلى المزيد من خيارات التصميم مثل تأثيرات التحويم أو التدرجات أو التباعد المتجاوب.
🛠️ نصيحة محترف: هل تريد زرًا مستديرًا بشكل مثالي؟ اضبط نصف قطر الحد على 100 لزر بنمط حبوب منع الحمل.
✅الطريقة 2✅الطريقة 2: استخدام مكوِّن الأزرار من الكتل المطلقة
إذا كنت تريد المزيد من التحكم دون كتابة CSS, الكتل النهائية هي إضافة Gutenberg رائعة يمكنك تجربتها. تضيف إضافة محسّنة كتلة الأزرار مصممة مع مراعاة التخصيص.
يُعد تثبيت Ultimate Blocks مهمة سهلة.
-
انتقل إلى المكونات الإضافية
-
انقر فوق إضافة ملحقات
-
البحث عن "Tableberg"
-
انقر ثَبَّتَ، ثم فعل
بعد تثبيت وتفعيل كتل Ultimate Blocks, إضافة مكوِّن "الأزرار (الكتل المطلقة)".
لإدراج أزرار الكتل المطلقة، انقر على أيقونة (+) الصغيرة وابحث عن "زر (مُحسَّن)".
ستلاحظ الفرق على الفور عند إضافة زر Ultimate Blocks. إليك ما يمكنك تعديله في إعدادات المكوِّن:
-
تبرير الزر والتوجيه
-
حجم الزر
-
عرض الزر
-
دعم الأيقونة (قبل النص أو بعده) مع خيارات أخرى متنوعة
-
دعم الرسوم المتحركة
في قسم أنماط الأزرار، ستحصل على التخصيصات التالية:
-
خيار اللون للحالة العادية وحالة التحويم
-
حدود الزر
-
تصميم الأزرار
-
الحشو القابل للتعديل، وتباعد الكتل، والهامش في إعدادات الأبعاد
-
خيار CSS مخصص
يتم تضمين جميع وظائف مكوِّن الأزرار الافتراضية مع مكوِّن الزر في Ultimate Blocks. فيما يلي زر مصمم خصيصًا من تصميم Ultimate Blocks، على الرغم من أنه وظيفي.
يُعد هذا المكوِّن رائعًا للمسوِّقين والمدوِّنين وأي شخص يريد أن تكون أزرار الحث على اتخاذ إجراء مميزة. يمكنك الحصول على مرونة على مستوى التصميم دون كتابة سطر واحد من التعليمات البرمجية.
🎯 نصيحة محترف: استخدم ألوان تحويم متباينة لإنشاء استجابة بصرية مرضية عندما يتفاعل المستخدمون مع أزرارك.
🧩 مكافأة: إضافة أزرار داخل جدول
تحتاج أحياناً إلى أزرار داخل تخطيطمثل جدول التسعير أو مقارنة الميزات. هذا هو المكان الذي توجد فيه مكون إضافي لجدول قائم على الكتل مثل Tableberg يلمع.
أفضل صفقة |
||
 |
 |
 |
سماعات ابل ايربودز برو الجيل الثاني |
SAMSUNG Galaxy Buds 2 Pro |
سماعات جوجل بيكسل بادز برو |
|
|
|
باستخدام Tableberg، تعمل كل خلية جدول مثل لوحة قماشية صغيرة. هذا يعني أنه يمكنك إسقاط كتلة الأزرار المخصصة داخل الزنزانة. لم تعد عالقًا بنص عادي بعد الآن - يمكنك إضافة أزرار الحث على الشراء الآن أو "اشترِ الآن" أو "اطلع على التفاصيل" أو "جرّب مجانًا" مباشرةً في صفوف التسعير.
ميزات الأزرار في Tableberg هي نفسها ميزات الأزرار في كتل Ultimate Blocks.
هل تريد تخصيص شكل الزر داخل الجدول؟ لا مشكلة. يمكنك تغيير نصف قطر الحدود، والحشو، وحتى إضافة أيقونات - كل ذلك من داخل محرِّر المكوِّن.
🛠️ نصيحة محترف: ادمج الزر الخاص بك مع تصنيف بنجمة أو شريط داخل الصف نفسه للحصول على تأثير بصري إضافي وتحويلات أفضل.
الأفكار النهائية!
لا يحتاج تصميم أزرار جميلة في ووردبريس إلى CSS مخصص أو مساعدة مطوِّر. باستخدام مكوِّن الأزرار الأصلي، والنسخة المحسَّنة من Ultimate Blocks، ومرونة أدوات مثل Tableberg، يمكنك إنشاء تخطيطات تفاعلية بالكامل تبدو رائعة وتعمل عبر جميع الأجهزة.
لا مزيد من الروابط العادية أو الرموز القصيرة القديمة. الآن لديك تحكم كامل، داخل المحرر مباشرةً.
اقرأ المزيد!
