این آموزش، مکمل آموزشی است که چند روز پیش ایجاد کردیم. ما به شما نشان دادیم که چگونه متن پیمایشی را به یک ستون در Divi اضافه کنید. امروز، به شما نشان خواهیم داد که چگونه از همان تکنیک برای اضافه کردن یک بخش "ابرقهرمان" (اصطلاحی که برای توصیف یک منطقه بزرگ از یک صفحه وب طراحی شده است تا توجه را جلب کند و عناصر خاصی را برجسته کند) استفاده کنید.
بیایید شروع.
طرح از پیش تعریف شده را اضافه کنید
برای افزودن طرحبندی به صفحه خود، منوی تنظیمات را در پایین سازنده Divi باز کنید و روی نماد بهعلاوه کلیک کنید. در پنجره بازشو «بارگذاری از کتابخانه»، بسته طرحبندی استخدامکننده را انتخاب کنید. سپس برای استفاده از طرحبندی صفحه اصلی کلیک کنید.
محتوای اضافی را با طرح حذف کنید
پس از بارگیری ارائه روی صفحه ، نمای wireframe را مستقر کرده و تمام مطالب را از ارائه به جز سرصفحه تمام عرض و بخشی که در زیر آن است حذف کنید.
ایجاد انیمیشن متن انتخاب
همانطور که مشاهده می کنید ، کلمه "hired" قبلاً به عنوان یک عنصر طراحی متن بزرگ در یک ماژول متن در بخش دوم استفاده شده است. ما قصد داریم این ماژول متن را به یک عنصر طراحی بلندگو متن پاسخگو تبدیل کنیم. نکته کلیدی در پاسخگویی مستطیل متن این است که مطمئن شوید خط و ماژول متن به طور کامل عرض پنجره مرورگر را در بر می گیرد. ما می توانیم این کار را با استفاده از عرض 100٪ انجام دهیم. سپس می توانیم از واحد length vw برای اندازه متن استفاده کنیم. این متن را متناسب با عرض مرورگر مناسب می کند. پس از آن ، ما همان اصولی را که قبلاً برای نشان دادن مثال متن پیمایشی ساده خود استفاده کردیم ، به کار خواهیم گرفت.
در اینجا چگونگی انجام این کار است.
پارامترهای خط را به روز کنید
همانطور که قبلاً ذکر شد ، ردیف باید 100٪ باشد تا طراحی این انتخاب متن پاسخگو انجام شود. این به ماژول متن ما اجازه می دهد تا از واحدهای طول vw نسبت به عرض مرورگر استفاده کند. از آنجا که طرح از پیش تعریف شده ما از قبل دارای یک خط با عرض 100٪ است ، بنابراین لازم نیست کاری انجام دهیم.
با این حال ، ما باید بقیه تنظیمات را به شرح زیر تنظیم کنیم.
- حاشیه: -24 پایین
- محور Y را ترجمه کنید: -24vw
- سرریز افقی: پنهان
- سرریز عمودی: پنهان
حاشیه پایین منفی برای حذف فضای منفی است که هر بار با استفاده از دستور transform translate حرکت می کنیم ردیف باقی مانده است. و ما باید برای جلوه متن انتخاب خود ، سرریز ردیف را مخفی کنیم.
طراحی متن ماژول متن را به روز کنید
حال تنها کاری که شما باید انجام دهید این است که ماژول متن را به روز کنید تا آن را به یک عنصر طراحی متن بزرگ تبدیل کنید.
ماژول متن را باز کنید و موارد زیر را به روز کنید:
- رنگ متن متن: rgba (255,255,255,0.16)
- اندازه متن: 36vw
- حاشیه: -100٪ در سمت چپ ، 100٪ در سمت راست
اندازه متن از یک واحد طول vw استفاده می کند ، بنابراین متن به خوبی با عرض مرورگر متناسب است.
انیمیشن را به ماژول متن اضافه کنید
- سبک انیمیشن: اسلاید
- جهت انیمیشن: چپ
- مدت زمان انیمیشن: 10000ms
- شدت انیمیشن: 100٪
- انیمیشن منحنی سرعت: خطی
- تکرار انیمیشن: حلقه
طراحی نهایی
حال طرح نهایی را بررسی کنید.
آخرین افکار
جعبه های متنی می توانند ابزاری مفید برای طراحی وب باشند. آنها فقط به عنوان چاپگر از راه دور کار نمی کنند. آنها همچنین می توانند عنصر جالب انیمیشن را به طراحی وب شما اضافه کنند. و بهترین قسمت این است که Divi ایجاد و طراحی انواع چیزهای زیبا را آسان می کند. امیدوارم این آموزش به شما کمک کند متن های ساده انتخاب را هر زمان که به آنها نیاز دارید ایجاد کنید.
امیدوارم در مورد نظرات از شما بشنوم.
به سلامتی شما!