رفتن به محتوای اصلی

نحوه ایجاد شیب متحرک در دیوی

Divi: ساده ترین قالب وردپرس برای استفاده

Divi: بهترین تم وردپرس تمام وقت!

بیشتر دانلود 901.000، Divi محبوب ترین تم وردپرس در جهان است. این کامل، آسان برای استفاده است و همراه با بیش از قالب های رایگان 62. [توصیه شده]

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

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

بیایید شروع کنیم!

نتیجه Posisble

در اینجا مروری بر دو روش ارائه شده برای ایجاد یک انیمیشن پس زمینه گرادیان در Divi ارائه شده است.

بدیهی است که پیش نیاز این آموزش این است که شما یک موضوع Divi را نصب و به روز کنید.

ایجاد یک انیمیشن پس زمینه شیب دار با عصاره CSS و گزینه پس زمینه Divi

برای شروع ، یک ردیف از یک ستون به بخش پیش فرض در Divi Builder اضافه کنید.

طرح Divi

تنظیمات بخش

سپس تنظیمات بخش را با یک تصویر پس زمینه به روز کنید. پس زمینه شیب ما به خط ما اضافه می شود تا با این تصویر همپوشانی داشته باشد.

سپس پر کردن را به شرح زیر به روز کنید:

  • بالشتک: 0px زیاد ، 0px کم
یک تصویر divi اضافه کنید

تنظیمات ردیف و ستون

پارامترهای ستون

تنظیمات ردیف را باز کنید ، سپس ستون را به شرح زیر پر کنید:

به راحتی وب سایت خود را با Elementor بسازید

Elementor به شما امکان می دهد تا با طراحی حرفه ای هر طراحی وب سایت را به راحتی ایجاد کنید. هزینه کارهایی را که می توانید انجام دهید ، متوقف نکنید. [رایگان]

  • بالشتک: بالاتر از 12vw

سپس CSS سفارشی زیر را به عنصر ستون اصلی اضافه کنید:

height: 40vw;

سبک ماژول Divi

تنظیمات خط

پیشینه شیب

اکنون می توانیم پس زمینه شیب را به خط اضافه کنیم. اگر می خواهید تصویر پس زمینه را ببینید ، رنگ های شیب را نیمه شفاف کنید.

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

  • رنگ پس زمینه شیب چپ: rgba (12,113,195,0.8،XNUMX،XNUMX،XNUMX)
  • رنگ پس زمینه شیب در سمت راست: rgba (131,0,233,0.8،XNUMX،XNUMX،XNUMX)
  • نوع شیب: خطی
  • جهت شیب: 45 درجه
پیکربندی رنگ Divi
اندازه

سپس اندازه خط را به شرح زیر به روز کنید:

  • عرض: 100٪
  • حداکثر عرض: 100٪
پیکربندی عرض ماژول Divi
کلاس CSS سفارشی

اکنون که پس زمینه شیب ما آماده است ، باید انیمیشن را از طریق CSS سفارشی اضافه کنیم. قبل از افزودن کد CSS ، باید یک کلاس CSS سفارشی برای هدف قرار دادن آن ردیف خاص اضافه کنیم.

به تب Advanced بروید و کلاس CSS زیر را اضافه کنید:

  • کلاس CSS: شیب تحریک کننده
خط ماژول css divi کلاس

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

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

ماژول کد divi را اضافه کنید

CSS را در ماژول کد قرار دهید

سپس کد CSS زیر را در قسمت ماژول Code Code قرار دهید:

.animate-gradient {background-size: 400% 400%;animation: gradient 5s ease infinite;} @keyframes gradient {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}

مطمئن شوید که کد را در <style></style>برچسب ها زیرا ما آن را به کد HTML صفحه اضافه می کنیم.

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

نتیجه

در اینجا نتیجه تا کنون وجود دارد. پس زمینه شیب تا 400٪ از اندازه اصلی بزرگ شده است و با حرکت به چپ و راست متحرک می شود.

انیمیشن پس زمینه Divi

تماس عملی را اضافه کنید

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

تقسیم تماس به عمل را اضافه کنید

تنظیمات تماس برای اقدام

محتویات

محتوا را به شرح زیر به روز کنید:

  • عنوان اضافه کنید
  • متن دکمه را اضافه کنید
  • متن بدن را اضافه کنید
  • نشانی اینترنتی لینک دکمه: #
  • از رنگ زمینه استفاده کنید: نه
تصور

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

  • فونت عنوان: فیلمنامه کاشان
  • اندازه متن عنوان: 4vw (دسک تاپ) ، 30 پیکسل (تلفن)
  • ارتفاع خط عنوان: 1,4 em
  • پلیس بدن: Roboto
  • اندازه متن دکمه: 16px
  • رنگ متن دکمه: # 555555
  • زمینه دکمه: #ffffff
  • عرض مرز دکمه: 0px
  • شعاع مرزی دکمه: 30 پیکسل
  • فاصله نامه دکمه: 3px
  • قلم دکمه: تراکم Roboto
  • وزن قلم دکمه: جسورانه

نتیجه

اکنون نتیجه را در صفحه زنده با محتوای فراخوان اقدام بررسی کنید. این می تواند یک عنوان عالی برای وب سایت شما باشد!

به راحتی فروشگاه آنلاین خود را ایجاد کنید

دانلود رایگان WooCommerce، بهترین پلاگین تجارت الکترونیک برای فروش محصولات فیزیکی و دیجیتال خود را در وردپرس. [توصیه میشود]

انیمیشن پس زمینه نتیجه نهایی

به یاد داشته باشید ، شما به راحتی می توانید رنگ پس زمینه خط خود را به هر آنچه می خواهید تغییر دهید. کد همچنان در پس زمینه اجرا می شود تا پس زمینه را برای شما متحرک کند.

اگر کمی CSS می دانید ، می توانید با تغییر مقادیر ویژگی های انیمیشن ، سرعت و جهت انیمیشن را تنظیم کنید.

امیدوارم این آموزش برای شما مفید واقع شده باشد. دریغ نکنید که نظرات خود را در مورد آن به اشتراک بگذارید.

این مقاله حاوی نظرات 0

دیدگاهتان را بنویسید

آدرس ایمیل شما منتشر نخواهد شد. علامت گذاری شده اند *

این سایت از Akismet برای کاهش ناخواسته استفاده می کند. در مورد نحوه استفاده از اطلاعات نظرتان بیشتر بدانید.

بازگشت به بالا