ساخته شده در گزینه های تبدیل از DIVI ثابت شده است که یک ابزار طراحی بسیار مفید است که به شما امکان می دهد اندازه، چرخش، انحراف یا قرار دادن هر عنصری را در یک صفحه به راحتی انجام دهید. و حتی می‌توانید موارد را به حالت شناور برای جلوه‌های شناور عالی تبدیل کنید. بنابراین امروز قصد داریم به شما نشان دهیم که چگونه این انیمیشن ها را با یک کلیک اجرا کنید.
این روش نیاز به استفاده از jQuery دارد. نکته مهم در مورد این تکنیک این است که می توانید از پارامترهای طراحی داخلی استفاده کنید DIVI برای استایل دادن به ویژگی های تبدیل، سپس آن ویژگی های تبدیل را با کلیک ماوس فعال (یا غیرفعال کنید). این یک تن از امکانات منحصر به فرد را برای آشکار کردن باز می کند محتویات با جابجایی آیتم ها با کلیک به جای شناور پنهان می شود. و همچنین به کاهش نیاز به دانستن CSS کمک می کند.
بیایید شروع.
آنچه شما باید برای شروع کار
برای این آموزش، تنها چیزی که نیاز دارید این است DIVI. برای شروع، به داشبورد وردپرس خود بروید. یک صفحه جدید ایجاد کنید، به صفحه خود عنوان بدهید و طراحی را در سازنده Divi در پیش زمینه ادامه دهید. گزینه «ساخت از ابتدا» را انتخاب کنید. حالا شما آماده رفتن هستید!
ایده اصلی توضیح داده شد
قبل از اینکه در این آموزش به جزئیات زیادی بپردازم ، در چند کلمه نحوه کار این روش را برای شما مرور می کنم.
هر بار که یک عنصر (بخش ، خط یا ماژول) را در Divi شخصی سازی می کنید ، CSS سفارشی را به این عنصر در پس زمینه اضافه می کنید. به عنوان مثال ، با استفاده از تنظیمات داخلی Divi ، می توانید یک ویژگی چرخش تبدیل را به یک ماژول blurb اضافه کنید تا ماژول را در امتداد محور Z 20 درجه بچرخاند.
اما در پشت صحنه ، شما یک CSS سفارشی ایجاد می کنید که به این ماژول متن اضافه می شود و به نظر می رسد:
.et_pb_text_0 {تبدیل: rotateZ (20deg)؛ }
به اندازه کافی ساده و فرض کنید شما می خواستید همان گزینه تبدیل شناور را اضافه کنید. فقط باید خاصیت تبدیل را برای حالت شناور در تنظیمات Divi Builder اعمال کنید.
و کد چیزی شبیه به این در پشت صحنه خواهد بود:
.et_pb_text_0: شناور {تبدیل: چرخش (20deg)؛ }
با این حال ، اگر می خواهید ویژگی تبدیل را با کلیک مستقر کنید ، کار باید کمی متفاوت باشد. برای ایجاد یک رویداد کلیک بر روی عنصر (یا ماژول متن) باید چند کد javascript وارد کنید.
با مثال فعلی ما ، هدف اصلی ما این است که مشخصه تبدیل "transform: rotateZ (20deg)" را با کلیک روشن و خاموش کنیم. یک راه آسان برای این کار ایجاد یک کلاس CSS سفارشی با ویژگی "transformer: none!" است. مهم "در تنظیمات صفحه (یا شیوه نامه خارجی). به نظر می رسد چیزی شبیه به این است.
.toggle-transform-animation {تبدیل: هیچ! مهم؛ }
با استفاده از آن CSS. ما می توانیم کلاس CSS "toggle-transform-animation" را به عنصر ماژول blurb که خاصیت تبدیل ما را دارد اضافه کنیم.
این ویژگی transform را غیرفعال می‌کند (باور می‌کند) و از فعال شدن اولیه آن جلوگیری می‌کند، حتی اگر سبک ویژگی transform قبلاً به آن اضافه شده باشد.
اکنون تنها کاری که شما باید انجام دهید این است که وقتی روی عنصر کلیک می کنید این کلاس CSS سفارشی را فعال (اضافه و حذف) کنید. بنابراین ، هر بار که روی عنصر کلیک می کنیم ، کلاس حذف می شود و خصوصیات تحول (مواردی که با Divi اضافه کرده اید) مستقر می شوند.
در اینجا یک مثال ساده از چگونگی انجام این کار آورده شده است. ابتدا کلاس CSS دیگری را به ماژول blurb به نام "transform_target" اضافه کنید.
سپس به مسیر Divi > Theme Options > Integration بروید و اسکریپت jQuery زیر را به قسمت اصلی اضافه کنید. وبلاگ شما:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
همین! اکنون ، هر بار که بر روی ماژول ارائه کلیک کنید ، ویژگی تغییر شکل که در Divi به ارائه اضافه کرده اید فعال یا غیرفعال می شود.
حال بیایید مثالی بسازیم تا بتوانید ببینید که چگونه این ممکن است برای پروژه های خودتان مفید باشد.
نحوه تغییر ویژگی های تبدیل بر روی کلیک کنید تا محتوا در Divi نمایش داده شود
برای این مثال، ما به یک مثال محو ساده که در بالا استفاده شده است، می پردازیم. در مرحله بعد، ما می‌خواهیم تار اضافی را پشت این اضافه کنیم تا هر زمان که روی تار بالا کلیک می‌کنید، از مسیر خارج شود تا نشان داده شود. محتویات تار اضافی در پشت سند نشسته است.
ایجاد ماژول های Blurb در جلو و عقب
سپس ماژول ارائه را به ستون 1 اضافه کنید.
را به روز کنید محتویات متن را محو کنید تا فقط یک عنوان داشته باشد (محتوای متن پیش‌فرض را حذف کنید)، سپس یک نماد تار اضافه کنید.
سپس پارامترهای طراحی را به شرح زیر به روز کنید:
رنگ پسزمینه: #4c5866
رنگ نماد: #ffffff
جهت متن: مرکز
رنگ متن
: حاشیه سفارشی سبک: 0px در پایین
بالشتک سفارشی: 15٪ در بالا ، 15٪ در پایین ، 10٪ در سمت چپ ، 10٪ در سمت راست
بعداً به این ماژول باز خواهیم گشت ، اما اکنون باید دومین ماژول Blurb را ایجاد کنیم که به عنوان یک ماژول "بازگشت" با محتوای اضافی خدمت می کند.
برای این کار ، ماژول ارائه ای را که تازه ایجاد کرده اید کپی کنید.
سپس ، در ماژول دوم ، نماد ارائه (و تصویر پیش فرض) را برداشته و محتوای متن را به ماژول اضافه کنید. سپس پارامترهای طراحی را به صورت زیر به روز کنید:
رنگ پسزمینه: rgba (76,88,102,0.3)
رنگ متن: سیاه
پدینگ سفارشی: 20٪ بالا
ماژول را قبل از خلاصه قرار دهید
اکنون که دو حالت تاریک ما سبک شده است ، باید به جلوی جلوی (بالا) خود برگردیم و آن را در بالای تاشوی پشت (پایین) قرار دهیم. برای انجام این کار ، یک موقعیت مطلق با ارتفاع 100٪ و عرض 100٪ به آن خواهیم داد.
ابتدا تنظیمات ماژول ارائه بالا / جلو را باز کنید و موارد زیر را به روز کنید:
ارتفاع: 100٪؛
عرض: 100٪؛
سپس کد CSS سفارشی زیر را به عنصر اصلی اضافه کنید:
موقعیت: مطلق! مهم؛ انتقال: همه .5s؛
سپس شاخص z را به صورت زیر به روز کنید:
شاخص Z: 2000
موقعیت مطلق ، همراه با ارتفاع و عرض 100٪ و شاخص z ، تضمین می کند که ماژول blurb در بالای ماژول blurb پشت آن قرار بگیرد. ویژگی انتقال در واقع مدت زمان انتقال گزینه های تبدیل است که با کلیک بعدی استقرار خواهیم داد. و "cursor: pointer" برای تغییر مکان نما است تا عنصر برای کاربر قابل کلیک باشد.
اضافه کردن گزینه های تبدیل و کلاس های سفارشی به قسمت جلوی جلو
اکنون زمان آن است که خصوصیات تبدیل خود را به جلوی جلوی آن اضافه کنیم. سپس کلاسهای CSS سفارشی لازم برای جی کوئری خود را اضافه می کنیم تا این ویژگی ها را با کلیک تغییر دهید.
در زیر پارامترهای طراحی شکاف جلویی ، خصوصیات دگرگونی زیر را اضافه کنید:
مقیاس تحول X و y: 20٪
مبدأ تبدیل: مرکز بالا
به یاد داشته باشید که طراحی تحولی که در این مرحله مشاهده می کنید همان طراحی است که با کلیک انجام می شود. ما به راحتی از سازنده Divi برای دستیابی به طرح مورد نظر بهره می بریم. در این حالت ، جلوی جلوی بسته می شود و مانند یک نماد قابل کلیک در بالای آن متمرکز می شود.
پس از اتمام کار ، دو کلاس CSS مورد نیاز برای هدف قرار دادن شکاف جلویی با jQuery را به شرح زیر اضافه کنید:
CSS class: تبدیل دگمه تبدیل-انیمیشن transform_target
(حتماً هر نام کلاس را با یک فضای جدا کنید)
سپس قطعه کد CSS سفارشی زیر را اضافه کنید که برای فعال سازی و غیرفعال کردن خواص تبدیل با جی کوئری استفاده می شود.
.toggle-transform-animation {transform: none! important؛ }
متوجه خواهید شد که ویژگی های تغییر شکاف قبلی اضافه شده غیرفعال شده اند زیرا این کلاس برای آن اعمال شده است.
اکنون به Divi> گزینه های Theme> Integration بروید و اسکریپت jQuery زیر را به سر وبلاگ اضافه کنید:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
بیایید نتیجه نهایی را ببینیم.
شما می توانید از این مثال برای ایجاد طرح های چشمگیرتر استفاده کنید. دریغ نکنید که نظر خود را در بخش نظرات به اشتراک بگذارید.
