يعد Elementor أداة إنشاء صفحات قوية تتيح للمستخدمين إنشاء مواقع ويب مذهلة بسهولة. ومع ذلك، بالنسبة لأولئك الذين يتطلعون إلى إضافة ميزات أكثر تقدمًا، يعد Master Addons امتدادًا ممتازًا يعزز قدرات Elementor.
واحدة من ميزاتها البارزة هي إضافة الأزرار الإبداعية، مما يسمح لك بتصميم أزرار متحركة ملفتة للنظر ببضع نقرات فقط.
في هذا البرنامج التعليمي، سنوضح لك كيفية إنشاء أزرار ديناميكية وتفاعلية باستخدام Creative Buttons Addon جنبًا إلى جنب مع عناصر Master Addons الأخرى، مما يعزز الجماليات ومشاركة المستخدم لموقع الويب الخاص بك.
أهمية أزرار Elementor المتحركة
تعد الأزرار المتحركة أكثر من مجرد جذابة بصريًا لأنها تلعب دورًا حاسمًا في تعزيز تفاعل المستخدم وتحسين أداء موقع الويب. من خلال إضافة حركة أو تأثيرات دقيقة، تجذب الأزرار المتحركة انتباه الزوار، مما يسهل عليهم تحديد المكالمات الرئيسية للعمل والتي بدورها توجه المستخدمين عبر موقع الويب الخاص بك بالكامل. إنها أدوات أنيقة جدًا لصياغة رحلات المستخدم. فكر في علامات الطريق المضاءة جيدًا التي تواجهها على الطرق السريعة.
بشكل عام، سواء كان ذلك لتوجيه المستخدمين إلى الصفحات المهمة، أو تشجيع عمليات الاشتراك، أو تعزيز التحويلات، توفر هذه الأزرار تجربة أكثر ديناميكية وجاذبية. تضيف الرسوم المتحركة طبقة من التفاعل، وتدعو المستخدمين إلى النقر والاستكشاف واتخاذ الإجراءات، مما يؤدي في النهاية إلى زيادة التفاعل ويمكن أن يؤدي إلى معدلات تحويل أعلى.
كيفية إنشاء أزرار الرسوم المتحركة Elementor
الآن بعد أن عرفنا أهمية أزرار Elementor المتحركة لتصميم موقع الويب، يتيح لنا التعرف على كيفية إنشائها باستخدام الإضافات الرئيسية ملحق الأزرار الإبداعية:
الخطوة 1: تمكين إضافة الأزرار الإبداعية
قبل أن تتمكن من البدء في إنشاء أزرار متحركة، ستحتاج إلى تمكين إضافة الأزرار الإبداعية في الإضافات الرئيسية. وإليك كيف:
1. انتقل إلى لوحة تحكم WordPress الخاصة بك
انتقل إلى لوحة تحكم مسؤول WordPress.
2. الوصول إلى إعدادات الإضافات الرئيسية
من الشريط الجانبي، ابحث عن الإضافات الرئيسية وانقر عليها.
3. تمكين الأزرار الإبداعية
في قسم الإضافات، حدد موقع الأزرار الإبداعية وقم بتبديل الإعداد إلى “On.”
بمجرد التمكين، يمكنك البدء في استخدام عنصر واجهة المستخدم Creative Buttons في محرر Elementor الخاص بك، وفتح مجموعة من خيارات التخصيص لإنشاء أزرار متحركة فريدة.
الخطوة 2: إضافة زر إبداعي إلى صفحتك
الآن بعد أن تم تمكين ملحق الأزرار الإبداعية، فقد حان الوقت لإضافة أول زر متحرك إلى الصفحة. اتبع هذه الخطوات البسيطة:
1. افتح محرر العنصر
انتقل إلى الصفحة أو المنشور الذي تريد إضافة الزر إليه وانقر فوق "تحرير باستخدام Elementor".
2. اسحب وأسقط أداة الزر الإبداعي
في محرر Elementor، ابحث عن عنصر واجهة المستخدم Creative Button في اللوحة اليسرى. اسحبه إلى قسم صفحتك حيث تريد أن يظهر الزر.
3. اكتشف خيارات الزر الإبداعي
بمجرد إضافة الزر، سترى ثلاث علامات تبويب رئيسية في اللوحة اليسرى: المحتوى والأسلوب والمتقدم. تمنحك علامات التبويب هذه التحكم الكامل في مظهر الزر ووظائفه، مما يسمح لك بتخصيصه ليتناسب مع تصميمك.
أنت الآن جاهز لبدء تكوين إعدادات الزر!
الخطوة 3: تكوين إعدادات الأزرار باستخدام علامة تبويب المحتوى
ال علامة تبويب المحتوى يسمح لك بتحديد العناصر الأساسية للزر الخاص بك، من النص إلى الرابط والأيقونات. وإليك كيفية إعداده
إعدادات النمط المسبقة
تأثيرات الزر: ضمن إعدادات النمط المسبقة، ستجد مجموعة واسعة من أكثر من 20 تأثيرًا للرسوم المتحركة يمكنك تطبيقها على الزر الخاص بك. ستعمل هذه التأثيرات على تحريك الزر عند التمرير أو النقر، مما يضيف لمسة ديناميكية إلى تصميمك.
محاذاة الزر: اختر محاذاة الزر الخاص بك على اليسار أو الوسط أو اليمين بحيث يتناسب بسلاسة مع تخطيطك.
التحكم بالزر
نص الزر: أدخل النص الرئيسي الذي سيظهر على الزر.
نص الزر البديل: تخصيص نص الزر البديل، والتي ستظهر عندما يقوم المستخدمون بالتمرير فوق الزر. هذه طريقة رائعة لإضافة رسالة مختلفة أو استدعاء لاتخاذ إجراء عند التمرير.
رابط الزر: تعيين رابط للزر الخاص بك. ستتم إعادة توجيه المستخدمين إلى عنوان URL الذي تحدده عند النقر عليه.
أضف أيقونة: يمكنك إضافة رمز إلى الزر عن طريق تحديد رمز من مكتبة الرموز. قم بتخصيص موضع الأيقونة والمسافات بينها لتناسب تصميمك.
توفر لك هذه الإعدادات المرونة اللازمة لإنشاء زر عملي ومصمم خصيصًا لتلبية احتياجات موقع الويب الخاص بك.
الخطوة 4: تخصيص مظهر الزر باستخدام علامة التبويب "النمط"
ال أسلوب تقدم TAB مجموعة واسعة من الخيارات لتخصيص مظهر الزر الخاص بك. وإليك كيفية ضبط مظهره:
أنماط الأزرار
عرض الزر: اضبط عرض الزر للتأكد من ملاءمته للتخطيط الخاص بك، سواء كان بعرضه الكامل أو بحجم مخصص.
الطباعة: قم بتخصيص نمط خط الزر وحجمه ووزنه وتباعد الحروف ليتناسب مع تصميم موقعك.
الحشو: اضبط الحشو للتحكم في المساحة داخل الزر، مما يضمن وضع النص والرمز بشكل مثالي.
الإعدادات العادية والتحويم
يمكنك تخصيص مظهر الزر لكل من حالته العادية وحالات التحويم
لون النص: اختر ألوان نص مختلفة للحالات العادية وحالات التمرير.
لون وحجم الأيقونة: اضبط لون وحجم الأيقونة للحصول على التأثيرات العادية والتأثيرات المتحركة.
لون الخلفية: اضبط لون خلفية الزر للحالات العادية وحالات التمرير. يمكنك أيضًا تطبيق خلفيات متدرجة للحصول على مظهر أكثر ديناميكية.
نوع الحدود وعرضها ولونها: أضف حدًا حول الزر، وحدد نوع الحد (صلب، متقطع، وما إلى ذلك)، والعرض، واللون لكل من الحالات العادية وحالات التحويم.
نصف قطر الحدود: قم بتخصيص زوايا الزر بحواف مستديرة عن طريق ضبط نصف قطر الحدود.
ظل الصندوق: أضف عمقًا إلى الزر عن طريق تطبيق ظل مربع للحالات العادية وحالات التمرير. هذا التأثير يجعل الزر بارزًا على الصفحة.
باستخدام علامة التبويب "النمط"، يمكنك التأكد من أن الزر الخاص بك لا يعمل بشكل جيد فحسب، بل يتناسب أيضًا بشكل مثالي مع جمالية التصميم العام لموقعك.
للحصول على فهم أعمق لكيفية عمل كل إعداد من الإعدادات المذكورة أعلاه، نقترح عليك مراجعة وثائقنا الكاملة كيفية إنشاء أزرار إبداعية والذي يتضمن المزيد من الشروحات المتعمقة ومقاطع الفيديو التعليمية.
الوصول إلى المزيد من التخصيص في علامة التبويب المتقدمة
ال علامة التبويب المتقدمة يمنحك إمكانية الوصول إلى تأثيرات إضافية وخيارات تخصيص يمكنها تحسين وظائف الزر وتفاعله بشكل أكبر. إليك نظرة على ما يمكنك القيام به
تخصيص أكبر مع ملحقات الإضافات الرئيسية الأخرى
خذ تصميم الزر الخاص بك إلى أبعد من ذلك من خلال دمجه مع ميزات Master Addons الأخرى. يمكنك استخدام ملحقات مثل التأثيرات العائمة و المنظر إلى جانب زر الإبداع الخاص بك لمزيد من التأثير البصري.
تطبيق تأثيرات التحويل (الحالات العادية والحوم)
يضيف تحويل التأثيرات، مثل القياس أو التدوير، إلى الزر في كل من حالته العادية وحالة التمرير. تتيح لك هذه الميزة إنشاء رسوم متحركة جذابة تجعل الزر الخاص بك أكثر تفاعلية وديناميكية.
ريلاكس (تأثير المنظر)
تقديم أ تأثير التمرير المنظر، حيث يتحرك الزر بسرعة مختلفة عن بقية الصفحة عند التمرير للمستخدم. وهذا يضيف لمسة فريدة وغامرة لحركة الزر.
كشف الرسوم المتحركة
استخدم أ كشف الرسوم المتحركة لجعل الزر الخاص بك يظهر تدريجيًا أثناء قيام المستخدم بالتمرير لأسفل الصفحة، مما يضيف طبقة إضافية من التفاعل والمكائد.
شروط العرض
التحكم في متى وأين يظهر الزر الخاص بك استخدام شروط العرض. يمكنك تعيين القواعد التي تحدد رؤية الزر بناءً على إجراءات أو شروط محددة للمستخدم، كما هو الحال على أجهزة معينة أو خلال إطار زمني معين.
التأثيرات العائمة
اجعل الزر الخاص بك يطفو فوق الصفحة، مما يمنحها إحساسًا أكثر ديناميكية وتفاعلية. التأثيرات العائمة اسمح للزر بالتمرير فوق المحتوى، والتحرك قليلاً أو بلطف استجابةً لتفاعل المستخدم.
تلميحات الأدوات
يضيف تلميحات الأدوات إلى الزر الخاص بك للحصول على معلومات إضافية. عندما يقوم المستخدم بالتمرير فوق الزر، يمكن أن يظهر مربع نص صغير بمزيد من التفاصيل أو وصف مفيد.
توفر هذه الميزات المتقدمة إمكانيات إبداعية لا حصر لها، مما يتيح لك إنشاء أزرار لا تبدو رائعة فحسب، بل تتفاعل أيضًا بشكل هادف مع المستخدمين.
الأفكار النهائية
تعد أزرار Elementor المتحركة طريقة بسيطة ولكنها قوية لتعزيز مشاركة المستخدم وجعل موقع الويب الخاص بك أكثر تفاعلية. مع ال إضافات رئيسية أزرار إبداعية إضافيةيمكنك بسهولة إنشاء أزرار ملفتة للنظر مع مجموعة من التأثيرات، بدءًا من الرسوم المتحركة الدقيقة وحتى التفاعلات الديناميكية.
باتباع الخطوات الموضحة في هذا الدليل، يمكنك تخصيص الأزرار الخاصة بك لتتناسب مع الأزرار الخاصة بموقعك ماركة، تشجيع النقرات، وتحسين تجربة المستخدم الشاملة. لا تخف من تجربة الأنماط والتأثيرات والميزات المختلفة للعثور على المجموعة المثالية التي تناسب أهداف موقع الويب الخاص بك.
