آشنایی با ویژوال کامپوزر
همانطور که می‌دانیم ابتدایی‌ترین موضوعی که در پس از ورود کاربر به یک وب سایت توجهش را جلب کرده و سبب ماندن کاربر در وب‌سایت شما می‌شود، ظاهری جذاب و کاربر پسند است. در سایت‌های وردپرسی کار طراحی و ساخت صفحات جذاب بر عهده افزونه‌های صفحه سازی است که توسط برنامه نویسان برای پیاده‌سازی هر المان و طرحی کدنویسی شده‌اند.
برای آشنایی بیشتر با این صفحه‌سازها در وردپرس پیشنهاد می‌کنیم مقاله آشنایی با صفحه‌سازهای وردپرس را مطالعه فرمایید. ویژوال کامپوزر یکی از این صفحه‌سازهاست که با پشتیبانی از قابلیت کشیدن و رها کردن امکان پیاده‌سازی تمام طرح ذهنی شما روی یک صفحه وب را فراهم می‌سازد.
نصب آسان این افزونه در وردپرس، دسترسی رایگان به تمامی بخش‌های آن، قدرت بالا در طراحی، تنوع المان‌های مورد نیاز برای طراحان سایت و…. از جمله مواردی است که ویژوال کامپوزر را پس از روی کار آمدن المنتور همچنان بین کاربران محبوب نگه داشته است.
در این مقاله از شرکت طراحی سایت در مشهد پارس وب تصمیم داریم تا افزونه صفحه‌ساز ویژوال کامپوزر را کامل به شما معرفی کرده و آموزشی برای نحوه کار با آن در اختیارتان قرار دهیم.
ویژوال کامپوزر چیست؟
در سال 2011 افزونه صفحه ساز کامپوزر توسط گروه WP Bakery طراحی و روانه بازار طراحی سایت شد. بیش از 2 میلیون نصب فعال در همان ابتدا این افزونه را پس از المنتور در رده دوم پرفروش‌ترین‌های این دسته کاری رساند.
استفاده و پشتیبانی از المان‌های مختلف توسط کامپوزر در طراحی ساختار و ظاهر صفحات نقش مهمی را ایفا می‌کنند. برخی از این المان‌ها را می‌توان بلاک‌های متنی مختلف، بخشی مربوط به تصاویر و گالری، آیکون‌های مختلف، جدول و نمودار و … نام برد.
بررسی ویژگی‌های افزونه کامپوزر
- کاربری آسان
- طراحی بدون کدنویسی
- واکنشگرا و ریسپانسیو
- پشتیبانی از قابلیت کشیدن و رها کردن
- پشتیبانی از 40 المان طراحی
- پیش نمایش سریع تغییرات
- پشتیبانی کامل از زبان فارسی
- پشتیبانی از افزونه ووکامرس
- افزودن سطر و ستون‌های دلخواه در صفحات
و … از جمله مواردی هستند که کاربران با نصب افزونه کامپوزر به آن‌ها دست پیدا خواهند کرد.
روش نصب ویژوال کامپوزر
افزونه را دانلود کرده و در قسمت پیشخوان، افزونه‌ها، بارگذاری افزونه جدید را کلیک کرده و فایل حاوی افزونه کامپوزر را در آنجا وارد کرده و آپلود را انتخاب کنید. پس از اتمام بارگذاری افزونه آن را فعال کرده کار تا اینجا تمام است. حال به پیش خوان وردپرس خود بازگشته و خواهید دید که بخشی به اسم ویژوال کامپوزر در پیشخوان شما اضافه شده است.
آشنایی با تنظیمات صفحه‌ساز کامپوزر
بخش ایجاد شده در پیشخوان(آموزش صفر تا صد فهرست در پیشخوان وردپرس را بخوانید) خود با نام ویژوال کامپوزر را انتخاب کرده و به قسمت تنظیمات وارد شوید. در این قسمت زیر مجموعه‌هایی مانند تنظیمات عمومی، تنظیمات طراحی، Css سفارشی و… را مشاهده خواهید کرد که هر بخش از این زیر مجموعه‌ها مسئول پیاده سازی و ارائه امکاناتی در راستای طراحی بهتر صفحات سایت هستند.
بخش تنظیمات عمومی
غیرفعال‌سازی المان‌های مربوط به ریسپانسیو
این بخش را فعال‌سازی کرده تا این افزونه را برای دستگاه‌های هوشمندی مانند موبایل غیرفعال کنید.
پشتیبانی از فونت‌های گوگل
با استفاده از تنظیمات این بخش می‌توانید فونت‌های مختلف را در طراحی صفحات خود استفاده کنید.
غیرفعال‌سازی ویرایشگر گوتنبرگ
همانطور که از اسمش پیداست با فعال سازی این گزینه، گوتنبرگ را به عنوان ویرایشگر غیرفعال می‌کنید.
بخش تنظیمات طراحی
این صفحه‌ساز به صورت پیش فرض از تم خاکستری روشن در طراحی انواع المان‌ها پشتیبانی میکند. با استفاده از گزینه تنظیمات طراحی و کلیک رو قسمت “استفاده از تنظیمات سفارشی طراحی” انواع محتوا و المان موجود در کامپوزر را از نظر رنگ و ظاهر سفارشی سازی کنید. همچنین در ادامه علاوه‌بر سفارشی‌سازی رنگ شما قادر به تغییر عرض و طول جداول خواهید بود. لازم به ذکر است در مقاله آشنایی با بهترین صفحه‌سازهای وردپرس لیستی از بهترین افزونه‌ها برای طراحی رو مشاهده کنید.
بخش css سفارشی
در این سربرگ از زیر مجموعه‌های تنظیمات کامپوزر شما امکان افزودن کدهای css به منظور سفارشی‌سازی بخش‌های مختلف از صفحات طراحی شده را می‌توانید انجام دهید.
بخش قرار دهنده کد کوتاه
اگر در وب‌سایت خود از افزونه‌هایی استفاده می‌کنید که با ویژوال کامپوزر سازگار نیستند با استفاده از این قسمت قادر به نمایش آن‌ها در وب‌سایت خود خواهید بود .
برای فعال سازی و استفاده از این امکان نیاز است تا افزونه مورد نظر خود را نصب کرده و شورت کد ( کد کوتاه) آن را در قسمت رشته کد کوتاه paste کنید.
افزودن المان جدید به صفحه با استفاده از کامپوزر
از قسمت افزودن برگه جدید، یک برگه جدید ساخته و با کلیک روی گزینه افزودن المان، صفحه‌ای شامل تمامی المان‌های مورد نیاز برای طراحی صفحه برای شما به نمایش در خواهد آمد. بسته به نیاز خود و طرح رابط کاربری خود از المان‌های زیر موردی را انتخاب کرده و آن را با استفاده از قابلیت کشیدن و رها کردن در محل مورد نظر قرار دهید.
به طور مثال برای قرار دادن متن و تصویر در کنار هم در یک بخش مشخص، نیاز است تا المان بلاک متنی را بکشید و در صفحه رها کنید و سپس از المان تصویر تکی برای درج تصویر مورد نظر در کنار محتوا استفاده کنید.
لازم به ذکر است هر المانی را که قصد دارید در صفحه خود قرار دهید برای آن بخش یا ردیفی جداگانه در نظر داشته باشید. با این کار نظم و یک‌پارچگی منطقی در در صفحه وب سایت خود ایجاد خواهید کرد.
برای این کار لازم است در ابتدا از بخش افزودن المان‌ها، المان “ردیف” را کشیده و در محل مورد نظر رها کنید و کار طراحی را شروع کنید.
تا به اینجای این مقاله ….
خوانیدم که صفحه‌سازهای وردپرس چه تاثیری در طراحی سایت و ساخت صفحات یک وب‌سایت بخصوص دارند. یکی از بهترین صفحه ساز‌ها را برای شما معرفی کرده و روش کار با ویژوال کامپوزر را تا حدودی به صورت تصویری برای شما توضیح دادیم. لازم به ذکر است که مقاله آشنایی با صفحه ساز ویژوال کامپوزر در اینجا به پایان نرسیده و آموزش‌های بیشتر در این باره در همین مقاله آپدیت خواهد شد.
Refrences:
