كيفية إنشاء انتقالات قسم على شكل غير منتظم مع Divi

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

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

نتيجة المثال

دعنا نلقي نظرة على عينة تخطيط مع انتقالات أقسام مذهلة غير منتظمة الشكل:

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

كيفية إنشاء انتقالات قسم على شكل غير منتظم مع Divi

اشترك في قناتنا على اليوتيوب

قم بإنشاء حدود شفافة باستخدام Photoshop

يمكنك تحقيق الأشكال الأصلية كما تريد باستخدام Photoshop. يمكنك أيضًا اختيار بديل مجاني يسمى GimpShop. في هذا البرنامج التعليمي ، سنستخدم Photoshop على الرغم من ذلك.

افتح برنامج فوتوشوب

ابدأ بفتح برنامج فوتوشوب على جهاز الكمبيوتر الخاص بك.

صورة مفتوحة

بمجرد القيام بذلك ، افتح الصورة التي ترغب في العمل عليها.

انقر نقرًا مزدوجًا فوق الصورة وإنشاء طبقة

بمجرد تحميل صورتك داخل Photoshop ، انقر نقرًا مزدوجًا فوق طبقة الصورة وقم بإنشاء طبقة جديدة لها (الطبقة 0).

أضف طبقة أخرى

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

حدد الفرشاة والحجم

أثناء تنشيط الطبقة الأولى ، امض قدمًا وانقر على أيقونة الفرشاة.

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

ابدأ باستخدام الفرشاة على الحدود

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

CTRL (في نظام التشغيل Windows) أو الأمر (نظام التشغيل Mac) + تحديد طبقة جديدة

بمجرد الانتهاء من ذلك ، يمكنك الضغط على CTRL (لنظام التشغيل Windows) أو الأمر (لنظام التشغيل Mac) على لوحة المفاتيح والنقر فوق الطبقة الأولى في نفس الوقت. سترى أن Photoshop سيحدد كل ما أضفته إلى تلك الطبقة ، وهو في هذه الحالة الحد المصمم.

جعل طبقة جديدة غير مرئية

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

حدد صورة وحذف طبقة جديدة

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

حدد أداة الخيمة المستطيلة وانقر على الصورة

انقر فوق أداة الخيمة المستطيلة واضغط في مكان ما بشكل عشوائي على الصورة.

احفظ الصورة بصيغة PNG

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

أضف الخلفيات إلى Divi

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

إضافة قسم قياسي جديد

أضف صفحة جديدة ، وانتقل إلى Visual Builder وأضف قسمًا قياسيًا جديدًا إلى تلك الصفحة.

تحميل صورة الخلفية

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

أضف لون الخلفية

بمجرد القيام بذلك ، يمكنك تحديد اللون الذي سيظهر في الجزء الشفاف من صورتك. في هذا المثال ، استخدمنا "#dddddd" كلون للخلفية. يمكنك أن ترى على الفور أن اللون سيظهر مباشرة داخل الجزء الشفاف من الصورة.

تأكد من وجود حشوة كافية

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

أضف نفس لون الخلفية إلى القسم التالي

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

مثال

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

افكار اخيرة

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

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!