طرز تهیه آش ماست

طرز تهیه آش ماست

در این مقاله از مجله خبری گالری شکلات قصد داریم طرز تهیه آش ماست را برای شما قرار دهیم.

این آش ، یکی از آش های مخصوص و خوش طعم شهر خراسان میباشد.

طرز تهیه:

ابتدا سینه های مرغ را بپزید ، پیازها را خرد کنید و در روغن تفت دهید ، سیر ها را بکوبید.

سپس شما باید برنج هارا با ۵ لیوان آب درون قابلمه بریزید و بگذارید تا کامل بپزد و لعاب بندازد.

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

بعد از گذشت ۱۵ دقیقه ، شوید و لپه ها را به آن اضافه کنید.

مجددا ۱۵ دقیقه صبر کنید و تکه های مرغ ریش ریش شده را به آش اضافه کنید.

تقریبا نصف پیاز داغ را به آن اضافه کنید.

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

در آخر آن را درون ظرف مورد نظر ریخته و با بقیه پیاز داغ ها آن را تزیین کنید.

اکنون آش شما آماده میباشد و میتوانید آن را میل کنید.

—————————————————————————————————————-

طرز تهیه آش ماست

طرز تهیه آش ماست

طرز تهیه آش ماست

طرز تهیه آش ماست

منبع : https://vbshop.ir/%d8%b7%d8%b1%d8%b2-%d8%aa%d9%87%db%8c%d9%87-%d8%a2%d8%b4-%d9%85%d8%a7%d8%b3%d8%aa/

طرز تهیه هات چاکلت فندقی

طرز تهیه هات چاکلت فندقی

مجله خبری گالری شکلات قصد دارد طرز تهیه هاتچاکلت فندقی را برای شما توضیح دهد.

طرز تهیه:

ابتدا شیر را در قهوه جوش بریزید.

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

دستگاه قهوه جوش را روی حرارت ملایم قرار دهید.

سپس سیروپ فندق را به آن اضافه کنید و به آرامی به هم بزنید تا به جوش آید.

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

—————————————————————————————————————

طرز تهیه هات چاکلت فندقی

طرز تهیه هات چاکلت فندقی

طرز تهیه هاتچاکلت فندقی

طرز تهیه هاتچاکلت فندقی

منبع : https://vbshop.ir/%d8%b7%d8%b1%d8%b2-%d8%aa%d9%87%db%8c%d9%87-%d9%87%d8%a7%d8%aa-%da%86%d8%a7%da%a9%d9%84%d8%aa-%d9%81%d9%86%d8%af%d9%82%db%8c/

تاریخچه زبان HTML – زبانی برای نشانه گذاری متن

HTML چیست؟ 

HTML زبانی برای نشانه گذاری متن می باشد که توسط مرورگر ها قابل درک و فهم هستند. با استفاده از HTML مرورگر می تواند تشخیص دهد که متن چگونه در صفحه به نمایش در بیاید.

زبان نشانه‌گذاری ابرمتنی یا زنگام یا اچ‌تی‌ام‌ال ، HTML یا HyperText Markup Language در کنار CSS هستهٔ فناوری ساخت صفحه‌های وب هستند. اچ‌تی‌ام‌ال زبان توصیف ساختار صفحه‌های وب است. زبانی است برای نشانه گذاری ابرمتن ( فرامتن ) که برای تدوین قالب و طراحی صفحه های‌ وب به کار میبرند. دستورالعمل‌های این زبان ، برچسب ( Tag ) نام دارند که محتوای یک صفحهٔ وب ، با آن‌ها ، نشانه‌گذاری شده و بدین‌ترتیب ، نحوهٔ نمایش آن صفحه برای مرورگرهای وب ، توصیف می‌شود. تاکنون ۵ نسخه از اچ تی ام‌ال عرضه شده‌است.

HTML چه کاربردی دارد؟ 

ما از زبان HTML استفاده می کنیم تا بتوانیم متن را تگ گذاری کنیم تا توسط مرورگر در دستگاه های مختلف قابل مشاهده باشد. با استفاده از تگ گذاری HTML ، می توانیم مشخص کنیم که هر بخش به چه صورت باید به نمایش در بیاید.

تاریخچه HTML

توسعه

در سال ۱۹۸۰ فیزیکدانی به نام تیم برنز لی که با پروژهٔ CERN همکاری داشت ENQUIRE را طراحی و ارائه کرد که یک سیستم مهم برای محققان CERN بود تا اینکه از این داده‌ها به شکل مشترک استفاده کنند. در سال ۱۹۸۹ ، Berners- Lee یک یادداشت پیشنهاد یک سیستم ابر متن مبتنی بر اینترنت نوشت. Berners- Lee یک نوع خاص HTML را مشخص نمود و یک نسخهٔ جستجوگر و نرم‌افزار سرور را در انتهای۱۹۹۰ نوشت. در این سالیان این فیزیکدان و مهندس سیستم‌های داده‌های CERN به نام Robert Cailliau یک سرمایه‌گذاری مشترک را انجام داد ولی این پروژه به شکل رسمی توسط CERN دنبال نشد.

در یادداشت‌های شخصی او از سال ۱۹۹۰ اشاره شده ‌است که برخی از مناطق مختلف ابر متن ( hypertext ) به کار گرفته شده است و در ابتدای آن از یک دائرةالمعارف استفاده گردید. اولین بار شرح کامل HTML به این شکل بود که به آن در نسخه‌های قبلی ” HTML Tags ” گفته شد که برای اولین بار توسط Berners –Lee در سال ۱۹۹۱ روی اینترنت قرار گرفت ؛ که آن توصیف ۱۸ عناصر شامل عناصر اولیه ، طراحی نسبتاً ساده از HTML بود. به غیر از Hyperlink این موارد تحت تأثیر SGMLguid در فرمت مبتنی بر SGML قرار گرفت و در پروژهٔ CERN به کار رفت یازده مؤلفه از آن در HTML 4 نوشته شده است.

زبان نشانه‌گذاری ابرمتنی

به شکلی است که مرورگرهای وب برای تحلیل و نوشتن متون تصاویر و دیگر مواد روی صفحات قابل شنیدن و قابل دیدن وب به کار می‌رود. ویژگی‌های پیش‌فرض برای هر مورد در ساختار HTML در جستجوگر تعریف شده‌ است و این ویژگی ‌ها را می‌توان تغییر داد یا اینکه توسط CSS بر اساس طراحی صفحه افزایش داد. بسیاری از اجزای متن در گزارش فنی 1988 ISO به شکل TR9537 ارائه شده‌ است که نام این جزء روش‌های استفاده از SGML بود که در آن ویژگی‌های اولیه ساختار زبانی مانند آنچه که در مورد فرمان RUNOFF دیده می‌شود ، استفاده شد. که در ابتدای دهه ۱۹۶۰ برای CTSS ارائه شده ‌است.

این فرمان‌های ساختاری از فرمان‌های مورد استفاده توسط typesetters استفاده می‌کند که به شکل دستی برای فرمت های مختلف در نظر گرفته شده‌ اند. اما اصل SGML برای ساختار کلی بر اساس اجزای مختلف است ( محدوده ‌های حاشیه ‌نویسی تو در تو به همراه ویژگی‌هایی که دارد ) تا اینکه از اثرات چاپ استفاده شود. همچنین جداسازی ساختارها و شکل ترکیبی نیز باید در نظر گرفته شود. اچ‌تی‌ام‌ال به شکل مداوم به این صورت با CSS به کار گرفته می‌شود.

Berners- Lee از HTML به عنوان یک ابزار برای SGML استفاده کرده‌است. به‌طور کلی آن را به عنوان دستور نیروی ضربت مهندسی اینترنت ( IETF ) تعریف کرده‌است که در سال ۱۹۹۳ نسخه‌های اولیه از آن را بر اساس HTML ارائه نمود. ” زبان نشانه‌ گذاری ابرمتنی HTML ” پیش‌نویسی اینترنتی توسط Dan Cannolly و Berners- Lee ارائه گردید و درون تعریف نوع سند SGML برای تعریف گرامر ارائه شد. این نسخه اولیه پس از شش ماه منقضی گردید ولی قابل توجه اینکه از جستجو گر NCSA Mosaic به شکل جستجو گر پیش‌فرض برای تصاویر بر خط استفاده شد. که نشان دهندهٔ فلسفهٔ IETF در استانداردهای ساختارهای موفق است.

رقابت

به همین شکل Dave Raggett’s رقابت خود را با ارائه ( Internet-Draft ، HTML+ Hypertext Markup format ) از انتهای ۱۹۹۳ شروع کرد و پیشنهاد کرد که یک ساختار اجرایی مانند جداول و شکل‌های پر شونده را می‌توان برای این منظور به کار گرفت.

پس از آنکه HTML و +HTML به شکل پیش‌نویس در ابتدای ۱۹۹۴ منقضی گردید،IEFT یک گروه کاری HTML را ایجاد کرد که در سال ۱۹۹۵ نسخهٔ HTML 2.0 تکمیل گردید ، HTML اولیه با این قصد ساخته شده که به شکل یک ساختار استاندارد در آینده از آن استفاده شود.

پس از آن پیشرفت‌هایی در IETF در نظر گرفته شد که مورد توجه رقیبان قرار گرفت. تا سال ۱۹۹۶ ویژگی‌های HTML حفظ شد و ورودی‌هایی از نرم‌افزارهای تجاری گرفته شد که این کار توسط کنسرسیوم وب جهان‌گستر انجام شد. اما در سال 2000 HTML یک استاندارد بین‌المللی ( ISO/IEC 15445:2000 ) گردید. HTML4.01 در انتهای ۱۹۹۹ انتشار یافت و پس از آن ساختار بعدی آن در سال ۲۰۰۱ به شکل کامل منتشر شد. در سال ۲۰۰۴ پیشرفت‌هایی در HTML5 در ( WHATWG ) در نظر گرفته شد و شکل قابل انتشار آن به شکل W3C در سال ۲۰۰۸ ارائه گردید.

نسخه‌های HTML جدول زمانی

۲۱ نوامبر ۱۹۹۵

HTML 2.0 به شکل IETF RFC 1866 انتشار یافت. RFCs تکمیلی ظرفیت‌های زیر را داشت:

۲۵ نوامبر RFC 1867 : 1995 ( آپلود فایل مبتنی بر فایل )

می RFC 1942 : 1996 ( جداول )

اگوست RFC 1980 : 1996( نقشه‌های تصویری سمت مشتریان )

ژانویه RFC 207O : 1997 ( بین‌المللی شدن )

ژانویه ۱۹۹۷

HTML3.2 به شکل توصیه‌نامهٔ کنسرسیوم وب جهان‌گستر انتشار یافت. نسخه اول پیشرفت داده شد و استاندارد کردن آن به شکل انحصاری توسط W3C انجام شد به همین شکل IETF گروه کاری خود HTML را در سپتامبر ۱۹۹۶ کاملاً ارائه کرد. در ابتدا این فرمان را Wilbur نامید. HTML3.2 فرمول‌های ریاضی را به‌طور کامل به کار گرفت، که در آن همپوشانی‌هایی در اجزای مختلف پیشرفت کرده آن داشت و از مهم‌ترین ابزارهای تصویری Netscape استفاده شده بود. عناصر مبهم Netscape و عناصر متحرک Microsoft مورد استفاده قرار نگرفت که دلیل آن توافق دو طرفه میان دو شرکت بود. ساختار ریاضی مورد استفاده مشابه با اچ‌تی‌ام‌ال بود ولی استاندارد کردن آن تا ۱۴ ماه پس از MathML انجام نگرفت.

دسامبر ۱۹۹۷

html 4.0 توصیه W3C را ارائه کرد که در آن سه تفاوت عمده اعمال شده بود :

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

درابتدا با کد نام ” Cougar ” نامگذاری شده بود و 0.HTML4 از انواع اجزای خاص جستجوگر و ساختارهای مختلف استفاده کرده بود ولی در همان زمان مرحله‌ ای در نظر گرفته شد که از ویژگی‌های نشانه‌گذاری بصری Netscap را با مارک آن‌ها به عنوان نفع شیوه نامه‌ها توصیه نمی‌شود. HTML 4 یک برنامه SGML مطابق با ISO 8879 است.

آوریل ۱۹۹۸

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

دسامبر  ۱۹۹۹

HTML4.01 به توصیهٔ W3C انتشار یافت. در آن سه تغییر کلی به شکل HTML4.0 در نظر گرفته شد و آخرین غلط نامه در ۱۲ می ۲۰۰۱ انتشار یافت.

می ۲۰۰۰

2000:ISO/IEC ۱۵۴۴۵ به عنوان استاندارد بین‌المللی ISO/IEC انتشار یافت. در ISO این استاندارد در حوزه ISO/IEC JTC1/SC34 قرارگرفت. در اواسط ISO/IEC15445:2000,HTML4.01 ، 2008 جدیدترین نسخه‌های HTML ارائه شد. پیشرفت‌های موازی صورت گرفته ، باعث شد که XHTML مبتنی بر XML حاصل شود که توسط گروه کاری W3CHTML در طی اوایل و اواسط ۲۰۰۰ اشغال شده بود.

جدول زمانی نسخه‌های پیش نویس HTML

اکتبر ۱۹۹۱

برچسب‌های HTML فهرستی از نسخه‌های غیررسمی CERN که در آن ۱۸ برچسب‌های HTML وجود دارد که برای اولین بار برای عموم مورد استفاده قرار گرفت.

ژوئن ۱۹۹۲

پیش‌نویس غیررسمی اول HTML DTD هفت بار مورد اصلاح قرار گرفت ( ۱۵ ژوئیه ، ۶آگوست ، ۱۸ آگوست ، ۱۷ نوامبر ، ۱۹نوامبر ، ۲۰نوامبر و ۲۲ نوامبر )

نوامبر ۱۹۹۲

HTML DTD1.1 اولین نسخه دارای اعداد بر مبنای اصلاحات RCS که با ۱٫۱ شروع شد تا اینکه با ۱٫۰ شروع شود و این به عنوان نسخه غیررسمی درآمد .

ژوئن ۱۹۹۳

زبان ساختاری Hypertext توسط گروه کاری IETF IIIR به عنوان نسخهٔ اینترنتی درآمد که یک پیش‌نویس برای استاندارد در نظر گرفته شد . و این جایگزین نسخه دوم شد که یک ماه بعد از این اتفاق افتاد و پس از آن شش پیش‌نویس توسط IETF انتشار یافت و در نهایت منجر به ارائه HTML 2.0 در RFC1866 گردید.

نوامبر ۱۹۹۳

HTML+ توسط IETF انتشار یافت که یک پیش‌نویس اینترنتی بود و رقیب پیش‌نویس زبان ساختاری Hyper textگردید. در می ۱۹۹۴ این نسخه منقضی گردید.

آوریل ۱۹۹۵

( تا مارس ۱۹۹۵ نسخه‌های نهایی آن ارائه شد ) : HTML3.0 را می‌توان یک استاندارد برای IETF در نظر گرفت ولی پیش‌نویس آن ۵ ماه بعد بدون هیچگونه اقدامی منقضی گردید. این شامل ظرفیت‌هایی بود که در پیش‌نویس +Raggett’s HTML دیده شده و برای پشتیبانی جداول و متون در اطراف تصاویر به کار گرفته شد و می‌توانست که فرمول‌های ریاضی پیچیده را نمایش دهد. W3C برای جستجوگر Arena پیشرفت کرد و به عنوان یک بستر آزمایشی برای HTML3 و صفحات آبشاری شکل استفاده شد ولی HTML3.0 به دلایل مختلف موفق نبود.

این پیش‌نویس بسیار بزرگ بود و ۱۵۰ صفحه در آن دیده شد و تعدادی از اجزای جالب به آن اضافه شد و منابع IETF در خارج آن قرار گرفت. ارائه کنندگان جستجوگر شامل Netscape ,Microsoft در همین زمان زیر مجموعه‌های مختلفی از HTML3 را انتخاب کردند تا اینکه پیشرفت‌هایی در آن ایجاد شود. این پیشرفت‌ها برای کنترل جنبه‌های مختلف در نظر گرفته شد که رنگ متن ، بافت پیش تصویر ، اندازهٔ فونت و شکل فونت در خارج از محدود ی زمانی قرار می‌گرفت و این می‌توانست نشان دهد که چگونه این بخش سازماندهی شده‌است. Dave Raggett برای چندین سال از W3C استفاده کرده بود که یک مثال مطلوب برای این منظور بود. مطمئناً مایکروسافت براساس صفحات وب ساخته شده بود و از ویژگی‌های HTML انتخاب شده بود. 

ژانویه ۲۰۰۸

HTML5 به عنوان پیش‌نویس کاری توسط W3C انتشار یافت ولی syntax یک HTML5 ، SGML را ارائه کرد که تلاش کرده بود که از SGML استفاده کند و HTML5 تلاش‌های مختلفی را برای SGML انجام داد و آن را سری ” html ” تعریف نمود که به سری‌سازی XML- مبتنی بر XHTML5 جایگزین منجر شد.

می ۲۰۱۱

در ۱۴ فوریه ۲۰۱۱ ، W3C ویژگی گروه کاری اچ تی ام ال را پیشرفت داد و یک ساختار مشخص برای HTML5 ارائه کرد. در می ۲۰۱۱ گروه کاری HTML5 پیشرفته را ارائه کرد که آخرین مورد بود و به دنبال آن بود که W3C خارجی را ارائه کند تا اینکه این ویژگی را به خوبی تعریف نماید. W3C آزمون جامعی را توسعه داد که در آن ویژگی‌های کامل به آن تا ۲۰۱۴ اضافه شد و اکنون این تاریخ هدفی برای توصیه‌ها شده بود.

نسخه‌های XHTML

XHTML یک زبان جداگانه است که به شکل فرمول بندی دوباره HTML 4.01 خود را نشان می‌دهد و از XML1.0 استفاده نموده ‌است. اما به عنوان یک استاندارد جداگانه نمی‌توان از آن نام برد.

XHTML 1.0 در ۲۶ ژانویه ۲۰۰۰ انتشار یافت که به عنوان توصیهٔ W3C از آن نام بده شد و پس از آن دوباره اصلاح شد و انتشار دوبارهٔ آن در اول اوت ۲۰۰۲ بود که در آن از سه نسخهٔ یکسان به عنوان HTML 4.0 و ۴٫۰۱ استفاده شد و فرمول بندی دوبارهٔ آن در XML با محدودیت‌های خاص در نظر گرفته شد.

XHTML 1.1 در ۳۱ می ۲۰۰۱ انتشار یافت که توصیهٔ W3C محسوب شد. مبنای آن XHTML 1.0 بود ولی تغییرات اندکی در آن اعمال شده بود و فرمول بندی آن از ساختارهای تعدیل شده XHTML استفاده کرده بود که در ۱۰ آوریل ۲۰۰۱ انتشار یافته بود و توصیه W3C محسوب می‌گردید.

XHTML 2.0 یک نسخه پیش نویس کاری بود ولی در ۲۰۰۹ انتشار یافت که برای کارکرد مطلوب HTML5, XHTML5 بود. XHTML2.0 ناسازگاری‌هایی با XHTML1.X داشت و در نتیجه به شکل زبان جدید XHTML درآمد تا اینکه به روزرسانی آن تا XHTML 1.X صورت گیرد .

XHTML Syntax را می‌توان به عنوان XHTML5.1 دانست که بر اساس آن HTML5 در پیش نویس HTML5 تعریف شده بود .

نسخه های HTML

HTML 1.0 :

اولین نسخه از HTML در سال 1991 به بازار معرفی شد که در قالب نوشتاری و ارئه مطالب بسیار محدود بود. که تنها در آن 18 برچسب HTML وجود داشت.

HTML 2.0:

نسخه دوم HTML در سال 1995 به بازار معرفی شد و اولین نسخه استاندارد شده توسط توسط بنیاد IETF بود. در این نسخه تمام ویژگی های نسخه قبل پشتیبانی می شد اما چند ویژگی جدید به آن اضافه شده بود و بسیاری از ویژگی های اصلی اچ‌تی‌ام‌ال را برای اولین بار تعریف کرد.

HTML 3.2:

به منظور استاندارد شدن زبان های نرم افزاری لازم برای وب ، کنسرسیوم جهانی وب ( به اختصار W3C ) در سال 1994 تاسیس شد. ریاست این شرکت به دست برنز-لی است. اولین کار آنها به نام WILBUR بود که بعد ها به عنوان HTML 3.2 شناخته شد. این نسخه در ماه ژانویه 1997 همراه با CSS ارائه شد . معرفی HTML با CSS یک انقلاب بزرگ در دنیای HTML به شمار می رفت و امروزه تمام مرورگر ها از آن به طور کامل پشتیبانی می کنند.

HTML 4.01:

در بیست و چهارم دسامبر سال 1999 این نسخه  توسط W3C به صورت رسمی ارائه شد. برای رفع برخی از مشکلات که در نسخه های قبل به وجود آمده بود این نسخه از اچ‌تی‌ام‌ال ارائه شد. HTML 4.01 یک تحول و تغییر عمده و تکامل زیادی نسبت به نسخه های استاندارد قبلی با خود به همراه داشت از جمله این تغییرات می توان به اضافه شدن تنظیمات بیشتر برای مالتی مدیا ، امکاناتی برای بهتر اجرا کردن CSS ، جای دادن زبان های اسکریپتی و به کارگیری جداول اشاره کرد.

XHTML: 

W3C در اوایل قرن بیستم نسخه XHTML را به بازار معرفی کرد. W3C در تاریخ 26 ژانویه 2000 آن را به عنوان استاندارد مشترک با HTML 4.01 معرفی می کند. در واقع XHTML یک زبان جداگانه است که به شکل فرمول بندی شده HTML 4.01 خود را نشان می دهد. با ظهور این نسخه از اچ‌تی‌ام‌ال دست طراحان وب به مراتب بازتر شد تا بتوانند وب سایت های بهتری به نمایش بگذارند. این استاندارد تفاوت های قابل توجهی نسبت به نگارش های قبلی داشت. مهم ترین تفاوت سخت گیرانه بودن XHTML در مقایسه به HTML است . و تمامی محدودیت های ایجاد شده با ورود XHTML باعث شد تا توجه همگانی روبه آن کاهش یابد و تمایل به استفاده از استاندارد جدید و منعطف HTML5 افزایش یابد.

HTML5:

در سال 2014 اخرین نسخه HTML ، با نام HTML5 به دنیای وب معرفی شد که همچنان این نسخه در حال توسعه است. عناصر و ویژگی های به کار رفته در این نسخه بی نظیر است. یکی از ویژگی های مهم  HTML5 مشخص نمودن نوع محتوا است که می تواند تحولی عظیم برای موتور های جستجو و ایندکس شدن مطالب باشد. برخی از عناصر جدید به کار رفته در HTML5 :

عناصر معنایی : <header> ،<footer> ،<article> و <section>

عناصر گرافیکی : <svg> و <canvas>

عناصر چند رسانه ای  : <audio> و <video>

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

منبع : https://zefa.ir/history-of-html-language-a-language-for-text-markup/

افرونه ویژوال کامپوزر چیست؟ معرفی کامل ویژگی های آن

افرونه ویژوال کامپوزر چیست؟ معرفی کامل ویژگی های آن

اگر با وردپرس آشنا باشید می دانید که یکی از بهترین امکانات آن ساخت صفحات وب سایت بدون کدنویسی است. پلاگین های متنوعی ارائه شده که برخی اختصاصا برای هر قالب طراحی شده و برخی دیگر به صورت عمومی و سازگار با اکثر قالب های وردپرسی در دسترس هستند. از بین همه افزونه های صفحه ساز (page builder plugin) المنتور با  ۵۰۰۰۰۰۰ نصب فعال از نسخه رایگان و ویژوال کامپوزر با ۴۰۰۰۰۰ خرید موفق پرفروش ترین آنها هستند. در ادامه این مقاله از فناوری اطلاعات زیفا به بررسی هر دو افزونه صفحه ساز elementor و wpbakery page builder می پردازیم.

معرفی افزونه ویژوال کامپوزر

افزونه WPBakery یا ویژوال کامپوزر نسخه  ۶.۵.۰ پرفروش ترین افزونه سایت codecanyon که نزدیک به ۴۰۰ هزار فروش داشته و در بیش از ۲ میلیون سایت وردپرسی فعال شده است!

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

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

ویژگی های بارز افزونه visual composer

• WordPress Post Editor به کاربران اجازه می دهد پست های خود را در وب سایتشان ویرایش نمایند و آنها را به هر شکل و فرمی که می خواهند در آورند. برای مثال در این بخش افراد می توانند بخشی از متن خود را بولد و یا ایتالیک کنند، لینک ها و تصاویری را به متن بیفزایند، لیست هایی در متن خود ایجاد کنند و کارهای مشابه دیگری انجام دهند. با استفاده از پلاگین ویژوال کامپوزر کاربران می توانند تمامی کارهای مربوط به ویرایش صفحه را با درگ اند دراپ انجام دهند، درواقع این پلاگین به کاربران امکان ایجاد صفحات بسیار حرفه ای در وب سایت بدون کد نویسی و تنها با درگ اند دراپ کردن را می دهد و این پلاگین امکان انجام تمامی فرایند های ویرایش و ایجاد صفحه را با استفاده از پلتفرمی که برای کاربر کاملا ویژوال یا بصری است ایجاد می کند.
• ویژوال کامپوزر برای کاربران امکان ایجاد صفحات بسیار منحصر به فردی را با استفاده از بلوک های سازنده محتوا، فراهم می کند. برخی از پلاگین هایی که مانند ویژوال کامپوزر پیج بیلدر هستند، از بلوک های سازنده با نام ماژول ها و برخی با نام ویجت ها یاد می کنند، اما ویژوال کامپوزر آنها را المان های محتوا می نامد. المان های محتوا بلوک هایی سازنده محتوا هستند که می توان آنها را به صورت درگ اند دراپ در هر قسمتی از صفحه مورد نظر قرار داد.
• بیش از ۴۰ المان محتوا در ویژوال کامپوزر وجود دارد، این المان ها شامل بلوک های متنی، کلید های شبکه های اجتماعی، ویدیو پلیرها و بسیاری المان های مشابه دیگر می باشند. تمامی این المان ها محتوا ریسپانسیو هستند و لذا استفاده از آنها موجب می شود که صفحه شما در صفحات دسکتاپ، تبلت ها و موبایل و هر وسیله دیگری که کاربران برای مراجعه به وب سایت شما از آن استفاده نموده باشند، به خوبی نمایش داده شود. علاوه بر این بسیاری از این المان های محتوایی قابلیت تنظیم شدن دارند و می توان برخی تنظیمات دلخواه خود را در آن ها وارد نمود.
• پیچ بیلدرهای مختلفی که عملکرد آنها به صورت درگ اند دراپ است به کاربران این امکان را می دهند که تنظیمان و اصلاحات مد نظر خود را در Backend و یا در Frontend انجام دهند، اما قابلیت ویژه ای در ویژوال کامپوزر وجود دارد که موجب می شود با استفاده از آن بتوان اصلاحات خود را هم در Backend و هم در Frontend انجام داد و انتخاب آن کاملا بسته به سلیقه و خواسته کاربر است. مانند تمامی پیج بیلدر های دیگر در ویژوال کامپوزر نیز این امکان استفاده از هر قالب وردپرسی وجود دارد.
• علاوه بر این ویژوال کامپوزر از تمامی زبان های پشتیبانی می کند و با پلاگین ترجمه وردپرس یا qTranslate سازگاری دارد.

• به طور خلاصه ویژوال کامپوزر دارای ویژگی های ریز می باشد 

1. طراحی کاربری بسیار آسان
2. عدم نیاز به کدنویسی
3. طراحی ریسپانسیو و واکنش‌­گرا
4. قابلیت ویرایشگر Drag & Drop المان­‌ها
5. دارای بیش از 40 المان طراحی
6. قابلیت پیش نمایش سریع
7. قابلیت ایجاد اسلایدرهای جذاب و کاربرپسند
8. پشتیبانی از زبان فارسی
9. سازگار با اکثر قالب­‌های وردپرسی
10. سازگاری با افزونه ووکامرس
11. قابلیت ایجاد و دسترسی شورت کدها
12. قابلیت افزودن سطر و ستون­‌های دلخواه

چگونه صفحات وب سایت خود را با استفاده از ویژوال کامپوزر طراحی نماییم؟

زمانی که نصب و فعال سازی پلاگین ویژوال کامپوزر به پایان رسید. شما خواهید دید که دو کلید جدید بر روی Post Editor شما ظاهر می شود.یکی از این کلید ها برای شما این امکان را فراهم می کند که ویرایش صفحات خود را در Backend انجام دهید و دیگری امکان ویرایش صفحات در Frontend را برای شما فراهم می آورد، برای آنکه شما از امکان ویرایش صفحه در Backend استفاده کنید باید کلید Backend Editor را کلیک کنید. و برای آنکه از امکان ویرایش در Frontend استفاده کنید باید کلید Frontend Editor را کلیک کنید.

ظاهر شدن این دو کلید اضافه در بخش Post Editor برای شما این امکان را فراهم می کند که از میان ویرایشگر مود کلاسیک یا همان ویرایشگر پیش فرض ورد پرس، ویرایشگر Backend و ویرایشگر Frontend ویژوال کامپوزر یکی را انتخاب نمایید.اگر بر روی کلید Backend Editor کلیک کنید خواهید دید که ادیتور پیش فرض ورد پرس شما به Backend Editor ویژوال کامپوزر تغییر می یابد.

چهار کلید در بالای رابط کاربری ویرایشگر Backend ویژوال کامپوزر وجود دارد، کلیدی که بر روی آن علامت “+” وجود دارد برای شما این امکان را فراهم می کند که یک المان محتوای جدید اضافه کنید. کلید خاکستری رنگی که بر روی آن یک علامت “T” به رنگ سفید نمایش داده شده است تمپلیت باکس را برای شما بارگذاری می کند و کلیدی که بر روی آن علامت چرخ دنده وجود دارد، باکس CSS را برای شما بارگذاری می نماید که به شما این امکان را می دهد که کلاس های CSS مورد نظر خود را برای آن صفحه تعیین نمایید. آخرین کلیدی که در این صفحه وجود دارد شما را به ویرایشگر Frontend هدایت می کند.

زمانی که شما برای بار اول وارد ادیتور Backend ویژوال کامپوزر می شوید، یک صفحه خوش آمد گویی یا Welcome page برای شما نمایش داده می شود که در آن میانبرهایی برای دسترسی به گزینه های بسیار پر استفاده ای که معمولا افراد آنها را مورد استفاده قرار می دهند وجود دارد. این میان بر ها شامل میان بر اضافه کردن المان های جدید، میان بر اضافه کردن یک Text Block یا بلوک متنی (بلوک متنی یکی از المان های محتوای موجود در ویژوال کامپوزر می باشد) و همچنین میان بر انتخاب صفحه بندی (Layout) مناسب و دلخواه برای محتوای شما می باشد.

اگر شما بر روی کلیدی که علامت “+” بر روی آن قرار دارد کلیک کنید خواهید دید که صفحه Element Box یا جعبه المان ها که شامل المان های صفحه آرایی می باشد، برای شما نمایش داده می شود. در حالت پیش فرض تمامی المان ها نمایش داده می شوند اما این امکان نیز برای شما وجود دارد که با استفاده از گزینه های بالای صفحه تنها المان های مشخصی را انتخاب کنید تا تنها همان المان ها در صفحه شما نمایش داده شوند. با استفاده از این گزینه های شما می توانید انتخاب کنید که تنها یکی از مجموعه المان های Social، Structure، WordPress Widgets و یا Content نمایش داده شوند.

در ابتدای این مقاله ذکر کردم که در ویژوال کامپوزر بیش از ۴۰ المان محتوا وجود دارد. اگر بخواهیم یک گروه بندی کلی از این المان ها ایجاد کنیم باید بگوییم که ۱۲ نمونه از المان موجود در لیست المان های محتوای ویژوال کامپوزر، ویجت های وردپرس می باشند، ۲۵ تا از آنها المان های محتوای مجزا می باشند، ۴ تا از المان ها مربوط به شبکه های اجتماعی بوده و ۳ المان ساختاری در میان این المان ها موجود می باشد. در ورژن کنونی ویژوال کامپوزر ۴۴ المان محتوا موجود می باشد.

اولین المان محتوای موجود در صفحه المان های محتوا Row می باشد که برای تنظیم سطرهای در یک صفحه به کار می رود. سطر در واقع مهم ترین المان هر صفحه است زیرا ستون ها، صفحه بندی ها و تمامی محتواهای صفحه درون سطرها قرار می گیرند. در المان محتوای Row می توان سطر ها را اضافه نمود، حذف کرد، ویرایش کرد و بسیاری کارهای مشابه دیگر انجام داد.

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

المان Text Block برای شما این امکان را فراهم می کند که با استفاده از ویرایشگر ویژوال ورد پرس، محتوایی را درون صفحه خود اضافه نمایید.

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

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

اگر شما در المان row بر روی کلیدی که علامت “+” بر روی آن قرار دارد کلیک کنید می توانید یک سطر به صفحه خود اضافه نمایید و سپس با استفاده از آپشنی که در زیر کلید “+” قرار دارد، خواهید توانست تعداد ستون ها و حجم هر یک را در این سطر تعیین کنید. در این آپشن ۱۱ نوع مختلف از صفحه آرایی ها (layouts) یا چینش ستون ها در یک سطر به صورت از پیش آماده شده وجود دارد، که شما می توانید بسته به سلیقه خود هریک از آنها را انتخاب نمایید.

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

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

البته شما با استفاده از CSS های رایج موجود نیز می توانید سطرها و ستون های صفحه خود را به خوبی فرم دهی کنید.

شما می توانید سایز نوارهای مرزی، حاشیه ها، حد فاصل خطوط و بسیاری از موارد مشابه را در سربرگ Designing Option درون بخش تنظیمات ستون ها (Column Settings) تعیین نمایید. در همین سربرگ شما می توانید همچنین رنگ کادرها ، حاشیه ها و زمینه تصویر را تغییر دهید، علاوه بر این شما می توایند شکل و فرم کاردها را نیز تغییر دهید. برای مثال شما می توانید از یک کادر ساده که دارای خطوط ممتد است استفاده کنید، و یا از کادری استفاده کنید که به جای خطوط ممتد در آن نقاط پشت سر هم با فواصل منظم و یا خط تیره هایی با فواصل منظم در میان آنها استفاده نمایید.

در سربرگ Design Options تمامی امکانات مورد نیاز برای ویرایش حاشیه ها، کادرها و رنگ های آنها و سایر مسائل مربوط به آنها وجود دارد.

در بخش تنظیمات ستون ها یا Column Settings سربرگ دیگری نیز با نام Widths and responsiveness وجود دارد، که تمامی تنظیمات موجود در آن مختص ستون ها بوده و برای سطر ها قابل اعمال نمی باشد زیرا این تنظیمات معمولا به صورت اتوماتیک برای سطرها انجام می گیرد و لذا نیازی به انجام دادن آنها به صورت دستی نمی باشد.

شما می توانید در بخش Widths and responsiveness تعیین کنید که امکان کاهش پهنای ستون ها به یک دوازدهم پهنای صفحه وجود داشته باشد در این صورت پهنای ستون ها متناسب با اندازه صفحه نمایش دستگاهی که کاربر برای جستجو در وب سایت شما استفاده می نماید تغییر می کند. با این کار شما مطمئن خواهید شد که زمانی که کاربران تلفن های همراه به وب سایت شما مراجعه می نمایند نیاز به زوم کردن صفحه و استفاده مکرر از اسکرول برای مشاهده مطالب درون صفحه شما ندارند. برای تعیین پهنای ستون ها می توانید به باکس تنظیمات ستون ها یا Column Setting Box مراجعه نمایید.

در صفحه اصلی رابط کاربری ویژوال کامپوزر همان طور که پیشتر نیز به آن اشاره شد کلیدی وجود دارد به رنگ طوسی که بر آن حرف “T” که مخفف Template است نوشته شده است. به این کلید آیکون تمپلیت گفته می شود. اگر شما بر روی این کلید کلیک نمایید باکس تمپلیت ها برای شما نمایش داده می شود. در این صفحه شما می توانید صفحه آرایی یا تمپلیت که برای یکی از صفحات خود ایجاد نموده اید به صورت یک تمپلیت مجزا ذخیره نمایید تا بتوانید آن را بر روی دیگر صفحات وب سایت خود اعمال کنید.

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

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

من به شما پیشنها می کنم که در ابتدای کار خود با ویژوال کامپوزر حتما از این تمپلیت ها استفاده کنید زیرا این تمپلیت های پیش فرض به شما کمک می کنند که درک درستی از افزونه ویژوال کامپوزر و امکانات آن بدست آورید. شما می توانید این تمپلیت های پیش فرض را نیز در لیست صفحه آرایی ها و یا تمپلیت های خودتان (My templates) ذخیره نمایید.

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

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

ویرایشگر Frontend ویژوال کامپوزر

همان طور که شما دوستان می دانید، ویرایشگر Frontend به شما این امکان را می دهد که صفحات در حال اجرای وب سایت خود را ویرایش نمایید.

برای آنکه از ویرایشگر Backend ویژوال کامپوزر به ویرایشگر Frontend آن سوییچ کنید باید بر روی کلید Frontend Editor در بالای صفحه و در بخش Post Editor کلیک نمایید. به خاطر داشته باشید که پیش از آنکه از حالت ویرایشگر Backend به ویرایشگر Frontend سوییچ کنید و یا بالعکس، حتما تغییرات و ویرایش هایی که انجام داده اید را ذخیره کنید، در صورت عدم ذخیره سازی ویرایش ها تمامی تغییرات ایجاد شده توسط شما به حالت اولیه باز می گردند و وقت و زحمات شما تلف می شود.

از نظر من ویرایشگر Backend بیشتر برای ایجاد ساختار صفحات و ایجاد تغییرات ساختاری در وب سایت مناسب می باشد و ویرایشگر Frontend بیشتر برای ایجاد تغییرات جزیی در وب سایت مناسب است. البته بسیاری از کاربران ورد پرس ترجیح می دهند که تمامی ویرایش های خود را در ویرایشگر Backend انجام دهند و بسیاری دیگر دوست دارند که تمامی کارهای ویرایشی را در ویرایشگر Frontend انجام دهند و این مساله کاملا به سلیقه شخصی آنها وابسته می باشد.

در ویرایشگر Frontend ویژوال کمپرسور شما با کلیک کردن بر روی Content Block یا بلوک محتوا، همان گزینه هایی را مشاهده خواهید نمود که در ویرایشگر Backend ویژوال کامپوزر آنها را مشاهده نموده بودید. این گزینه ها شامل گزینه ای برای ایجاد سطر های جدید، گزینه ای برای ایجاد ستون های جدید، گزینه هایی برای ویرایش سطر ها و ستون ها و گزینه های برای حذف آنها و … می باشد.

در بالای صفحه ویرایشگر Frontend ویژوال کمپرسور شما کلید های مشابهی با آنچه در ویرایشگر Backend مشاهده نموده بودید وجود دارد، کلیدی با علامت “+” بر روی آن که برای اضافه کردن المان محتوای جدید استفاده می شود، کلیدی با علامت “T” بر روی آن که برای بار گذاری تمپلیت های پیش فرض استفاده می شود، کلیدی با علامت چرخ دنده که برای ایجاد تغییرات در تنظیمات می توان از آن استفاده نمود. علاوه بر کلید های نام برده کلید های دیگری نیز در بالای صفحه ویرایشگر Frontend ویژوال کمپرسور وجود دارد، یکی از کلید ها که عبارت “Save Draft” بر روی آن حک شده است برای ذخیره پیش نویس ها و دیگری که عبارت “Publish” بر روی آن حک شده برای انتشار محتوای ایجاد شده کاربرد دارد و در کنار تمامی این کلید ها کلیدی برای سوییچ کردن به ویرایشگر Backend نیز موجود می باشد.

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

علاوه بر تمامی کلید های نام برده، کلید دیگری در بالای رابط کاربری ویرایشگر Frontend ویژوال کامپوزر وجود دارد که بر روی آن عبارت “Guides ON” حک شده است، شما می توانید با فشردن این کلید ببینید که صفحه شما بدون اعمال تغییرات ایجاد شده با استفاده از المان های محتوای ویژوال کامپوزر به چه شکل بوده است. در واقع این کلید تمامی اقدامات انجام شده شما در جهت ویرایش صفحه با استفاده از ویژوال کامپوزر را می تواند غیر فعال کند تا شما بررسی کنید که پیش از اعمال تغییرات صفحات شما به چه شکل بوده اند.

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

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

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

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

محیط تنظیمات ویژوال کامپوزر دارای ۵ زبانه مجزا می باشد که در ادامه هریک از آنها را به صورت مجزا برای شما توضیح خواهم داد.

1. زبانه اول که Home نام دارد امکان انجام تنظیمات عمومی و کلی را به کاربران می دهد.در بالای صفحه آپشنی وجود دارد که به شما این امکان را می دهد که نوع پست هایی که می خواهید ویژوال کامپوزر بر روی آن ها قابل استفاده باشد را انتخاب نمایید. در واقع در این بخش شما می توانید ویژوال کامپوزر را در بخش های مختلف وب سایت خود فعال یا غیر فعال نمایید.
   یکی از بهترین آپشن های موجود در این صفحه رول ادیتور می باشد، با استفاده از این آپشن شما می توانید انتخاب کنید که هر یک از گروه های مختلف یوزرهای وب سایت، از کدامیک از ادیتورهای وب سایت بتوانند استفاده نمایند. برای مثال اگر شما در وب سایت خود علاوه بر ویرایشگر وردپرس ویرایشگر ویژوال کامپوزر را نیز داشته باشید، شما می توانید با استفاده از آپشن رول ادیتور امکان استفاده از تنها یکی از ادیتورها را به ادمینستریتورها یا مدیران وب سایت خود بدهید یا امکان استفاده از هر دو ویرایشگر را برای مدیران وب سایت آزاد کنید.
   در این بخش یک قابلیت منحصر به فرد دیگر نیز وجود دارد، شما می توانید در رول ادیتور امکان استفاده از برخی المان های محتوا را برای بعضی از گروه های مختلف یوزرهای سایت محدود نمایید. این امکان زمانی برای شما مفید خواهد بود که بخواهید برخی از گروه های یوزرهای وب سایت تنها به المان های محتوای مشخصی دسترسی داشته باشند و امکان استفاده از دیگر المان ها برای آنها مقدور نباشد.
2. زبانه دوم در صفحه تنظیمات ویژوال کامپوزر به شما امکان تنظیم رنگبندی المان های محتوای ویژوال کامپوزر را می دهد. علاوه بر رنگ بندی در این زبانه شما می توانید فاصله مابین المان ها در حاشیه پایینی آنها را نیز تغییر دهید و آنها را به هم نزدیکتر و یا از هم دورتر کنید و همچنین سایز صفحه ویژوال کامپوزر را برای استفاده از آن در تلفن های همراه تنظیم نمایید.
3. زبانه سوم در این صفحه تنظیمات به شما امکان استفاده از کد ها و کلاس های CSS مختلف برای ایجاد تنظیمات در ویژوال کامپوزر را می دهد. شما می توانید کدها و کلا های CSS مورد نظر خود را در این بخش وارد نمایید و سپس برای شکل دهی المان های محتوا در ویژوال کامپوزر آنها را فراخوانی نمایید.
4. در زبانه چهارم در تنظیمات ویژوال کامپوزر شما می توانید اطلاعات مربوط به لایسنس خود را در آن وارد کنید تا هر زمانی که ورژن جدید و قابلیت های جدیدی از ویژوال کامپوزر ایجاد شد، پلاگین شما به صورت اتوماتیک آپدیت شود. علاوه بر این وارد کردن اطلاعات لایسنس موجب می شود که شما بتوانید از پشتیبانی های کمپانی تولید کننده این پلاگین استفاده نمایید. بسیاری از توسعه دهندگان نرم افزارهای مختلف، برای جلوگیری از استفاده غیر مجاز از نرم افزارشان چنین گزینه ای را در نرم افزارهای خود ایجاد می کنند که کاربران برای استفاده همه جانبه از نرم افزار نیازمند یک لایسنس باشند.
5. در زبانه پنجم که آخرین زبانه موجود در صفحه تنظیمات ویژوال کامپوزر می باشد، شما می توانید کدهای اضافه ای را از دیگر پلاگین ها به ویژوال کامپوزر اضافه نمایید، این کار موجب می شود که شما بتوانید المان های محتوای دیگری بجز آنهایی که در ویژوال کامپوزر موجود هستند را در میان المان های محتوای ویژوال کامپوزر خود اضافه کنید و کارایی های آن را افزایش دهید.

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

نگاهی اجمالی به قابلیت های ویژوال کامپوزر

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

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

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

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

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

نقاط ضعف ویژوال کامپوزر

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

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

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

البته در این ابزار یک المان محتوای ستون فرعی( Widgetized Widgetized sidebar) وجود دارد که برای کاربران تا حدودی استفاده از ویجت های ورد پرس را فراهم می کند. در تئوری این طور به نظر می رسد که این المان محتوای ستون فرعی Widgetized برای کاربران امکان استفاده از ویجت ها را فراهم می نماید اما در عمل استفاده از آن تا حدی مشکل و زمان بر است که کاربران کمتر ممکن است از آن استفاده کنند.

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

برای مثال شما فرض کنید که یک وب سایت با ۱۰۰ صفحه مجزا دارید و می خواهید در ۲۵ نمونه از این صفحات ویجت های مورد نظر خود را اضافه نمایید، اگر شما برای این کار از ویژوال کامپوزر استفاده کنید، ملزم به ایجاد ۲۵ ساید بار مجزا برای هر یک از ۲۵ صفحه مورد نظر خود خواهید بود. در عوض اگر شما از سایر پلاگین های پیج بیلدر برای این کار استفاده نمایید خواهید توانست تنها با درگ اند دراپ کردن، ویجت های مورد نظر خود را به محیط صفحات خود اضافه نمایید.امید است که WP Bakery این مساله را در آینده نزدیک حل کند و امکان اضافه کردن ویجت ها به صورت مستقیم در صفحات را برای کاربران ویژوال کامپوزر فراهم نماید.

مقایسه

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

• هزینه ها

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

برای مثال پلاگین پیج بیلدر Velocity Page امکانات کمتری نسبت به ویژوال کامپوزر دارد و از لحاظ قابلیت ها و امکاناتی که به کاربران ارائه می دهند این پلاگین ها قابل مقایسه نمی باشند، با این حال هزینه استفاده از این ابزار اگر تنها کاربر بخواهد آن را بر روی یک وب سایت استفاده نماید ۹۷ دلار، اگر کاربر بخواهد آن را بر روی سه وب سایت مجزا استفاده کند ۱۶۷ دلار و اگر کاربر بخواهد آن را بر روی تعداد نامحدودی از وب سایت ها استفاده نماید ۲۴۷ دلار می باشد. یکی دیگر از پیج بیلدر های مشابه که Beaver Builder نام دارد نیز هزینه هایی مشابه با لیست قیمت های گفته شده در بالا دارد.

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

• قابلیت ها

ویژوال کامپوزر تنها پیج بیلدری است که به کاربران امکان ویرایش صفحات هم در Backend و هم در Frontend را می دهد. این مساله یکی از بزرگترین نقاط قوت این پلاگین است و موجب برتری این ابزار به بسیاری پیج بیلدرهای دارای قابلیت درگ اند دراپ مشابه می شود و موجب می شود که کاربران زیادی استفاده از این ابزار را به سایر ابزارهای مشابه موجود ترجیح بدهند.

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

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

• زیبایی رابط کاربری

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

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

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

• کاربردی بودن

رابط کاربری ویژوال کامپوزر هم در ویرایشگر Backend و هم در ویرایشگر Frontend بسیار ساده می باشد و استفاده از آن برای کاربران حتی در دفعه اول مراجعه هم کار مشکلی نمی باشد. اکثر کاربران در کمتر از ۱۵ دقیقه یاد میگیرند که چگونه المان های محتوا را استفاده کنند و آنها را بر روی سطر ها و ستون های صفحه ای که ایجاد نموده اند پیاده سازی نمایند.

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

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

• پشتیبانی

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

نیازی نیست که شما نگران آن باشید که چگونه باید از این ابزار استفاد کنید و یا برای یادگیری آن باید از چه منبعی استفاده نمایید. یک مجموعه آموزشی کامل برای استفاده از این ابزار در وب سایت WP Bakery موجود است که شما می توانید با مراجعه به آن گام به گام با یادگیری این ابزار پیش بروید. اگر با مساله یا مشکلی در حین استفاده از ابزار مواجه شدید و یا سوالی برای شما پیش آمد شما می توانید با سوالات خود را از طریق گذاشتن یاد داشت در Help Center با توسعه دهندگان این پلاگین مطرح نمایید و یا می توانید از طریق گذاشتن کامنت در CodeCanyon مسائل خود را توسعه دهندگان در میان بگذارید.

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

• سرعت

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

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

سخن پایانی

در بازار شلوغ پیج بیلدرهای درگ اند دراپ، ویژوال کامپوزر یکی از بهترین و پرطرفدارترین پیج بیلدرها می باشد و بیشترین امکانات و خدمات را به کاربران ورد پرس ارائه می نماید. استفاده از رابط کاربری این ابزار بسیار ساده بوده و المان های محتوای موجود در آن بسیار جذاب می باشند. این ابزار همچنین به شما امکان ویرایش صفحات هم در Backend و هم در Frontend را می دهد.

تنها زمینه ای که این ابزار نسبت به ابزارهای مشابه با آن دارای عملکرد ضعیف تری می باشد مساله عدم عملکرد قوی این ابزار در زمینه اضافه کردن ویجت های ورد پرس در آن است. سایر پیج بیلدرهای درگ اند دراپ مشابه مثل : MiniMax و Aqua Page Bilder در زمینه اضافه کردن ویجت های ورد پرس عملکرد منعطف تری نسبت به ویژوال کامپوزر دارند و به کاربران این امکان را می دهند که ویجت های مورد نظر خود را به سادگی به صفحات بیفزایند.

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

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

منبع : https://zefa.ir/what-is-a-visual-composer-full-introduction-of-its-features-and-comparison-with-other-a/