كيفية إنشاء خلفية منحرفة في Elementor (دليل 2026)

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

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

تمت إعادة بناء هذا الدليل لكيفية عمل Elementor فعليًا في عام 2026. تمت كتابة النسخة الأصلية من هذا المنشور مقابل الأقسام والأعمدة الداخلية، وكلاهما قديم الآن. كل شيء أدناه يستخدم حاويات فليكسبوكس، عنصر التخطيط الافتراضي لـ Elementor منذ الإصدار 3.6 والبنية الوحيدة التي تحصل عليها في صفحة جديدة.

ما تحتاجه قبل أن تبدأ

• العنصر مجاني (3.6 أو أحدث، لذا فإن الحاويات قيد التشغيل)
• الإضافات الرئيسية: قم بتثبيته مجانًا على WordPress.org، ثم قم بتشغيل ملحق CSS المخصص
• حاوية ذات لون خلفية أو مجموعة صور. لا تخطي هذا. يقوم الانحراف بتحويل الصندوق، لذلك إذا لم يكن الصندوق يحتوي على أي شيء مرئي فيه، فلن ترى أي تغيير على الإطلاق. الحاوية الشفافة هي السبب الأول الذي يجعل الناس يعتقدون أن هذه الخدعة مكسورة.

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

فهم الانحراف قبل لصق أي شيء

الانحراف هو تحويل CSS. transform: skew(0deg, -10deg) يميل العنصر على طول المحور Y بمقدار عشر درجات، ويحول حوافه العلوية والسفلية إلى أقطار.

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

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

حاويتان، قاعدتان، قيمتان متعارضتان. هذا هو كل شيء.

الخطوة 1: بناء هيكل الحاوية

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

الآن اسحب أ الحاوية الثانية داخل الأولى. تحتوي تلك الحاوية المتداخلة على المحتوى الفعلي: العنوان، النص، الزر، الصورة، مهما كان القسم المخصص لها. قم بتصميمه بالطريقة التي تريدها.

إذن الهيكل هو:

• الحاوية الخارجية: لون الخلفية أو الصورة، يحصل على الانحراف
• الحاوية الداخلية: كل المحتوى الخاص بك، يحصل على الانحراف المضاد

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

الخطوة 2: أضف انحراف CSS إلى الحاوية الخارجية

حدد الحاوية الخارجية، وانتقل إلى متقدم علامة التبويب، والعثور على ماجستير مخصص CSS المربع الذي يضيفه Master Addons. لصق هذا في:

selector {
  padding: 400px 0;
  margin-top: -200px;
  transform: skew(0deg, -10deg);
  overflow: hidden;
}

إليك ما يفعله كل سطر، حتى تتمكن من تعديله بدلاً من مجرد الأمل

• selector هو اختصار Elementor لـ “، هذا العنصر المحدد. يقوم برنامج” Master Addons بتوزيعه لك، لذلك لا يمكن أن تتسرب القاعدة إلى حاويات أخرى.
• padding: 400px 0 يمنح الحاوية مساحة رأسية كافية لتذهب الحواف الزاوية إلى مكان ما. قم بتحريف حاوية قصيرة وقمت فقط بقص الزوايا.
• margin-top: -200px اسحب الحاوية لأعلى إلى الحاوية التي فوقها بحيث يتداخل القطر، بدلاً من ترك مثلث أبيض خلفها. نصف قيمة الحشو هي نسبة بداية مناسبة.
• transform: skew(0deg, -10deg) هي الزاوية نفسها. يميل السلبي في اتجاه واحد، ويضرب في الاتجاه الآخر.
• overflow: hidden يمنع الزوايا المنحرفة من الانسكاب جانبًا. اتركه وستحصل على شريط تمرير أفقي سأعود إليه.

شيء واحد يستحق الإشارة إليه: إذا كنت قد لمست أيضًا يحول عناصر التحكم في علامة التبويب "متقدم" الخاصة بـ Elementor، ستقاتل مع CSS هذا، نظرًا لأن كلاهما يكتبان بنفس الطريقة transform الملكية وآخر من يقوم بالتحميل يفوز. اختر مكانًا لضبط الزاوية واترك الآخر وشأنه.

أدرج إصدار 2020 من هذا البرنامج التعليمي أربعة أسطر مسبوقة بالبائع (-webkit-, -moz-, -ms-, -o-). احذفهم. غير مسبوقة transform لقد عملت في كل متصفح منذ حوالي عقد من الزمن، وهذه الأسطر الإضافية تجعل قراءة مربع CSS أكثر صعوبة.

الخطوة 3: مكافحة انحراف الحاوية الداخلية

عند هذه النقطة، يتم إمالة المحتوى الخاص بك مع الخلفية. حدد الحاوية الداخليةافتح علامة التبويب "متقدم" والصقها في MA Custom CSS:

selector {
  transform: skew(0deg, 10deg);
}

نفس الرقم، علامة معاكسة. الحاوية الخارجية في -10deg يعني الحاوية الداخلية في 10deg. قم بتغيير أحدهما دون تغيير الآخر ويكون النص الخاص بك بزاوية طفيفة يلاحظها القراء حتى لو لم يتمكنوا من تحديد السبب.

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

الخطوة 4: إصلاح تجاوز سعة الهاتف المحمول (لا تتخطى هذا)

تتوقف معظم البرامج التعليمية عند الخطوة 3، ولهذا السبب يتم سحب الأقسام المنحرفة من المواقع المباشرة بعد أسبوع.

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

شيئان يمنعان ذلك:

1. يحفظ overflow: hidden على الحاوية المنحرفة، كما في الكود أعلاه.
2. تقليل الزاوية على الشاشات الصغيرة. يتحول الانحراف بمقدار 10 درجات الذي يبدو حادًا على شاشة مقاس 1440 بكسل إلى شكل قطري قاسٍ على هاتف مقاس 375 بكسل، ويأكل عنوانك الرئيسي.

أضف هذا أسفل الكود الموجود في مربع CSS الخاص بالحاوية الخارجية:

@media (max-width: 767px) {
  selector {
    padding: 200px 0;
    margin-top: -100px;
    transform: skew(0deg, -4deg);
  }
}

والعكس المطابق في الحاوية الداخلية:

@media (max-width: 767px) {
  selector {
    transform: skew(0deg, 4deg);
  }
}

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

البديل الحديث: مسار المقطع، بدون انحراف مضاد على الإطلاق

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

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

حاوية واحدة، قاعدة واحدة:

selector {
  padding: 160px 0;
  clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%);
}

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

ما هي الطريقة التي يجب عليك استخدامها؟

كل متصفح حالي يتعامل مع كليهما. تحقق من جداول دعم مسار المقطع على MDN إذا كنت عالقًا في دعم شيء غير عادي.

تخطي CSS بالكامل: قم باستيراد القالب الجاهز

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

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

حيث تعمل الخلفيات المنحرفة فعليًا

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

يتوقفون عن العمل عندما يكون كل قسم بزاوية. لم يعد هناك شيء يُقرأ على أنه انتقال بعد الآن، وتشعر الصفحة بأنها مشغولة. في الصفحة المقصودة الطويلة، عادةً ما تكون حافتان أو ثلاث حواف بزاوية كافية.

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

استكشاف الاخطاء

• لم يتغير شيء. الحاوية ليس لها خلفية. قم بتعيين لون أو صورة وانظر مرة أخرى.
• يتم تمرير الصفحة بأكملها بشكل جانبي. يضيف overflow: hidden إلى الحاوية المنحرفة، تأكد من أن الحاوية الأصلية لا تفيض أيضًا.
• النص لا يزال مائلا. الانحراف المضاد موجود على العنصر الخطأ، أو أن الإشارة خاطئة. إذا كانت الحاوية الخارجية سالبة، فيجب أن تكون الحاوية الداخلية موجبة.
• فجوة بيضاء فوق القسم. زيادة السلبية margin-top لذا فإن الزاوية تسحب أكثر إلى القسم أعلاه.
• الزاوية تقفز بشكل غير متوقع. يتم تعيين عناصر التحكم في التحويل المضمنة في Elementor على نفس العنصر وتتجاوز CSS الخاص بك. مسحهم.
• لا يوجد مربع MA Custom CSS في علامة التبويب "متقدم". تم إيقاف تشغيل الامتداد. الإضافات الرئيسية، ثم الإعدادات، ثم الامتدادات، وتمكينها.

الأسئلة المتداولة

إلتحاق بالركب

يؤدي إنشاء خلفية منحرفة في Elementor إلى قاعدتين في صندوقي CSS: تحريف الحاوية الخارجية، وتحريف الحاوية الداخلية بشكل مضاد. يضيف overflow: hidden، خفف من الزاوية على الهاتف المحمول، وسوف يصمد على الأجهزة الحقيقية وليس فقط في المحرر. على بناء جديد، clip-path يمنحك نفس المظهر مع نصف الإعداد.

كل ذلك يعمل على Elementor المجاني، منذ ذلك الحين الإضافات الرئيسية هو ما يضع مربع CSS المخصص هناك في البداية. إذا كنت تريد لاحقًا بقية مجموعة الأدوات (Theme Builder، Popup Builder، مجموعة الامتدادات الكاملة)، فهذا ما برو يغطي، ولكن لا شيء في هذا البرنامج التعليمي يحتاج إليه.

القراءة ذات الصلة: تأثيرات الرسوم المتحركة العنصر, كيفية إضافة التأثيرات العائمة في Elementor، و كيفية إنشاء رأس لزج في Elementor.