ماژول Toggle از DIVI به شما اجازه نمایش می دهد محتویات اضافی در هر کلیک، بدون نیاز به کد جی کوئری اضافی. مشابه ماژول آکاردئون، ماژول های ضامن معمولاً برای اشتراک گذاری a استفاده می شوند محتویات گروه بندی شده، مانند سوالات متداول. با این حال، می توانید از آنها برای کارهای دیگر نیز استفاده کنید، به عنوان مثال برای ساختار صفحه خود. در این آموزش، ما از ماژول‌های جابجایی با عرض کامل برای ایجاد یک طراحی صفحه ساده که با کلیک رفتار می‌کند، استفاده می‌کنیم. سبک طراحی که ما با آن سروکار داریم جسورانه و تمیز است. همچنین می توانید فایل JSON را به صورت رایگان دانلود کنید!
برویم.
قبل از اینکه به آموزش بپردازیم ، بیایید نگاهی سریع به نحوه نمایش آن در اندازه های مختلف صفحه بیندازیم.
بیایید دوباره شروع کنیم
یک بخش جدید اضافه کنید
فاصله
با ایجاد یک صفحه جدید (یا باز کردن یک صفحه موجود) و اضافه کردن یک بخش منظم به آن ، شروع کنید. تنها کاری که باید در تنظیمات بخش انجام شود ، حذف تمام بالشتک های پیش فرض بالا و پایین از تنظیمات فاصله است.
- پوشش بالا: 0px
- بالشتک پایین: 0px
یک خط جدید اضافه کنید
ساختار ستون
با استفاده از ساختار ستون زیر، اضافه کردن یک ردیف جدید ادامه دهید:
اندازه
بدون افزودن ماژول ، تنظیمات ردیف را باز کنید و با تغییر تنظیمات اندازه ، مطمئن شوید که خط به دو سمت چپ و راست ظرف بریده شده است این مرحله مهمی در این آموزش است. این اجازه می دهد تا ماژول Toggle ، که بعداً در این آموزش اضافه خواهیم کرد ، به عرض کامل برسد.
- از عرض روده ای سفارشی استفاده کنید: بله
- عرض روده: 1
- عرض: 100٪
- حداکثر عرض: 100٪
فاصله
ما همچنین بالشتک پیش فرض بالا و پایین را از ردیف حذف می کنیم. با این کار تمام فاصله بین ماژول ضامن و ظرف سطر / ستونی که در آن قرار داده شده است از بین می رود.
- پوشش بالا: 0px
- بالشتک پایین: 0px
ماژول راک را اضافه کنید
عنوان و محتوا را وارد کنید
زمان شروع اضافه کردن ماژول ها است! تنها ماژول مورد نیاز ما در این خط یک ماژول Toggle است. از ناحیه عنوان برای اضافه کردن عنوان و قرار دادن همه چیز استفاده می کنیم محتویات که می خواهیم در قسمت محتوای بدن به اشتراک بگذاریم. با خیال راحت هر آنچه را که می خواهید در قسمت محتوا قرار دهید. از متن گرفته تا عکس و موارد دیگر.
نافرجام
ما از حالت ضامن بسته استفاده می کنیم ، اما در صورت تمایل آن را آزاد بگذارید.
- حالت: نزدیک
تنظیمات پیش فرض نماد
به برگه Design بروید و تنظیمات نماد ماژول را بر این اساس تغییر دهید:
- رنگ نماد: # 570fff
- از اندازه نماد سفارشی استفاده کنید: YEs
- اندازه قلم آیکون: 6vw
تنظیمات نماد روی شناور است
رنگ نماد شناور را تغییر دهید.
- رنگ نماد: # f2f2f2
تنظیمات پیش فرض عدم موفقیت
سپس رنگ پس زمینه ضامن بسته را تغییر دهید.
- تغییر رنگ پس زمینه: #ffffff
روی تنظیمات حرکت کنید
و رنگ را نیز تغییر دهید.
- تغییر رنگ پس زمینه: # 000000
تنظیمات متن عنوان
با تغییر تنظیمات متن عنوان به شرح زیر ادامه دهید:
- عنوان متن رنگی: # 000000
- عنوان عنوان سطح: H2
- عنوان پلیس: مونتسرات
- عنوان متن: تراز سمت چپ
- اندازه عنوان متن: 8vw (دسک تاپ) ، 10vw (رایانه لوحی و تلفن)
- فاصله نامه عنوان: -1vw (دسک تاپ) ، -0.5vw (رایانه لوحی و تلفن)
- ارتفاع خط عنوان: 0.7em
تنظیمات متن بسته پیش فرض
سپس به پارامترهای متن عنوان بسته شده دسترسی پیدا کرده و متناسب با آن اصلاح کنید:
- قلم عنوان بسته: مونتسرات
- عنوان بسته اندازه متن: 18vw (دسک تاپ) ، 16vw (رایانه لوحی و تلفن)
- عنوان عنوان بسته: 0.8em
روی تنظیمات متن عنوان کلیک کنید
رنگ متن متن بسته را در حالت شناور تغییر دهید.
- عنوان بسته شده متن رنگ: # f4f4f4
تنظیمات متن بدن
به تنظیمات متن بدن بروید و همچنین تغییراتی ایجاد کنید.
- قلم بدنه: Fira Sans
- وزن قلم: سبک
- تراز متن بدن: توجیه کنید
- اندازه متن بدن: 1.2vw (دسک تاپ) ، 2vw (رایانه لوحی) ، 3vw (تلفن)
- ارتفاع بدن: 2.1em
فاصله
همچنین بالشتک های سفارشی را در قسمت بالا ، پایین و چپ ماژول اضافه کنید.
- بالشتک بالایی: 10vw
- بالشتک پایین: 10vw
- چسباندن چپ: 6vw
مرز
با خارج کردن مرز پیش فرض ماژول در تنظیمات مرز ادامه دهید.
- عرض مرز: 0px
محتوای CSS را تغییر دهید
پارامترهای ماژول Toggle را با اضافه کردن خطوط کد CSS زیر به دسک تاپ تعریف کنید:
عرض: 60vw ؛ سمت چپ: 0.2vw solidblack؛ padding: 5vw 5vw 5vw 5vw؛
عرض خط کد CSS را در رایانه لوحی و تلفن تغییر دهید:
عرض: 85vw؛
کل بخش را هر چند بار که می خواهید کلون کنید
پس از اتمام بخش اول ، خط و ماژول Toggle ، می توانید کل بخش را هر چند بار که می خواهید کلون کنید. بسته به میزان محتوایی که می خواهید در صفحه خود نمایش دهید.
تغییر محتوا
حتماً کل محتویات flip-flop را در هر ماژول flip-flop تغییر دهید.
رنگ نمادها را تغییر دهید
سپس هر ماژول Toggle را جداگانه باز کرده و رنگ نماد را تغییر دهید. مواردی که ما برای این آموزش استفاده کردیم در زیر ذکر شده است:
- رنگ نماد 1: # ff9000
- رنگ نماد 2: # 00ffd4
بررسی
اکنون که همه مراحل برداشته شده است ، بیایید نگاهی نهایی به آنچه در اندازه های مختلف صفحه نمایش رخ داده است ، بررسی کنیم.
آخرین افکار
در این مقاله به شما نشان دادیم که چگونه با ماژول Toggle of خلاق شوید DIVI. دقیق تر؛ ما آنها را با عرض کامل ساختیم و از آنها برای نمایش محتوای بخش های مختلف به روش های خلاقانه استفاده کردیم. این آموزش نشان می دهد که می توانید به راحتی از ماژول های آن استفاده کنید DIVI وقتی ظروف مختلف را در نظر می گیرید خارج از جعبه. همچنین توانستید فایل آموزشی JSON را به صورت رایگان دانلود کنید! اگر سوال یا پیشنهادی دارید، لطفاً در قسمت نظرات زیر نظر خود را بنویسید.
