تقوم معظم الروابط النصية بشيء واحد عند التمرير: تغيير اللون. ال عنصر واجهة المستخدم للروابط الإبداعية Elementor من Master Addons يمنحك الكثير لتلعب به، والأقواس التي تنزلق حول الكلمات، والتعبئة التي تمتد عبر النص، والقلب ثلاثي الأبعاد، وعشرات تأثيرات التمرير الأخرى التي يمكنك إسقاطها على أي رابط دون فتح ملف CSS.
أدناه، سنضيف عنصر واجهة المستخدم، ونمر عبر كل عنصر تحكم في المحتوى، ونغطي خيارات النمط، وننزل قائمة التأثيرات. تأتي لقطات الشاشة من المحرر مع كل خطوة. أولاً، هنا يوجد عنصر واجهة المستخدم في اللوحة.
ما تفعله أداة الروابط الإبداعية #
يأخذ رابطًا مضمنًا عاديًا ويجعله يتحرك. ال القطعة الأزرار الإبداعية أنماط زر صلب ومبطن. الروابط الإبداعية هي إصدار الرابط النصي: “اقرأ المزيد”، أو استدعاء للعمل بأسلوب التنقل، أو عبارة واحدة تريد إبرازها داخل الجملة. يتم تشغيل الرسوم المتحركة عند التمرير، وتختارها من قائمة منسدلة واحدة.
يمكنك أيضًا الحصول على أيقونة اختيارية، وتسمية بديلة تكشفها بعض التأثيرات، وعناصر تحكم في المحاذاة، وعلامة تبويب نمط مع الطباعة والحدود ومجموعة من خيارات الألوان المبنية حول الرسوم المتحركة للارتباط. إنه موجود في مجموعة Master Addons المجانية، لذا فهو يعمل على أي موقع Elementor. الكامل الحاجيات والإضافات القائمة لديها الباقي.
بدلا من ذلك رؤيته قبل قراءة كل إعداد؟ وهنا القطعة في العمل.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبتة ونشطة. جديد عليه؟ ابدأ بـ دليل التثبيت.
- صفحة أو قالب مفتوح في محرر Elementor.
كيفية إضافة عنصر واجهة المستخدم الروابط الإبداعية #
هذا الجزء سريع:
- افتح صفحة باستخدام Elementor وانقر فوق أيقونة لوحة عناصر واجهة المستخدم (الشبكة) في أعلى اليسار.
- يكتب الروابط الإبداعية في مربع البحث، أو قم بالتمرير لأسفل إلى الإضافات الرئيسية فئة.
- اسحب الروابط الإبداعية القطعة على القماش.
يتم الهبوط باستخدام العنصر النائب “انقر فوق نص Here”، وهو جاهز للتحرير.
شرح إعدادات المحتوى #
حدد الرابط وافتح محتوى علامة التبويب. هذا هو المكان الذي تقوم فيه بتعيين النص والتأثير ونقاط الارتباط.
تأثيرات #
ال تأثيرات dropdown هو السبب الكامل لاستخدام هذه الأداة. اختر واحدًا ويتحرك الرابط أثناء التمرير. القائمة تتجاوز 20 خيارًا
الأقواس، التأثير ثلاثي الأبعاد، شريحة الخط السفلي، تكبير الحد السفلي، الانزلاق للداخل، انزلاق الحدود للأسفل، انزلاق الحدود الثاني للأعلى، ترجمة الحدود، النص والحدود الثانية، كشف الدفع للخارج، ملء النص، الدائرة، ثلاث نقاط، تبديل الحدود، تقليص الحجم، سقوط، تحرك لأعلى، تقاطع، شريحة ثلاثية الأبعاد، شريحة ثلاثية الأبعاد لأسفل، واثنين آخرين.
الأسماء لا تكشف الكثير، لذا قم بتمرير الرابط في المعاينة المباشرة لمعرفة ما يفعله كل واحد. تعمل الأقواس وملء النص بشكل جيد في النسخة الأساسية. الخيارات ثلاثية الأبعاد هي عناوين أعلى ومناسبة أو رابط البطل.
محاذاة العنصر، ومحاذاة الارتباط، ومحاذاة النص الخلفي #
محاذاة العنصر يضع القطعة بأكملها (يسار، وسط، يمين). محاذاة الارتباط و محاذاة النص الخلفي تعامل مع نص الرابط والتسمية البديلة التي تجلبها بعض التأثيرات. الثلاثة مستجيبون، لذا يمكنك ضبطهم لكل جهاز باستخدام التبديل.
نص الارتباط ونص الارتباط البديل #
ال نص الرابط هل التسمية مرئية، على سبيل المثال “Click Here”. ال نص الرابط البديل (“Go!” في لقطات الشاشة) هي التسمية الثانية التي تستبدل التأثيرات التي تكشف عن واحدة. أبقِ الأمر قصيرًا، لأنه يحصل فقط على المساحة التي تتركها الرسوم المتحركة خلفه.
تباعد الأيقونة والأيقونة #
يمكنك وضع أيقونة بجوار النص، ثم تعيين الفجوة باستخدام تباعد الأيقونات. حزم الإضافات الرئيسية ثمانية متميزة مكتبات الأيقونات، لذلك هناك الكثير للاختيار من داخل Elementor.
رابط URL #
إسقاط الوجهة في رابط URL. يحمل رمز الترس الموجود بجانبه الخيارات المعتادة: افتح في علامة تبويب جديدة، أضف nofollow. للحصول على رابط في الموقع، قم بلصق أي صفحة من موقعك الخاص.
تم شرح إعدادات النمط #
التبديل إلى أسلوب علامة التبويب وفتح أنماط الارتباط. هكذا يبدو الرابط قبل وبعد الرسوم المتحركة.
- عرض و حجم الأيقونة: قم بحجم مربع الارتباط والرمز بمفردهما.
- الطباعة: عائلة الخطوط والحجم والوزن وتباعد الحروف للتسمية.
- حشوة الارتباط: التباعد داخل منطقة الارتباط. كما أنه يوفر بعض مساحة التأثيرات للتحريك.
- نوع الحدود والعرض واللون ونصف القطر: هناك الكثير من التأثيرات التي تحدث على الحدود (الأقواس، وBorder Slide Down، والباقي)، لذا فإن هذه التأثيرات يتم احتسابها هنا أكثر من الارتباط العادي.
- صندوق الظل: العمق في مربع الارتباط إذا كنت تريد ذلك.
الألوان العادية والتحويم #
تنقسم عناصر التحكم في الألوان إلى عادي و تحوم تنص على. جنبا إلى جنب مع المعتاد لون النص و لون الخلفية، سوف ترى لون بي جي الأمامي, قبل لون بي جي، و بعد لون بي جي. هذه الطبقات الإضافية هي ما تتنقل بين تأثيرات الشريحة والملء، لذا قم بتعيينها عندما تريد التحكم في اللون الذي يظهر منتصف الرسوم المتحركة.
رؤية التأثير في العمل #
هذا هو تأثير الأقواس على اللوحة القماشية. قم بتمرير الرابط وتنزلق الدعامة على كل جانب، لذا يُقرأ “Click Here” كـ “[Click Here]”. يتصرف كل تأثير بهذه الطريقة في المعاينة المباشرة، مما يجعل من السهل تجربة القليل منها قبل الالتزام.
نصائح لاستخدام الروابط الإبداعية #
- مطابقة التأثير إلى المكان. توجد العناصر الدقيقة مثل تعبئة النص أو شريحة السطر السفلي بشكل جيد في الفقرات. حفظ الشريحة ثلاثية الأبعاد والتقاطع للعناوين ومناطق الأبطال.
- شاهد ألوان بي جي. يمكن للخلفيات الأمامية وقبل وبعد أن تغسل النص في منتصف الرسوم المتحركة، لذا تحقق من أن الرابط يظل قابلاً للقراءة خلال التأثير بأكمله.
- احتفظ بالملصق البديل قصيرًا. يصبح نص الرابط البديل الطويل ضيقًا في المساحة التي تتركها الرسوم المتحركة.
- لا تنسى اللمس. لا يتم تشغيل Hover على الهاتف، لذا يجب أن تبدو حالة الراحة منتهية من تلقاء نفسها.
هل تحتاج إلى زر ثابت كامل بدلاً من رابط النص؟ هذا هو القطعة الأزرار الإبداعية. هل تريد عنوانًا ووصفًا وزرًا معًا؟ انظر إلى أداة الدعوة إلى العمل.
الأسئلة المتداولة #
ما هي أداة الروابط الإبداعية Elementor؟
إنها أداة Master Addons التي تضيف روابط نصية متحركة إلى Elementor. بدلاً من تغيير اللون العادي، تحصل الروابط على تأثيرات التمرير مثل الأقواس وملء النص والدائرة والشريحة ثلاثية الأبعاد، وكلها مضبوطة من القائمة المنسدلة بدون CSS مخصص.
كم عدد تأثيرات الارتباط المضمنة؟
تتضمن الأداة 20+ تأثيرًا، بما في ذلك الأقواس، والتأثير ثلاثي الأبعاد، وشريحة السطر السفلي، والشريحة الداخلية، وملء النص، والدائرة، وثلاث نقاط، ومفتاح الحدود، والمتقاطع، والشريحة ثلاثية الأبعاد. يمكنك معاينة كل واحد مباشرة في محرر Elementor قبل النشر.
هل أداة الروابط الإبداعية مجانية؟
نعم. تعد الروابط الإبداعية جزءًا من البرنامج الإضافي Master Addons for Elementor المجاني. تضيف الخطط الاحترافية المزيد من الأدوات والإضافات. انظر صفحة التسعير للمقارنة الكاملة.
ما الفرق بين الروابط الإبداعية والأزرار الإبداعية؟
تعمل الروابط الإبداعية على تحريك الروابط النصية المضمنة، مثل “اقرأ المزيد” أو عبارة في جملة. تقوم الأزرار الإبداعية بتصميم زر صلب ومبطن. اختر روابط لاستدعاءات الإجراءات ذات النمط النصي وأزرار الاستدعاءات ذات النمط الكتلي.
هل تعمل تأثيرات تحويم الارتباط على الهاتف المحمول؟
تحتاج تأثيرات التمرير إلى ماوس، حتى لا يتم تشغيلها على شاشات اللمس. صمم حالة الراحة لتبدو كاملة، ولا يزال الرابط يعمل ويقرأ جيدًا على الهواتف والأجهزة اللوحية.
إلتحاق بالركب #
تمنح أداة Elementor Creative Links الروابط النصية الخاصة بك حركة حقيقية: 20+ تأثيرات تحوم، وأيقونة، وعناصر تحكم في الألوان تم ضبطها على الرسوم المتحركة، ولا يتطلب أي منها تعليمات برمجية. اختر تأثيرًا، واضبط الألوان، وتتوقف الروابط الخاصة بك عن الجلوس هناك. من هنا بقية مكتبة عناصر واجهة المستخدم الرئيسية للإضافات يستحق المشاهدة.
