این آموزش علاوه بر آموزشی است که چند روز پیش ساخته بودیم. ما در واقع به شما نشان داده‌ایم که چگونه می‌توانید متن پیمایشی را در ستونی اضافه کنید DIVI. امروز، ما قصد داریم به شما نشان دهیم که چگونه از همان تکنیک استفاده کنید، تا بخش "سوپر قهرمان" را اضافه کنید (عبارت استفاده شده برای dنوشتن یک منطقه بزرگ از یک صفحه وب طراحی شده برای جلب توجه و برجسته کردن عناصر خاص).

بیایید شروع.

طرح از پیش تعریف شده را اضافه کنید

برای افزودن طرح‌بندی به صفحه خود، منوی تنظیمات را در پایین سازنده باز کنید DIVI و روی نماد مثبت کلیک کنید. در پنجره بازشو Load from Library، Job Recruiter Layout Pack را انتخاب کنید. سپس برای استفاده از طرح بندی صفحه اصلی کلیک کنید.

divi الگوی مدل

محتوای اضافی را با طرح حذف کنید

هنگامی که ارائه در صفحه بارگذاری شد، نمای wireframe را اجرا کنید و همه را حذف کنید محتویات از ارائه، به جز هدر تمام عرض و بخش درست زیر آن.

بخش اصلاح طرح

ایجاد انیمیشن متن انتخاب

همانطور که مشاهده می کنید ، کلمه "hired" قبلاً به عنوان یک عنصر طراحی متن بزرگ در یک ماژول متن در بخش دوم استفاده شده است. ما قصد داریم این ماژول متن را به یک عنصر طراحی بلندگو متن پاسخگو تبدیل کنیم. نکته کلیدی در پاسخگویی مستطیل متن این است که مطمئن شوید خط و ماژول متن به طور کامل عرض پنجره مرورگر را در بر می گیرد. ما می توانیم این کار را با استفاده از عرض 100٪ انجام دهیم. سپس می توانیم از واحد length vw برای اندازه متن استفاده کنیم. این متن را متناسب با عرض مرورگر مناسب می کند. پس از آن ، ما همان اصولی را که قبلاً برای نشان دادن مثال متن پیمایشی ساده خود استفاده کردیم ، به کار خواهیم گرفت.

در اینجا چگونگی انجام این کار است.

پارامترهای خط را به روز کنید

همانطور که قبلاً ذکر شد ، ردیف باید 100٪ باشد تا طراحی این انتخاب متن پاسخگو انجام شود. این به ماژول متن ما اجازه می دهد تا از واحدهای طول vw نسبت به عرض مرورگر استفاده کند. از آنجا که طرح از پیش تعریف شده ما از قبل دارای یک خط با عرض 100٪ است ، بنابراین لازم نیست کاری انجام دهیم.

پیکربندی عرض ماژول خط Divi

با این حال ، ما باید بقیه تنظیمات را به شرح زیر تنظیم کنیم.

  • حاشیه: -24 پایین
  • محور Y را ترجمه کنید: -24vw
  • سرریز افقی: پنهان
  • سرریز عمودی: پنهان

پیکربندی تنظیمات خط Divi

حاشیه پایین منفی برای حذف فضای منفی است که هر بار با استفاده از دستور transform translate حرکت می کنیم ردیف باقی مانده است. و ما باید برای جلوه متن انتخاب خود ، سرریز ردیف را مخفی کنیم.

طراحی متن ماژول متن را به روز کنید

حال تنها کاری که شما باید انجام دهید این است که ماژول متن را به روز کنید تا آن را به یک عنصر طراحی متن بزرگ تبدیل کنید.

ماژول متن را باز کنید و موارد زیر را به روز کنید:

  • رنگ متن متن: rgba (255,255,255,0.16)
  • اندازه متن: 36vw
  • حاشیه: -100٪ در سمت چپ ، 100٪ در سمت راست

اندازه متن از یک واحد طول vw استفاده می کند ، بنابراین متن به خوبی با عرض مرورگر متناسب است.

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

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

  • سبک انیمیشن: اسلاید
  • جهت انیمیشن: چپ
  • مدت زمان انیمیشن: 10000ms
  • شدت انیمیشن: 100٪
  • انیمیشن منحنی سرعت: خطی
  • تکرار انیمیشن: حلقه

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

حال طرح نهایی را بررسی کنید.

divi انیمیشن استخدام شدهآخرین افکار

جعبه های متن می توانند ابزار مفیدی برای طراحی وب باشند. آنها محدود به عملکرد تنها به عنوان تیک تیک نیستند. آنها همچنین می توانند یک عنصر انیمیشن جالب را به طراحی وب شما اضافه کنند. و بهترین بخش این است DIVI ایجاد و طراحی انواع چیزهای زیبا را آسان می کند. امیدوارم این آموزش به شما کمک کند هر زمان که به متن های انتخابی ساده نیاز داشتید بسازید.

امیدوارم در مورد نظرات از شما بشنوم.

به سلامتی شما!