هل ترغب في استخدام ميزة قناع الخلفية وتراكب الأنماط في Divi؟
مع الماضي إصدار وظيفة قناع الخلفية ونمط الخلفية باستخدام Divi، يمكنك إنشاء أقسام مميزة وجذابة لموقعك الإلكتروني. يُعدّ قسم البطل أول قسم في موقعك الإلكتروني، وأول ما يراه زوارك قبل التمرير لأسفل، لذا من المهم أن تجعله لافتًا للنظر!
ستوضح لك هذه المقالة كيفية إنشاء خمسة أقنعة خلفية فريدة وتراكبات أنماط يمكنك تطبيقها على صورة خلفية لإنشاء أقسام رئيسية مذهلة حقًا.
سيغطي هذا البرنامج التعليمي الخطوات الأساسية اللازمة لإنشاء كل قسم من أقسام Hero ويمنحك الأدوات التي تحتاجها لإنشاء قسم Hero ملفت للنظر لموقعك على الويب في دقائق.
لنبدأ!
مسح
إليكم نبذة مختصرة عن أقسام البطل الخمسة التي سنقوم بإنشائها في هذه المقالة اليوم.
تحميل DIVI الآن !!!
التصميمات دقيقة وبسيطة ومؤثرة.
اقرأ أيضا: Divi: كيفية استخدام "Gradient Builder" لتجميل صورك
قم بإنشاء صفحة جديدة باستخدام Divi Builder
للبدء ، سوف تحتاج إلى القيام بما يلي:
من لوحة تحكم WordPress ، انتقل إلى الصفحات> إضافة جديد لإنشاء صفحة جديدة.
أعطه عنوانًا منطقيًا لك وانقر استخدم Divi Builder
ثم انقر فوق ابدأ البناء (البناء من الصفر)
بعد ذلك ، سيكون لديك لوحة قماش فارغة لبدء التصميم في Divi.
خمسة أمثلة على طبقات القناع وأنماط الخلفية لتطبيقها على صورة خلفية
لنبدأ أولاً بإنشاء قسم البطل
تستخدم جميع تصميمات النماذج الخاصة بنا نفس بنية القسم والصف والعمود ، لذا فلنقم بإعدادها الآن.
1. إنشاء هيكل تخطيط
أضف صفًا إلى صفحتك، ثم انقر فوق رمز "+" الأخضر لعرض بنية الأعمدة وحدد العمود الأول، وهو العمود ذو العرض الكامل.
2. إضافة تباعد المقاطع
الآن وقد حددنا الصف والعمود، فقد حان الوقت لإضافة مسافة إلى القسم.
ضمن علامة التبويب "التباعد"، قم بتحديث ما يلي:
- سطح المكتب: 400 بكسل (علوي وسفلي)
- الكمبيوتر اللوحي: 200 بكسل (أعلى وأسفل) ؛ 25 بكسل (يسار ويمين)
- الهاتف: 50 بكسل (أعلى وأسفل) ؛ 25 بكسل (يسار ويمين)
تصميم قسم البطل رقم 1
لنقم بتصميم قسم البطل الأول.
تحميل DIVI الآن !!!
1. أضف نص العنوان
انقر على أيقونة "+" الرمادية لفتح مكتبة الوحدات. مرر لأسفل إلى النص وانقر لتحميله.
أدخل نص العنوان، ثم أسفل علامة التبويب نص العنوان، قم بتكوين هذه الإعدادات:
- خط العنوان: Work Sans
- لون النص: أبيض #ffffff
- حجم نص العنوان:
- سطح المكتب: 3 م
- الجهاز اللوحي: 2,2 em
- الهاتف: 1.4em
2. إضافة زر وحدة
أضف زرًا وقم بتكوين هذه الإعدادات:
- تحت علامة التبويب كونتينs: اكتشف المزيد
- تحت علامة التبويب التوافق، اختر: المركز
- انقر استخدام الأنماط المخصصة للزر ثم قم بتكوين:
- حجم نص الزر:
- سطح المكتب: 20 بكسل
- الجهاز اللوحي: 16 بكسل
- الهاتف: 14 بكسل
- لون نص الزر: #ffffff
- الخلفية: # 1d1d1d
- عرض حد الزر: 0
- نصف قطر الحدود: 0
- تباعد الأحرف: 3 نقاط
- خط الزر: العمل بلا
- نمط الخط: TT
- حجم نص الزر:
3. أضف صورة خلفية
الآن وقد تم إعداد المحتوى، فقد حان الوقت للبدء في تصميم خلفية القسم.
- قم بالوصول إلى مفتاح تبديل الخلفية وانقر على علامة التبويب الثالثة، علامة تبويب الصورة، ثم انقر على "إضافة صورة خلفية".
- سيؤدي ذلك إلى عرض مكتبة الوسائط الخاصة بك ، حيث يمكنك تحديد صورة أو تحميل صورة جديدة.
- بعد اختيار صورتك، انقر على زر "تحميل صورة" في الزاوية اليمنى السفلية.
4. إضافة نمط الخلفية
الآن وقد قمنا بإعداد صورة الخلفية، فلنضف نمطًا.
- في علامة التبويب نبذة عامةانتقل إلى علامة التبويب الخامسة، علامة التبويب نمط الخلفيةثم انقر على "إضافة نمط خلفية".
- اختر معنقد من القائمة المنسدلة وقم بتهيئة هذه الإعدادات:
- لون النمط - rgba (255,255,255,0.31)
- تحويل النمط: لا شيء
- الحجم: الحجم الفعلي
- أصل تكرار النمط: أعلى أسفل
- تكرار النمط: كرر
- وضع المزج: عادي
5. أضف قناع خلفية
الآن وقد قمنا بإعداد صورة الخلفية والنمط، فلنضف قناعًا للخلفية.
- في علامة التبويب نبذة عامةانتقل إلى علامة التبويب السادسة، علامة التبويب قناع الخلفيةثم انقر على "إضافة قناع خلفية".
- اختر فاصوليا من القائمة المنسدلة وقم بتهيئة هذه الإعدادات:
- لون القناع: rgba (0,0,0,0.36،XNUMX،XNUMX،XNUMX)
- نسبة عرض القناع: مستطيل أفقي
- الحجم: تمتد لملء
لذا ! لديك الآن قسم بطل مصمم بشكل جميل.
تصميم القسم Hero # 2
الآن دعونا نصمم قسم البطل الثاني.
1. أضف صورة خلفية واضبط وضع المزج على "تراكب".
حدد صورة الخلفية الخاصة بك، واضبط وضع المزج على "تراكب" وأضف لون تراكب rgba (10,10,10,0.64).
2. إضافة نمط الخلفية
الآن وقد قمنا بإعداد صورة الخلفية، فلنضف نمطًا للخلفية.
- في علامة التبويب "الخلفية"، انتقل إلى علامة التبويب الخامسة، وهي نمط الخلفيةثم انقر على "إضافة نمط خلفية".
- اختر معنقد من القائمة المنسدلة وقم بتهيئة هذه الإعدادات:
- لون النمط - rgba (255,255,255,0.09)
- تحويل النمط: لا شيء
- الحجم: غطاء
- أصل تكرار النمط: أعلى اليسار
- تكرار النمط: كرر
- وضع المزج: عادي
3. أضف قناع خلفية
الآن وقد قمنا بإعداد صورة الخلفية والنمط، فلنضف قناعًا للخلفية.
- في علامة التبويب نبذة عامةانتقل إلى علامة التبويب السادسة، علامة التبويب قناع الخلفيةثم انقر على "إضافة قناع خلفية".
- اختر الإقحام من القائمة المنسدلة وقم بتهيئة هذه الإعدادات:
- لون القناع: rgba (0,0,0,0.36،XNUMX،XNUMX،XNUMX)
- تحويل القناع: لا شيء
- نسبة العرض إلى الارتفاع: مستطيل أفقي
- حجم القناع: تمتد لملء
- وضع مزيج القناع: عادي
تصميم القسم Hero # 3
الآن دعونا نصمم قسم البطل الثالث.
1. أضف صورة خلفية واضبط وضع المزج على "تراكب".
حدد صورة الخلفية الخاصة بك، واضبط وضع المزج على "تراكب" وأضف لون تراكب rgba (10,10,10,0.39).
2. إضافة نمط الخلفية
الآن وقد قمنا بإعداد صورة الخلفية، فلنضف نمطًا للخلفية.
- في علامة التبويب نبذة عامةانتقل إلى علامة التبويب السادسة، علامة التبويب نمط الخلفيةثم انقر على "إضافة نمط خلفية".
- اختر خطوط قطرية 2 من القائمة المنسدلة وقم بتهيئة هذه الإعدادات:
- لون النمط - rgba (0,0,0,0.06)
- تحويل النمط: لا شيء
- الحجم: الحجم الفعلي
- أصل تكرار النمط: أعلى اليسار
- تكرار النمط: كرر
- وضع المزج: عادي
3. أضف قناع خلفية
الآن وقد أضفنا صورة خلفية ونمطًا، فلنضف قناعًا للخلفية.
- في علامة التبويب نبذة عامةانتقل إلى علامة التبويب السادسة، علامة التبويب قناع الخلفيةثم انقر على "إضافة قناع خلفية".
- اختر مثلثات من القائمة المنسدلة وقم بتهيئة هذه الإعدادات:
- لون القناع: rgba (10 ، 10 ، 10 ، 0,61)
- تحويل القناع: لا شيء
- نسبة العرض إلى الارتفاع: مستطيل أفقي
- حجم القناع: تمتد لملء
- وضع مزيج القناع: عادي
تصميم القسم Hero # 4
الآن دعونا نصمم القسم الرابع من Hero.
1. أضف صورة خلفية
حدد صورة الخلفية الخاصة بك.
2. إضافة نمط الخلفية
الآن وقد أضفنا صورة الخلفية، فلنضف نمطًا للخلفية.
- في علامة التبويب نبذة عامةانتقل إلى علامة التبويب السادسة، علامة التبويب نمط الخلفيةثم انقر على "إضافة نمط خلفية".
- اختر ابتسامات من القائمة المنسدلة وقم بتهيئة هذه الإعدادات:
- لون النمط - rgba (0,0,0,0.2)
- تحويل النمط: لا شيء
- الحجم: غطاء
- كرر الأصل: أعلى اليسار
- تكرار النمط: كرر
- وضع مزج الأنماط: عادي
3. أضف قناع خلفية
الآن بعد تطبيق صورة الخلفية والنمط، دعونا نضيف قناع الخلفية.
- في علامة التبويب نبذة عامةانتقل إلى علامة التبويب السادسة، علامة التبويب قناع الخلفيةثم انقر على "إضافة قناع خلفية".
- اختر كورنر ليك من القائمة المنسدلة وقم بتهيئة هذه الإعدادات:
- لون القناع: rgba (10 ، 10 ، 10 ، 0,61)
- تحويل القناع: أفقي
- نسبة العرض إلى الارتفاع: مستطيل أفقي
- الحجم: غطاء
- وضع القناع: وسط اليسار
- وضع خلاط القناع: عادي
3. تكوين معلمات الخط
قبل أن نذهب ، يحتوي قسم Hero هذا على أنماط خطوط فريدة. لنقم بإعداد هذا.
- تحجيم:
- العرض: 80٪
- العرض الأقصى: 800 بكسل
- محاذاة الصف:
- سطح المكتب: افتراضي
- الجهاز اللوحي: المركز
- الهاتف: المركز
- الهوامش:
- اليسار: 20vw
قسم بطل # 5 تصميم
الآن دعونا نصمم قسم البطل الخامس.
تحميل DIVI الآن !!!
1. أضف صورة خلفية
حدد صورة الخلفية الخاصة بك.
2. أضف نمطًا
الآن وقد قمنا بإعداد صورة الخلفية، فلنقم بتطبيق نمط الخلفية.
- في علامة التبويب نبذة عامةانتقل إلى علامة التبويب السادسة، علامة التبويب نمط الخلفيةثم انقر على "إضافة نمط خلفية".
- اختر الصلبان من القائمة المنسدلة وقم بتهيئة هذه الإعدادات:
- لون النقش - #ffffff
- تحويل النمط: لا شيء
- الحجم: حجم مخصص
- عرض النمط: 10 بكسل
- ارتفاع النمط: 10 بكسل
- كرر الأصل: من أعلى إلى أسفل
- تكرار النمط: كرر
- وضع مزج الأنماط: عادي
3. أضف قناع خلفية
الآن بعد أن قمنا بتطبيق صورة خلفية ونمط، دعونا نضيف قناع خلفية.
- في علامة التبويب نبذة عامةانتقل إلى علامة التبويب السادسة، علامة التبويب قناع الخلفيةثم انقر على "إضافة قناع خلفية".
- اختر حبوب قطرية من القائمة المنسدلة وقم بتهيئة هذه الإعدادات:
- لون القناع: rgba (10 ، 10 ، 10 ، 0,61)
- تحويل القناع: أفقي
- نسبة العرض إلى الارتفاع: مستطيل أفقي
- الحجم: غطاء
- وضع القناع: يسار الوسط
- وضع مزيج القناع: عادي
3. تكوين معلمات الخط
قبل أن نذهب ، يحتوي قسم Hero هذا أيضًا على أنماط خطوط فريدة. لنقم بإعداد هذا.
- تحجيم:
- العرض: 80٪
- العرض الأقصى: 800 بكسل
- محاذاة الصف:
- سطح المكتب: افتراضي
- الجهاز اللوحي: المركز
- الهاتف: المركز
- التباعد:
- الهامش (يمين): 18vw
أنظر أيضا: Divi: كيفية إضافة الأقنعة وأنماط الخلفية إلى الرأس
خاتمة
يعد تصميم قسم Hero فريد وجذاب لموقع الويب الخاص بك أمرًا سهلاً مع الخيارات الجديدة قناع ونمط الخلفية بواسطة Divi. تحتوي كل ميزة على العديد من الخيارات التي تتيح لك إنشاء خلفيات إبداعية حقًا.
بالإضافة إلى ذلك، يمكنك إضافة أنماط خلفية وأقنعة إلى أي عنصر من عناصر Divi Builder! خيارات التصميم لا حصر لها.
نأمل أن تضيف هذه التقنية مهارة تصميم مفيدة أخرى للمشاريع المستقبلية.
نأمل أن يلهمك هذا البرنامج التعليمي لمشاريع Divi التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى المزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت.
لا تتردد في الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...