هر هفته Elegant Theme بسته های طرح بندی جدیدی را ارائه می دهد DIVI رایگان است که می توانید برای پروژه بعدی خود استفاده کنید. برای یکی از بستههای ارائه، آنها همچنین یک مورد استفاده به اشتراک میگذارند که به شما کمک میکند تا خود را بردارید وب سایت در سطح بالا این هفته، به عنوان بخشی از ابتکار طراحی DIVI در کلاس، ما به شما نشان خواهیم داد که چگونه خلاقانه از گزینه های شناور استفاده کنید DIVI برای برجسته کردن CTAها در صفحات خود. ما از بسته خدمات لباسشویی Divi استفاده می کنیم و سه مثال مختلف از برجسته کردن دعوت به اقدام شما را پوشش خواهیم داد.
بررسی
قبل از غواصی در آموزش ، بیایید سریعاً آنچه را که می خواهیم ایجاد کنیم بررسی کنیم تا ایده ای به دست آوریم.
با استفاده از طرح سرویس خشکشویی یا لباسشویی ، صفحه جدیدی اضافه کنید
با افزودن یک صفحه جدید به صفحه خود شروع کنید وب سایت و صفحه اصلی خدمات خشکشویی را دانلود کنید. سه مثالی که ایجاد خواهیم کرد بر اساس این چیدمان خواهند بود. هنگامی که رویکرد را به دست آوردید، می توانید این نمونه ها را در هر طرحی که روی آن کار می کنید اعمال کنید.
کلون کردن ماژول متن
بیایید با اولین مثال شروع کنیم! ما یک متن متن موجود را به القا h شناور تبدیل می کنیم. این روش فقط در دسک تاپ ظاهر می شود. به همین دلیل ما در حال شبیه سازی ماژول اولیه هستیم تا اجازه دهد در صفحه های کوچکتر و بدون اثرات شناور ظاهر شود.
دید
ماژول متن # 1
با مخفی کردن اولین ماژول روی رایانه لوحی و تلفن ادامه دهید.
ماژول متن # 2
و ماژول دوم را روی دسک تاپ مخفی کنید.
یک اثر بازگرداندن به ماژول متن دسک تاپ اضافه کنید
عنوان محتوا 3 را اضافه کنید
ما فقط اولین ماژول متنی را ویرایش می کنیم، که همانی است که روی دسکتاپ ظاهر می شود. ماژول را باز کنید و اضافه کنید محتویات از بخش 3 به منطقه از محتویات.
روی تنظیمات متن حرکت کنید
سپس به تنظیمات متن بروید و متن پاراگراف ماژول خود را "مخفی" کنید و 0px به اندازه متن اضافه کنید.
- اندازه متن: 0px
به تنظیمات متن 2 بروید
همین کار را برای تنظیمات نوشتاری Header 2 در حالت شناور انجام دهید.
- عنوان 2 اندازه متن: 0px
عنوان متن پیش فرض 3
سپس به پارامترهای متنی موضوع 3 دسترسی پیدا کرده و تغییراتی ایجاد کنید.
- فونت عنوان 3: Josefin Sans
- عنوان فونت 3: نیمه پررنگ
- عنوان 3 اندازه متن: 0px
نشانگر را بالای عنوان 3 تنظیمات نوشتار قرار دهید
تغییر اندازه متن با شناور شدن
- عنوان 3 اندازه متن: 40px
تنظیمات فاصله پیش فرض
سپس به تنظیمات فاصله بروید و مطمئن شوید که مقادیر بالشتک سفارشی زیر اعمال می شوند:
- پد بالا: 80px
- بالشتک پایین: 50px
- لبه چپ: 40px
- اثاثه یا لوازم داخلی راست: 40px
تنظیمات فاصله Rollover
همچنین یک حاشیه بازگرداندن سفارشی را اضافه کنید.
- حاشیه بالایی: 50px
- حاشیه سمت چپ: -53.5vw
تنظیمات پیش فرض مرزی
ما همچنین یک مرز پایین و بدون مرز اضافه می کنیم.
- عرض مرز پایین: 0px
- رنگ حاشیه پایین: # ff947f
- سبک پایین مرز: خالدار
تنظیمات مرز پرواز
عرض مرز هوور را تغییر دهید.
- عرض مرز پایین: 5px
تنظیمات پیش فرض سایه جعبه
سپس سایه جعبه را اضافه کنید.
- جعبه سایه موقعیت عمودی: 50px
- Box Shadow Blur Force: 54px
- نیروی انتشار سایه جعبه: -32 پیکسل
- رنگ سایه: rgba (255,255,255,0،XNUMX،XNUMX،XNUMX،XNUMX)
تنظیمات سایه جعبه Rollover
و رنگ سایه جعبه معلق را تغییر دهید.
- رنگ سایه: rgba (0,0,0,0,2،XNUMX،XNUMX،XNUMX،XNUMX)
گذار
برای ایجاد یک انتقال صاف ، زمان انتقال را در تنظیمات انتقال افزایش دهید.
- مدت زمان انتقال: 750ms
خلاصه اجرایی
سرانجام ، در این آموزش در مورد ایجاد یک انیمیشن بود که بخشی از صفحه Divi ما را برجسته می کند. امکاناتی که با Divi وجود دارد تقریباً بی حد و حصر است ، با استفاده از گزینه های مختلف (ترکیب چندین گزینه مختلف) قادر خواهید بود رابط هایی با انیمیشن پویا و جذاب ایجاد کنید. تمام نشده ، بعداً قسمت دوم این آموزش را پوشش خواهیم داد. تا آن زمان ، اگر سوالی دارید ، در صورت تمایل از آنها در بخش نظرات بپرسید.