كيفية تشكيل صورك باستخدام منشئ التدرج لديفي

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

هيا بنا نبدأ.

معاينة

أولاً ، دعنا نلقي نظرة على ما سنبنيه في هذا البرنامج التعليمي.

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

سطح المكتب

لوح

هاتف

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

سطح المكتب

لوح

هاتف

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

سطح المكتب

لوح

هاتف

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

سطح المكتب

لوح

هاتف

قم بإنشاء التخطيط

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

تخصيص القسم

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

• لون الخلفية: # f0f3fb

بعد ذلك ، انتقل إلى علامة التبويب "تصميم" وأضف حشوة بنسبة 10٪ إلى الأعلى والأسفل. أغلق الإعدادات.

• الحشو: 10٪ أعلى ، أسفل

أضف صفًا

بعد ذلك ، أضف صفًا بعمود 2/3 وعمود 1/3.

• 2/3 ، 1/3 صف

انتقل إلى علامة تبويب التصميم الخاصة بها. قم بتمكين Use Custom Gutter Width واضبط Max Width على 1480px.

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

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

في علامة التبويب محتوى الصف ، افتح الإعدادات الخاصة بالعمود الأول للصف ، وانتقل إلى علامة التبويب تصميم وأضف 9 ٪ من الحشو إلى اليسار واليمين. أغلق إعدادات العمود والصف.

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

إعدادات وحدة النص الأولى

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

حدد العنوان 4 لنص المحتوى وأضف محتوى الجسم.

• العنوان: 4
• الجسم: مرحبًا بكم في Divi

بعد ذلك ، انتقل إلى علامة التبويب " تصميم ". اضبط H4 Font على Montserrat ، والوزن على bold ، والنمط على TT ، واللون # 1d4eff.

• خط العنوان 4: مونتسيرات
• الوزن: جريء
• النمط: TT
• اللون: # 1d4eff

اضبط حجم خط سطح المكتب على 16 بكسل ، وحجم الجهاز اللوحي على 14 بكسل ، وحجم الهاتف على 12 بكسل. قم بتغيير تباعد الأحرف إلى 0.3em وارتفاع الخط إلى 1.6em.

• الحجم: سطح المكتب 16 بكسل ، قرص 14 بكسل ، هاتف 12 بكسل
• تباعد الأحرف: 0.3em
• ارتفاع الخط: 1.6em

قم بالتمرير لأسفل إلى التباعد وقم بتغيير الهامش السفلي إلى 0 بكسل. أغلق الوحدة.

• الهامش: 0 بكسل للأسفل

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

بعد ذلك ، أضف وحدة نصية تحت الأولى.

اضبط نوع النص على العنوان 1 وأضف محتوى النص.

• عنوان 1
• الجسم: خطط لمستقبلك المالي

بعد ذلك ، حدد علامة التبويب " تصميم ". قم بتغيير خط العنوان إلى مونتسيرات ، والوزن إلى غامق ، واللون إلى # 0f1154.

• خط العنوان 1: مونتسيرات
• الوزن: جريء
• اللون: # 0f1154

اضبط حجم الخط على 80 بكسل لأجهزة الكمبيوتر المكتبية و 40 بكسل للأجهزة اللوحية و 24 بكسل للهواتف. قم بتغيير ارتفاع الخط إلى 110٪. أغلق الوحدة.

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

إعدادات وحدة النص الثالثة

بعد ذلك ، أضف وحدة نصية تحت الثانية.

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

• العنوان: فقرة
• الجسم: المحتوى

بعد ذلك ، انتقل إلى علامة التبويب " تصميم ". قم بتغيير خط النص إلى Roboto ، واضبط الوزن على متوسط ​​، واللون إلى الأسود.

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

قم بتغيير حجم أجهزة الكمبيوتر المكتبية والأجهزة اللوحية إلى 18 بكسل والهواتف إلى 14 بكسل. اضبط ارتفاع الخط على 180٪.

• الحجم: 18 بكسل سطح المكتب ، 18 بكسل اللوحي ، 14 بكسل الهاتف
• ارتفاع الخط: 180٪

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

• الهامش: 0 بكسل للأسفل

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

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

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

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

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

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

بعد ذلك ، نريد التأكد من استجابة شكل الصورة. حدد رمز الجهاز اللوحي لفتح إعدادات الأجهزة اللوحية والهواتف. مرر مؤشر الماوس فوق إعدادات الهامش وحدد رمز الجهاز اللوحي الذي يظهر. هذا يفتح مجموعة من علامات التبويب مع علامة تبويب لكل نوع جهاز. اختر علامة التبويب Tablet وغير الهامش إلى 0٪ أعلى ، 0٪ يسار ، 0٪ يمين. ستتبع علامة تبويب الهاتف إعدادات الجهاز اللوحي ، لذلك لن نحتاج إلى تعديلها من أجل الهامش.

• الهامش (الكمبيوتر اللوحي / الهاتف): 0٪ أعلى ، 0٪ يسار ، 0٪ يمين

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

• الحشو: 150 بكسل للأعلى ، 150 بكسل للأسفل

شكل الصور باستخدام أمثلة Divi Gradient Builder

بعد ذلك ، سنستخدم هذه الإعدادات ونشكل الصور باستخدام Divi's Gradient Builder. كما سنرى ، تساعدنا العديد من الإعدادات في إنشاء أشكال صور مثيرة للاهتمام باستخدام Divi's Gradient Builder.

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

لمزيد من المعلومات حول استخدام Divi's Gradient Builder ، ابحث في مدونة The Elegant Themes عن "Gradient Builder". ستجد العديد من المنشورات مع البرامج التعليمية التفصيلية لتوجيهك عبر عناصر التحكم والإعدادات.

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

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

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

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

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

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

المثال الثاني - شكل صورة منشئ التدرج الخطي

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

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

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

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

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

المثال الثالث - شكل صورة منشئ التدرج البيضاوي

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

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

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

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

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

المثال الرابع - شكل صورة منشئ التدرج المخروطي

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

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

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

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

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

نتائج شكل مجمّع متدرج

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

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

سطح المكتب

لوح

هاتف

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

سطح المكتب

لوح

هاتف

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

سطح المكتب

لوح

هاتف

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

سطح المكتب

لوح

هاتف

خواطر ختامية

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

نريد أن نسمع منك. هل استخدمت Divi's Gradient Builder لتشكيل صورك؟ أخبرنا عن تجربتك في التعليقات.