از آنجایی که گزینه های اندازه گیری جدید از DIVI منتشر شده است، چند آموزش وجود دارد که به شما نشان می دهد چگونه هوور آشکار کنید. در این آموزش ها، محتویات ماسک به صورت عمودی قرار داده شد. با این حال، در برخی موارد ممکن است بخواهید یک نمای افقی ایجاد کنید. در این آموزش، ما به شما نشان خواهیم داد که چگونه با استفاده از شبکه های شناور و گزینه های سرریز، تصاویر را آشکار کنید. DIVI. انجام این کار نیاز به رویکرد کمی متفاوت دارد. ما از یک ردیف از یک ستون استفاده می کنیم و همه ماژول ها را یکی زیر دیگری قرار می دهیم. هنگام شناور، ستون را به یک شبکه افقی تبدیل می کنیم. همچنین می توانید فایل JSON را به صورت رایگان دانلود کنید!

برویم.

بررسی

قبل از اینکه به آموزش بپردازیم ، بیایید نگاهی سریع به نحوه نمایش آن در اندازه های مختلف صفحه بیندازیم.

پیش نمایش تصویر پرواز Diviبیایید شروع به بازیابی کنیم!

یک بخش جدید اضافه کنید

با اضافه کردن یک بخش منظم جدید به صفحه ای که در آن کار می کنید شروع کنید.

انتخاب بخش تقسیمیک خط جدید اضافه کنید

ساختار ستون

با استفاده از ساختار ستون زیر، اضافه کردن یک ردیف جدید ادامه دهید:

یک بخش divi وارد کنیدپیش زمینه شیب پیش فرض

بدون اضافه کردن ماژول های بیشتر ، پارامترهای خط را باز کرده و پس زمینه شیب زیر را اضافه کنید:

  • رنگ 1: #b1ffc4
  • رنگ 2: #ffffff
  • نوع شیب: شعاعی
  • جهت شعاعی: مرکز
  • موقعیت شروع: 28٪
  • موقعیت نهایی: 28٪

پیکربندی پس زمینه خط Divi

پرواز بر روی زمینه شیب

پس از تغییر مکان ، پیش زمینه شیب را تغییر دهید.

  • رنگ 1: #b1ffc4
  • رنگ 2: #ffffff
  • نوع شیب: شعاعی
  • جهت شعاعی: سمت چپ
  • موقعیت شروع: 5٪
  • موقعیت نهایی: 5٪

تنظیم شعاعی خط Diviفاصله

به تنظیمات فاصله بروید و سپس مقدارهای padding و margin را تغییر دهید.

  • پوشش بالا: 0px
  • بالشتک پایین: 0px
  • حاشیه بالایی: 50px
  • حاشیه پایین: 50px

تنظیم فاصله پارامتر خط Divi

مرز پیش فرض

یک شعاع مرزی از پیکسل های 50 را در گوشه های بالا و راست سمت راست اضافه کنید.

تنظیم مرز انعطاف پذیر مرز

مرز شناور

گوشه ها را به سمت معلق در هوا "0px" ببرید.

شبکه های سرریز

سایه پیش فرض

سپس با استفاده از پارامترهای زیر سایه جعبه ظریف را اضافه کنید:

  • Box Shadow Blur Force: 50px
  • رنگ سایه: rgba (0,0,0,0.09،XNUMX،XNUMX،XNUMX،XNUMX)

تنظیمات سایه خط Divi

سایه جعبه شناور

هنگام پرواز ، سایه را از جعبه جدا کنید و رنگ سایه را با رنگی کاملاً شفاف جایگزین کنید.

  • رنگ سایه: rgba (0,0,0,0،XNUMX،XNUMX،XNUMX،XNUMX)

تقسیم خط سایه شناور

ماژول متن را به یک ستون اضافه کنید

محتوای H2 را اضافه کنید

زمان آن رسیده است که اضافه کردن ماژول ها را شروع کنید، با یک ماژول متنی شروع کنید. را وارد کنید محتویات H2 به انتخاب شما

عنوان تقسیم متن ماژول مقاله

تنظیمات متن H2

به تب Design بروید و متناسب با آن تنظیمات متن H2 را تغییر دهید:

  • عنوان 2 قلم: Acme
  • عنوان سبک فونت 2: زیر خط دار
  • عنوان 2 رنگ خط زیرین: #00ff3f
  • عنوان رنگ 2 متن: #000000
  • عنوان متن 2: 3vw

divi پیکربندی قلم هدر

فاصله

سپس مقادیر پر کردن سفارشی را اضافه کنید.

  • بهترین جاذبه: 6vw
  • بالشتک پایین: 7vw
  • چسباندن چپ: 2vw

پیکربندی حاشیه Divi

ماژول تصویر را به ستون اضافه کنید

آپلود تصویر

ماژول دوم مورد نیاز ما در این ستون ، ماژول تصویر است. یک تصویر منظره به انتخاب خود بارگذاری کنید.

یک تصویر تقسیم کنیدجعبه نور

سپس گزینه lightbox را در تنظیمات پیوند فعال کنید.

  • در بیننده باز شود: بله

باز کردن در یک بیننده diviاندازه

و در تنظیمات اندازه ، تمام عرض را به تصویر مجبور کنید. با این کار حساسیت تصویر در تمام اندازه های صفحه تضمین می شود.

  • پهنای باند نیرو: بله

تغییر اندازه تصویر Diviماژول تصویر کلون دو بار

پس از اتمام اولین ماژول تصویر ، می توانید دو بار آنرا کپی کنید.

ماژول تصویر را دو بار کلون کنید

تغییر تصاویر

تصاویر را در دو نسخه تغییر دهید. مطمئن شوید تصاویر بارگذاری شده با تصویر اول برابر هستند.

ویرایش تصویر diviاثر رولور را به ردیف اضافه کنید

اندازه

اکنون که تنظیمات اساسی سطر و غلاف را به پایان رساندیم ، وقت آن است که افکت شناور را ایجاد کنید! ما با تغییر ارتفاع و عرض ردیف شروع می کنیم و سرریزها را پنهان می کنیم. تنظیمات اندازه ردیف را باز کنید و تغییرات زیر را انجام دهید:

  • از عرض روده ای سفارشی استفاده کنید: بله
  • عرض روده: 1
  • عرض: 20٪
  • حداکثر عرض: 100٪
  • ارتفاع: 15.9vw

تنظیمات ماژول خط Diviشناور

هنگام شناور کردن ، عرض را به "100٪" کاهش دهید. این اجازه می دهد تا تصاویر پس از قرار گرفتن در خط نمایش داده شوند.

  • عرض: 100٪

هنگام شناور ، عرض را تغییر دهیددید

به تب پیشرفته بعدی بروید و سرریزها را پنهان کنید. این اطمینان حاصل می کند که تصاویر قبل از ماسک می شوند آخرین بازدید شناور (رومیزی) یا کلیک کنید (تبلت/موبایل) روی ماژول متن.

  • سرریز افقی: پنهان
  • سرریز عمودی: پنهان

پیکربندی سرریز Diviگذار

ما همچنین در حال تغییر طول انتقال در پارامترهای گذار هستیم.

  • مدت زمان انتقال: 0ms

انتقال بین انیمیشن های divi

عنصر اصلی ستون اصلی

برای ایجاد یک شبکه شناور ، تنظیمات ستون را باز می کنیم ، به تب Advanced options برویم و خطوط زیر کد CSS را در عنصر اصلی شناور قرار می دهیم:

نمایش: شبکه؛ شبکه-قالب-ستون: 20٪ 25٪ 25٪ 25٪؛ grid-gap: 10px؛

تنظیم ستون Diviشبکه های سرریز

دوبار کلون بزنید

پس از اتمام ردیف اول ، می توانید آن را هر چند بار که می خواهید شبیه سازی کنید. برای این مثال طراحی خاص ، ما ردیف را دو بار کلون می کنیم.

چندین بار ماژول ردیف کلون کنید

پس زمینه شیب خط 1 را اصلاح کنید

رنگ شیب اول را در پس زمینه شیب خط دوم تغییر دهید.

  • رنگ 1: # ffdc96

اصلاح کپی خط Diviپس زمینه شیب خط 2 را تغییر دهید

همین کار را برای ردیف سوم انجام دهید.

  • رنگ 1: # b7c7ff

کپی ماژول متن و رنگ زیرین دو نسخه را تغییر دهید

در ادامه با تغییر رنگ زیرین کپی های ماژول متن با کپی ادامه دهید و تمام شد!

  • رنگ برجسته # 1: # ffaa00
  • رنگ برجسته # 2: # 0037ff

آخرین افکار

در این آموزش به شما نشان دادیم که چگونه با استفاده از گزینه های سرریز، تصاویر را در شبکه های شناور افقی نمایش دهید. DIVI. تصاویر زمانی که روی دسک‌تاپ قرار می‌گرفتند و روی تبلت/تلفن کلیک می‌کردند، آشکار می‌شدند. اگرچه ما تصاویری را فاش کرده ایم، اما شما می توانید آن را فاش کنید محتویات با تغییر پارامترهای موجود در ژنراتور به انتخاب شما. امیدواریم این آموزش الهام بخش شما باشد تا طرح های شبکه شناور جایگزین خود را ایجاد کنید! اگر سؤال یا پیشنهادی دارید، حتماً در بخش نظرات زیر نظر خود را بنویسید!