از آنجایی که گزینه های اندازه گیری جدید از DIVI منتشر شده است، چند آموزش وجود دارد که به شما نشان می دهد چگونه هوور آشکار کنید. در این آموزش ها، محتویات ماسک به صورت عمودی قرار داده شد. با این حال، در برخی موارد ممکن است بخواهید یک نمای افقی ایجاد کنید. در این آموزش، ما به شما نشان خواهیم داد که چگونه با استفاده از شبکه های شناور و گزینه های سرریز، تصاویر را آشکار کنید. DIVI. انجام این کار نیاز به رویکرد کمی متفاوت دارد. ما از یک ردیف از یک ستون استفاده می کنیم و همه ماژول ها را یکی زیر دیگری قرار می دهیم. هنگام شناور، ستون را به یک شبکه افقی تبدیل می کنیم. همچنین می توانید فایل JSON را به صورت رایگان دانلود کنید!
برویم.
بررسی
قبل از اینکه به آموزش بپردازیم ، بیایید نگاهی سریع به نحوه نمایش آن در اندازه های مختلف صفحه بیندازیم.
بیایید شروع به بازیابی کنیم!
یک بخش جدید اضافه کنید
با اضافه کردن یک بخش منظم جدید به صفحه ای که در آن کار می کنید شروع کنید.
یک خط جدید اضافه کنید
ساختار ستون
با استفاده از ساختار ستون زیر، اضافه کردن یک ردیف جدید ادامه دهید:
پیش زمینه شیب پیش فرض
بدون اضافه کردن ماژول های بیشتر ، پارامترهای خط را باز کرده و پس زمینه شیب زیر را اضافه کنید:
- رنگ 1: #b1ffc4
- رنگ 2: #ffffff
- نوع شیب: شعاعی
- جهت شعاعی: مرکز
- موقعیت شروع: 28٪
- موقعیت نهایی: 28٪
پرواز بر روی زمینه شیب
پس از تغییر مکان ، پیش زمینه شیب را تغییر دهید.
- رنگ 1: #b1ffc4
- رنگ 2: #ffffff
- نوع شیب: شعاعی
- جهت شعاعی: سمت چپ
- موقعیت شروع: 5٪
- موقعیت نهایی: 5٪
فاصله
به تنظیمات فاصله بروید و سپس مقدارهای padding و margin را تغییر دهید.
- پوشش بالا: 0px
- بالشتک پایین: 0px
- حاشیه بالایی: 50px
- حاشیه پایین: 50px
مرز پیش فرض
یک شعاع مرزی از پیکسل های 50 را در گوشه های بالا و راست سمت راست اضافه کنید.
مرز شناور
گوشه ها را به سمت معلق در هوا "0px" ببرید.
سایه پیش فرض
سپس با استفاده از پارامترهای زیر سایه جعبه ظریف را اضافه کنید:
- Box Shadow Blur Force: 50px
- رنگ سایه: rgba (0,0,0,0.09،XNUMX،XNUMX،XNUMX،XNUMX)
سایه جعبه شناور
هنگام پرواز ، سایه را از جعبه جدا کنید و رنگ سایه را با رنگی کاملاً شفاف جایگزین کنید.
- رنگ سایه: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX،XNUMX)
ماژول متن را به یک ستون اضافه کنید
محتوای H2 را اضافه کنید
زمان آن رسیده است که اضافه کردن ماژول ها را شروع کنید، با یک ماژول متنی شروع کنید. را وارد کنید محتویات H2 به انتخاب شما
تنظیمات متن H2
به تب Design بروید و متناسب با آن تنظیمات متن H2 را تغییر دهید:
- عنوان 2 قلم: Acme
- عنوان سبک فونت 2: زیر خط دار
- عنوان 2 رنگ خط زیرین: #00ff3f
- عنوان رنگ 2 متن: #000000
- عنوان متن 2: 3vw
فاصله
سپس مقادیر پر کردن سفارشی را اضافه کنید.
- بهترین جاذبه: 6vw
- بالشتک پایین: 7vw
- چسباندن چپ: 2vw
ماژول تصویر را به ستون اضافه کنید
آپلود تصویر
ماژول دوم مورد نیاز ما در این ستون ، ماژول تصویر است. یک تصویر منظره به انتخاب خود بارگذاری کنید.
جعبه نور
سپس گزینه lightbox را در تنظیمات پیوند فعال کنید.
- در بیننده باز شود: بله
اندازه
و در تنظیمات اندازه ، تمام عرض را به تصویر مجبور کنید. با این کار حساسیت تصویر در تمام اندازه های صفحه تضمین می شود.
- پهنای باند نیرو: بله
ماژول تصویر کلون دو بار
پس از اتمام اولین ماژول تصویر ، می توانید دو بار آنرا کپی کنید.
تغییر تصاویر
تصاویر را در دو نسخه تغییر دهید. مطمئن شوید تصاویر بارگذاری شده با تصویر اول برابر هستند.
اثر رولور را به ردیف اضافه کنید
اندازه
اکنون که تنظیمات اساسی سطر و غلاف را به پایان رساندیم ، وقت آن است که افکت شناور را ایجاد کنید! ما با تغییر ارتفاع و عرض ردیف شروع می کنیم و سرریزها را پنهان می کنیم. تنظیمات اندازه ردیف را باز کنید و تغییرات زیر را انجام دهید:
- از عرض روده ای سفارشی استفاده کنید: بله
- عرض روده: 1
- عرض: 20٪
- حداکثر عرض: 100٪
- ارتفاع: 15.9vw
شناور
هنگام شناور کردن ، عرض را به "100٪" کاهش دهید. این اجازه می دهد تا تصاویر پس از قرار گرفتن در خط نمایش داده شوند.
- عرض: 100٪
دید
به تب پیشرفته بعدی بروید و سرریزها را پنهان کنید. این اطمینان حاصل می کند که تصاویر قبل از ماسک می شوند آخرین بازدید شناور (رومیزی) یا کلیک کنید (تبلت/موبایل) روی ماژول متن.
- سرریز افقی: پنهان
- سرریز عمودی: پنهان
گذار
ما همچنین در حال تغییر طول انتقال در پارامترهای گذار هستیم.
- مدت زمان انتقال: 0ms
عنصر اصلی ستون اصلی
برای ایجاد یک شبکه شناور ، تنظیمات ستون را باز می کنیم ، به تب Advanced options برویم و خطوط زیر کد CSS را در عنصر اصلی شناور قرار می دهیم:
نمایش: شبکه؛ شبکه-قالب-ستون: 20٪ 25٪ 25٪ 25٪؛ grid-gap: 10px؛
دوبار کلون بزنید
پس از اتمام ردیف اول ، می توانید آن را هر چند بار که می خواهید شبیه سازی کنید. برای این مثال طراحی خاص ، ما ردیف را دو بار کلون می کنیم.
پس زمینه شیب خط 1 را اصلاح کنید
رنگ شیب اول را در پس زمینه شیب خط دوم تغییر دهید.
- رنگ 1: # ffdc96
پس زمینه شیب خط 2 را تغییر دهید
همین کار را برای ردیف سوم انجام دهید.
- رنگ 1: # b7c7ff
کپی ماژول متن و رنگ زیرین دو نسخه را تغییر دهید
در ادامه با تغییر رنگ زیرین کپی های ماژول متن با کپی ادامه دهید و تمام شد!
- رنگ برجسته # 1: # ffaa00
- رنگ برجسته # 2: # 0037ff
آخرین افکار
در این آموزش به شما نشان دادیم که چگونه با استفاده از گزینه های سرریز، تصاویر را در شبکه های شناور افقی نمایش دهید. DIVI. تصاویر زمانی که روی دسکتاپ قرار میگرفتند و روی تبلت/تلفن کلیک میکردند، آشکار میشدند. اگرچه ما تصاویری را فاش کرده ایم، اما شما می توانید آن را فاش کنید محتویات با تغییر پارامترهای موجود در ژنراتور به انتخاب شما. امیدواریم این آموزش الهام بخش شما باشد تا طرح های شبکه شناور جایگزین خود را ایجاد کنید! اگر سؤال یا پیشنهادی دارید، حتماً در بخش نظرات زیر نظر خود را بنویسید!