سربرگ ساز کاتا (Kata Header Builder) ابزاری انعطافپذیر است که برای کاربران امکان ایجاد و سفارشیسازی سربرگ وبسایت در محیط ویرایشی Elementor را با استفاده از Styler و بدون نیاز به دانش کدنویسی فراهم میکند. با اضافه کردن ویجتهای دلخواه خود، میتوانید یک قالب اختصاصی ایجاد کنید. قالب طراحیشده بهعنوان سربرگ اصلی وبسایت شما در نظر گرفته شده و در بالای صفحات بارگذاری میشود. این ابزار با رابط کاربری کشیدن و رها کردن (Drag-and-Drop)، گزینههای سفارشیسازی متعدد و قالبهای از پیش تعریفشده، فرآیند طراحی سربرگ را ساده و کارآمد میکند.
نکته: یکی از ویژگیهای منحصربهفرد سازنده سربرگ کاتا این است که ویجتها بهجای قرار گرفتن در زیر هم، در کنار یکدیگر قرار میگیرند.
ویژگیها و امکانات
1. ویرایشگر کشیدن و رها کردن (Drag-and-Drop Editor)
سربرگ ساز کاتا دارای یک رابط کاربری ساده است که به کاربران امکان میدهد المانهایی مانند لوگو، منو، دکمهها، نوار جستجو، آیکونهای شبکههای اجتماعی و موارد دیگر را اضافه، مرتب و تغییر اندازه دهند. این المانها را میتوانید در ردیفها و ستونهای خاص قرار دهید تا کنترل دقیقی بر چیدمان داشته باشید.
2. قالبهای از پیش تعریفشده (Predefined Templates)
کاتا چندین قالب آماده برای سربرگ ارائه میدهد که میتوانید آنها را وارد کرده و مطابق نیاز خود سفارشیسازی کنید. این قالبها واکنشگرا هستند و برای انواع وبسایتها، از جمله وبلاگها، فروشگاههای اینترنتی و سایتهای شرکتی طراحی شدهاند.
3. سفارشیسازی چیدمان (Layout Customization)
- ردیفها و ستونها: میتوانید چندین ردیف و ستون به سربرگ اضافه کنید.
- تنظیمات عرض: عرض سربرگ را میتوانید بهصورت تمام عرض یا باکسبندی شده تنظیم کنید.
4. گزینههای استایلدهی (Styling Options)
- فاصلهها و پدینگها: تنظیم دقیق حاشیهها و فاصلهها برای یک طراحی زیبا.
- رنگها و پسزمینهها: سفارشیسازی رنگها، گرادیانتها یا افزودن تصاویر بهعنوان پسزمینه.
- تایپوگرافی: تنظیم استایل فونت، اندازه و وزن متنها.
5. پشتیبانی از محتوای پویا (Dynamic Content Support)
سربرگ ساز کاتا با قابلیت محتوای پویا در وردپرس یکپارچه شده است و امکان نمایش محتوای شخصیسازیشده مانند دکمههای ورود/خروج یا پیامهای خوشامدگویی را فراهم میکند.
6. ویژگیهای پیشرفته (Advanced Features)
- منوی مگا (Mega Menu): افزودن گزینههای ناوبری پیشرفته با نمایش دستهبندیها، تصاویر و ویجتها.
- کد سفارشی: وارد کردن قطعات HTML، CSS یا JavaScript برای سفارشیسازیهای پیشرفته.
- یکپارچهسازی با افزونههای دیگر: سازگاری با افزونههای محبوب مانند WooCommerce برای افزودن آیکونهای سبد خرید یا لینکهای حساب کاربری.
7. درون ریزی و برون ریزی (Export and Import)
میتوانید طراحیهای سربرگ خود را بهعنوان قالب ذخیره کرده و در سایر وبسایتها یا بخشهای مختلف وبسایت فعلی استفاده کنید. همچنین امکان وارد کردن سربرگ هایی که توسط سایر کاربران یا توسعهدهندگان قالب کاتا به اشتراک گذاشته شدهاند، وجود دارد.
دسترسی به سربرگ ساز کاتا
برای دسترسی به سربرگ ساز کاتا، به این مسیر بروید: wp-admin > Kata > Header
اکنون، شما در سربرگ ساز کاتا هستید. ویرایشگر المنتور بهطور پیشفرض باز میشود و با لوگوی کاتا، منوی وبسایت شما و چندین المان هدر، از جمله آیکون جستجو، حساب کاربری، لیست علاقهمندیها و سبد خرید مواجه خواهید شد. در سمت چپ، میتوانید ویجتهای المنتور مخصوص سربرگ ساز کاتا را مشاهده کنید.
اینها ویجتهایی هستند که معمولاً در سربرگ وبسایت استفاده میشوند. با این حال، میتوانید از هر ویجتی که میخواهید در سربرگ استفاده کنید.
- لوگوی کاتا (Kata Logo)
- منوی کاتا (Kata Menu)
- جستجوی کاتا (Kata Search)
- سبد خرید کاتا (Kata Cart)
- تاریخ کاتا (Kata Date)
- منوی همبرگری کاتا (Kata Hamburger Menu)
- تغییر زبان کاتا (Kata Language Switcher)
- ورود کاتا (Kata Login)
- آبوهوای کاتا (Kata Weather)
المان مورد نظر خود را به بخش سربرگ اضافه کرده و طراحی را آغاز کنید.
سربرگ واکنشگرا (Header Responsive)
طراحی و ظاهر سربرگ شما باید برای دستگاههای مختلف، متفاوت باشد، زیرا هر دستگاه اندازه صفحه نمایش متفاوتی دارد. به همین منظور، یک بخش جدید در زیر بخش سربرگ خود ایجاد کنید اما آن را برای صفحهنمایشهای کوچک طراحی کنید.
آیتمهای منو معمولاً در دستگاههای موبایل بهطور متفاوتی نمایش داده میشوند. بهجای آیتمهای سربرگ، یک دکمه جابجایی (Toggle) قرار میگیرد که با لمس آن، کل منو نمایش داده میشود.
عنصر منوی کاتا (Kata Menu) یک گزینه برای منوی واکنشگرا دارد که با فعال کردن آن، یک قالب پیشفرض برای منوی واکنشگرا ارائه میشود.
این طراحی در حال حاضر قابل سفارشیسازی نیست. بنابراین، اگر میخواهید یک منوی واکنشگرای پیشرفتهتر داشته باشید، باید از عنصر منوی همبرگری کاتا (Kata Hamburger Menu) استفاده کنید.
یک بخش در زیر بخش اصلی ایجاد کرده و لوگوی کاتا (Kata Logo)، منوی همبرگری کاتا (Kata Hamburger Menu) و دیگر المانهای مورد نظر خود را در آن قرار دهید.
حالا باید یک قالب محتوای المنتور (Elementor Template) طراحی کنید که با ضربه زدن روی دکمه جابجایی (Toggle) نمایش داده شود. برای این کار مراحل زیر را دنبال کنید:
- منوی وردپرس را باز کنید:
وارد بخش مدیریت وردپرس شوید. - ایجاد قالب جدید:
به مسیر Templates > Add New بروید و یک الگوی جدید ایجاد کنید. - قالب خود را طراحی کنید:
در این قالب میتوانید المانهای دلخواه خود را اضافه کرده و آن را مطابق با نیازهای منوی واکنشگرا طراحی کنید.
حال در این صفحه میتوانید منوی واکنش گرای وب سایت خود را طراحی کنید. با کشیدن و رها کردن ویجت های موجود در صفحه المنتور حالت واکنش گرا برای دستگاه های تبلت و موبایل را طراحی کرده و بر روی دکمه به روز رسانی کلیک کنید.
پس از اتمام طراحی، قالب را ذخیره کنید. سپس به عنصر منوی همبرگری کاتا (Kata Hamburger Menu) بروید و قالبی را که تازه ذخیره کردهاید انتخاب کنید.
به همین راحتی منوی واکنش گرا ساخته شد. هر زمان که بخواهید می توانید طراحی قالب خود را تغییر داده و منوی جدید اضافه کنید.
تنظیمات واکنشگرا (Responsive Settings)
برای مدیریت اینکه کدام بخشها بر روی دستگاهها یا اندازههای صفحه خاص نمایش داده شوند، از تنظیمات واکنشگرا در المنتور استفاده کنید.
مراحل زیر را برای پیکربندی تنظیمات واکنشگرا دنبال کنید:
دسترسی به تنظیمات واکنشگرا
بخشی که میخواهید تنظیم کنید را انتخاب کنید.
در نوار کناری المنتور، به تب پیشرفته بروید.
به پایین اسکرول کنید تا بخش واکنش گرا را پیدا کنید.
گزینههای visibility (نمایش)
پنهان کردن در دسکتاپ (Hide on Desktop): این المان را در دستگاههای دارای صفحه نمایش بزرگ (مثلاً دسکتاپها) مخفی میکند.
پنهان کردن در لپتاپ (Hide On Laptop): این المان را در دستگاههایی که بهعنوان لپتاپ شناخته میشوند مخفی میکند. این معمولاً برای صفحهنمایشهایی با عرض بین 992px تا 1200px اعمال میشود. محدوده دقیق ممکن است بسته به تنظیمات نقطه شکست سفارشی متفاوت باشد.
پنهان کردن در حالت افقی تبلت (Hide On Tablet Landscape): این المان را زمانی که در تبلتها در حالت افقی مشاهده میشود، مخفی میکند. این برای صفحهنمایشهایی با عرض بین 768px تا 992px اعمال میشود.
پنهان کردن در حالت عمودی تبلت (Hide On Tablet Portrait): این المان را زمانی که در تبلتها در حالت عمودی مشاهده میشود، مخفی میکند. این معمولاً برای صفحهنمایشهایی با عرض بین 600px تا 768px اعمال میشود.
پنهان کردن در حالت افقی موبایل (Hide On Mobile Landscape): این المان را زمانی که در موبایلها در حالت افقی مشاهده میشود، مخفی میکند. این معمولاً برای صفحهنمایشهایی با عرض بین 480px تا 600px اعمال میشود.
پنهان کردن در حالت عمودی موبایل (Hide On Mobile Portrait): این المان را زمانی که در موبایلها در حالت عمودی مشاهده میشود، مخفی میکند. این معمولاً برای صفحهنمایشهایی با عرض کمتر از 480px اعمال میشود.برای اعمال تنظیمات، فقط کافی است قابلیت نمایش را برای هر دستگاه فعال یا غیرفعال کنید.
تنظیم چیدمان برای دستگاههای مختلف
تغییر به نمای دستگاه (Switch to Device View): در بالای پنل المنتور، روی آیکون حالت واکنشگرا کلیک کنید.
انتخاب دسکتاپ، تبلت یا موبایل: برای مشاهده اینکه طراحی روی هر دستگاه چگونه به نظر میرسد، یکی از این حالتها را انتخاب کنید.
آزمایش و تنظیمات نهایی
از دکمه Preview استفاده کنید تا نحوه نمایش سایت را روی دستگاههای مختلف بررسی کنید.
بهطور کامل آزمایش کنید تا مطمئن شوید تمام المانها طبق تنظیمات شما به درستی همراستا و قابل مشاهده هستند.