كيفية إضافة تراكب الخلفية في Elementor لتصميم الويب

Elementor هو مكون إضافي رائد لإنشاء الصفحات في WordPress والذي جعل تصميم الويب أسهل من أي وقت مضى. إحدى ميزاته البارزة هي خيار تراكب الخلفية. ومن خلال الاستفادة من هذه الميزة بشكل صحيح، يمكنك الارتقاء بجاذبية موقع الويب الخاص بك وجمالياته إلى المستوى التالي.

يوفر لك Elementor خيارات متعددة لتراكب الخلفية. في هذه المقالة، سنعرض لك دليلًا خطوة بخطوة حول كل خيار من هذه الخيارات. لذلك، دعونا ننتقل إلى المقالة حول كيفية إضافة تراكب الخلفية في Elementor لتصميم الويب.

ما هو تراكب الخلفية العنصرية؟

تراكب الخلفية عبارة عن طبقة شبه شفافة تتم إضافتها أعلى صورة أو نقش أو لون خلفية موجود. يمكنك تخصيص التراكب بألوان مختلفة ومستويات عتامة وتدرجات وحتى أنماط لإنشاء تأثيرات مذهلة بصريًا.

يعد تراكب الخلفية إحدى الميزات الأساسية للمكون الإضافي Elementor، والذي يأتي مدمجًا. يمكنك استخدامه لكل من الإصدارات المجانية والمميزة. تعتبر هذه الميزة مفيدة بشكل خاص عند استخدام صور منخفضة الجودة أو عرض نص أعلى أي خلفية.

أنواع تراكب خلفية العنصر

هناك ثلاثة أنواع أساسية من تراكب الخلفية التي يمكنك إضافتها في Elementor. هم:

1. تراكب اللون الصلب : إنه يضيف فقط تراكب اللون الصلب إلى قسم أو عنصر ويب. يمكنك تخصيص هذا التراكب عن طريق تحديد لون خالص ومستوى التعتيم الخاص به.

2. تراكب اللون المتدرج : يتيح لك التدرج إضافة تأثيرات تراكب متعددة الألوان إلى خلفية أي قسم أو عنصر ويب. آمل أن تعرف بالفعل ما هو التدرج. أو انتظر، سنناقش ذلك لاحقًا في هذه التدوينة.

3. تراكب الصور : تتيح لك هذه الميزة تطبيق تراكب لون خالص أو نسيج أو نمط أعلى الصورة لتعزيز جاذبيتها.

ملاحظات خاصة حول تراكب خلفية العنصر

يتيح لك خيار تراكب الخلفية في Elementor إضافة تراكبات إلى خلفية عنصر واجهة المستخدم فقط، وليس إلى خلفية المحتوى.

أنت بحاجة إلى مكون إضافي مثل HappyAddons لإضافة تأثير التراكب مباشرةً إلى خلفية المحتوى .

لذلك، إذا كان لديك كل من Elementor وHappyAddons على موقعك، فيمكنك استخدام خيار تراكب الخلفية المناسب أينما كنت في حاجة إليه. دعونا استكشاف الأساليب.

الطريقة الأولى: كيفية إضافة تراكبات إلى خلفية القطعة في Elementor

كما قلنا سابقًا، هناك ثلاثة أنواع من تراكبات الخلفية التي يمكنك إضافتها في Elementor. سنوضح لك الآن كيفية إضافة كل هذه الأنواع من تراكب الخلفية إلى عناصر واجهة مستخدم Elementor.

اكتب 01: أضف تراكب خلفية بلون خالص إلى عنصر واجهة المستخدم

نأمل أن يكون القسم والمحتوى الخاص بك جاهزين. انقر على أيقونة تحرير الحاوية للقسم بأكمله.

انتقل إلى علامة التبويب "النمط" . سوف تحصل على خيارين: الخلفية وتراكب الخلفية . باستخدام هذين الخيارين، يمكنك إضافة تراكبات خلفية إلى Elementor.

على سبيل المثال، افتح الخلفية . حدد أيقونة الفرشاة . أدناه، ستحصل على خيار اللون ، والذي يمكنك من خلاله إضافة لون خالص إلى الخلفية.

يمكنك أن ترى أننا اخترنا لونًا لتراكب الخلفية لقسم الأداة.

اكتب 02: أضف تراكب خلفية متدرجة الألوان إلى عنصر واجهة المستخدم

حدد القطعة مرة أخرى. انتقل إلى علامة التبويب "النمط" . قم بتوسيع خيار الخلفية .

حدد خيار التدرج الموجود بجوار نوع الخلفية. ستحصل على خيارات أكثر خيارات الألوان التي تظهر تحتها.

الآن، حدد اللون الأساسي والثانوي لإنشاء لوح التدرج الخاص بك. سترى الألوان معروضة فوق عنصر واجهة المستخدم الخاص بك كتراكب للخلفية.

وبالتالي، يمكنك إنشاء تراكبات خلفية ملونة متدرجة لخلفية عنصر واجهة المستخدم الخاص بك. هناك العديد من الخيارات الأخرى في Gradient. آمل أن تتمكن من استكشافها واستخدامها بنفسك.

النوع 03: إضافة تراكب خلفية الصورة إلى عنصر واجهة المستخدم

بالنسبة لتراكبات الصور، يمكنك استخدام الصور والطوق الصلب معًا. باستخدام لون خالص مدمج مع الصورة، يمكنك إنشاء تباين مثالي بحيث يكون المحتوى أعلاه مرئيًا بشكل أفضل. دعونا نرى كيفية القيام بذلك.

انتقل إلى علامة التبويب "النمط" . قم بتوسيع خيار تراكب الخلفية . انقر فوق خيار الصورة . سيُسمح لك بتحديد صورة وإضافتها سواء من محرك الأقراص المحلي أو مكتبة الوسائط.

يمكنك أن ترى أننا أضفنا صورة إلى تراكب الخلفية. بعد ذلك، حدد الموضع المناسب بحيث يتناسب تمامًا مع المحتوى.

قم بتوسيع خيار الخلفية . بعد ذلك، حدد اللون الصلب المناسب الذي يتناسب مع الصورة. سترى أنه تمت إضافة طبقة فوق الصورة.

انتقل إلى خيار تراكب الخلفية .

انتقل إلى Blend Mode (وضع المزج) من خلال التمرير لأسفل في لوحة Elementor. انقر على الأيقونة الموجودة على الجانب الأيمن. سيتم فتح قائمة أوضاع المزج.

حدد الحالة المزاجية التي تفضلها من خلال استكشاف جميع الحالات المزاجية المختلطة في القائمة. سترى التأثير على الصورة.

يمكنك أن ترى أن تراكب الخلفية وألوان النص متشابهة تقريبًا. ولهذا السبب، قمنا بتغيير لون النص لإنشاء تباين بينهما بحيث يكون النص قابلاً للقراءة بشكل كبير.

وبالتالي، يمكنك إضافة تراكب الخلفية إلى خلفية عنصر واجهة المستخدم Elementor.

الطريقة الثانية: كيفية إضافة تراكبات إلى خلفية المحتوى في Elementor

عملية تراكب المحتوى على الخلفية هي تمامًا نفس الطريقة المذكورة أعلاه. هذه ميزة مجانية في البرنامج المساعد HappyAddons . إذا كنت لا تعرف الكثير عن المكون الإضافي حتى الآن، فاستكشف ما هو HappyAddons.

باختصار، HappyAddons هو ملحق مثير للمكون الإضافي Elementor. يأتي مع أكثر من 120 عنصر واجهة مستخدم إضافي وأكثر من 20 ميزة. وباستخدامها، يمكنك التغلب على قيود Elementor وإضافة المزيد من الوظائف المثيرة إلى موقعك.

إذًا، أين توجد خيارات تراكب الخلفية في HappyAddons؟ حدد عنصر واجهة المستخدم للمحتوى . انتقل إلى علامة التبويب خيارات متقدمة . سترى خيارات الخلفية وتراكب الخلفية ضمن علامة التبويب هذه.

يمكنك أن ترى أن أسماء هذين الخيارين وأسماء خياري Elementor هي نفسها تمامًا. وعملية عملهم هي نفسها أيضًا. دعونا استكشاف هذه العملية.

اكتب 01: أضف تراكب خلفية بلون خالص إلى المحتوى المضاف

حدد عنصر واجهة المستخدم للمحتوى . انتقل إلى علامة التبويب خيارات متقدمة في لوحة Elementor. قم بتوسيع خيار الخلفية .

اختر لونًا خالصًا . سترى أنه تم تطبيق اللون على خلفية المحتوى.

اكتب 02: أضف تراكب خلفية متدرجة الألوان إلى المحتوى المضاف

مثل الطريقة المذكورة أعلاه، حدد خيار التدرج ضمن الخلفية. تعيين اللون الأساسي والثانوي. سيتم عرض لوحة الألوان خلف المحتوى الموجود على لوحة Elementor.

النوع 03: إضافة تراكب خلفية الصورة إلى المحتوى المُضاف

حدد عنصر واجهة المستخدم للمحتوى . انتقل إلى علامة التبويب خيارات متقدمة .

قم بتوسيع خيار تراكب الخلفية . انقر على منطقة الصورة .

ستتمكن من إضافة صورة سواء من محرك الأقراص المحلي أو مكتبة الوسائط كما هو موضح في الطريقة أعلاه. نأمل أن تتمكن من القيام بذلك هنا أيضا.

تم الآن تغيير لون النص لجعل محتوى النص بارزًا على الخلفية. نأمل أن يكون هذا قد جعل المحتوى أفضل وأكثر قابلية للقراءة الآن.

وبالتالي، يمكنك إضافة تراكبات خلفية الصورة إلى المحتوى الخاص بك في Elementor.

ملحوظة: عادةً ما تعمل المكونات الإضافية Elementor على إبطاء المواقع قليلاً. ولكن هناك العديد من الطرق لتسريع مثل هذه المواقع. اكتشف كيفية تحسين سرعة موقع الويب.

الملاحظات النهائية!

أصبحت إضافة تراكب الخلفية اليوم ممارسة شائعة بين معظم مصممي مواقع الويب المحترفين. إنها ميزة بسيطة وسهلة لتصميم الويب ولكنها تتمتع بقدرة هائلة على جعل أقسام الويب والمحتوى الخاص بك رائعًا ومثيرًا.

منذ سنوات مضت، كان من الصعب جدًا إنشاء تراكبات خلفية باستخدام لغات HTML وCSS. لكن Elementor جعلها مرنة والتي تم تعزيزها كثيرًا باستخدام البرنامج المساعد HappyAddons. نأمل، من خلال متابعة منشور المدونة، أن تتمكن الآن من إنشاء تراكبات جذابة للخلفية والمحتوى على موقع الويب الخاص بك.

إذا كنت لا تزال تواجه أي مشاكل مع هذه الميزة، يرجى التواصل معنا من خلال مربع التعليق أو خيار الدردشة المباشرة. سنعود إليك قريبًا بحل قابل للتطبيق.