تقوم معظم الروابط النصية بشيء واحد عند التمرير: تغيير اللون. ال عنصر واجهة المستخدم للروابط الإبداعية Elementor من Master Addons يمنحك الكثير لتلعب به: أقواس تنزلق حول الكلمات، وملء يمتد عبر النص، وقلب ثلاثي الأبعاد (Pro)، و22 تأثير تحوم إجمالاً، يمكنك إسقاطها على أي رابط دون فتح ملف CSS.
أدناه، سنضيف عنصر واجهة المستخدم، ونمر عبر كل عنصر تحكم في المحتوى، ونغطي خيارات النمط، وننزل قائمة التأثيرات. تأتي لقطات الشاشة من المحرر مع كل خطوة. أولاً، هنا يوجد عنصر واجهة المستخدم في اللوحة.
ما تفعله أداة الروابط الإبداعية #
يأخذ رابطًا مضمنًا عاديًا ويجعله يتحرك. ال القطعة الأزرار الإبداعية أنماط زر صلب ومبطن. الروابط الإبداعية هي إصدار الرابط النصي: “اقرأ المزيد”، أو استدعاء للعمل بأسلوب التنقل، أو عبارة واحدة تريد إبرازها داخل الجملة. يتم تشغيل الرسوم المتحركة عند التمرير، وتختارها من قائمة منسدلة واحدة.
يمكنك أيضًا الحصول على أيقونة اختيارية، وتسمية بديلة تكشفها بعض التأثيرات، وعناصر تحكم في المحاذاة، وعلامة تبويب نمط مع الطباعة والحدود ومجموعة من خيارات الألوان المبنية حول الرسوم المتحركة للارتباط. إنه موجود في البرنامج الإضافي Master Addons المجاني الذي يحتوي على 10 تأثيرات، ويفتح Master Addons Pro الإصدار 12 الآخر. الكامل الحاجيات والإضافات القائمة لديها الباقي.
بدلا من ذلك رؤيته قبل قراءة كل إعداد؟ وهنا القطعة في العمل.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبتة ونشطة. جديد عليه؟ ابدأ بـ دليل التثبيت.
- صفحة أو قالب مفتوح في محرر Elementor.
كيفية إضافة عنصر واجهة المستخدم الروابط الإبداعية #
هذا الجزء سريع:
- افتح صفحة باستخدام Elementor وانقر فوق أيقونة لوحة عناصر واجهة المستخدم (الشبكة) في أعلى اليسار.
- يكتب الروابط الإبداعية في مربع البحث، أو قم بالتمرير لأسفل إلى الإضافات الرئيسية فئة.
- اسحب الروابط الإبداعية القطعة على القماش.
يتم الهبوط باستخدام العنصر النائب “انقر فوق نص Here”، وهو جاهز للتحرير.
شرح إعدادات المحتوى #
حدد الرابط وافتح محتوى علامة التبويب. هذا هو المكان الذي تقوم فيه بتعيين النص والتأثير ونقاط الارتباط.
تأثيرات #
ال تأثيرات dropdown هو السبب الكامل لاستخدام هذه الأداة. اختر واحدًا ويتحرك الرابط أثناء التمرير. تحتوي القائمة على 22 خيارًا. عشرة مجانية واثني عشر بحاجة إلى Pro:
حر: الأقواس، شريحة السطر السفلي، تكبير الحد السفلي، شريحة الحد الثاني لأعلى، ملء النص، ثلاث نقاط، تصغير، تحرك لأعلى، التأثير 21، والتأثير 22.
احترافي: تأثير ثلاثي الأبعاد، الانزلاق للداخل، الانزلاق الحدودي للأسفل، ترجمة الحدود، النص والحدود الثانية، الكشف عن الدفع للخارج، الدائرة، تبديل الحدود، السقوط للأسفل، التقاطع، الشريحة ثلاثية الأبعاد، والانزلاق ثلاثي الأبعاد للأسفل.
الأسماء لا تكشف الكثير، لذا قم بتمرير الرابط في المعاينة المباشرة لمعرفة ما يفعله كل واحد. تعمل الأقواس وملء النص بشكل جيد في النسخة الأساسية. الخيارات ثلاثية الأبعاد (Pro) هي عناوين أعلى ومناسبة أو رابط البطل.
محاذاة العنصر، ومحاذاة الارتباط، ومحاذاة النص الخلفي #
محاذاة العنصر يضع القطعة بأكملها (يسار، وسط، يمين). محاذاة الارتباط و محاذاة النص الخلفي تعامل مع نص الرابط والتسمية البديلة التي تجلبها بعض التأثيرات. الثلاثة مستجيبون، لذا يمكنك ضبطهم لكل جهاز باستخدام التبديل.
نص الارتباط ونص الارتباط البديل #
ال نص الرابط هل التسمية مرئية، على سبيل المثال “Click Here”. ال نص الرابط البديل (“Go!” في لقطات الشاشة) هو الملصق الثاني الذي يتم تبديله على Reveal Push Out وMove Up وCross و3 D Slide و3 D Slide Down. أبقها قصيرة، لأنها تحصل فقط على المساحة التي تتركها الرسوم المتحركة خلفها.
تباعد الأيقونة والأيقونة #
يمكنك وضع أيقونة بجوار النص، ثم تعيين الفجوة باستخدام تباعد الأيقونات. حزم الإضافات الرئيسية ثمانية متميزة مكتبات الأيقونات، لذلك هناك الكثير للاختيار من داخل Elementor.
رابط URL #
إسقاط الوجهة في رابط URL. يحمل رمز الترس الموجود بجانبه الخيارات المعتادة: افتح في علامة تبويب جديدة، أضف nofollow. للحصول على رابط في الموقع، قم بلصق أي صفحة من موقعك الخاص.
تم شرح إعدادات النمط #
التبديل إلى أسلوب علامة التبويب وفتح أنماط الارتباط. هكذا يبدو الرابط قبل وبعد الرسوم المتحركة.
- عرض و حجم الأيقونة: قم بحجم مربع الارتباط والرمز بمفردهما.
- الطباعة: عائلة الخطوط والحجم والوزن وتباعد الحروف للتسمية.
- حشوة الارتباط: التباعد داخل منطقة الارتباط. كما أنه يوفر بعض مساحة التأثيرات للتحريك.
- نوع الحدود والعرض واللون ونصف القطر: حد حول مربع الارتباط. الخطوط المتحركة في التأثيرات مثل شريحة الخط السفلي تأتي من ألوان BG قبل وبعد، وليس من هذه الحدود.
- صندوق الظل: العمق في مربع الارتباط إذا كنت تريد ذلك.
الألوان العادية والتحويم #
تنقسم عناصر التحكم في الألوان إلى عادي و تحوم تنص على. جنبا إلى جنب مع المعتاد لون النص و لون الخلفية، سوف ترى لون بي جي الأمامي, قبل لون بي جي، و بعد لون بي جي. هذه الطبقات الإضافية هي ما تتنقل بين تأثيرات الشريحة والملء، لذا قم بتعيينها عندما تريد التحكم في اللون الذي يظهر منتصف الرسوم المتحركة.
رؤية التأثير في العمل #
هذا هو تأثير الأقواس على اللوحة القماشية. قم بتمرير الرابط وتنزلق الدعامة على كل جانب، لذا يُقرأ “Click Here” كـ “[Click Here]”. يتصرف كل تأثير بهذه الطريقة في المعاينة المباشرة، مما يجعل من السهل تجربة القليل منها قبل الالتزام.
نصائح لاستخدام الروابط الإبداعية #
- مطابقة التأثير إلى المكان. توجد العناصر الدقيقة مثل Text fill أو Bottom Line Slide بشكل جيد في الفقرات. حفظ 3D Slide and Cross (كلاهما Pro) للعناوين ومناطق الأبطال.
- شاهد ألوان بي جي. يمكن للخلفيات الأمامية وقبل وبعد أن تغسل النص في منتصف الرسوم المتحركة، لذا تحقق من أن الرابط يظل قابلاً للقراءة خلال التأثير بأكمله.
- احتفظ بالملصق البديل قصيرًا. يصبح نص الرابط البديل الطويل ضيقًا في المساحة التي تتركها الرسوم المتحركة.
- لا تنسى اللمس. لا يتم تشغيل Hover على الهاتف، لذا يجب أن تبدو حالة الراحة منتهية من تلقاء نفسها.
هل تحتاج إلى زر ثابت كامل بدلاً من رابط النص؟ هذا هو القطعة الأزرار الإبداعية. هل تريد عنوانًا ووصفًا وزرًا معًا؟ انظر إلى أداة الدعوة إلى العمل.
الأسئلة المتداولة #
ما هي أداة الروابط الإبداعية Elementor؟
إنها أداة Master Addons التي تضيف روابط نصية متحركة إلى Elementor. بدلاً من تغيير اللون العادي، تحصل الروابط على تأثيرات التمرير مثل الأقواس وملء النص و(مع Pro) Circle و3 D Slide، وكلها مضبوطة من القائمة المنسدلة بدون CSS مخصص.
كم عدد تأثيرات الارتباط المضمنة؟
تحتوي الأداة على 22 تأثيرًا. عشرة منها مجانية، بما في ذلك الأقواس، وشريحة السطر السفلي، وملء النص، وثلاث نقاط، والتحرك لأعلى. اثني عشر بحاجة إلى Pro، بما في ذلك 3D Effect، وSlide In، وCircle، وBorder Switch، وCross، و3D Slide. يمكنك معاينة كل واحد مباشرة في محرر Elementor قبل النشر.
هل أداة الروابط الإبداعية مجانية؟
نعم. تعد Creative Links جزءًا من البرنامج الإضافي Master Addons for Elementor المجاني الذي يحتوي على 10 تأثيرات. يضيف Master Addons Pro التأثيرات الـ 12 الأخرى. انظر صفحة التسعير للمقارنة الكاملة.
ما الفرق بين الروابط الإبداعية والأزرار الإبداعية؟
تعمل الروابط الإبداعية على تحريك الروابط النصية المضمنة، مثل “اقرأ المزيد” أو عبارة في جملة. تقوم الأزرار الإبداعية بتصميم زر صلب ومبطن. اختر روابط لاستدعاءات الإجراءات ذات النمط النصي وأزرار الاستدعاءات ذات النمط الكتلي.
هل تعمل تأثيرات تحويم الارتباط على الهاتف المحمول؟
تحتاج تأثيرات التمرير إلى ماوس، حتى لا يتم تشغيلها على شاشات اللمس. صمم حالة الراحة لتبدو كاملة، ولا يزال الرابط يعمل ويقرأ جيدًا على الهواتف والأجهزة اللوحية.
إلتحاق بالركب #
ال عنصر واجهة المستخدم للروابط الإبداعية Elementor يمنحك حركة الروابط النصية الخاصة بك: 22 تأثير تحويم (10 مجانًا)، وأيقونة، وعناصر تحكم في الألوان لطبقات الرسوم المتحركة، بدون رمز. اختر تأثيرًا، واضبط الألوان، وتتوقف روابطك عن الجلوس هناك. من هنا بقية مكتبة عناصر واجهة المستخدم الرئيسية للإضافات يستحق المشاهدة.
