Glassmorphism هو مظهر الزجاج المصنفر: بطاقة شبه شفافة تطمس كل ما يجلس خلفها، وهو النمط الذي تميل إليه Apple وWindows عبر واجهاتهما. إن بنائه يدويًا في Elementor يعني CSS مخصصًا مع مرشح الخلفية وبعض مراوغات المتصفح. مجاني امتداد التشكل الزجاجي في الإضافات الرئيسية للعنصر يحوله إلى تبديل في علامة التبويب "متقدم" لأي عنصر.
تقوم بتشغيله، وتعيين قيمة ضبابية ولون خلفية شبه شفاف، حول الزوايا، ويصبح العنصر بطاقة زجاجية. هنا هو الإعداد كله.
ما يفعله امتداد Glassmorphism #
يضيف الامتداد أ التشكل الزجاجي القسم إلى متقدم علامة التبويب لكل عنصر Elementor، بدءًا من الأقسام الكاملة وصولاً إلى عناصر واجهة المستخدم الفردية. قم بتمكينه وسيحصل العنصر على ضبابية في الخلفية، بحيث تتحول صورة الخلفية أو المحتوى الموجود خلفه إلى زجاج بلوري بينما يظل النص الخاص بالعنصر حادًا.
يعمل المظهر بشكل أفضل عندما يكون العنصر فوق شيء مشغول بصريًا، مثل خلفية الصورة أو التدرج. فوق قسم أبيض عادي لا يوجد ما يمكن طمسه، وبالتالي فإن التأثير ليس له ما يظهره.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- الإضافات الرئيسية للعنصر مثبت ونشط. جديد في البرنامج المساعد؟ اتبع دليل التثبيت أولاً.
- يعد Glassmorphism امتدادًا مجانيًا، لذلك لا يلزم الحصول على ترخيص Pro.
- عنصر يتم وضعه فوق صورة أو خلفية ملونة، وبالتالي فإن التمويه لديه شيء يعمل به.
كيفية تمكين امتداد Glassmorphism #
من لوحة تحكم WordPress الخاصة بك، انتقل إلى الإضافات الرئيسية وافتح ملحقات علامة التبويب. يقع Glassmorphism في عرض الحاجيات مجموعة تحمل شارة شعبية، بجوار الأنماط و خط الشبكة. انقر فوق التبديل الخاص به حتى يتحول إلى اللون الأرجواني، ثم اضغط حفظ التغييرات في أعلى الصفحة وانتظر إشعار “Settings الأخضر الذي تم حفظه بنجاح.
أين يمكن العثور عليه في محرر Elementor #
افتح صفحتك باستخدام Elementor وحدد العنصر الذي تريد تحويله إلى زجاج. في مثال الفيديو، توجد أداة ذات رأس مزدوج على خلفية الصورة. انتقل إلى متقدم علامة التبويب، وسوف تجد التشكل الزجاجي قسم يحمل شارة MA الأرجوانية، إلى جانب ملحقات Master Addons الأخرى مثل شروط العرض والتأثيرات العائمة.
شرح إعدادات التشكل الزجاجي #
الوجه تمكين التشكل الزجاجي إلى نعم وتظهر الضوابط.
- قيمة التمويه: مدى قوة تشويه الخلفية خلف العنصر، من 0 إلى 100px (20px افتراضيًا). ينطبق التمويه على الحاوية بأكملها، وحتى القيمة الصغيرة مثل 2 تُقرأ بوضوح فوق الصورة.
- لون الخلفية: لون الزجاج. يقول طرف اللوحة ذلك بوضوح: استخدم ألوان RGBA للحصول على أفضل تحكم. يتم تحويل اللون السداسي العادي إلى RGBA بنسبة عتامة تبلغ 30 بالمائة تلقائيًا، لذلك لا يتحول الزجاج إلى مادة صلبة أبدًا.
- نصف قطر الحدود: يدور زوايا البطاقة الزجاجية، لكل جانب أو مرتبط.
- عرض الحدود: يضيف مخططًا أبيض شبه شفاف من 0 إلى 10px، والذي يُقرأ مثل حافة لوح زجاجي. لون الحدود غير قابل للتعديل هنا.
- إصلاح تجاوز السعة (إذا لم يعمل التمويه): مفتاح الإنقاذ. تحمل بعض التخطيطات تجاوز السعة: مخفي، مما يمنع مرشح الخلفية الذي يعمل على تشغيل التمويه. قم بتشغيل هذا إذا قمت بتمكين كل شيء وما زلت لا ترى أي تأثير.
اختر صبغة الزجاج بلون RGBA #
انقر فوق العينة المخصصة بجوار لون الخلفية واختر لونًا، ثم اسحب شريط تمرير ألفا لأسفل. في العرض التوضيحي، القيمة هي اللون الأحمر شبه الشفاف (#DC4C4C8C)، الذي يلون البطاقة بينما تظل المقاعد الموجودة في الصورة خلفها مرئية من خلال التمويه.
قم بتدوير الزوايا وأنقذ التمويه المفقود #
تعيين أ نصف قطر الحدود لتنعيم البطاقة. بضع بكسلات كافية للمظهر الزجاجي. وإذا رفض التمويه الظهور، فاقلب إصلاح تجاوز إلى نعم: فهو يزيل الفائض: القاعدة المخفية التي تمنع مرشح الخلفية في بعض الحاويات.
التأثير النهائي #
إليكم النتيجة في الواجهة الأمامية: بطاقة زجاجية مستديرة ذات لون أحمر، والصورة غير واضحة خلفها، والعنوان والنص حادان في الأعلى.
حيث يعمل الشكل الزجاجي بشكل جيد #
- تراكبات البطل. لوحة زجاجية للعنوان الرئيسي وCTA أعلى صورة كاملة العرض.
- التسعير والبطاقات المميزة. بطاقات زجاجية على خلفية قسم متدرج.
- كتل الشهادة. الاقتباسات التي تطفو فوق الصور دون إخفائها.
- رؤوس لزجة. يؤدي التمويه الدقيق إلى إبقاء القائمة قابلة للقراءة أثناء تمرير المحتوى أسفلها.
- مربعات تسجيل الدخول أو الاشتراك. اللوحة الكلاسيكية المتجمدة فوق صورة العلامة التجارية.
الأسئلة المتداولة #
ما هو امتداد Glassmorphism في الإضافات الرئيسية؟
إنه امتداد مجاني يضيف تأثير الزجاج المصنفر إلى أي عنصر Elementor من علامة التبويب Advanced. تحصل على عناصر تحكم لقوة التمويه، ولون خلفية شبه شفاف، ونصف قطر الحدود، وعرض الحدود، ولن تضطر أبدًا إلى كتابة CSS بنفسك.
لماذا لا يظهر ضبابية الشكل الزجاجي؟
عادةً ما تحمل الحاوية الأصلية الفائض: مخفي، مما يحجب مرشح الخلفية خلف التأثير. قم بتشغيل مفتاح Fix Overflow الموجود أسفل قسم Glassmorphism. تأكد أيضًا من أن العنصر موجود فوق صورة أو خلفية ملونة، نظرًا لأن التمويه على اللون الأبيض العادي غير مرئي.
ما هي العناصر التي يمكن أن تستخدم تأثير التشكل الزجاجي؟
أي عنصر Elementor به علامة تبويب متقدمة: الأقسام والأعمدة والحاويات والأدوات الفردية. قم بتمكين الامتداد مرة واحدة في لوحة معلومات Master Addons، وسيظهر قسم Glassmorphism في علامة التبويب Advanced لكل عنصر في المحرر.
ما هو لون الخلفية الذي يجب أن أستخدمه في التشكل الزجاجي؟
لون RGBA شبه شفاف. اختر أي لون وقم بخفض قناة ألفا بحيث تظل الخلفية مرئية من خلال الصبغة. إذا قمت بإدخال لون HEX صلب، فإن الامتداد يحوله إلى RGBA بنسبة عتامة 30 بالمائة بحيث يظل تأثير الزجاج يعمل.
هل امتداد Glassmorphism مجاني؟
نعم. يأتي مع الإصدار المجاني من Master Addons for Elementor، في مجموعة Display Widgets في علامة التبويب Extensions. ال صفحة التسعير يسرد ما تضيفه خطط Pro بما يتجاوز الميزات المجانية.
إلتحاق بالركب #
يحول امتداد Glassmorphism خدعة CSS العبثية إلى عدد قليل من عناصر التحكم في علامة التبويب المتقدمة: التمكين، والتعتيم، والصبغة، ونصف القطر، والحدود. ضع عنصر واجهة مستخدم فوق الصورة، وحافظ على لون الخلفية شبه شفاف، ووصل إلى Fix Overflow إذا تم إخفاء التمويه. صفحة تمديد Glassmorphism يقارنها بكتابة CSS بنفسك. لمزيد من ترقيات المحرر مثل هذه، تصفح عناصر واجهة المستخدم والإضافات الرئيسية، أو احصل على تصميم جاهز من مجموعات القالب وأضف الزجاج في الأعلى.
