ماژول Divi’s Divider چندین روش برای ایجاد تقسیم کننده های جالب ارائه می دهد. یکی از جالب ترین و منحصر به فردترین آنها، توانایی ایجاد تقسیم کننده های گرادیان است. در این پست، نحوه ایجاد تقسیم‌کننده‌های گرادیان با ماژول Divi Divider را مورد بحث قرار می‌دهیم. ما به نحوه عملکرد تقسیم‌کننده‌های گرادیان نگاهی می‌اندازیم و سه مثال را می‌بینیم که به شما کمک می‌کند نمونه‌های خود را بسازید.
بیا شروع کنیم!
مرور
جداکننده گرادیان دسکتاپ مثال اول
جداکننده گرادیان تلفن مثال اول
تقسیم گرادیان دسکتاپ مثال دوم
جداکننده گرادیان تلفن مثال دوم
تقسیم کننده گرادیان دسکتاپ مثال سه
جداکننده گرادیان تلفن مثال سه
نحوه ایجاد تقسیم‌کننده‌های گرادیان با ماژول Divider
راه های مختلفی برای ایجاد یک تقسیم کننده با ماژول تقسیم کننده Divi وجود دارد. به طور پیش فرض، ماژول یک خط تقسیم را نمایش می دهد. می‌توانیم این را غیرفعال کنیم و از تنظیمات پس‌زمینه ماژول برای ایجاد جداکننده‌ای استفاده کنیم که می‌توانیم با گزینه‌های پس‌زمینه ماژول استایل‌بندی کنیم. این شامل رنگ ها، شیب ها، تصاویر و غیره است. به جای نمایش جداکننده، به ظرف جداکننده استایل می دهیم و یک جداکننده استایل ایجاد می کنیم.
مخفی کردن جداکننده
فرآیند ساده است. ابتدا یک ماژول جداکننده را به چیدمان خود اضافه کنید و سپس جداکننده را در تب محتوا پنهان کنید.
پس زمینه تقسیم کننده
سپس نوع پس‌زمینه‌ای را که می‌خواهید در تنظیمات پس‌زمینه در تب Content نمایش داده شود، انتخاب کنید. برای این پست، ما بر روی تنظیمات گرادیان پس‌زمینه تمرکز خواهیم کرد.
اندازه و فاصله را اضافه کنید
از گزینه‌های اندازه و فاصله در تب Design برای کنترل ارتفاع و عرض ظرف جداکننده استفاده کنید تا جداکننده‌ای سبک‌دار تقریباً در هر اندازه یا شکلی ایجاد کنید. از عرض و ارتفاع، حداکثر عرض و حداکثر ارتفاع، هم‌ترازی ماژول و لایه‌بندی بالا و پایین برای ایجاد اندازه مورد نظر خود استفاده کنید.
یک شعاع به حاشیه اضافه کنید
برای شکل دادن بیشتر به شکل، گزینه‌های حاشیه، مانند شعاع حاشیه را اضافه کنید. می توانید گوشه ها را با هم یا به صورت جداگانه تنظیم کنید تا اشکال جالبی ایجاد کنید. همچنین می توانید برای ایجاد یک طرح منحصر به فرد، Border Width، Styles و غیره را اضافه کنید.
نمونه هایی از جداکننده گرادیان
حال، بیایید با استفاده از مفاهیمی که قبلاً بحث کردیم، سه تقسیم کننده گرادیان ایجاد کنیم.
مثال یک برای جداکننده گرادیان
برای اولین تقسیم‌کننده گرادیان، از صفحه فرود از بسته طرح‌بندی رایگان Home Baker که در Divi موجود است، استفاده می‌کنیم. تصاویر موجود در این بسته چیدمان دارای خطوط تیره قوی با شیب های تیز، همه در سایه های قهوه ای هستند. ما این را با گرادیان خود با استفاده از رنگ های بسته طرح تقلید می کنیم.
برای مثال اول، ما از ماژول Divider که از قبل در برگه کاراکتر وجود دارد استفاده می کنیم. این یکی ساده است اما از نظر بصری چیزهای زیادی اضافه می کند.
برای مرجع، در اینجا طرح قبل از اضافه کردن ماژول تقسیم است.
دید
در تنظیمات دید ماژول تقسیم، No to را انتخاب کنید نمایش جداکننده.
شیب
به پایین بروید زمینه و انتخاب کنید پس زمینه گرادیانبخش nt. برای این یکی، ما پنج توقف گرادیان اضافه می کنیم. ما بقیه تنظیمات گرادیانت را در حالت پیش فرض قرار می دهیم. در اینجا تنظیمات برای هر توقف گرادیان است.
اولین گرادیان Stop را روی 0px و رنگ آن را روی #dcc087 قرار دهید.
- توقف گرادیان اول: 0px، #dcc087
گرادیان Stop دوم را روی ۱۶ پیکسل و رنگ آن را #e6b060 قرار دهید.
- توقف گرادیان دوم: 16 پیکسل، #e6b060
سومین گرادیان Stop را روی 22 پیکسل و رنگ آن را روی #f19d33 قرار دهید.
- توقف گرادیان سوم: 22 پیکسل، #f19d33
استاپ گرادیان چهارم تقریباً بر روی استاپ گرادیان سوم قرار دارد. آن را روی 31 پیکسل قرار دهید و رنگ آن را روی #f49826 قرار دهید.
- توقف گرادیان چهارم: 31 پیکسل، #f49826
آخرین گرادیان Stop را روی 48 پیکسل و رنگ آن را روی #3b261e تنظیم کنید.
- توقف گرادیان پنجم: 48 پیکسل، #3b261e
واحد گرادیان را به پیکسل تغییر دهید. ما اکنون رنگ های مورد نظر خود را داریم. اکنون فقط باید اندازه را بهینه کنیم.
سایز بندی
سپس برو به طرح بخش. زیر سایز بندینگرش های عرض تا 100٪. نگرش ارتفاع تا 40 پیکسل برای هر سه اندازه دستگاه. ماژول را ببندید و تنظیمات خود را ذخیره کنید.
نمونه دوم جداکننده گرادیان
برای تقسیم‌کننده گرادیان دوم، از صفحه فرود بسته طرح‌بندی دوره آنلاین رایگان که در Divi موجود است، استفاده می‌کنیم. این یکی دارای لبه های گرد زیادی است و حتی دارای یک دایره گرادیان است که روی یک تصویر همپوشانی دارد.
ما از این به عنوان نقطه شروع برای طراحی استفاده می کنیم و یک تقسیم کننده گرادیان جدید ایجاد می کنیم. ما یک ماژول اسپلیتر جدید را به تب Chapter 1 اضافه می کنیم تا گرافیک را اضافه کنیم.
برای مرجع، در اینجا طرح قبل از اضافه کردن ماژول تقسیم است.
فاصله در ستون سمت راست
ابتدا باز کنید تنظیمات ستون که حاوی توضیحات فصل اول است. این است ستون سمت راست به ترتیب. رفتن به تنظیمات طراحی و به پایین اسکرول کنید فاصله. تغییر دادن پد بالا از 100 پیکسل تا 50 پیکسل
یک ماژول اسپلیتر اضافه کنید
سپس یک مورد جدید اضافه کنید ماژول جداسازی در زیر ماژول دکمه توضیحات فصل.
دید
تنظیمات دید ماژول تقسیم را باز کنید و No to را انتخاب کنید نمایش جداکننده.
شیب
سپس به پایین اسکرول کنید زمینه و انتخاب کنید تب Background Gradient.. این یکی دو استاپ گرادیان دارد. تغییر دادن جهت شیب تا 145 درجه
- توقف گرادیان اول: 0px، #26ff5c
- توقف گرادیان دوم: 100px، #2981b6
- جهت گرادیان: 145 درجه
سایز بندی
سپس انتخاب کنید برگه طراحی. زیر سایز بندیتغییر دادن عرض برای دسکتاپ تا 45٪. تبلت ها را به 24vw و گوشی ها را به 40vw تغییر دهید. تغییر دادن تراز ماژول به مرکز. کیت ارتفاع تا 200 پیکسل برای همه دستگاه ها.
- عرض: 45% رومیزی، تبلت 24vw، گوشی 40vw
- تراز ماژول: مرکز
- ارتفاع: 200 پیکسل
مرز
سپس به پایین اسکرول کنید مرز. یک شکل قوسی ایجاد می کنیم که تصاویر موجود در طرح را تقلید می کند. تغییر دادن گوشه های گرد به 400 پیکسل برای بالا چپ و راست و 0 پیکسل برای پایین چپ و راست. ماژول را ببندید و تنظیمات خود را ذخیره کنید.
- گوشه های گرد بالا سمت چپ، بالا سمت راست: 400 پیکسل
- گوشه های گرد پایین سمت چپ، پایین سمت راست: 0 پیکسل
جداکننده گرادیان مثال سه
برای تقسیم‌کننده گرادیان سوم خود، از صفحه فرود از بسته طرح‌بندی Podcaster رایگان که در Divi موجود است، استفاده می‌کنیم. این یکی دارای اشکال گرادیان زیادی در سراسر طرح است که با تصاویر و تقسیم کننده ها ساخته شده است.
ما یک تقسیم کننده گرادیان با نشانه های طراحی از این تصاویر و عناصر دیگر ایجاد خواهیم کرد. چندین گرادیان را در یک ترکیب می کند. اسپلیتر ما قسمت های ویژه را از قسمت های اخیر جدا می کند.
برای مرجع، در اینجا طرح قبل از اضافه کردن ماژول تقسیم است.
یک خط جدید
ابتدا a را اضافه کنید یک خط جدید بالای عنوان اینجاست که ما ماژول اسپلیتر را اضافه می کنیم.
یک ماژول اسپلیتر اضافه کنید
سپس a را اضافه کنید ماژول جداسازی به سفارش
دید
در تنظیمات دید، No to را انتخاب کنید نمایش جداکننده.
شیب
به پایین بروید زمینه و انتخاب کنید تب Background Gradient.. برای این مورد، از چهار ترمز گرادیان استفاده خواهیم کرد. نگرش جهت تا 90 درجه
- توقف گرادیان اول: 0px، #f52791
- توقف شیب دوم: 38 پیکسل، #3742fb
- توقف گرادیان سوم: 70 پیکسل، f7d043
- توقف گرادیان چهارم: 100 پیکسل، #fe386f
- جهت: 90 درجه
سایز بندی
سپس برو به برگه طراحی. زیر سایز بندینگرش های ارتفاع حداکثر 60 پیکسل برای رایانه های رومیزی، 50 پیکسل برای رایانه های لوحی و 40 پیکسل برای تلفن ها.
- ارتفاع: دسکتاپ 60 پیکسل، تبلت 50 پیکسل، تلفن 40 پیکسل
مرز
سپس به پایین اسکرول کنید مرز. نگرش گوشه های گرد به 0 پیکسل بالا سمت چپ، 30 پیکسل بالا سمت راست، 30 پیکسل پایین سمت چپ و 0 پیکسل بالا سمت راست. این یک سبک ایجاد می کند که با برگه انتخاب ایمیل مطابقت دارد. ماژول را ببندید و تنظیمات خود را ذخیره کنید.
- بالا سمت چپ: 0px
- بالا سمت راست: 40 پیکسل
- پایین سمت چپ: 40 پیکسل
- پایین سمت راست: 0px
نتایج
جداکننده گرادیان دسکتاپ مثال اول
جداکننده گرادیان تلفن مثال اول
تقسیم گرادیان دسکتاپ مثال دوم
جداکننده گرادیان تلفن مثال دوم
تقسیم کننده گرادیان دسکتاپ مثال سه
جداکننده گرادیان تلفن مثال سه
پایان افکار
این نگاه ما به نحوه ایجاد تقسیم‌کننده‌های گرادیان با ماژول Divi’s Divider است. گزینه گرادیان در ماژول Divider برای ایجاد تقسیم‌کننده‌های گرادیان منحصربه‌فرد عالی عمل می‌کند. استفاده از گزینه‌های اندازه، فاصله و کران گوشه ابزارهایی را برای ایجاد تقسیم‌کننده‌های گرادیان در اندازه‌ها و اشکال مختلف در اختیار ما قرار می‌دهد. تنها با چند ترفند ساده، می‌توانیم تقسیم‌کننده‌های گرادیان منحصربه‌فردی ایجاد کنیم که مطمئناً از بقیه متمایز می‌شوند.
ما می خواهیم از تو بشنویم. ایجاد تقسیم‌کننده‌های گرادیان با ماژول Divi’s Divider؟ تجربیات خود را در نظرات با ما در میان بگذارید.