سفارشی سازی دکمه ها در قالب آسترا

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

آموزش تنظیمات دکمه‌ها در قالب آسترا Astra

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

اهمیت طراحی و شخصی‌سازی دکمه‌ها در تجربه کاربری

دکمه‌ها تنها عناصر قابل کلیک در صفحه نیستند؛ بلکه باید از لحاظ بصری کاربران را ترغیب به تعامل کرده، در مسیر مناسب هدایت کنند و در عین حال با هویت بصری برند هماهنگ باشند. ویژگی‌هایی مانند رنگ، اندازه، فونت، حالت‌ها (Hover, Active)، شعاع گوشه‌ها، فاصله‌ها و جای‌گذاری مناسب می‌توانند در افزایش نرخ تعامل کاربران مؤثر واقع شوند.

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

سفارشی سازی دکمه ها در قالب آسترا

برای شروع سفارشی‌سازی، کافی است مراحل زیر را طی کنید:

1- ورود به سفارشی‌ساز وردپرس

از پیشخوان وردپرس وارد مسیر زیر شوید:
نمایش ← سفارشی‌سازی
یا به انگلیسی:
Appearance → Customize

2- انتخاب تنظیمات کلی (Global)

پس از ورود به سفارشی‌ساز، وارد بخش Global شوید که مربوط به تنظیمات کلی سایت است.

3- مراجعه به گزینه دکمه ها «Buttons»

در بخش تنظیمات کلی، گزینه‌ای با عنوان Buttons (یا «دکمه‌ها» در نسخه فارسی) مشاهده می‌شود. با ورود به این قسمت، پنل تنظیمات ظاهری دکمه‌ها در اختیار شما قرار می‌گیرد.

ویرایش دکمه ها در قالب آسترا

در بخش تنظیمات دکمه‌ها، موارد زیر قابل ویرایش و سفارشی‌سازی هستند:

نوع تایپوگرافی (Typography)

• فونت: انتخاب نوع فونت برای متن داخل دکمه‌ها
• اندازه فونت: تعیین بزرگی یا کوچکی نوشته دکمه‌ها
• ضخامت فونت (Font Weight): سبک یا پررنگ بودن نوشته
• حروف بزرگ یا کوچک (Text Transform): تنظیمات مربوط به تمام حروف بزرگ، حروف کوچک یا حروف اول بزرگ

رنگ‌ها (Colors)

شما می‌توانید رنگ‌های مختلف را برای دو حالت زیر مشخص کنید:

• حالت عادی (Normal): رنگ پس‌زمینه، رنگ متن، رنگ حاشیه
• حالت هاور (Hover): رنگ‌هایی که هنگام قرار گرفتن نشانگر ماوس روی دکمه نمایش داده می‌شوند

فاصله داخلی (Padding)

با استفاده از این گزینه می‌توانید مقدار فاصله داخلی بین متن دکمه و لبه‌های آن را تنظیم کنید.

شعاع گوشه‌ها (Border Radius)

با تعیین مقدار شعاع، می‌توانید ظاهر دکمه را به‌صورت گوشه‌دار، گرد یا نیم‌گرد درآورید.

حاشیه دکمه (Border)

• عرض حاشیه: تعیین ضخامت قاب دور دکمه
• رنگ حاشیه: در حالت عادی و هاور
• نوع خط حاشیه: خط صاف، نقطه‌چین، خط‌چین و…

سفارشی‌سازی پیشرفته دکمه ها در قالب آسترا پرو Astra Pro

در قالب آسترا رایگان ویژگی های کامل وجود ندارد ولی در صورتی که از نسخه قالب آسترا پرو استفاده می‌کنید، قابلیت‌های بیشتری در اختیار شما قرار خواهد گرفت، از جمله:

سفارشی‌سازی دکمه‌های سربرگ (Header Buttons)

در تنظیمات بخش «سربرگ» می‌توانید دکمه‌هایی که در منوی بالا قرار دارند را از نظر رنگ، اندازه، تایپوگرافی و استایل شخصی‌سازی نمایید.

دکمه‌های ناحیه پایینی (Footer CTA Buttons)

در بخش تنظیمات پاورقی، می‌توانید دکمه‌هایی با عملکرد تماس با ما، عضویت در خبرنامه یا CTAهای دیگر ایجاد کرده و ظاهر آن‌ها را مطابق برند خود تنظیم کنید.

هماهنگی کامل با صفحه‌سازها

اگر از صفحه‌سازهایی مانند Elementor یا Beaver Builder در کنار Astra Pro استفاده می‌کنید، می‌توانید استایل دکمه‌های استفاده‌شده در المان‌ها را با دکمه‌های اصلی سایت هماهنگ کنید.

نمونه‌هایی از موقعیت‌های استفاده از دکمه‌ها در قالب Astra

نکات حرفه‌ای برای طراحی دکمه‌های مؤثر

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

جمع‌بندی

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

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