برجسته پلاگین Divi: Divi SuperTabs

Divi SuperTabs یک افزونه شخص ثالث برای Divi است که یک ماژول تب ها را به Divi Builder اضافه می کند. اگرچه Divi Builder در حال حاضر دارای یک ماژول تب است، این افزونه برخی از گزینه ها و ویژگی های طراحی منحصر به فرد را ارائه می دهد که به شما امکان می دهد برگه های پیچیده تری برای وب سایت Divi خود ایجاد کنید. در برجسته‌سازی این افزونه، خواهیم دید که Divi SuperTabs چه کاری می‌تواند انجام دهد و به شما کمک می‌کند تا تصمیم بگیرید که آیا این افزونه برای وب‌سایت شما مناسب است یا خیر.

بیا مشغول شویم!

نصب Divi SuperTabs

نصب Divi SuperTabs ساده و سرراست است. به صفحه افزونه در داشبورد وردپرس خود بروید، سپس روی آپلود افزونه کلیک کنید. فایل ZIP پلاگین را دانلود کنید، سپس پس از نصب افزونه را فعال کنید.

ماژول Divi SuperTabs

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

تنظیمات برگه Divi SuperTabs

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

تنظیمات برگه – محتوا

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

در برگه Layout، می‌توانید از میان طرح‌بندی‌های مختلف محتوای موجود در برگه خود را انتخاب کنید. در مثال بالا، من از چیدمان Image Left، Text، Button استفاده کردم.

از طرف دیگر، می‌توانید گزینه کتابخانه را برای استفاده از طرح‌بندی Divi Library در یک برگه انتخاب کنید، که به شما امکان می‌دهد با استفاده از ماژول‌های Divi دیگر طرح‌های پیچیده‌تری ایجاد کنید.

برای استفاده از یک عنصر کتابخانه با Divi SuperTab، طرح مورد نظر را در کتابخانه Divi ذخیره کنید و مطمئن شوید که آن را به دسته بندی Tabs Content اضافه کنید.

سپس Library را در قسمت تنظیمات صفحه‌بندی برگه انتخاب کنید و طرح‌بندی Divi Library را اضافه کنید.

همچنین در زیر تب محتوای تنظیمات برگه، می توانید یک نماد به برگه خود اضافه کنید. SuperTab به شما امکان می دهد از نمادهای پیش فرض Divi، نمادهای FontAwesome استفاده کنید و حتی آیکون های سفارشی خود را آپلود کنید.

همچنین می‌توانید برگه‌ای را تنظیم کنید تا به URL پیوند داده شود تا با انتخاب برگه، پیوند باز شود. این یک راه راحت برای پیوند دادن به وب سایت های خارجی همراه با محتوای بخش شما است. همچنین می توانید یک پیوند برای کل ماژول در تنظیمات پیوند تنظیم کنید.

در نهایت، می توانید یک پس زمینه منحصر به فرد برای تب خود تعیین کنید. تنظیمات پس‌زمینه شامل تمام گزینه‌های پیش‌فرض پس‌زمینه Divi (رنگ، ​​گرادیان، تصویر، ویدئو، الگو و ماسک) است. در این مثال یک پس زمینه رنگی ساده به این قسمت اضافه کردم.

تنظیمات برگه – طراحی

در برگه طراحی تنظیمات برگه، می‌توانید گزینه‌های زیادی برای شخصی‌سازی کامل ظاهر برگه خود پیدا کنید. وقتی طراحی را به این روش سفارشی می‌کنید، تغییرات شما فقط برای برگه‌ای که در حال ویرایش آن هستید اعمال می‌شود، نه برای برگه‌های دیگر. گزینه‌های طراحی در تنظیمات برگه‌های فردی مانند گزینه‌های طراحی در تنظیمات SuperTabs هستند، بنابراین تفاوت اصلی این است که آیا می‌خواهید طرح شما برای هر برگه اعمال شود یا فقط یک برگه.

با تنظیمات طراحی، می توانید ظاهر ناوبری، برگه، محتوا، چیدمان، متن، اندازه، فاصله و غیره را ویرایش کنید. در ادامه این مقاله به تمام گزینه های طراحی با جزئیات خواهیم پرداخت.

تنظیمات برگه – پیشرفته

در تب Advanced، همه گزینه‌های پیش‌فرض Divi پیشرفته، از جمله CSS سفارشی، شرایط، قابلیت مشاهده، انتقال، موقعیت و افکت‌های اسکرول را دارید.

محتوای برگه Divi SuperTabs

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

فلش

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

ارتباط

این گزینه یک گزینه پیش فرض ماژول Divi است که به شما امکان می دهد ماژول را به یک URL پیوند دهید.

زمینه

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

برگه طراحی SuperTabs Divi

بخش طراحی جایی است که این افزونه واقعاً می درخشد. گزینه های زیادی برای سفارشی کردن هر جنبه از ماژول SuperTabs وجود دارد. بیا یک نگاهی بیندازیم.

تنظیمات ناوبری

در تنظیمات پیمایش، می‌توانید محل ناوبری، تراز و قرارگیری زیرنویس را تغییر دهید. در مثال بالا، مکان ناوبری به سمت چپ تنظیم شده است. همچنین می‌توانید برگه‌ها را چسبناک کنید تا در هنگام حرکت در محتوای برگه به ​​بالای صفحه بچسبند.

همچنین در زیر تنظیمات ناوبری می توانید با تغییر عرض ناوبری، حاشیه، پد و ناودان، فاصله ناوبری را به طور کامل سفارشی کنید. در این مثال، من پد سمت چپ را حذف کردم و عرض ناوبری را به 20٪ تغییر دادم. در نهایت، می‌توانید رنگ‌ها و طراحی کلی نوار ناوبری را با تغییر رنگ پس‌زمینه، اضافه کردن گوشه‌های گرد یا افزودن حاشیه سفارشی کنید. پس زمینه نوار ناوبری را به سبز تغییر دادم.

تنظیمات برگه

در تنظیمات برگه، می توانید پس زمینه برگه، رنگ پس زمینه برگه فعال و رنگ پس زمینه برگه غیرفعال را سفارشی کنید. همچنین می توانید محل قرارگیری، تراز، حاشیه و اندازه نمادها را تغییر دهید. در نهایت، می‌توانید نماد یا عنوان را مخفی کنید، گوشه‌های گرد اضافه کنید یا حاشیه اضافه کنید.

در مثال زیر، رنگ پس‌زمینه تب فعال را به سبز روشن‌تر تغییر دادم و جای نماد را به سمت چپ تغییر دادم و یک کادر به نماد اضافه کردم.

تنظیمات پیکان

در تنظیمات فلش می توانید رنگ فلش را تغییر دهید. من آن را به سبز روشن تر تغییر دادم تا با رنگ پس زمینه برگه فعال مطابقت داشته باشد.

تنظیمات محتوا

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

طرح

در تنظیمات طرح‌بندی، می‌توانید نوار پیمایش را تنظیم کنید که در کادر برگه نشان داده شود.

متن عنصر ناوبری

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

متن عنصر ناوبری فعال

تنظیمات متن عنصر ناوبری فعال همان تنظیمات متنی عنصر پیمایش را دارد، اما این گزینه‌ها فقط زمانی که عنصر ناوبری فعال است (انتخاب شده) اعمال می‌شود. در اینجا من رنگ متن عنصر nav فعال را به نارنجی تغییر داده ام.

متن زیرنویس

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

متن زیرنویس بخش فعال

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

سایر تنظیمات طراحی

علاوه بر تنظیمات منحصربه‌فردی که پوشش داده‌ایم، گزینه‌های پیش‌فرض دیگری مانند اندازه، فاصله فریم، سایه کادر، فیلترها، تبدیل و انیمیشن وجود دارد.

زبانه پیشرفته Divi SuperTabs

تب Advanced برای Divi SuperTabs بسیار استاندارد است. می‌توانید CSS سفارشی را برای سفارشی‌سازی بیشتر ماژول اضافه کنید، و می‌توانید از تنظیمات دیگر مانند شرایط، نمایان بودن، انتقال‌ها، موقعیت و افکت‌های اسکرول برای ارتقای طراحی SuperTabs به سطح بعدی استفاده کنید.

نمونه های Divi SuperTabs

در اینجا چند نمونه از نحوه استفاده از Divi SuperTabs آورده شده است.

جدول قیمت

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

چگونه کار می کند

مثال دوم از تب ها برای سازماندهی مراحل مختلف یک فرآیند استفاده می کند. این طرح با استفاده از بسته طرح بندی Estate Planning ساخته شده است. من از تنظیمات برگه جداگانه برای تنظیم رنگ برگه و پس زمینه متفاوت برای هر یک از تب ها استفاده کردم.

مشخصه

آخرین نمونه از بسته طرح بندی Divi Home Staging استفاده می کند. من از SuperTabs برای سازماندهی برخی از ویژگی های برجسته شده در صفحه استفاده کردم. من همچنین از آیکون های سفارشی برای افزودن جذابیت بصری به برگه ها استفاده کردم.

خرید Divi SuperTabs

Divi SuperTabs در بازار Divi موجود است. بازار. برای استفاده نامحدود از وب سایت و 1 سال نگهداری و به روز رسانی 29 دلار هزینه دارد. این قیمت همچنین شامل 30 روز ضمانت بازگشت وجه است.

افکار نهایی

Divi SuperTabs یک افزونه Divi Builder با ویژگی های غنی است که به شما امکان می دهد برگه های پیچیده ای را برای وب سایت Divi خود ایجاد کنید. نقطه قوت این افزونه قطعاً توانایی وارد کردن طرح‌بندی‌ها از کتابخانه Divi به عنوان یک برگه است که به شما امکان می‌دهد محتوای برگه‌های پیچیده حاوی ماژول‌های Divi دیگر را اضافه کنید. همچنین قابلیت شخصی سازی افزونه فوق العاده است. با تمام تنظیمات موجود، می‌توانید برگه‌ها را سفارشی و تنظیم کنید تا به ظاهر دقیقی که می‌خواهید برسید.

به طور کلی، راه اندازی و استفاده از Divi SuperTabs بسیار آسان است و شما می توانید برگه هایی با ظاهر عالی برای سازماندهی اطلاعات در وب سایت خود ایجاد کنید. اگر احساس می‌کنید که توسط ماژول Tabs خود Divi محدود شده‌اید یا می‌خواهید از محتوای کتابخانه Divi در برگه‌های خود استفاده کنید، این افزونه ممکن است گزینه‌ای عالی برای شما باشد.

ما از اینکه ازت خبر داشته باشیم خوشحال میشویم! آیا Divi SuperTabs را امتحان کرده اید؟ نظر خود را در مورد آن در نظرات به ما بگویید!