Divi: كيفية استخدام "Gradient Builder" لتجميل صورك

هل ترغب في إعطاء أشكال لصورك باستخدام مولد التدرج؟ Divi ?

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

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

سنرى في هذه المقالة كيفية تجميل صورك باستخدام Gradient Builder Divi لمساعدتك على إضافة تصميمات فريدة لصورك.

دعونا نبدأ.

مسح

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

المثال الأول - الشكل الدائري للصورة

حاسوب مكتب

إعطاء أشكال لصورك باستخدام مولد التدرج Divi

لوحة

الهاتف

المثال الثاني - شكل الصورة الخطي

مكتب

لوحة

الهاتف

المثال الثالث - شكل الصورة البيضاوية

حاسوب مكتب

لوحة

الهاتف

المثال الرابع - شكل الصورة المخروطية

حاسوب مكتب

لوحة

الهاتف

تصميم تخطيط مع Divi

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

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

تخصيص القسم

أولاً ، قم بإنشاء صفحة Divi جديدة وقم بتخصيص القسم. افتح إعدادات القسم وقم بتغيير ملف COULEUR خلفية # f0f3fb.

الخلفية: # f0f3fb

ثم انتقل إلى علامة التبويب تصميم وقم بتغيير إعدادات التباعد كما يلي:.

الحشو (العلوي والسفلي): 10٪

أضف خطًا

ثم أضف ملف خط مع هيكل العمود أدناه.

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

استخدام عرض مزراب مخصص: نعم
العرض الأقصى: 1 بكسل

إعدادات العمود الأول

في علامة التبويب وصف المنتج في الصف ، افتح إعدادات العمود الأول من الصف ، وانتقل إلى علامة التبويب تصميم. قم بتعديل التباعد كما يلي.

الحشو (يسار ويمين): 9٪ يسار ، يمين

معلمات أول وحدة نصية

ثم أضف ملف وحدة النص في العمود الأيسر.

اختر عنوان 4 لنص محتويات وإضافة محتويات من جسمك.

نص: "مرحبًا بك في BlogPasCher"

ثم انتقل إلى علامة التبويب تصميم وتغيير إعدادات العنوان.

الخط: مونتسيرات
وزن الخط: عريض
النمط: TT
لون النص: # 1d4eff

حجم النص: سطح المكتب 16 بكسل ، الجهاز اللوحي 14 بكسل ، الهاتف 12 بكسل
تباعد الأحرف: 0,3em
ارتفاع الخط: 1,6 م

انتقل إلى التباعد وتغيير الهامش السفلي.

الهامش (السفلي): 0 بكسل

معلمات الوحدة النصية الثانية

ثم أضف ملف وحدة النص تحت الأول.

اضبط نوع النص على "عنوان 1" وإضافة محتويات من جسمك.

المحتوى: "خطط لمستقبلك المالي"

ثم حدد علامة التبويب تصميم وتغيير خيارات العنوان.

الخط: مونتسيرات
وزن الخط: عريض
لون النص: # 0f1154

الحجم: 80 بكسل سطح المكتب ، 40 بكسل لوحي ، 24 بكسل الهاتف
ارتفاع الصف: 110٪

معلمات الوحدة النصية الثالثة

ثم أضف ملف وحدة النص تحت الثانية.

اترك نوع النص في "فقرة" وأضف محتوى النص.

الجسم: المحتوى

ثم انتقل إلى علامة التبويب تصور وتغيير إعدادات النص.

خط النص: Roboto
وزن الخط: متوسط
لون النص: # 000000

حجم النص: 18 بكسل (سطح المكتب والجهاز اللوحي) ، 14 بكسل (الهاتف)
ارتفاع الخط: 180٪

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

الهامش (السفلي): 0 بكسل

إعدادات وحدة الصورة

أضف الآن ملف وحدة الصورة في العمود الأيمن.

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

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

ثم حدد علامة التبويب الطراز وانتقل إلى التباعد .

الهامش (سطح المكتب): -10٪ (أعلى) ، -30٪ (يسار) ، 10٪ (يمين)
المساحة المتروكة (أعلى وأسفل): 300 بكسل

الهامش (جهاز لوحي / هاتف): 0٪ (علوي) ، 0٪ (يسار ويمين)

المساحة المتروكة (الهاتف): 150 بكسل (أعلى وأسفل)

أمثلة على الصور التي تم تشكيلها باستخدام Divi's Gradient Builder

المثال الأول - الشكل الدائري

يعطي المثال الأول للصورة شكلًا دائريًا به فتحة في المنتصف.

افتح إعدادات وحدة الصورة وانتقل لأسفل إلى خلفيّة . حدد ملف علامة التبويب تدرج الخلفية وقم بتعيين 6 توقفات متدرجة:

المحطة الأولى: 0٪ ، # f0f3fb
ثانيًا: 45٪ # f0f3fb
الثالثة (فوق الثانية): 45٪ ، rgba (41,196,169,0،XNUMX،XNUMX)
رابعًا: 69٪ (250,255,214,0،XNUMX،XNUMX)
الخامس (فوق الرابع) 69٪ # f0f3fb
سادساً: 100٪ # f0f3fb

النوع: دائري
المنصب: المركز
الوحدة: النسبة المئوية
مربع التدرج فوق صورة الخلفية: نعم

المثال الثاني - الشكل الخطي

فيما يلي معاينة لمثال شكل الصورة الثاني. يضع هذا المثال خطوطًا قطرية عبر الصورة.

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

المحطة الأولى: 0٪ ، # f0f3fb
ثانيًا: 5٪ # f0f3fb
الثالثة (فوق الثانية): 5٪ ، rgba (175,175,175,0،XNUMX،XNUMX)
رابعًا: 13٪ (41,196,169,0،XNUMX،XNUMX)

النوع: خطي
التوجيه: 150 درجة
كرر التدرج: نعم
وحدة التدرج: النسبة المئوية
مربع التدرج فوق صورة الخلفية: نعم

المثال الثالث - الشكل البيضاوي

هذا هو مثالنا الثالث على شكل الصورة. هذا يستخدم شكل بيضاوي.

افتح إعدادات وحدة الصورة وانتقل لأسفل إلى خلفيّة . حدد علامة التبويب تدرج الخلفية وإنشاء أربع نقاط توقف متدرجة:

المحطة الأولى: 0٪ ، # f0f3fb
ثانيًا: 9٪ # f0f3fb
الثالثة (فوق الثانية): 9٪ ، rgba (175,175,175,0،XNUMX،XNUMX)
رابعًا: 21٪ (41,196,169,0،XNUMX،XNUMX)

النوع: بيضاوي الشكل
موقف التدرج: أعلى اليسار
كرر التدرج: نعم
وحدة التدرج: النسبة المئوية
مربع التدرج فوق صورة الخلفية: نعم

المثال الرابع - الشكل المخروطي

يستخدم مثالنا الرابع "مخروطي" لإنشاء شكل صورة واحدة.

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

المحطة الأولى: 23٪ ، # f0f3fb
ثانيًا: 35٪ # f0f3fb
الثالثة (فوق الثانية): 35٪ ، rgba (41,196,169,0،XNUMX،XNUMX)
رابعًا: 65٪ (250,255,214,0،XNUMX،XNUMX)
الخامس (فوق الرابع) 65٪ # f0f3fb

النوع: مدبب
اتجاه التدرج: 180 درجة
موقف التدرج: القاع
الوحدة: النسبة المئوية
مربع التدرج فوق صورة الخلفية: نعم