[جديد] دائرة تفاعلية في تصميمات الويب: كيفية إنشاء عنصر واحد بدون تشفير

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

لماذا تحتاج إلى أداة دائرة تفاعلية على موقع الويب الخاص بك؟

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

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

عرض متحرك لمحتوى موقع الويب الخاص بك

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

تصميم تفاعلي وسريع الاستجابة لموقع الويب الخاص بك

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

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

القطعة التفاعلية للدائرة لإنشاء موقع جميل

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

الأشياء التي تحتاجها لاستخدام الدائرة التفاعلية بواسطة الإضافات الأساسية

العنصر : لاستخدام عنصر واجهة الدائرة التفاعلية ، يجب عليك أولاً تثبيت Elementor وتنشيطه ، وبعد ذلك تكون جاهزًا للبدء.

الإضافات الأساسية للعنصر : يجب عليك تثبيت وتفعيل الإضافات الأساسية لـ Elementor على موقع الويب الخاص بك من أجل استخدام أداة "الدائرة التفاعلية".

الخطوة 1: تفعيل عنصر واجهة مستخدم الدائرة التفاعلية الأساسية

لنجعل موقع الويب الخاص بك أكثر تفاعلية وجاذبية باستخدام عنصر واجهة المستخدم "Interactive Circle " من Essential Addons. كل ما عليك فعله هو التأكد من أنك تستخدم أحدث إصدار من هذا المكون الإضافي.

يجب تمكين أداة الدائرة التفاعلية في Elementor. انتقل إلى Essential Addons Elements في لوحة معلومات WordPress الخاصة بك وتأكد من تشغيل أداة " الدائرة التفاعلية ". للتأكد من حفظ التغييرات ، انقر فوق الزر " حفظ الإعدادات ".

ابحث عن أداة " الدائرة التفاعلية " في علامة التبويب "العناصر" في Elementor. اسحب العناصر وأفلتها أينما تريد إظهار المحتوى المستند إلى النص.

الخطوة 2: ابدأ في تخصيص إعدادات المحتوى الخاصة بك

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

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

أهم جزء في استخدام هذه الأداة هو أنه يمكنك تقديم المحتوى الخاص بك وإضافة المزيد من الخيارات الدائرية حسب الحاجة. يمكنك إضافة عدد العناصر التي تريد عرضها باستخدام عنصر واجهة مستخدم EA Interactive Circle ضمن إعدادات "المحتوى" . ما عليك سوى النقر فوق الزر " + إضافة عنصر " لإضافة عنصر جديد. بنفس الطريقة ، يمكنك إزالة أو نسخ عنصر من الإعدادات. ومع ذلك ، من أجل التصميم ، يمكنك فقط إضافة ما يصل إلى 8 خيارات في المرة الواحدة ؛ خلاف ذلك ، سيتم كسر التسلسل.

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

يمكنك الحصول على خيارات إعداد إضافية من خيار " الإعدادات الإضافية " لمساعدتك في جعل عنصر واجهة مستخدم EA Interactive Circle أكثر ديناميكية. يمكنك الاختيار بين تفاعلات "النقر" و "التمرير" في خيار " حدث الماوس ". يمكنك أيضًا استخدام خيار " الإعدادات الإضافية " لإضافة رسوم متحركة أنيقة وملفتة للنظر. كما هو موضح أدناه ، هناك ثلاثة أنماط مختلفة للرسوم المتحركة للاختيار من بينها.

الخطوة 3: صمم المحتوى التفاعلي المستند إلى النص

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

يمكنك تغيير أسلوب الطباعة لكل عنصر في دائرة EA التفاعلية الخاصة بك من إعدادات " العنصر ". يمكن أيضًا ضبط عرض كل عنصر وحجم رمزه. يمكنك أيضًا تغيير لون الخلفية ولون النص ولون الرمز وأشياء أخرى كثيرة.

إذا كنت راضيًا عن مظهر دائرتك التفاعلية ، يمكنك الآن نشر صفحتك. ألق نظرة خاطفة على دائرة Elementor التفاعلية التي أنشأناها لهذا الموضوع.

كما ترون ، تتيح الإضافات الأساسية لـ Elementor إنشاء دائرة تفاعلية رائعة وتحويل صفحة الويب الخاصة بك إلى طريقة رائعة وبسيطة للغاية.

أخيرًا ، نحن نؤمن بشدة بقيمة التحسين المستمر. مع وضع ذلك في الاعتبار ، نحن نعمل بجد لنقدم لك تحديثات أساسية جديدة رائعة لـ Elementor حتى تتمتع بتجربة تصميم موقع ويب أفضل مع Elementor.

فماذا لديك لتخسر؟ قم بالتحديث إلى Essential Addons 5.0 في أقرب وقت ممكن للاستفادة من جميع الحاجيات والإضافات المتقدمة الجديدة بما في ذلك عنصر واجهة المستخدم التفاعلية.

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