تخطيطات الشبكة مرتبة، ويمكن أن تصبح مرتبة مملة. صورة تميل خارج عمودها، أو بطاقة تنمو قليلاً تحت المؤشر: تحويلات صغيرة مثل هذه تفصل صفحة مصممة عن صفحة مكدسة. ال يحول التمديد في ماستر أدونز برو يضيف لوحة تحويل إلى كل عنصر: الترجمة والتدوير والقياس والانحراف والقلب، مع إعدادات منفصلة للحالات العادية وحالات التحويم.
ما يفعله ملحق التحويلات #
بمجرد التمكين، يحصل كل عنصر عنصر على يحول القسم تحته متقدم علامة التبويب. الوجه تمكين التحويلات تظهر إلى نعم وستة عناصر تحكم، يطبق كل منها تحويل CSS على العنصر دون لمس تدفق التخطيط الفعلي
- يترجم: حرك العنصر على طول المحورين X وY، بالبكسل، من -1000 إلى 1000.
- يدور: قم بتشغيله على المحور X أو Y أو Z، من -180 إلى 180 درجة.
- مقياس: قم بتكبيرها أو تقليصها على كل محور بشكل مستقل، من 0 إلى 5.
- انحراف: قم بتمريره للحصول على مظهر ديناميكي قطري.
- الوجه الأفقي / الوجه العمودي: قم بنسخها بنقرة واحدة.
ال عادي و تحوم تحتوي علامات التبويب على قيم منفصلة، بحيث يمكن للعنصر أن يبقى في وضع السكون ويتحول عندما يهبط المؤشر عليه، مع مدة انتقال تتحكم فيها.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ اتبع دليل التثبيت أولاً.
- أ ماستر أدونز برو الترخيص، لأن Transforms هو امتداد Pro.
كيفية تمكين امتداد التحويلات #
من لوحة تحكم WordPress الخاصة بك، انتقل إلى الإضافات الرئيسية وافتح ملحقات علامة التبويب. التحويلات موجودة في الحاجيات الرسوم المتحركة مجموعة مع شارة ساخنة، بين الرسوم المتحركة المدخل وكشف. انقر فوق التبديل الخاص به حتى يتحول إلى اللون الأرجواني، ثم اضغط حفظ التغييرات وانتظر حتى يتم حفظ إعدادات “ الخضراء بنجاح في إشعار”.
افتح لوحة التحويلات على أحد العناصر #
حدد العنصر في محرر Elementor، وعنصر واجهة مستخدم الصورة في العرض التوضيحي، وافتح متقدم علامة التبويب. توسيع يحول قسم يحمل شارة MA الأرجوانية والمفتاح تمكين التحويلات إلى نعم. تظهر عناصر التحكم الستة في التحويل ضمن علامتي التبويب "عادي" و"تحوم"، ويتم فتح كل منها برمز القلم الرصاص الخاص بها.
نقل وتوسيع نطاق العنصر #
انقر فوق القلم الرصاص بجانب يترجم ويتم فتح شريطين منزلقين: Translate X وTranslate Y. يدفع العرض التوضيحي الصورة 71 على المحور X، وينزلق نحو حافة القسم الموجود على اللوحة القماشية أثناء تحرك شريط التمرير. القيم بالبكسل، ولكل محور إعداد الاستجابة الخاص به لكل جهاز.
ال مقياس التحكم يعمل بنفس الطريقة. يؤدي ضبط المقياس X على 1.4 في العرض التوضيحي إلى تكبير الصورة إلى ما هو أبعد من عمودها، مما يؤدي إلى تداخل حدود القسم لنوع الاختراق الذي لا يمكن أن يفعله تأطير شبكة عادية. يظل المقياس Y عند المستوى الافتراضي وهو 1 ما لم تقم بتغييره، لذا قم بتعيين كليهما للتوسيع المتساوي.
تدوير وانحراف العمل بنفس الطريقة. افتح عنصر التحكم، واسحب شريط التمرير، وستظهر اللوحة القماشية الزاوية أثناء التنقل.
إضافة تحويل تحوم #
التبديل إلى تحوم تنطبق علامة التبويب ونفس عناصر التحكم فقط أثناء وجود المؤشر على العنصر، بالإضافة إلى إضافتين: الوجه الأفقي و الوجه العمودي تصبح نعم/لا مفاتيح، و مدة الانتقال (مللي ثانية) يتحكم شريط التمرير في مدى سرعة تحريك التغيير. يقوم العرض التوضيحي بتشغيل Flip Horizontal مع انتقال 400 مللي ثانية، بحيث تعكس الصورة نفسها بسلاسة عند التمرير وتلتقط للخلف عندما يغادر المؤشر.
النتيجة على الصفحة #
نشر والتحقق من الواجهة الأمامية. يتم إزاحة الصورة وتوسيعها بعد عمودها تمامًا كما هو مرتب في المحرر، ويتم تحريكها وتشغيل الوجه بسهولة 400 مللي ثانية. التحويلات عبارة عن CSS عادي مع ورقة أنماط واحدة صغيرة، ولا يتدفق التخطيط حول العنصر أبدًا.
شيء واحد يجب تذكره: التحويلات مرئية فقط. لا يزال العنصر يحتل مكانه الأصلي في التخطيط، لذلك يمكن للعنصر المترجم بشكل كبير أن يتداخل مع جيرانه. هذه هي النقطة عادةً، ولكن تحقق من الجهاز اللوحي والهاتف المحمول، حيث يغطي نفس الإزاحة جزءًا أكبر من الشاشة.
حيث يكتسب المتحولون مكانهم #
- صور الاختراق. الصورة التي تم تحجيمها وتحريكها إلى ما بعد حافة العمود تعطي عمقًا لقسم البطل.
- تحوم ردود الفعل. تُقرأ البطاقات التي ترفع المؤشر أو تميل أو تنمو قليلاً تحت المؤشر على أنها قابلة للنقر عليها.
- لهجات استدارة. تقع الشارات والطوابع والملصقات بشكل طبيعي بزاوية طفيفة.
- أقسام منحرفة. بضع درجات من الانحراف على المقسم أو الزر تكسر رتابة المستطيل.
- الأصول المعكوسة. اقلب سهمًا واحدًا أو رسمًا توضيحيًا بدلاً من تصدير صورة ثانية.
فيديو تعليمي #
شاهد كل عنصر تحكم أثناء العمل، بدءًا من تمكين الامتداد وحتى التمرير على الصفحة المنشورة.
الأسئلة المتداولة #
كيف يمكنني تدوير أو قياس عنصر في Elementor؟
قم بتمكين ملحق التحويلات في علامة التبويب "امتدادات الإضافات الرئيسية"، وحدد العنصر، وافتح التحويلات ضمن علامة التبويب "متقدم". قم بتشغيل التحويلات الممكّنة، ثم استخدم عنصر التحكم "التدوير" أو "المقياس"؛ تقوم اللوحة بمعاينة التغيير مباشرة أثناء سحب شريط التمرير. يوفر قسم التحويل الخاص بـ Elementor في علامة التبويب Advanced عناصر تحكم مماثلة مجانًا.
هل يمكنني تطبيق تحويل مختلف على التحويم؟
نعم. تحتوي اللوحة على علامتي تبويب عاديين وتحوم منفصلين. قم بتعيين قيم الراحة في الوضع العادي، وقيم التمرير في الوضع المتحرك، واستخدم شريط تمرير مدة الانتقال للتحكم في مدى سرعة تحريك العنصر بين الحالتين.
هل تؤدي التحويلات إلى كسر تخطيط صفحتي؟
لا. تحويلات CSS مرئية فقط، لذلك يحتفظ العنصر بمساحته الأصلية في التخطيط ولا يتدفق المحتوى المحيط أبدًا. يمكن للعنصر المحول أن يتداخل مع العناصر المجاورة حسب التصميم، لذا فإن معاينة الجهاز اللوحي والهاتف المحمول لتأكيد الإزاحات لا تزال تبدو صحيحة.
ما هي التحويلات التي يتضمنها الامتداد؟
ترجمة X وY، تدوير X، Y وZ، مقياس X وY، انحراف X وY، الوجه الأفقي، والقلب العمودي، كل منها متوفر في كل من الحالات العادية وحالات التحويم. أشرطة التمرير سريعة الاستجابة، لذلك يمكن أن تختلف القيم لكل جهاز.
هل ملحق التحويلات مجاني؟
No. Transforms هو امتداد Pro في Master Addons. يحتوي Elementor أيضًا على قسم تحويل مجاني في علامة التبويب "متقدم" مع عناصر تحكم مماثلة، وتقارن صفحة ملحق "التحويلات" بين الاثنين.
إلتحاق بالركب #
ال يحول التمديد يسلمك مجموعة أدوات تحويل CSS داخل لوحة Elementor: حرك أي شيء، وقم بتدويره، وقياسه، وانحرافه، وقلبه، مع تضمين حالات التحليق والانتقالات السلسة. ابدأ بصورة فرعية واحدة أو رفع تحوم واحد وقم بالبناء من هناك. يقترن بشكل طبيعي مع ملحق مدخل الرسوم المتحركة للعناصر التي تصل في الحركة، والتشكيلة الكاملة من عناصر واجهة المستخدم والإضافات الرئيسية يغطي الباقي.
