هر هفته Elegant Theme بسته های طرح بندی جدیدی را ارائه می دهد DIVI رایگان است که می توانید برای پروژه بعدی خود استفاده کنید. برای یکی از بسته‌های ارائه، آنها همچنین یک مورد استفاده به اشتراک می‌گذارند که به شما کمک می‌کند تا خود را بردارید وب سایت در سطح بالا این هفته، به عنوان بخشی از ابتکار طراحی DIVI در کلاس، ما به شما نشان خواهیم داد که چگونه خلاقانه از گزینه های شناور استفاده کنید DIVI برای برجسته کردن CTAها در صفحات خود. ما از بسته خدمات لباسشویی Divi استفاده می کنیم و سه مثال مختلف از برجسته کردن دعوت به اقدام شما را پوشش خواهیم داد.

بررسی

قبل از غواصی در آموزش ، بیایید سریعاً آنچه را که می خواهیم ایجاد کنیم بررسی کنیم تا ایده ای به دست آوریم.

تحقق انیمیشن divi.gif

با استفاده از طرح سرویس خشکشویی یا لباسشویی ، صفحه جدیدی اضافه کنید

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

خشکشویی demo.jpg

کلون کردن ماژول متن

بیایید با اولین مثال شروع کنیم! ما یک متن متن موجود را به القا h شناور تبدیل می کنیم. این روش فقط در دسک تاپ ظاهر می شود. به همین دلیل ما در حال شبیه سازی ماژول اولیه هستیم تا اجازه دهد در صفحه های کوچکتر و بدون اثرات شناور ظاهر شود.

کلون کردن ماژول text.jpg

دید

ماژول متن # 1

با مخفی کردن اولین ماژول روی رایانه لوحی و تلفن ادامه دهید.

visibility element divi.jpg

ماژول متن # 2

و ماژول دوم را روی دسک تاپ مخفی کنید.

دید دسکتاپ divi.jpg

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

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

ما فقط اولین ماژول متنی را ویرایش می کنیم، که همانی است که روی دسکتاپ ظاهر می شود. ماژول را باز کنید و اضافه کنید محتویات از بخش 3 به منطقه از محتویات.

اصلاح اولین ماژول texte.jpg

روی تنظیمات متن حرکت کنید

سپس به تنظیمات متن بروید و متن پاراگراف ماژول خود را "مخفی" کنید و 0px به اندازه متن اضافه کنید.

  • اندازه متن: 0px

ماژول پارامترهای متن divi.jpg

به تنظیمات متن 2 بروید

همین کار را برای تنظیمات نوشتاری Header 2 در حالت شناور انجام دهید.

  • عنوان 2 اندازه متن: 0px

پیکربندی هدر 2 divi.jpg

عنوان متن پیش فرض 3

سپس به پارامترهای متنی موضوع 3 دسترسی پیدا کرده و تغییراتی ایجاد کنید.

  • فونت عنوان 3: Josefin Sans
  • عنوان فونت 3: نیمه پررنگ
  • عنوان 3 اندازه متن: 0px

پیکربندی هدر 3 fonts.jpg

نشانگر را بالای عنوان 3 تنظیمات نوشتار قرار دهید

تغییر اندازه متن با شناور شدن

  • عنوان 3 اندازه متن: 40px

پیکربندی هدر 3 divi.jpg

تنظیمات فاصله پیش فرض

سپس به تنظیمات فاصله بروید و مطمئن شوید که مقادیر بالشتک سفارشی زیر اعمال می شوند:

  • پد بالا: 80px
  • بالشتک پایین: 50px
  • لبه چپ: 40px
  • اثاثه یا لوازم داخلی راست: 40px

padding options.jpg

تنظیمات فاصله Rollover

همچنین یک حاشیه بازگرداندن سفارشی را اضافه کنید.

  • حاشیه بالایی: 50px
  • حاشیه سمت چپ: -53.5vw

در حال پرواز در حال پرواز تنظیمات پرواز

تنظیمات پیش فرض مرزی

ما همچنین یک مرز پایین و بدون مرز اضافه می کنیم.

  • عرض مرز پایین: 0px
  • رنگ حاشیه پایین: # ff947f
  • سبک پایین مرز: خالدار

پیکربندی مرز divi.jpg

تنظیمات مرز پرواز

عرض مرز هوور را تغییر دهید.

  • عرض مرز پایین: 5px

تمرکز روی ctas

تنظیمات پیش فرض سایه جعبه

سپس سایه جعبه را اضافه کنید.

  • جعبه سایه موقعیت عمودی: 50px
  • Box Shadow Blur Force: 54px
  • نیروی انتشار سایه جعبه: -32 پیکسل
  • رنگ سایه: rgba (255,255,255,0،XNUMX،XNUMX،XNUMX،XNUMX)

گزینه dombres divi.jpg

تنظیمات سایه جعبه Rollover

و رنگ سایه جعبه معلق را تغییر دهید.

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

پیکربندی مرز در flyover divi.jpg

گذار

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

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

block divi builder block text.jpg

خلاصه اجرایی

سرانجام ، در این آموزش در مورد ایجاد یک انیمیشن بود که بخشی از صفحه Divi ما را برجسته می کند. امکاناتی که با Divi وجود دارد تقریباً بی حد و حصر است ، با استفاده از گزینه های مختلف (ترکیب چندین گزینه مختلف) قادر خواهید بود رابط هایی با انیمیشن پویا و جذاب ایجاد کنید. تمام نشده ، بعداً قسمت دوم این آموزش را پوشش خواهیم داد. تا آن زمان ، اگر سوالی دارید ، در صورت تمایل از آنها در بخش نظرات بپرسید.