قبل از اینکه بتوانید یک ماژول Toggle را به صفحه خود اضافه کنید، ابتدا باید به Divi Builder بروید. از وقتی که تم دیوی بر روی شما نصب شده است وب سایت، متوجه یک دکمه خواهید شد از Divi ساز استفاده کنید در هر زمان که صفحه جدیدی ایجاد کردید ، بالای ویرایشگر پست قرار بگیرید. برای فعال سازی Divi Builder و دسترسی به همه ماژول های Divi Builder بر روی این دکمه کلیک کنید. سپس بر روی دکمه کلیک کنید از Visual Builder استفاده کنید برای شروع ژنراتور در حالت تصویری. همچنین می توانید بر روی دکمه کلیک کنید ویژوال ساز را فعال کنید وقتی شما خود را مرور می کنید وب سایت در پیش زمینه اگر وارد داشبورد وردپرس خود شده اید.

دسترسی به سازنده بصری

پس از استفاده از Visual Builder ، می توانید روی دکمه خاکستری بعلاوه کلیک کنید تا ماژول جدیدی به صفحه خود اضافه کنید. ماژول های جدید فقط می توانند در داخل ردیف ها اضافه شوند. اگر صفحه جدیدی را شروع می کنید ، به یاد داشته باشید که ابتدا یک سطر به صفحه خود اضافه کنید.

flip flop divi module.png

ماژول ضامن را در لیست ماژول ها پیدا کرده و بر روی آن کلیک کنید تا به صفحه شما اضافه شود. لیست ماژول ها قابل جستجو است ، به این معنی که شما همچنین می توانید "ضامن" را تایپ کنید و سپس enter را فشار دهید تا به طور خودکار ماژول ضامن را پیدا کرده و اضافه کنید! پس از اضافه شدن ماژول ، لیست گزینه های ماژول به شما خوش آمد می گوید. این گزینه ها به سه گروه اصلی تقسیم می شوند: محتویات , تصور et پیشرفته .

مثال استفاده از حالت: صفحه سQالات متداول

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

با استفاده از Visual Builder ، یک بخش جدید با یک ردیف عرض کامل (1 ستون) اضافه کنید. سپس یک ماژول Divider به ردیف اضافه کنید. در زیر زبانه محتوا از تنظیمات ماژول Divider ، گزینه "Show Divider" را انتخاب کنید.

مثال یک دکمه فلیپ فلیپ divi.png

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

رنگ: # 000000 (سیاه و سفید)
سبک تقسیم: جامد
موقعیت جداکننده:
تقسیم کننده عمودی مرکز وزن: 4 پیکسل
ارتفاع: 1

گزینه های پیکربندی toggle divi.png

سپس یک ماژول ضامن در زیر تقسیم کننده ای که من در همان ردیف ایجاد کردم اضافه کنید. در تنظیمات ماژول ضامن ، موارد زیر را به روز کنید:

برگه محتوا

عنوان: [عنوان خود را وارد کنید]
محتوا: [محتوای خود را وارد کنید]
وضعیت: بسته
رنگ زمینه باز: #ffffff
بستن رنگ پس زمینه را تغییر دهید: #ffffff
رنگ پسزمینه: #ffffff

برگه طراحی

رنگ نماد: # 000000
رنگ Toggle متن را باز کنید: # 000000
رنگ Toggle بستن: # 000000
عنوان فونت: باز بدون، پررنگ
اندازه فونت: 24px
عنوان متن رنگ: # 000000
فونت بدن: باز بدون
اندازه فونت بدن: 18px
رنگ متن بدن: # 666666
ارتفاع خط بدن: 1.6em
از مرز استفاده کنید: بله
عرض مرز: 0px
بالشتک سفارشی: Top 2px ، پایین 2px

محتوای جدید با divi.png راک

پس از ذخیره تنظیمات خود برای ماژول ضامن ، ماژول تقسیم کننده ای را که ایجاد کرده اید کپی کرده و در زیر ماژول ضامن قرار دهید. این کار با یک خط تقسیم بالا و پایین ، فرورفتگی را قاب می کند پس از آن ، ماژول فلیپ فلاپ خود را کپی کرده و پس از خط جدا کننده پایین قرار دهید. از آنجا که این یک ماژول Toggle تکراری است ، تمام پارامترهای طراحی به ماژول Toggle جدید منتقل شده اند و تمام کاری که شما باید انجام دهید این است که محتوای ماژول Toggle جدید را به روز کنید. سپس روند تکثیر ماژول های Division و Scale Modules را ادامه دهید و محتوای مقیاس خود را به روز کنید تا کل بخش سQالات متداول را کامل کنید.

همین. اکنون یک بخش پرسش و پاسخ مدرن دارید که از ماژول Toggle برای ادغام سوالات و پاسخ های خود استفاده می کنید.

ماژول toggle divi.gif

اکنون که ماژول ضامن را در عمل مشاهده کردید ، در بخش های زیر به تمام تنظیمات آن بروید. ما در مورد جزئیات آنچه در هر برگه تنظیمات ماژول پیدا خواهید کرد ، توضیحات مفصلی را ارائه داده ایم.

پارامترهای محتوا ماژول Toggle

پارامترهای flip-flops divi.png

تب محتوای ماژول ضامن در گروه های پارامتر زیر تنظیم شده است (که این موارد نیز متناوب هستند!).

متن

اینجاست که می توانید عنوان را اضافه کرده و محتوای آن را ضامن کنید.

نافرجام

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

زمینه

در اینجا می توانید رنگ پس زمینه را هنگام باز کردن ضامن و رنگ پس زمینه را هنگام بسته بودن تغییر دهید. با تنظیم گزینه رنگ پس زمینه نیز می توانید به راحتی آنها را یکسان کنید. همچنین گزینه تنظیم یا بارگذاری تصویر پس زمینه وجود دارد.

برچسب مدیریت

به طور پیش فرض ، ماژول ضامن شما با برچسبی ظاهر می شود که روی مولد "Toggle" را بنویسید. برچسب مدیر به شما امکان تغییر این برچسب را برای شناسایی آسان می دهد.

پارامترهای طراحی ماژول راکر

طراحی گزینه toggle wordpress.png

پارامترهای طراحی ماژول ضامن در دکمه های کشویی زیر در زیر زبانه Design با هم گروه شده اند.

تصویر

اینجاست که می توانید رنگ نماد ضامن را تغییر دهید.

متن

در اینجا شما می توانید رنگ متن تغییر حالت بسته و بسته را تنظیم کنید.

متن عنوان

در اینجا می توانید قلم متن عنوان ، وزن ، اندازه ، رنگ ، فاصله ، ارتفاع خط و موارد دیگر را تنظیم کنید.

متن متن

در اینجا می توانید قلم ، وزن ، اندازه ، رنگ ، فاصله ، ارتفاع ردیف و موارد دیگر را تنظیم کنید.

مرزهای

در اینجا می توانید استفاده از حاشیه را انتخاب کنید. و اگر استفاده از حاشیه را انتخاب کردید ، می توانید رنگ آن را نیز انتخاب کنید ، عرض آن را تغییر دهید و سبک آن را انتخاب کنید.

فاصله

در قسمت فاصله ، می توانید padding سفارشی را به بالا ، راست ، پایین یا سمت چپ ضامن اضافه کنید. همچنین می توانید این مقادیر را برای دسک تاپ ، رایانه لوحی یا دستگاه های تلفن همراه تغییر دهید.

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

پارامتر flip-flop divi.png

در تب Advanced ماژول ضامن خود ، می توانید یک کلاس ID و css بی نظیر اضافه کنید. همچنین می توانید css های سفارشی را به ماژول کشویی فیلم کشویی css سفارشی به گزینه های مختلف css از پیش تعریف شده (و از پیش انتخاب شده) اضافه کنید. سرانجام ، در لیست کشویی قابلیت مشاهده ، می توانید قابلیت مشاهده ماژول خود را در تلفن ها ، تبلت ها و دسک تاپ ها تنظیم کنید.

این همه این آموزش است ، امیدوارم به شما امکان استفاده بهتر از ماژول Divi Toggle را بدهد.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]دانلود تم DIVI [/vcex_button][/vc_colum][/vc_colum] /1″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=2&url=23065&tid40632=tutorials” target=”blank” layout=”expanded” align=”family” =_font ”Raleway” font_weight=”1″ style=”flat” custom_background=”#c700e” custom_hover_background=”#4226d8f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-NAD”]DOW قالب DIVI[/vcex_button][/vc_column][/vc_row]

سایر آموزشهای دوگانه