تقسیم کننده بخش همچنان یک عنصر محبوب طراحی در Divi است. جداکننده ها سبک های مختلفی دارند ، از جمله برخی گزینه های مفید که به راحتی می توانید انتقال و پس زمینه های منحصر به فرد را به صفحه خود اضافه کنید.
در این آموزش، از تقسیم کننده های بخش کمی متفاوت استفاده می کنیم. Divi به شما امکان می دهد ارتفاع و طرح هر تقسیم کننده را تنظیم کنید. این به ما امکان می‌دهد جداکننده‌ها را بالای قسمت‌ها یا محتوای خاصی در بخش قرار دهیم. با استفاده از گزینه hover برای ارتفاع تقسیم‌کننده، می‌توانیم افکت‌های شناور منحصربه‌فردی را اضافه کنیم که a را آشکار می‌کند محتویات تا حدی پنهان این برای جلب توجه به یک فراخوان برای اقدام یا دکمه خاصی که می‌خواهید افراد روی آن کلیک کنند عالی عمل می‌کند. آخرین بازدید کلیک.
بیایید شروع.
نتیجه نمونه
آنچه شما باید برای شروع کار
برای شروع کار به موارد زیر نیاز دارید:
- Le تم دیوی نصب شده و فعال
- صفحه جدید ایجاد شده برای ساختن از ابتدا در قسمت جلویی (سازنده بصری)
- برخی از تصاویر ساختگی برای استفاده در طراحی. من قصد دارم از برخی تصاویر با پس زمینه شفاف از آب نبات بسته بندی فروشگاه .
پس از آن ، شما آماده برای شروع هستید!
اجرای طرح اثر شناور ارتفاع تقسیم کننده بخش در Divi
ایجاد بخش و خط
بیایید با ایجاد یک بخش منظم با یک ردیف از دو ستون شروع کنیم.
قبل از افزودن ماژول ، تنظیمات بخش را باز کرده و موارد زیر را به روز کنید:
شیب پس زمینه سمت چپ: #73ba57
شیب پس زمینه سمت راست: #2a4c23
عرض: 80٪
حداکثر عرض: 1080px
هماهنگی بخش: مرکز
اما شما همچنین می توانید متناسب با تصویر خود رنگ بندی مورد نظر خود را انتخاب کنید. طرح رنگ من: # fff200 - # e09900 در شیب.
عنوان بخش را اضافه کنید
برای افزودن عنوان بخش، یک ماژول متنی ایجاد کنید و آن را به روز کنید محتویات بدنه با هدر h2 زیر:
آب میوه
سپس نقشه را به شرح زیر به روز کنید:
عنوان 2 فونت: Lato
عنوان 2 اندازه متن: 80px
عنوان 2 فاصله نامه: -5px
حاشیه: -50px در بالای صفحه، -40px در پایین
Z-Index: -1
حاشیه سفارشی و شاخص z این امکان را به شما می دهد که متن در پشت تصویری که در مرحله بعد اضافه خواهیم کرد قرار بگیرد.
تصویر اضافه کن
در زیر ماژول متن با عنوان در ستون 1 ، یک ماژول تصویر اضافه کنید. سپس تصویری با پس زمینه شفاف بارگذاری کنید. من از تصویری از بسته طرح بندی فروشگاه آب میوه استفاده می کنم که 240 پیکسل در 300 پیکسل است.
تراز بندی تصویر را به مرکز تنظیم کنید.
افزودن تماس برای اقدام در ستون 2
در ستون 2 یک تماس به ماژول عمل اضافه کنید.
برای اطمینان از نمایش دکمه ، URL لینک دکمه اضافه کنید.
CTA پس زمینه و سبک عنوان
سپس پارامترهای طراحی زیر را به روز کنید:
رنگ پسزمینه: #ffffff
رنگ متن:
عنوان قلم: لاتو
عنوان وزن سیاست: سنگین
عنوان فونت سبک: TT
عنوان متن اندازه متن: 18px
دکمه CTA را ترسیم کنید
طراحی دکمه را به شرح زیر به روز کنید:
رنگ متن دکمه: #ffffff
رنگ پس زمینه دکمه: # e09900
عرض عرض دکمه: 0 پیکسل
ظاهر شدن مرز CTA
سپس یک مرز اضافه کنید تا کادر ماژول را به صورت زیر تغییر دهید:
عرض مرز: 10px
رنگ مرز: rgba (224,145,0,0.25)
برای نشان دادن دعوت به عمل ، اثر شناور ارتفاع تقسیم کننده اضافه شد
اکنون وقت آن است که برای آشکار کردن دعوت به عمل ، اثر بخش شناور ارتفاع بخش را اضافه کنید. برای این کار ابتدا باید تقسیم کننده های بخش خود را ایجاد کنیم.
اضافه کردن جداکننده فوقانی
پارامترهای بخش و جداکننده بالایی را با پارامترهای زیر باز کنید.
سبک تقسیم کننده بالا: به تصویر مراجعه کنید رنگ تقسیم کننده بالا: # 73ba57 ارتفاع تقسیم کننده بالا: 70٪ (پیش فرض)، 0٪ (معلق)
تقسیم کننده صفحه بالا: افقی
توجه داشته باشید که ارتفاع جداساز با ارتفاع پیش فرض 70٪ شروع می شود و سپس با چرخش به ارتفاع 0٪ حرکت می کند.
علاوه بر تقسیم پایین
سپس یک جداکننده پایین شبیه به بخش با پارامترهای زیر اضافه کنید.
سبک تقسیم کننده بالا: به تصویر مراجعه کنید رنگ تقسیم کننده بالا: # 73ba57 ارتفاع تقسیم کننده بالا: 70٪ (پیش فرض)، 0٪ (معلق)
تقسیم کننده صفحه بالا: افقی
Divider Layout: در بالای بخش محتویات
این جداکننده پس زمینه همچنین با ارتفاع 70٪ شروع می شود که در حالت شناور به 0٪ تغییر می کند. با این حال ، از آنجا که گزینه طرح جداکننده در بالای محتوا تنظیم شده است ، بخش جداکننده قسمت پایین دعوت به عمل را در ستون 1 پنهان می کند ، سپس ، در شناور ، بقیه قسمت دعوت به عمل آشکار می شود
نتیجه را تاکنون بررسی کنید.
برای تغییر و طراحی منحصر به فرد ، یک اثر شناور سایه جعبه اضافه شده است
برای یک گذار و طراحی شناور بی نظیر ، می توانیم یک اثر شناور سایه جعبه اضافه کنیم که همزمان با اثر شناور ارتفاع تقسیم کننده انجام می شود. برای این کار سایه کادر زیر را به قسمت اضافه کنید.
Box Shadow: تصویر را ببینید
جعبه سایه افقی موقعیت: 0px
جعبه سایه موقعیت عمودی: 0px
Box Shadow Force Spread: 0px (پیش فرض) ، 150px (شناور)
جعبه رنگ سایه: #73ba57
مدت زمان انتقال را کم کنید
برای آخرین مرحله ، اجازه دهید مدت زمان انتقال را کم کنیم.
مدت زمان انتقال: 700ms
نتیجه نهایی
در اینجا نتیجه نهایی روی دسک تاپ آمده است.
براساس آنچه در بالا انجام داده ایم ، می توانید نمایشگر را در تلفن همراه و رایانه لوحی سفارشی کنید.
آخرین افکار
امیدوارم که این آموزش به شما کمک کند تا جلوه های شناور ارتفاع تقسیم کننده بخش منحصر به فرد را برای آشکار کردن محتوا ایجاد کنید. در واقع ، تنظیم ارتفاع تقسیم شناور می تواند یک عنصر طراحی قابل توجه باشد. و نمونه های طراحی باید به شما کمک کند تا کاوش های خود و طراحی های خود را شروع کنید.
امیدوارم در مورد نظرات از شما بشنوم.
به سلامتی شما!
