ساخت سریع برگه به سبک گرفتن و کشیدن با ویژوال کامپوزر

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

ویژوال کامپوزر ، افزونه برگه ساز وردپرس

برگه سازهای گرفتن و کشیدنی ، به عنوان افزونه شناخته شده اند و در پوسته های رایجی ساخته می شوند. برای تمامی کاربران در هر سطحی ، برگه سازها امکان ایجاد تغییر در ساختارهای کلی یک قالب و افزودن ابزارهای اضافی (مانند آیکنها ، نوارهای مهارت و جداول قیمت) را به وجود می آورند. ما می خواهیم به طور خاص ، افزونه برگه ساز جدید مورد علاقه مان را به شما معرفی کنیم : Visual Composer!

ویژوال کامپوزر چیست؟

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

نحوهٔ کار ویژوال کامپوزر و قابلیت های آن

این یک افزونه است ، پس برای بهره مند شدن از تمامی ویژگی های خارق العاده ی آن ، کافی است آن را نصب و سپس فعال کنید. پس از فعال شدن ، ویژوال کامپوزر کنترل طرح های برگه ی شما را به دست تان می دهد. یک برگه بیافزائید و دکمه های جدید آن را ببینید. با فشردن دکمه ی Frontend Editor ، شما می توانید تنظیمات خود را از حالت کلاسیک (Classic Mode) به حالت سازنده (Builder Mode) تغییر دهید.

ویرایشگر بصری Visual Composer

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

ردیفها

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

ردیف ها در Visual Composer

عناصر صفحه

عناصر صفحه در Visual Composer

در قدم بعدی ، شروع کنید به افزودن امکانات به برگه تان. روی دکمه ی Add Elements کلیک کنید تا یک منوی پاپ آپ باز شود. در این منو ، گزینه های زیادی برای افزودن مواردی اعم از جعبه ی متن ، سرصفحه ، اشتراک گذاری اجتماعی ، تصویر ، گالری ، جابجایی ، تب ، آکاردئون ، پست جدید (که علاوه بر پستهای وبلاگ ، با انواع پست های دلخواه قالب شما نیز سازگار است) ، دکمه ها و ابزارک های کنار صفحه وجود دارد.

عناصر صفحه ، متناسب با قالب وردپرس و افزونه های مورد استفاده شما که با ویژوال کامپوزر سازگار هستند ، می توانند به تعداد کمتر یا بیشتری ظاهر شوند. نمونه ی بالا ، قالب وردپرس کشیدنی- انداختنی Total ما است. ما ۳۰ عنصر برگه ساز اضافه را به طور انحصاری برای Total ساخته و طراحی کرده ایم. این عناصر ، شامل تقسیم کننده های سفارشی ، جعبه های آیکن ، نقاط عطف ، چرخ های فلکی و … می شود.

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

جعبه تنظیمات آیکون

سازنده از ۴ افزونه ی دیگر نیز پشتیبانی می کند: Layer Slide ، Revolution Slider ، Gravity Forms و Contact Form 7. اگر هر کدام از این افزونه ها را نصب کرده باشید ، به طور خودکار یک عنصر صفحه برای قالب نمایان می شود. با انتخاب یکی از عناصر صفحه این افزونه ها ، ویژوال کامپوزر یک منوی کشویی از فرم ها یا اسلایدهای مربوطه نشان می دهد که توسط شما ساخته شده است. یا این که ، جعبه ی ورودی ای نمایان می شود تا شما شناسه اسلایدساز خود را در آن اضافه کرده و نیازی به کپی پیست کدهای کوتاه پیدا نکنید.

کشیدن و انداختن

گرفتن و کشیدن در Visual Composer

هنگام طراحی ، برای چینش مجدد می توانید هر ردیف یا عنصر برگه را بکشید و جای دیگری آن را بیندازید. همچنین می توانید هر ردیف یا عنصر را تکثیر کنید که باعث آسان و سریع شدن افزودن محتوای تکراری می شود. این برای ستونها ، FAQها ، جابجایی ها و … که نیاز است مشابه باشند ، عالی است.

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

انتخاب هایی در ردیف ها : ردیفها را ایجاد کرده ، افزایش بدهید و حذف کنید.

۳ ویژگی به گوشه سمت چپ هر ردیف اضافه شده است که می تواند برای کپی گرفتن از یک ردیف کامل به همراه محتوای آن ، اضافه کردن ماژول های جدید ، ویرایش ستون ها و … استفاده شود. به سادگی موس خود را روی ردیفی که قصد ویرایش آن را دارید حرکت دهید تا دسترسی به این تنظیمات برای تان فراهم شود.

تنظیمات ویرایش ردیف در Visual Composer

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

ویرایشگر جلوی صفحه – Frontend Editor

ویژوال کامپوزر قدرتمند حالا شامل یک ویرایشگر جلوی صفحه هم می شود که کار برگه سازی و طرح سازی را از همیشه آسانتر می کند. تنها مشکل آن ، این است که هنوز همه ی قالب ها از این ویرایشگر پشتیبانی نمی کنند. برای جلوگیری از وقوع این مسئله ، لیست قابلیت های قالب خود را دوباره بررسی کنید یا مستقیماً با توسعه دهنده ی قالب تماس بگیرید تا ببینید که قالب وردپرس مورد استفاده شما با این ویرایشگر سازگاری می کند یا خیر. قالب وردپرس Total با ویرایشگر جلوی صفحه ویژوال کامپوزر %۱۰۰ همخوانی دارد. پس اگر برای قالب شما مشکلی ایجاد شد ، شاید بخواهید آن را به قالب ما تغییر دهید.

توسعه بخشی

آخرین ویژگی مورد بحث ما ، قابلیت گسترش دادن و توسعه ی ویژوال کامپوزر است. اگر کدنویس حرفه ای یا توسعه دهنده ی قالب هستید ، می توانید کدهای کوتاه خود را به این افزونه اضافه کنید. در واقع ، ما این کار را در Symple Shortcut Premium خود انجام داده ایم تا به کاربران Total امکان دسترسی به عناصر صفحه ی جدیدتری بدهیم ، که برای شان امکانات بیشتری را هنگام برگه سازی فراهم می کند.

اگر کدنویس نیستید ، نگاهی به CodeCanyon بیندازید و در آن ، به دنبال افزونه های ویژوال کامپوزر بگردید. افزونه های ارتقا یافته فوق العادهای هستند که ویژگی های بیشتری را به ویژوال کامپوزر اضافه می کنند. بعضی از این افزونه های عالی ، مانند Symple Shortcut ما ، رایگان می باشند.

گزینه های تنظیمات ویژوال کامپوزر

من همچنان از ویژوال کامپوزر برای برگه سازی استفاده می کنم. اما این افزونه با نوشته ها و انواع پست های دلخواه (Custom Post Type) نیز عالی کار می کند. کاری که باید بکنید ، این است که گزینه ی مربوط به آن را فعال کنید. به مسیر Settings > Visual Composer بروید. باید صفحه ای شبیه به این را مشاهده کنید.

تنظیمات Visual Composer

افزونه به طور خودکار انواع مختلف محتوای درج شده در قالب وردپرس شما را نمایش می دهد. فقط انتخاب کنید که می خواهید کدامشان را با برگه ساز ویژوال کامپوزر استفاده کنید. مثال بالا از قالب Total ما انتخاب شده ، به این دلیل است که شما گزینه های بیشتری مانند Portfolio (نمونه کار) ، Staff (کاربران) و Testimonials (متفرقه) (اینها همه از انواع دلخواه پست هستند) ، به همراه Forums (انجمن ها) ، Topics (موضوعات) ،Reply and Product (پاسخ و محصولات) (مربوط به افزونه های bbPress و WooCommerce که توسط Total پشتیبانی می شوند) را مشاهده می کنید.

همچنین شما می توانید هر افزونه ی کد کوتاهی را که روی وبسایت وردپرس خود نصب کرده اید را در ویژوال کامپوزر پیدا کنید. زیر صفحه ی تنظیمات ، روی تب My Shortcodes کلیک کرده و Map Shortcodes را انتخاب کنید. این کار ، کدهای کوتاه را به عناصر سازندهی شما اضافه می کند. به همین سادگی!

در عمل ببینید

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

راهنمای کامل استفاده از ویژوال کامپوزر

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

چگونه می توان ویژوال کامپوزر را داشت؟

اگر بخواهید خودتان این افزونه را خریداری کنید ، می توانید آن را در CodeCanyon دریافت کنید. نسخه ی دیگری نیز هست که همراه با قالب وردپرس Total ما به فروش می رسد. به همراه دو افزونه ی ارتقا یافته ی دیگر ، به ارزش کلی ۶۷ دلار – که بیشتر از هزینهای است که شما فقط برای خرید قالب می پردازید.

آنچه که راجب این افزونه در ذهنتان می گذرد را با ما در میان بگذارید. ویژوال کامپوزر ما را شگفت زده کرده و خوشحال می شویم نظرتان شما را هم درباره آن بدانیم.

منبع: WPExplorer.com
عنوان اصلی مقاله : Visual Composer : A Guide To Drag & Drop Page Building
نویسنده: Kyla ، از کاربران WPExplorer
ترجمه : هانیه الزهرا بوداغی