كيفية إضافة تراكب الخلفية في Elementor لتصميم الويب
نشرت: 2024-07-01Elementor هو مكون إضافي رائد لإنشاء الصفحات في WordPress والذي جعل تصميم الويب أسهل من أي وقت مضى. إحدى ميزاته البارزة هي خيار تراكب الخلفية. ومن خلال الاستفادة من هذه الميزة بشكل صحيح، يمكنك الارتقاء بجاذبية موقع الويب الخاص بك وجمالياته إلى المستوى التالي.
يوفر لك Elementor خيارات متعددة لتراكب الخلفية. في هذه المقالة، سنعرض لك دليلًا خطوة بخطوة حول كل خيار من هذه الخيارات. لذلك، دعونا ننتقل إلى المقالة حول كيفية إضافة تراكب الخلفية في Elementor لتصميم الويب.
ما هو تراكب الخلفية العنصرية؟
تراكب الخلفية عبارة عن طبقة شبه شفافة تتم إضافتها أعلى صورة أو نقش أو لون خلفية موجود. يمكنك تخصيص التراكب بألوان مختلفة ومستويات عتامة وتدرجات وحتى أنماط لإنشاء تأثيرات مذهلة بصريًا.
يعد تراكب الخلفية إحدى الميزات الأساسية للمكون الإضافي Elementor، والذي يأتي مدمجًا. يمكنك استخدامه لكل من الإصدارات المجانية والمميزة. تعتبر هذه الميزة مفيدة بشكل خاص عند استخدام صور منخفضة الجودة أو عرض نص أعلى أي خلفية.
أنواع تراكب خلفية العنصر
هناك ثلاثة أنواع أساسية من تراكب الخلفية التي يمكنك إضافتها في Elementor. هم:
1. تراكب اللون الصلب : إنه يضيف فقط تراكب اللون الصلب إلى قسم أو عنصر ويب. يمكنك تخصيص هذا التراكب عن طريق تحديد لون خالص ومستوى التعتيم الخاص به.
2. تراكب اللون المتدرج : يتيح لك التدرج إضافة تأثيرات تراكب متعددة الألوان إلى خلفية أي قسم أو عنصر ويب. آمل أن تعرف بالفعل ما هو التدرج. أو انتظر، سنناقش ذلك لاحقًا في هذه التدوينة.
3. تراكب الصور : تتيح لك هذه الميزة تطبيق تراكب لون خالص أو نسيج أو نمط أعلى الصورة لتعزيز جاذبيتها.
ملاحظات خاصة حول تراكب خلفية العنصر
يتيح لك خيار تراكب الخلفية في Elementor إضافة تراكبات إلى خلفية عنصر واجهة المستخدم فقط، وليس إلى خلفية المحتوى.
![كيفية إضافة تراكب الخلفية في Elementor لتصميم الويب 1 Elementor background overlay to the widget background](/uploads/article/54404/G9dyyDvS4ugScAor.webp)
أنت بحاجة إلى مكون إضافي مثل HappyAddons لإضافة تأثير التراكب مباشرةً إلى خلفية المحتوى .
![كيفية إضافة تراكب الخلفية في Elementor لتصميم الويب 2 Elementor background overlay to the content background](/uploads/article/54404/VfH4FQonAWIsQp2o.webp)
لذلك، إذا كان لديك كل من Elementor وHappyAddons على موقعك، فيمكنك استخدام خيار تراكب الخلفية المناسب أينما كنت في حاجة إليه. دعونا استكشاف الأساليب.
الطريقة الأولى: كيفية إضافة تراكبات إلى خلفية القطعة في Elementor
كما قلنا سابقًا، هناك ثلاثة أنواع من تراكبات الخلفية التي يمكنك إضافتها في Elementor. سنوضح لك الآن كيفية إضافة كل هذه الأنواع من تراكب الخلفية إلى عناصر واجهة مستخدم Elementor.
اكتب 01: أضف تراكب خلفية بلون خالص إلى عنصر واجهة المستخدم
نأمل أن يكون القسم والمحتوى الخاص بك جاهزين. انقر على أيقونة تحرير الحاوية للقسم بأكمله.
انتقل إلى علامة التبويب "النمط" . سوف تحصل على خيارين: الخلفية وتراكب الخلفية . باستخدام هذين الخيارين، يمكنك إضافة تراكبات خلفية إلى Elementor.
![كيفية إضافة تراكب الخلفية في Elementor لتصميم الويب 3 Go to Elementor Background Overlay options](/uploads/article/54404/kE7tJUzMtWaNK6oD.webp)
على سبيل المثال، افتح الخلفية . حدد أيقونة الفرشاة . أدناه، ستحصل على خيار اللون ، والذي يمكنك من خلاله إضافة لون خالص إلى الخلفية.
![كيفية إضافة تراكب الخلفية في Elementor لتصميم الويب 4 Add solid color background overlay in Elementor](/uploads/article/54404/jXy55ZWKFrq2Ufpj.webp)
يمكنك أن ترى أننا اخترنا لونًا لتراكب الخلفية لقسم الأداة.
![كيفية إضافة تراكب الخلفية في Elementor لتصميم الويب 5 Select a color for the background overlay](/uploads/article/54404/QSz7Ua9SmoRN7nNj.webp)
اكتب 02: أضف تراكب خلفية متدرجة الألوان إلى عنصر واجهة المستخدم
حدد القطعة مرة أخرى. انتقل إلى علامة التبويب "النمط" . قم بتوسيع خيار الخلفية .
حدد خيار التدرج الموجود بجوار نوع الخلفية. ستحصل على خيارات أكثر خيارات الألوان التي تظهر تحتها.
الآن، حدد اللون الأساسي والثانوي لإنشاء لوح التدرج الخاص بك. سترى الألوان معروضة فوق عنصر واجهة المستخدم الخاص بك كتراكب للخلفية.
![كيفية إضافة تراكب الخلفية في Elementor لتصميم الويب 6 Add a Gradient Color Background Overlay to the Elementor Widget](/uploads/article/54404/zkrFZv1961gjR8qb.webp)
وبالتالي، يمكنك إنشاء تراكبات خلفية ملونة متدرجة لخلفية عنصر واجهة المستخدم الخاص بك. هناك العديد من الخيارات الأخرى في Gradient. آمل أن تتمكن من استكشافها واستخدامها بنفسك.
النوع 03: إضافة تراكب خلفية الصورة إلى عنصر واجهة المستخدم
بالنسبة لتراكبات الصور، يمكنك استخدام الصور والطوق الصلب معًا. باستخدام لون خالص مدمج مع الصورة، يمكنك إنشاء تباين مثالي بحيث يكون المحتوى أعلاه مرئيًا بشكل أفضل. دعونا نرى كيفية القيام بذلك.
انتقل إلى علامة التبويب "النمط" . قم بتوسيع خيار تراكب الخلفية . انقر فوق خيار الصورة . سيُسمح لك بتحديد صورة وإضافتها سواء من محرك الأقراص المحلي أو مكتبة الوسائط.
![كيفية إضافة تراكب الخلفية في Elementor لتصميم الويب 7 Go to image option in Elementor Background Overlay](/uploads/article/54404/uOvPrdC1wNaef0rZ.webp)
يمكنك أن ترى أننا أضفنا صورة إلى تراكب الخلفية. بعد ذلك، حدد الموضع المناسب بحيث يتناسب تمامًا مع المحتوى.
![كيفية إضافة تراكب الخلفية في Elementor لتصميم الويب 8 Image added to the Elementor Background Overlay option](/uploads/article/54404/taZnND3SDEoHrWgL.webp)
قم بتوسيع خيار الخلفية . بعد ذلك، حدد اللون الصلب المناسب الذي يتناسب مع الصورة. سترى أنه تمت إضافة طبقة فوق الصورة.
![كيفية إضافة تراكب الخلفية في Elementor لتصميم الويب 9 Add a solid color to the Image overlay](/uploads/article/54404/aWmKkeIlcCwpwwqr.webp)
انتقل إلى خيار تراكب الخلفية .
![](https://s.stat888.com/img/bg.png)
![كيفية إضافة تراكب الخلفية في Elementor لتصميم الويب 10 Go to Background Overlay Option again](/uploads/article/54404/AtvIewzsZsbNnw1N.webp)
انتقل إلى Blend Mode (وضع المزج) من خلال التمرير لأسفل في لوحة Elementor. انقر على الأيقونة الموجودة على الجانب الأيمن. سيتم فتح قائمة أوضاع المزج.
![كيفية إضافة تراكب الخلفية في Elementor لتصميم الويب 11 Come to the Blend Mode](/uploads/article/54404/Syj8JBFJAA8w62px.webp)
حدد الحالة المزاجية التي تفضلها من خلال استكشاف جميع الحالات المزاجية المختلطة في القائمة. سترى التأثير على الصورة.
![كيفية إضافة تراكب الخلفية في Elementor لتصميم الويب 12 Select a Blend Mode](/uploads/article/54404/0zZPK2t89jFhTeR9.webp)
يمكنك أن ترى أن تراكب الخلفية وألوان النص متشابهة تقريبًا. ولهذا السبب، قمنا بتغيير لون النص لإنشاء تباين بينهما بحيث يكون النص قابلاً للقراءة بشكل كبير.
![كيفية إضافة تراكب الخلفية في Elementor لتصميم الويب 13 Create a contrast between the background overlay and text](/uploads/article/54404/zLxGyt4lVG308Y6J.webp)
وبالتالي، يمكنك إضافة تراكب الخلفية إلى خلفية عنصر واجهة المستخدم Elementor.
الطريقة الثانية: كيفية إضافة تراكبات إلى خلفية المحتوى في Elementor
عملية تراكب المحتوى على الخلفية هي تمامًا نفس الطريقة المذكورة أعلاه. هذه ميزة مجانية في البرنامج المساعد HappyAddons . إذا كنت لا تعرف الكثير عن المكون الإضافي حتى الآن، فاستكشف ما هو HappyAddons.
باختصار، HappyAddons هو ملحق مثير للمكون الإضافي Elementor. يأتي مع أكثر من 120 عنصر واجهة مستخدم إضافي وأكثر من 20 ميزة. وباستخدامها، يمكنك التغلب على قيود Elementor وإضافة المزيد من الوظائف المثيرة إلى موقعك.
إذًا، أين توجد خيارات تراكب الخلفية في HappyAddons؟ حدد عنصر واجهة المستخدم للمحتوى . انتقل إلى علامة التبويب خيارات متقدمة . سترى خيارات الخلفية وتراكب الخلفية ضمن علامة التبويب هذه.
![كيفية إضافة تراكب الخلفية في Elementor لتصميم الويب 14 Background Overlay options in HappyAddons](/uploads/article/54404/7C5OzvYFePeA6tYV.webp)
يمكنك أن ترى أن أسماء هذين الخيارين وأسماء خياري Elementor هي نفسها تمامًا. وعملية عملهم هي نفسها أيضًا. دعونا استكشاف هذه العملية.
اكتب 01: أضف تراكب خلفية بلون خالص إلى المحتوى المضاف
حدد عنصر واجهة المستخدم للمحتوى . انتقل إلى علامة التبويب خيارات متقدمة في لوحة Elementor. قم بتوسيع خيار الخلفية .
اختر لونًا خالصًا . سترى أنه تم تطبيق اللون على خلفية المحتوى.
![كيفية إضافة تراكب الخلفية في Elementor لتصميم الويب 15 Add a solid color background overlay to Elementor content background](/uploads/article/54404/ugSSFIRSZvgKR2vc.webp)
اكتب 02: أضف تراكب خلفية متدرجة الألوان إلى المحتوى المضاف
مثل الطريقة المذكورة أعلاه، حدد خيار التدرج ضمن الخلفية. تعيين اللون الأساسي والثانوي. سيتم عرض لوحة الألوان خلف المحتوى الموجود على لوحة Elementor.
![كيفية إضافة تراكب الخلفية في Elementor لتصميم الويب 16 Add a Gradient Color Background Overlay to the Added Content](/uploads/article/54404/YNrE0vjfLSPWzZCp.webp)
النوع 03: إضافة تراكب خلفية الصورة إلى المحتوى المُضاف
حدد عنصر واجهة المستخدم للمحتوى . انتقل إلى علامة التبويب خيارات متقدمة .
قم بتوسيع خيار تراكب الخلفية . انقر على منطقة الصورة .
![كيفية إضافة تراكب الخلفية في Elementor لتصميم الويب 17 Add image background overlay to Elementor content](/uploads/article/54404/q2Al68Kz7sh4Eskj.webp)
ستتمكن من إضافة صورة سواء من محرك الأقراص المحلي أو مكتبة الوسائط كما هو موضح في الطريقة أعلاه. نأمل أن تتمكن من القيام بذلك هنا أيضا.
![كيفية إضافة تراكب الخلفية في Elementor لتصميم الويب 18 Image background overlay is added to the Elementor content](/uploads/article/54404/Cs2p8gg0qugtmxU6.webp)
تم الآن تغيير لون النص لجعل محتوى النص بارزًا على الخلفية. نأمل أن يكون هذا قد جعل المحتوى أفضل وأكثر قابلية للقراءة الآن.
![كيفية إضافة تراكب الخلفية في Elementor لتصميم الويب 19 Change the text color](/uploads/article/54404/1Oa3qOUpIxZsbx6k.webp)
وبالتالي، يمكنك إضافة تراكبات خلفية الصورة إلى المحتوى الخاص بك في Elementor.
ملحوظة: عادةً ما تعمل المكونات الإضافية Elementor على إبطاء المواقع قليلاً. ولكن هناك العديد من الطرق لتسريع مثل هذه المواقع. اكتشف كيفية تحسين سرعة موقع الويب.
الملاحظات النهائية!
أصبحت إضافة تراكب الخلفية اليوم ممارسة شائعة بين معظم مصممي مواقع الويب المحترفين. إنها ميزة بسيطة وسهلة لتصميم الويب ولكنها تتمتع بقدرة هائلة على جعل أقسام الويب والمحتوى الخاص بك رائعًا ومثيرًا.
منذ سنوات مضت، كان من الصعب جدًا إنشاء تراكبات خلفية باستخدام لغات HTML وCSS. لكن Elementor جعلها مرنة والتي تم تعزيزها كثيرًا باستخدام البرنامج المساعد HappyAddons. نأمل، من خلال متابعة منشور المدونة، أن تتمكن الآن من إنشاء تراكبات جذابة للخلفية والمحتوى على موقع الويب الخاص بك.
إذا كنت لا تزال تواجه أي مشاكل مع هذه الميزة، يرجى التواصل معنا من خلال مربع التعليق أو خيار الدردشة المباشرة. سنعود إليك قريبًا بحل قابل للتطبيق.