آموزش قالب آسترا طراحی سایت با Astra

آموزش قالب آسترا طراحی سایت با Astra

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

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

این قالب در دو نسخه ارائه شده است که نسخه رایگان قالب آسترا در مخزن وردپرس است و با امکانات کمتری نسبت به نسخه پرو در دسترس وردپرس کاران است.

در آموزش قالب آسترا ابتدا از صفر (Base) شروع می‌کنیم و قالب و افزونه‌هایی که نیاز است را نصب می‌کنیم و کل این فرآیند به صورت تصویری آماده شده است.

نصب قالب آسترا روی وردپرس

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

نصب قالب آسترا روی وردپرس

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

نصب قالب آسترا روی وردپرس 2

پس از سرچ و نمایش قالب، روی گزینه نصب کلیک کنید تا این قالب روی وردپرس شما نصب شود و ممکن است چند دقیقه نیاز به صبوری داشته باشید.

نصب قالب آسترا روی وردپرس 3

بعد از نصب قالب، ماوس را روی باکس اطلاعات قالب قرار دهید تا دکمۀ فعال نمایید ظاهر شود و برای فعال‌سازی آسترا روی این دکمه کلیک کنید.

نصب قالب آسترا روی وردپرس

اکنون قالب آسترا فعال شد و منوی آسترا به جمع منوهای پیشخوان وردپرس شما اضافه شده که می‌توانید این منو را مشاهده و به پیشخوان (Dashboard) قالب بروید.

آموزش قالب astra رایگان

ماژول‌های قالب آسترا و کاربرد آن‌ها

یکی از نقطه‌های قوت این قالب، ماژول وار بودن امکانات آن است و به این معناست که هر امکانی که نیاز دارید یا ندارید را می‌توانید به سادگی غیرفعال کنید.

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

ماژول‌های قالب آسترا و آسترا پرو

بیشتر ماژول‌های آسترا تجاری هستند و تنها با فعال‌سازی نسخه پرو، امکان دسترسی به این ماژول‌ها وجود دارد و این مسئله اولین تفاوت آسترا و آسترا پرو است.

انتخاب رنگ سایت در قالب آسترا

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

انتخاب رنگ سایت در قالب آسترا 2

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

انتخاب رنگ سایت در قالب آسترا 3

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

کار با هدر ساز قالب آسترا

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

کار با هدر ساز قالب آسترا

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

کار با هدر ساز قالب آسترا 2

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

کار با هدر ساز قالب آسترا 3

برای افزودن یک دکمه، یک متن یا یک ویجت به هدر سایت، روی آیکون بعلاوه کلیک کنید تا کادر نمایش و انتخاب المان‌های آسترا برای شما نمایش داده شود.

بعنوان مثال؛ اگر می‌خواهید یک دکمه به هدر اضافه کنید، المان دکمه را انتخاب و سپس در سمت راست صفحه، تنظیم‌های مربوط به این المان را ببینید.

تنظیم‌های مربوط به دکمه‌های سایت

اگر می‌خواهید رنگ دکمه‌ها یا تایپوگرافی (فونت) دکمه‌های سایت را کنترل و به دلخواه خود شخصی سازی کنید، به منو یا بخش دکمه در سفارشی سازی بروید.

در اینجا شما می‌توانید رنگ بندی دکمه‌ها، استایل دکمه (گرد کردن دکمه یا طرح ۳ بعدی) را به دلخواه و مناسب وب سایت خودتان تنظیم و پیکربندی کنید.

ایجاد منو و تنظیم‌های آسترا برای منوها

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

ایجاد منو و تنظیم‌های آسترا برای منوها

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

ایجاد منو و تنظیم‌های آسترا برای منوها 2

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

ایجاد منو و تنظیم‌های آسترا برای منوها 3

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

تفاوت قالب آسترا رایگان و قالب آسترا پرو

با ادامۀ آموزش قالب آسترا با تم فور هستید و در اینجا فهرستی تیتر وار از تفاوت‌های نسخه رایگان قالب آسترا با پرو را برای بررسی شما قرار داده‌ایم.

Astra Pro
Astra Free

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

آموزش نصب قالب آسترا پرو

برای نصب نسخه پرو نیازی به نصب یک قالب جداگانه نیست! بلکه برای ارتقای قالب به نسخه پرو، نیاز است افزونه Astra Addon را نصب و فعال کنید.

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

آموزش نصب قالب آسترا پرو

از بالای صفحه، روی گزینه بارگذاری افزونه کلیک کنید تا باکس انتخاب فایل zip افزونه نمایش داده شود و فایل zip افزونه را انتخاب و دکمۀ نصب را بزنید.

آموزش نصب قالب آسترا پرو 2

پس از چند ثانیه، فایل zip افزونه توسط وردپرس در سایت شما آپلود و افزونه نصب خواهد شد که بعد از این عمل، افزونه را فعال کنید تا صفحه رفرش شود.

آموزش نصب قالب آسترا پرو 2

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

انتخاب آیکون برای منوهای سایت

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

انتخاب آیکون برای منوهای سایت

حالا برگردید به صفحه فهرست‌های وردپرس و روی مواردی که به منوی خود اضافه کردید کلیک کنید و دکمۀ تنظیمات آسترا برای شما ظاهر و قابل دسترس است.

انتخاب آیکون برای منوهای سایت 2

روی دکمه کلیک کنید تا در سمت چپ صفحه، یک کادر برای نمایش تنظیمات مربوط به هر آیتم یا مورد منو نمایش داده شود و کافیه آیکون خودتان را انتخاب کنید.

انتخاب آیکون برای منوهای سایت 3

بیشتر از ۷۴ آیکون با موضوعات مختلف برای منوها در دسترس است که می‌توانید هرکدام از آن‌ها که نیاز دارید را انتخاب و برای منوی خود استفاده کنید.

انتخاب آیکون برای منوهای سایت 4

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

انتخاب آیکون برای منوهای سایت 5

در نهایت با ذخیره فهرست و مراجعه به محیط سایت خود می‌توانید تنظیم‌هایی که برای منو، انجام داده‌اید را مشاهده و بررسی نمایید.

انتخاب آیکون برای منوهای سایت 6

تنظیم‌های تایپوگرافی و فونت سایت

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

تنظیم‌های تایپوگرافی و فونت سایت

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

تنظیم‌های تایپوگرافی و فونت سایت 2

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

تنظیم‌های تایپوگرافی و فونت سایت 3

زمانی که روی گزینۀ خانوادۀ فونت کلیک کنید، لیست فونت‌های فارسی را مشاهده خواهید کرد و از آن‌ها در طراحی سایت می‌توانید استفاده نمایید.

تنظیم‌های تایپوگرافی و فونت سایت 4

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

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

آشنایی با تنظیمات قالب آسترا

در ادامۀ آموزش قالب آسترا از طریق پیشخوان یا داشبورد آسترا به محیط تنظیمات (Settings) می‌رویم تا چند تنظیم و عملکرد این بخش آشنا شویم.

در تب General دو تنظیم کاربردی وجود دارد که گزینه اول File Generation فایل‌های CSS/JS آسترا را از حالت درون خطی به صورت فایل جداگانه لود می‌کند.

گزینه Asset Regeneration دارایی‌های Javascript و CSS قالب را مجدد بازسازی و بازنویسی می‌کند که اگر مشکلاتی در استایل‌ها دیدید، این آپشن کاربردی است.

گزینه Performance مربوط به فونت‌های گوگل و پاک کردن کش آن است که برای سایت‌های ایرانی به دلیل عدم استفاده از این فونت‌ها، این گزینه استفاده نمی‌شود.

گزینۀ Version Contorl برای کنترل ورژن نصب شده قالب است و گزینه White Label اجازه می‌دهد که نام منوی قالب و توضیحات را به دلخواه خود تغییر دهید.

ویژگی اسکرول به بالا در قالب آسترا

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

ویژگی اسکرول به بالا در قالب آسترا

در محیط تنظیم‌های مربوط به اسکرول به بالا، می‌توانید آن را فعال کنید و موقعیت نمایش دکمۀ اسکرول به بالا (سمت چپ یا راست صفحه) را انتخاب کنید.

ویژگی اسکرول به بالا در قالب آسترا 2

همچنین می‌توانید در همین قسمت، اندازه آیکون و در تب Design تنظیم‌های مربوط به ظاهر و طراحی دکمۀ رفتن به بالای صفحه را انجام دهید.

ویژگی اسکرول به بالا در قالب آسترا 3

ویژگی اسکرول به بالای صفحه، یکی از کاربردی‌ترین قابلیت‌هایی است که هر وب‌سایتی نیاز است آن را داشته باشد که کاربر بتواند سریع به بالای صفحه برگردد.

تنظیم‌های آسترا برای صفحه‌ها و نوشته‌ها

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

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

تنظیم‌های آسترا برای صفحه‌ها و نوشته‌ها

در تب Content Layout می‌توانید استایل نمایش صفحه یا پست را تغییر دهید، مثلاً صفحه را تمام عرض کنید یا سایدبار در موقعیت‌های مختلف قرار دهید.

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

در تصویر زیر مشاهده می‌کنید که صفحه بدون سایدبار و به صورت تمام عرض (تمام صفحه) به خوبی و بدون نیاز به کدنویسی نمایش داده می‌شود.

تنظیم‌های آسترا برای صفحه‌ها و نوشته‌ها 4

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

از طریق گزینه‌های Disable Elements امکان مخفی کردن هدر و فوتر برای صفحه و نوشته در دسترس است که ویژگی بسیار کاربردی در طراحی صفحات است.

همچنین گزینه Advanced Settings دقیقاً همین آپشن غیرفعال کردن هدر و فوتر نمایش داده می‌شود که می‌توان روی موبایل، هدر آن صفحه را غیرفعال کرد.

ویژگی تنظیم‌های آسترا برای صفحات، اجازه می‌دهد بدون نیاز به کدنویسی، برای صفحات خاصی، تنظیم‌هایی اعمال کنید بدون آنکه روی سایر صفحات تاثیر بگذارد.

نصب دموهای آنلاین قالب آسترا

در صورتی که می‌خواهید دموهای قالب آسترا را روی وردپرس خودتان نصب و درون‌ریزی کنید، ابتدا باید افزونه Astra Premium Starter Templates را فعال کنید.

نصب دموهای آنلاین قالب آسترا

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

نصب دموهای آنلاین قالب آسترا 3

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

نصب دموهای آنلاین قالب آسترا 4

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

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

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

در صورتی که فرآیند تکمیل شد و به ۱۰۰% رسید، می‌توانید سایت خود را با ظاهر جدید همانند دموی مدنظرتان مشاهده و شروع به شخصی سازی آن کنید.

جمع بندی آموزش قالب آسترا

در مقالۀ آموزش قالب آسترا به برخی از ویژگی‌های مهم این قالب پرداختیم و ما این مقاله را همیشه آپدیت و به‌روز نگه می‌داریم، امیدواریم لذت برده باشید.

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید

میانگین رتبه ۴.۵ / ۵. تعداد رای: ۱۰

این مقاله را با دوستان خود به اشتراک بگذارید

ارسال یک دیدگاه

برای ارسال دیدگاه، نیاز است که را انجام دهید.

دلیل بازپرداخت

اسکرول به بالا