به سئو روز خوش آمدید

آموزش جامع و کامل کار با افزونه ویژوال کامپوزر

۰۲ خرداد
۱۳۹۶
آموزش کامل کار با افزونه ویژوال کامپوزر

ویژوال کامپوزر visual composer یک پلاگین پیج بیلدر بسیار محبوب در میان تمامی کاربران وردپرس می باشد که نرخ فروش و استفاده از آن در سراسر دنیا از تمامی پیج بیلدرهای دیگر که دارای عملکرد مشابهی هستند، با اختلاف چشم گیری بیشتر می باشد. این پیج بیلدر که عملکرد آن به صورت درگ اند دراپ می باشد دارای یک ویژوگی منحصر به فرد بوده که موجب شده است کاربران بسیاری استفاده از آن را به سایر پیج بیلدرهای ترجیح دهند، این ویژگی منحصر به فرد فراهم نمودن امکان ویرایش صفحات هم در Backend و هم در Frontend برای کاربران می باشد. پیج بیلدرهای بسیاری برای ورد پرس وجود دارند که عملکرد آنها به صورت درگ اند دراپ می باشد اما هیچ یک از آنها امکان ویرایش هم در Backend و هم در Frontend را برای کاربران فراهم نمی کنند و این ویژگی فقط و فقط مختص ویژوال کامپوزر می باشد.
هدف توسعه دهندگان ویژوال کامپوزر از ایجاد این پلاگین سرعت بخشیدن و بهبود فرایند کار کاربران در وردپرس بوده است، خواه این کار ایجاد صفحات لندینگ باشد، خواه ایجاد پست های وبلاگ باشد و خواه ایجاد صفحات Call To Action یا هر صفحه دیگر، ویژوال کامپوزر می تواند برای انجام این کارها سرعت و کیفیت را چاشنی کار کاربران نماید.
استفاده از ویژوال کامپوزر می تواند یک فرصت استثنایی برای مبتدیان ایجاد نماید مخصوصا برای آنها که با کد نویسی آشنایی چندانی ندارند اما می خواهند در زمان کوتاهی، وب سایت قوی و باکیفیتی ایجاد نمایند. استفاده از ویژوال کامپوزر موجب می شود که کاربران ورد پرس بتوانند وقت و انرژی کمتری صرف ایجاد صفحات وب سایت کنند و در عین حال صفحات با کیفیت تری ایجاد نمایند. ویژوال کامپوزر المان های محتوای متنوعی دارد و می تواند بر روی هرگونه محتوایی که کاربران بخواهند امکان ویرایش را برای آنها فراهم نماید. این پلاگین کامپوزر شامل تمپلیت های آماده برای ایجاد صفحات می باشد و آن دسته از کاربرانی که قادر به ایجاد تمپلیت برای صفحات وب سایت خود نمی باشند می توانند از این تمپلیت های آماده استفاده نمایند و محتوای مورد نظر خود را درون آنها قرار دهند.
تا اینجا ما توضیحات مختصری درباره پلاگین ویژوال کامپوزر برای شما آوردیم و مقدمه ای از آن را به شما کاربران عزیز ارائه نمودیم. در ادامه این مجموعه ما قصد داریم تا شما را گام به گام در مسیر یادگیری کار با ویژوال کامپوزر راهنمایی و همراهی نماییم.که البته در مطلب قبل توضیحی درباره اینکه ویژوال کامپوزر چیست مروری کرده بودیم .
این مجموعه شامل بخش های مختلفی از جمله نصب و راه اندازی ویژوال کامپوزر، کار با ویرایشگر Frontend در ویژوال کامپوزر، کار با ویرایشگر Backend در ویژوال کامپوزر، ایجاد تنظیمات و شخصی سازی ها و بسیاری بخش های دیگر می باشد. اگر شما به دنبال یک مجموعه آموزشی هستید که تمامی بخش های مختلف ویژوال کامپوزر را به صورت مجزا برای شما آموزش دهد و شما را با صفر تا صد کار با این پلاگین آشنا نماید، ما شما عزیزان را دعوت می نماییم که تا انتها این مجموعه با ما همراه باشید.

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

برای آنکه بتوانید از این پلاگین استفاده کنید ابتدا باید آخرین نسخه آن را خریداری نموده و هزینه ای برای آن پرداخت کنید و سپس آن را دانلود نمایید. دقت داشته باشید که شما عزیزانی که نسخه های رایگان این ابزار را که در وب سایت های ایرانی موجود می باشد دانلود می نمایید و هیچ هزینه ای بابت استفاده از آن پرداخت نمی کنید ممکن است با مشکلاتی از قبیل عدم بروز رسانی آن مواجه شوید. در صورتی که شما نسخه منسوخ شده ای از این پلاگین را نصب نمایید ممکن است وب سایت شما در معرض خطراتی همچون احتمال هک شدن قرار بگیرد و اگر شما می خواهید هزینه ای را برای خرید آن پرداخت نکنید باید دائما چک کنید که آیا نسخه جدیدی از آن به بازار آمده است یا خیر و به مجرد آنکه نسخه جدیدی از آن عرضه گردید سریعا آن را دانلود کرده و نصب نمایید. بهتر است که شما آخرین ورژن این ابزار را از سایت رسمی آن خریداری نموده تا از کیفیت و امنیت آن مطمئن باشید. این پلاگین قیمت چندانی ندارد و هزینه خرید آن چیزی حدود ۳۴ دلار می باشد که در برابر احتمال خطراتی که ممکن است در اثر استفاده از نسخه رایگان آن برای وب سایت شما پیش بیاید بسیار ناچیز می باشد.
پس از دانلود فایل ویژوال کامپوزر شما باید آن را اکسترکت نمایید، سپس درون آن فایل زیپی با نام “js_composer” مشاهده خواهید نمود، این فایل را به صورت درگ اند دراپ به روی دسکتاپ منتقل کنید و سپس وارد پنل ادمین وب سایت خود شوید و مسیر زیر را طی کنید:
Plugins -> Add Plugin (Add New)
حال بر روی Upload Plugin کلیک کنید و فایل “js_composer” را انتخاب کنید و بر روی دکمه Open کلیک نمایید. سپس بر روی گزینه Install Now کلیک کرده و منتظر بمانید تا پلاگین ویژوال کامپوزر نصب گردد.
فعال سازی با استفاده از لایسنس
برای فعال سازی لایسنس ویژوال کامپوزر شما ابتدا باید به codecanyon.net/downloads بروید، سپس به بخشی که در آن فایل های مربوط به ویژوال کامپوزر موجود می باشند مراجعه نمایید. سپس بر روی دکمه Download کلیک کنید و گزینه “License certificate & certificate code” را انتخاب نمایید. (ممکن است به جای این گزینه گزینه ای با نام “License certificate & certificate code” وجود داشته باشد). دو گزینه با نام مشابه وجود دارد که شما باید گزینه ای که جلوی آن داخل پرانتز عبارت “text” نوشته شده است را انتخاب و دانلود نمایید. سپس این فایل را باز کنید و Item Purchase Code یا کد خرید محصول را در آن بیابید.
حال شما باید یک Secret API Code یا کد API محرمانه دریافت نمایید، و برای خود در Envato یک اکانت ایجاد نمایید. برای این کار به codecanyon.net مراجعه کنید و نشان گر موس خود را بر روی Account Username قرار دهید و گزینه Setting را انتخاب کنید. حال بر روی گزینه “API Key” کلیک کنید و یک کلمه به دلخواه خود در آن تایپ کنید و سپس بر روی گزینه “Generate API Key” کلیک نمایید تا یک API Key جدید دریافت نمایید. پس از دریافت API Key جدید وارد پانل اکانت وردپرس خود شوید و مسیر زیر را طی کنید:
Visual Composer −> Product License
سپس در صفحه جدید باید نام اکانت خود در Envato، API Key محرمانه دریافتی و کد خرید محصول را وارد کنید تا بتوانید لایسنس ویژوال کامپوزر خود را فعال سازی نمایید.
اگر لایسنس شما با موفقیت فعال سازی گردد شما پس از انجام این پروسه پیام License successfully activated را بر روی صفحه مشاهده خواهید نمود.
خب تمام شد، شما توانستید با موفقیت ویژوال کامپوزر را بر روی وب سایت وردپرس خود نصب و فعال سازی نمایید تا هر گاه ورژن جدیدی از آن عرضه می گردد بتوانید بلافاصله به صورت اتوماتیک آن را دریافت نمایید و از امکانات آن بهره مند گردید.
حال که پروسه نصب این پلاگین به پایان رسید باید کار با آن را بیاموزید تا بتوانید صفحات بسیار حرفه ای با استفاده از آن ایجاد نمایید. در ادامه این مجموعه با ما همراه باشید تا گام به گام شما را در مسیر یادگیری کار با این ابزار همراهی نماییم.

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

کنترل ریسپانسیو بودن صفحات

با استفاده از پلاگین ویژوال کامپوزر شما امکان کنترل کامل بر روی وب سایت وردپرس خود را خواهید داشت و شما می توانید با استفاده از این پلاگین انواع مختلف صفحات را در وب سایت خود ایجاد نمایید. برای کنترل ریسپانسیو بودن صفحات ایجاد شده در سایت وردپرس خود، شما باید به بخش General Setting در ویژوال کامپوزر مراجعه نمایید و در این بخش شما چک باکسی را مشاهده خواهید نمود که در کنار آن عبارت ” Disable responsive content elements” نوشته شده است. شما می توانید با استفاده از این چک باکس فعال یا غیر فعال بودن ریسپانسیو بودن المان های محتوا را کنترل نمایید.

همان طور که شما عزیزان می دانید Disable به معنی غیر فعال بودن می باشد و شما با تیک زدن این چک باکس امکان ریسپانسیو بودن المان های محتوا را غیر فعال می کنید و اگر تیک درون این چک باکس را بردارید، امکان ریسپانسیو بودن المان های محتوا فعال سازی می گردد.
دقت داشته باشید که پس از اتمام فرایند تنظیمات فعال یا غیر فعال بودن امکان ریسپانسیو بودن المان های محتوا شما باید حتما بر روی دکمه “Save Changes” کلیک نمایید تا تغییراتی که ایجاد نموده اید ذخیره سازی گردد در غیر این صورت تغییرات ایجاد شده توسط شما اعمال نخواهد شد.

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

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

پیش از هر کار شما باید به پنل ورد پرس خود مراجعه نمایید و وارد اکانت خود شوید و وارد ویژوال کامپوزر گردید، از داخل ویژوال کامپوزر گزینه Role manager را انتخاب نمایید و سپس اندکی صبر کنید تا صفحه مربوط به Role manager برای شما بارگذاری گردد.
در صفحه Role manager شما منوهای آبشاری بسیاری را مشاهده می نمایید که در کنار هریک از آنها عبارتی به عنوان نام آن منوی آبشاری حک شده است. شما با استفاده از همین منوهای آبشاری می توانید میزان دسترسی یوزر گروپ ها را کنترل نمایید. در ادامه هریک از این منوهای آبشاری را به صورت مجزا مورد بررسی قرار خواهیم داد.
Post Types : به صورت پیش فرض گزینه Only Page بر روی این منوی آبشاری انتخاب شده است که موجب می شود شما با استفاده از ویژوال کامپوزر تنها قادر به ویرایش صفحات باشید، اما اگر شما گزینه Custom را در این منوی آبشاری انتخاب نمایید علاوه بر صفحات می توانید پست ها را نیز با استفاده از این پلاگین مورد ویرایش قرار دهید.
Backend Editor: در این منوی آبشاری تنها دو گزینه وجود دارد، Disable و Enable که به شما این امکان را می دهد که استفاده از ویرایشگر Backend ویژوال کامپوزر را برای تمامی ویرایشگران سایت خود فعال یا غیر فعال نمایید.

 


Frontend Editor: این منوی آبشاری نیز مشابه منوی Frontend Editor تنها دو گزینهDisable و Enable را شامل می شود که با استفاده از آنها می توانید امکان استفاده از ویرایشگر Frontend را برای تمامی ویرایشگران سایت خود فعال یا غیر فعال نمایید.
Page Setting: این منوی آبشاری همان طور که از نام آن پیداست برای کنترل دسترسی به صفحه تنظیمات ویژوال کامپوزر استفاده می گردد. بهتر است که شما در این منوی آبشاری گزینه Disable را انتخاب نمایید تا دسترسی تمامی یوزر گروپ ها را به تنظیمات ویژوال کامپوزر محدود نمایید.
Settings Options: این منوی آبشاری برای کنترل دسترسی یوزر گروپ ها به زبانه های تنظیمات ادمین در ویژوال کامپوزر (General Settings، Shortcode Mapper و …) مورد استفاده قرار می گیرد.
Templates: این منوی آبشاری برای کنترل دسترسی یوزر گروپ ها به تمپلیت ها و همچنین تمپلیت های پیش ساخته مورد استفاده قرار می گیرد. به خاطر داشته باشید که اگر شما در این منوی آبشاری گزینه “Apply Templates Only” را انتخاب نمایید دسترسی یوزر گروپ ها را برای اضافه کردن تمپلیت های جدید و حذف تمپلیت های ذخیره شده محدود می نمایید.
Elements: این منوی آبشاری نیز دسترسی یوزر گروپ ها به المان های محتوا را کنترل می نماید.
Grid Builder: این منوی آبشاری به منظور کنترل دسترسی یوزر گروپ ها به و Grid Builder و المان های Grid Builder مورد استفاده قرار می گیرد.
Element Presets : این منوی آبشاری دسترسی یوزر گروپ ها را به تنظیمات پیش فرض المان ها در فرم ویرایش المان ها کنترل می نماید. به خاطر داشته باشید که اگر شما در این منوی آبشاری گزینه “Apply Preset Only” را انتخاب نمایید دسترسی یوزر گروپ ها را برای ایجاد تنظیمات جدید و حذف تنظیمات اولیه موجود محدود می نمایید.
با استفاده از این منوهای آبشاری موجود در Role Manager شما می توانید میزان دسترسی ویرایشگرها، نویسندگان و حتی سایر ادمین های سایت را به تمامی بخش های ویژوال کامپوزر کنترل نمایید. فقط باید حتما پیش از آنکه این صفحه را ترک کنید بر روی کلید “Save Changes” کلیک کنید تا تنظیمات انجام شده توسط شما در این صفحه اعمال شود و در صورتی که شما فراموش کنید که بر روی کلید “Save Changes” کلیک نمایید تمامی تنظیماتی که انجام داده اید به حالت قبلی باز خواهد گشت.
نتیجه گیری
Role Manager در ویژوال کامپوزر یک ابزار بسیار موثر و مفید است و به صاحبان وب سایت ها این امکان را می دهد که تمامی تنظیمات لازم و کنترل های مورد نیاز برای دسترسی کاربران به بخش های مختلف را به صورت دستی انجام دهند.

چگونه با استفاده از ویژوال کامپوزر ظاهر سایت وردپرسی خود را تغییر دهیم؟
ظاهر وب سایت از پارامترهای بسیار تاثیر گذار در جذب یا دفع کاربران وب سایت است و انتخاب المان های ظاهری معقول و متناسب برای یک وب سایت می تواند به طرز چشم گیری در موفقیت آمیز بودن یا نبودن عملکرد وب سایت ثاثیر گذار باشد. ویژوال کامپوزر برای ایجاد آرایش ظاهری وب سایت و همچنین ایجاد تغییرات در ظاهر وب سایت نیز خدماتی را به کاربران ارائه می نماید، بخش “Designing Options” به منظور ارائه خدماتی برای ایجاد امکان تغییرات در ظاهر وب سایت برای کاربران تعبیه شده است.
با استفاده از بخش “Designing Option” در پلاگین ویژوال کامپوزر شما می توانید تغییراتی بنیادی همچون تغییر رنگ زمینه وب سایت، رنگ نوشته های درون وب سایت، رنگ زمینه کلیدهای CTA، رنگ زمینه نوار پیشرفت یا Progress Bar و موارد مشابه دیگری را در ظاهر وب سایت خود ایجاد نمایید.
برای آنکه بتوانید وارد بخش مربوط به ایجاد تغییرات در ظاهر وب سایت شوید ابتدا باید وارد پنل وب سایت وردپرس خود شده و سپس وارد اکانت خود شوید. پس از آن باید مسیر زیر را طی کنید:

Visual Composer -> Designing Options

پس از وارد شدن به صفحه “Designing Option” شما باید ابتدا چک باکس مربوط به فعال سازی امکان استفاده از گزینه های طراحی را تیک بزنید. این چک باکس در بالای صفحه قرار دارد و در کنار آن عبارت “Use Custom Designing Options” حک شده است. اگر این چک با کس را تیک نزنید گزینه های مربوط به ویرایش ظاهر وب سایت موجود در این صفحه برای شما فعال سازی نمی شوند و شما نمی توانید از آنها استفاده کنید.
در این صفحه امکان تنظیم موارد زیر در ظاهر وب سایت برای شما وجود دارد:
Main accent color (رنگ زمینه اصلی وب سایت)
Hover color (رنگ ثانویه وب سایت یا رنگ شناور)
Call to action background color (رنگ کلید های CTA)
Google maps background color (رنگ زمینه گوگل مپ)
Post slider caption background color (رنگ زمینه کپشن یا توضیحات پست اسلایدر)
Progress bar background color (رنگ زمینه نوار پیشرفت)
Separator border color (رنگ حاشیه جداساز )
Tabs navigation background color (رنگ زبانه در هنگام کلیک کردن بر روی آنها)
Active tab background color (رنگ زبانه های فعال)
Elements bottom margin (حاشیه پایینی المان ها): با استفاده از این گزینه شما می توانید اندازه حاشیه پایینی را برای هر المانی که در صفحات خود ایجاد می نمایید تعیین نمایید.
Grid gutter Width (تعیین فاصله در بین گراید ها)
Mobile Screen Width (اندازه پهنای صفحه وب سایت در هنگام نمایش بر روی تلفنهای همراه)
شما پس از وارد شدن به صفحه Designing Options هر یک از گزینه های بالا را به صورت یک منوی آبشاری مشاهده می کنید که به سادگی می توانید با کلیک کردن بر روی منوی آبشاری هر یک از گزینه های موجود در آن را انتخاب نمایید.

در انتها این صفحه دو کلید دیگر وجود دارد که بر روی آنها عبارات “Save Changes” و “Restore Default” حک شده است. با استفاده از کلید “Save Changes” شما می توانید تغییراتی را که ایجاد نموده اید ذخیره کنید و با استفاده از کلید “Restore Default” شما می توانید تمامی تنظیمات را به حالت اولیه بازگردانید.

اضافه کردن CSS های رایج به سایت با استفاده از ویژوال کامپوزر
کاربران وردپرس برای آنکه بتوانند بدون ادیت کردن کد CSS اصلی قالب ها، طراحی های مجزای ثانویه ای در وب سایت خود انجام دهند اغلب ملزم به نصب پلاگین CSS Custom در سایت وردپرس خود می باشند. ویژوال کامپوزر برای این مساله راه حل جایگزینی اندیشیده است و این راه حل جایگزین در بخش “Custom CSS” ویژوال کامپوزر برای کاربران ارائه شده است. با استفاده از بخش “Custom CSS” ویژوال کامپوزر کاربران دیگر نیازی به نصب پلاگین های اضافه برای اضافه کردن CSS ها ندارند و علاوه بر این، بخش “Custom CSS” ویژوال کامپوزر بسیار شهودی تر و یوزر فرندلی تر از سایر پلاگین ها می باشد.
اضافه کردن CSS ها به سایت وردپرس با استفاده از ویژوال کامپوزر کار ساده ای است و ما در این فایل آموزشی آن را به صورت کاملا ساده و قابل درک برای شما بیان خواهیم نمود. اگر شما ورژن جدید ویژوال کامپوزر را در اختیار داشته باشید که در آن بخش “Custom CSS” فعال سازی شده است دیگر نیازی به مراجعه به بخش تنظیمات نخواهید داشت و تنها با نوشتن کد CSS مد نظر خود در بخش “Custom CSS” می توانید CSS مد نظر خود را به سایت اضافه نمایید(در نسخه های قدیمی تر این بخش فعال سازی نشده و اضافه کردن CSS ها با استفاده از ویژوال کامپوزر های ورژن قدیمی تر کار مشکلی می باشد).
برای اضافه کردن CSS ها به سایت وردپرس خود باید ابتدا وارد پنل ورد پرس خود شوید و وارد اکانت خود گردید، سپس مسیر زیر را طی کنید:
Visual Composer -> Custom CSS

سپس در صفحه جدید باز شده کد CSS مد نظر خود را که می خواهید در وب سایت خود اضافه نمایید، وارد کنید.


اگر شما در هنگام وارد نمودن کد اشتباهی مرتکب شوید و کد را به درستی وارد ننمایید، ویژوال کامپوزر به شما یک اخطار مبنی بر وقوع اشتباه در کد وارد شده، نمایش می دهد و همچنین دلیل اشتباه بودن کد را نیز بیان می کند، مثلا به شما یک اخطار مبنی بر وقوع اشتباه در سینتکس خط سوم کد شما نمایش می دهد. پس شما باید در نوشتن کدها درون بلوک “Custom CSS” بسیار محتاط و دقیق باشید که اشتباهی رخ ندهد.


در انتها شما باید بر روی کلید “Save Changes” کلیک نمایید تا تغییرات اعمال شده توسط شما ذخیره شوند. در صورتی که پیش از ذخیره نمودن تغییرات از صفحه خارج شوید، تغییرات اعمالی شما و یا به عبارت دیگر کد CSS وارد شده توسط شما حذف می گردد و در سیستم ذخیره نمی شود.

اضافه کردن شورت کدها به ویژوال کامپوزر
یکی دیگر از قابلیت هایی که برای کاربران پلاگین های پیج بیلدر بسیار با اهمیت است و می تواند در میزان عملکرد و کارایی یک پیج بیلدر بسیار تاثیر گذار باشد، قابلیت افزودن شورت کد ها به آن برای بالا بردن کارایی های آن و ساده سازی انجام کارهای معمول در آن می باشد. ویژوال کامپوزر قابلیت افزودن شورت کد ها را در بخش “Shortcode Mapper” به کاربران ارائه نموده است و با استفاده از آن کاربران می توانند کدهای ثانویه ای را به ویژوال کامپوزر اضافه نمایند تا در هنگام ویرایش صفحات و پست های بلاگ در ویرایشگرهای Backend و Frontend قابلیت های ثانویه ای را در پلاگین خود ایجاد نمایند که انجام کارها را برای آنها ساده تر نماید.
در این فایل آموزشی ما قصد داریم تا طریقه اضافه نمودن شورت کدها به ویژوال کامپوزر را به شما بیاموزیم. برای این کار از یک مثال به عنوان نمونه شورت کد استفاده می نماییم. فرض کنید شما می خواهید شورت کد “YouTube” را به ویژوال کامپوزر خود اضافه کنید تا با استفاده از آن ویدیوهای یوتیوب را در وب سایت خود اضافه نمایید و برای کاربران نمایش دهید.


پیش از هر کاری شما باید پلاگین یوتیوب را به بر روی وب سایت وردپرس خود نصب نموده و سپس آن را فعال سازی کنید. پس از نصب این پلاگین باید شورت کد مربوط به آن را بیابید، برای این کار بر روی بخش “YouTube Free” در این پلاگین کلیک کنید و شورت کد مربوط به آن را شناسایی نمایید. سپس وارد ویژوال کامپوزر شوید و در این پلاگین به بخش “ShortCode Mapper” مراجعه نمایید و در در کادری که در بالای آن عبارت “ShortCode String” حک شده است، شورت کد مربوط به یوتیوب را وارد نمایید و بر روی کلید “Parse Code” در انتهای صفحه کلیک کنید.


در ادامه شما می توانید در بخش “General Information” چک باکس “include content Param into shortcode” را تیک بزنید تا بتوانید پارامترهایی مثل عنوان، نوع، توضیحات و … را به شورت کد وارد شده اضافه نمایید.
در انتها شما باید تغییراتی را که ایجاد نموده اید ذخیره کنید، برای این کار کافیست که بر روی دکمه “Save Changes” کلیک نمایید.
استفاده از شورت کدها
حال که شما شورت کد مربوط به ویدیوهای یوتیوب را در ویژوال کامپوزر خود اضافه نمودید می توانید ویدیوهایی از یوتیوب را در صفحات مختلف وب سایت خود وارد نمایید. برای این کار باید ابتدا وارد ویژوال کامپوزر شده و سپس وارد ویرایشگر Frontend شوید و بر روی گزینه “Add Element” کلیک کنید، سپس گزینه “My Shortcode” را انتخاب نمایید و بر روی کلید “Embedyt” کلیک کنید. حال در صفحه باز شده باید لینک ویدیوی یوتیوب مد نظر خود را وارد کنید و بر روی دکمه “Update” کلیک کنید . با این روش می توانید هریک از ویدیوهای یوتیوب را که می خواهدی در صفحات خود اضافه نمایید.


شما می توانید در بخش “Designing Options” تغییرات بیشتری در شورت کدهای خود ایجاد نمایید و آنها را به دلخواه خود تغییر دهید.

 

آموزش کامل کار با ویرایشگر Backend در ویژوال کامپوزر
ویژوال کامپوزر در میان تمامی پلاگین های پیج بیلدر تنها پلاگینی است که هم قابلیت ویرایش در Backend را به کاربران می دهد و هم قابلیت ویرایش در Frontend. این ویژگی منحصر به فرد ویژوال کامپوزر باعث شده است که این پلاگین در میان کاربران از محبوبیت دو چندانی برخوردار باشد. با وجود آنکه ویرایشگر Backend ویژوال کامپوزر چندان منعطف نمی باشد و ویرایشگر Frontend عملکرد بهتری نسبت به آن دارد، اما همچنان بعضی از کاربران که به دلیل استفاده از ویرایشگر پیش فرض ورد پرس (WordPress Post Editor) و عادت کردن به استفاده از آن ترجیح می دهند که از ویرایشگر Backend ویژوال کامپوزر که دارای محیط مشابهی می باشد، استفاده نمایند. ویرایشگر Backend ویژوال کامپوزر داراری محیط مشابهی با ویرایشگر پیش فرض وردپرس دارد و تنها تفاوت موجود در بین این دو ویرایشگر آن است که ویرایشگر Backend ویژوال کامپوزر دارای قابلیت نمایش فول اسکرین می باشد.
هر دو ویرایشگر Backend و Frontend ویژوال کامپوزر ابزارهای بسیار قوی و پر کاربردی می باشند و کارایی های بسیاری دارند. اما از نظر من ویرایشگر Frontend از ویرایشگر Backend بهتر می باشد و این مساله بدان دلیل است که ویرایشگر Frontend قابلیت نمایش همزمان تغییرات را دارد، این بدان معنی است که زمانی که شما تغییری در یکی از صفحات ایجاد می کنید، ویرایشگر Frontend تغییر ایجاد شده را در همان لحظه به شما نمایش می دهد و همچنین شما می توانید تغییر ایجاد شده را هم از نظر کاربران و هم از نظر موتورهای جستجوگر به صورت کاملا Real-time مورد بررسی قرار دهید.
ما در این بخش از آموزش قصد داریم شما را با ویرایشگر Backend ویژوال کامپوزر آشنا نماییم و در آموزش بعدی درباره ویرایشگر Frontend با شما صحبت خواهیم نمود. اگر شما جزو آن دسته افرادی باشید که مثل من کار کردن با ویرایشگر Frontend را ترجیح می دهند شاید با خود بگویید که مطالعه این بخش از آموزش برای شما ضرورتی ندارد، اما من به شما توصیه می کنم که این بخش از آموزش را نیز مطالعه نمایید زیرا ممکن است در هنگام استفاده از پلاگین ویژوال کامپوزر در برخی مواقع نیاز به استفاده از ویرایشگر Backend داشته باشید.
برای کار کردن با ویرایشگر Backend شما ابتدا باید وارد پنل ادمین در ورد پرس شوید و با طی کردن مسیر زیر یک صفحه ایجاد نمایید:

Pages -> Add New Page


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


زمانی که شما وارد ویرایشگر Backend ویژوال کامپوزر می گردید با چند گزینه مواجه می شوید که این گزینه ها به شرح زیر می باشند:
لوگوی ویژوال کامپوزر: اگر شما بر روی این گزینه کلیک کنید به وب سایت ارائه کننده ویژوال کامپوزر هدایت خواهید شد.
کلیدی با علامت “+”: با استفاده از این گزینه شما می توانید یک المان جدید از میان المان های محتوای موجود در کتابخانه المان های ویژوال کامپوزر انتخاب نمایید تا با استفاده از این المان در صفحه جدید ایجاد شده محتوای یا چدیمان جدیدی ایجاد نمایید.
کلید طوسی با علامت “T” بر روی آن: این کلید که به آن کلید تمپلیت گفته می شود برای انتخاب کردن یک تمپلیت جدید از میان تمپلیت های پیش ساخته موجود در ویژوال کامپوزر مورد استفاده قرار می گیرد. در ویژوال کامپوزر چندین تمپلیت پیش ساخته وجود دارد که هر یک کاربرد مجزایی دارند و کاربران می توانند برای ایجاد صفحات لندینگ، صفحات فروش، صفحات CTA و … از آنها استفاده نمایند.

کلیدی با علامت چرخ دنده: همان طور که شما عزیزان به خوبی می دانید در هر دستگاه و هر ابزاری، اگر کلیدی با علامت چرخ دنده وجود داشته باشد، آن کلید مسئول تنظیمات آن دستگاه یا ابزار می باشد. در ویژوال کامپوزر نیز چنین است، کلیدی که علامت چرخ دنده بر روی آن وجود دارد نشان گر بخش تنظیمات است و شما می توانید با استفاده از این کلید CSS های مشخصی را به صفحات خود اضافه نمایید.
کلیدی با علامت مربع یا مستطیل: در کنار کلید تنظیمات کلیدی وجود دارد که بر روی آن چیزی شبیه به یک مانیتور بسیار کوچک وجود دارد که اغلب به دلیل آنکه تصویر مانیتور روی کلید بسیار کوچک است، به شکل یک مربع یا مستطیل دیده می شود. این کلید که به نام کلید “Responsive Preview” شناخته شده است برای بررسی ریسپانسیو بودن یا نبودن صفحات وب سایت می تواند مورد استفاده قرار بگیرد. اگر شما بر روی این کلید کلیک نمایید خواهید دید که برای شما امکان مشاهده صفحه در صفحات نمایش با اندازه های متنوع (لپ تاپ، تبلت در حالت عادی، تبلت در حالت لند اسکیپ تلفن های همراه مختلف در حالت عادی و لند اسکیپ) ارائه می گردد. شما می توانید با انتخاب هر یک از گزینه های موجود شکل نمایش وب سایت خود را در آن اندازه از صفحه نمایش مشاهده نمایید.
کلیدی که بر روی آن عبارت “Backend Editor” حک شده: این کلید امکان سوییچ کردن به ویرایشگر Backend را به شما می دهد یعنی هر زمان که شما با ویرایشگر Frontend احساس راحتی نکنید و یا بخواهید کاری انجام دهید که انجام آن در ویرایشگر Backend برای شما راحت تر باشد شما می توانید با کلیک کردن بر روی این دکمه به سادگی به ویرایشگر Backend سوییچ نمایید. فقط به خاطر داشته باشید که هر زمانی که خواستید از مود ویرایشگر Frontend به مود ویرایشگر Backend سوییچ نمایید باید حتما پیش از کلیک کردن بر روی دکمه نام برده بر روی دکمه “Update” کلیک کنید تا تغییراتی که اعمال نموده اید ذخیره سازی شود در غیر این صورت تمام تغییرات ایجاد شده شما به حالت اولیه باز خواهد گشت.
کلیدی که بر روی آن “Update” حک شده: این کلید برای ذخیره سازی و اعمال نهایی تغییرات ایجاد شده در صفحات می باشد. شما باید پس از آنکه ایجاد و تنظیمات صفحه به پایان رسید بر روی این کلید کلیک کنید تا تغییرات مورد نظر شما نهایی شوند.
کلیدی با علامت “×”: در گوشه بالای سمت راست ویژوال کامپوزر مانند تمامی ابزارها و نرم افزار های دیگر کلیدی با علامت کراس بر روی آن وجود دارد که این کلید برای بستن و خارج شدن کلی از ویژوال کامپوزر می تواند مورد استفاده قرار گیرد.

کلیدی با علامت فول اسکرین: همان طور که از شکل این کلید کاملا پیداست کاربران می توانند با استفاده از این کلید ویرایشگر ویژاول کامپوزر Backend خود را تمام صفحه کنند و یا از حالت تمام صفحه خارج نمایند. این کلید بدین منظور طراحی شده است که کاربرانی که صفحه نمایش آنها کوچکتر است و نمی خواهند چیزهای اضافه در اطراف ویژوال کامپوزر خود ببینند با استفاده از آن ویژوال کامپوزر خود را فول اسکرین نمایند.
کلید با علامت چرخ دنده: در تمامی ابزارهای مختلف علامت چرخ دنده بر روی یک کلید نمایشگر آن است که این کلید مربوط به تنظیمات می باشد. با استفاده از کلید تنظیمات در ویرایشگر Backend شما می توانید تنظیمات CSS مشخصی را بر روی المان هایی که در صفحات خود اضافه می نمایید اعمال کنید.
کلیدی که بر روی آن عبارت “Frontend Editor” حک شده: همان طور که عبارت حک شده بر روی این کلید مشخص است، این کلید به منظور سوییچ کردن ویرایشگر از حالت “Backend” به حالت “Frontend” کاربرد دارد. اما شما باید به خاطر داشته باشید که پیش از آنکه بر روی این کلید کلیک نمایید حتما باید بر روی کلید “Save Changes” در انتهای صفحه کلیک نمایید تا تغییراتی که ایجاد نموده اید کاملا ذخیره سازی شوند. در صورتی که پیش از کلیک کردن بر روی کلید “Save Changes” بر روی کلید “Frontend Editor” کلیک کنید، تمام تنظیماتی که در ویرایشگر Backend ایجاد نموده اید کاملا حذف می گردد و صفحه شما به حالت اولیه باز می گردد.
استفاده از کلید “Add New Element”
همان طور که گفته شد شما می توانید با استفاده از کلید “Add New Element” المان های محتوای جدیدی را به صفحات خود اضافه نمایید. برای مثال شما می توانید بر روی کلید “Add New Element” کلیک نموده و در صفحه جدید باز شده المان “Row” را انتخاب کنید تا یک سطر جدید به صفحه شما اضافه شود. سطر مهم ترین المان یک صفحه است، زیرا سایر المان ها مثل ستون ها، تصاویر، متن ها و … همه و همه درون سطر ها قرار می گیرند.
پس از آن که شما در صفحه خود یک سطر جدید اضافه نمایید، می توانید درون آن با استفاده از آپشن “Choose Column” یکی از چیدمان ستون های از پیش آماده در ویژوال کامپوزر را انتخاب نمایید، یا اگر نمی خواهید هیچ یک از چدیمان های پیش فرض را انتخاب کنید می توانید با استفاده از گزینه “Add Column” ستون های جدیدی در سطر ایجاد شده خود اضافه کنید.
پس از اضافه کردن سطرها و ستون ها نوبت به افزودن محتوا به ستون های ایجاد شده است. اگر بخواهید در یکی از ستون ها تصویری قرار دهید باید از المان محتوای “Single Image” استفاده نمایید. برای این کار کافیست بر روی “Add Element” کلیک کنید و “Single Image” را انتخاب نمایید سپس تصویری را انتخاب نموده و سایز آن را تعیین نمایید (معمولا سایز “Medium” برای تصاویر درون وب سایت مناسب می باشد)، پس از انتخاب تصویر و تعیین سایز آن بر روی گزینه “Prepend To Column” کلیک کنید تا تصویر شما درون ستون مورد نظرتان واقع گردد.
حال اگر بخواهید متنی را در ادامه تصویر قرار دهید باید از المان محتوای “Text Block” استفاده کنید و سپس درون این المان یک محتوا را برای قرار گرفتن در محل مورد نظرتان تعیین نمایید.
اگر شما بخواهید تصویر مشترکی را در چند ستون استفاده نمایید باید از گزینه “Clone” یا نسخه برداری استفاده کنید. برای این کار کافیست بر روی “Clone Image” کلیک کنید و سپس تصویر کپی شده را در ستون های دیگر دراپ کنید. شما می توانید همین کار را برای متن ها نیز انجام دهید، یعنی اگر بخواهید متن مشترکی را در زیر تصاویر یا در هر جای دیگری از صفحه خود قرار دهید باید از گزینه “Clone Text Block” استفاده کنید و پس از آنکه متن مورد نظر را نسخه برداری نمودید، آن را در ستون های دیگر دراپ کنید.
برای اضافه نمودن هر المانی شما باید از طریق گزینه “Add Element” اقدام کنید و با استفاده از آن تک تک المان هایی که می خواهید درون صفحه مورد نظر خود قرار دهید را انتخاب کنید و هر یک را به صورت مجزا درون صفحه قرار دهید.
تنظیمات سطرها
شما می توانید به سادگی سطرهایی که درون صفحه مد نظر خود ایجاد نموده اید را تنظیم کنید و در آنها تغییراتی به دلخواه خود ایجاد نمایید. برای اعمال تغییرات در سطرها باید بر روی گزینه “Edit This Row” کلیک نمایید و وارد صفحه “Row Setting” یا تنظیمات سطر، شوید. در این صفحه شما با گزینه ها و تنظیمات متعددی مواجه خواهید شد که در ادامه این مقاله من برای شما لیست آنها و توضیحات مختصری در رابطه با هر یک از آنها آورده ام.
Row Stretch: با استفاده از این گزینه شما می توانید طولی را که مد نظر دارید برای سطر مورد نظرتان تعیین کنید. به خاطر داشته باشید که طول سطر باید با المان های موجود در آن متناسب باشد و اگر طول سطر کمتر از حدی باشد که المان ها برای جای گرفتن به آن نیاز دارند، ممکن است سرریز شدن یا Overflow در سطر شما اتفاق بیفتد.
Columns Gap: با استفاده از این گزینه شما می توانید فاصله میان ستون ها در یک سطر مشخص را تعیین نمایید.
Full height row: اگر چک باکس مربوط به Full Height Row را تیک بزنید، سطر مورد نظر شما تمام صفحه خواهد شد و هیچ سطر دیگری در صفحه شما جای نخواهد گرفت.
Equal Height: اگر چک باکس مربوط به این گزینه را تیک بزنید تمامی ستون های موجود در یک سطر طول برابری خواهند داشت.
Content position: با استفاده از این گزینه شما می توانید محل مورد نظر خود را برای محتوا درون یک ستون تعیین نمایید.
Parallax: این آپشن به شما امکان انتخاب یک تصویر زمینه پارالاکس را برای سطرها می دهد.
نسخه برداری از سطر ها
شما می توانید سطر ها را نیز مانند تصاویر، متن ها و ستون ها عینا نسخه برداری یا Clone نمایید و یک سطر دیگر کاملا مشابه با سطر قبلی درون صفحه خود ایجاد نمایید. برای این کار باید با استفاده از نوار ابزار بالای سطر و آپشن “Clone This Row” سطر را نسخه برداری نموده و در محل دیگری دراپ کنید. علاوه بر این شما می توانید کارهای دیگری همچون حذف سطر ها، ادغام سطر ها و … را نیز با استفاده از نوار ابزار سطر انجام دهید.
پس از آنکه کار شما در صفحه به پایان رسید باید بر روی گزینه Update کلیک کنید تا تغییراتی که ایجاد نموده اید کاملا در صفحه شما اعمال گردند و پس از آن می توانید با استفاده از گزینه “Preview” صفحه ایجاد شده را مشاهده نمایید.

 

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

در صورت درج در وب سایت خود لطفا همراه با لینک به منبع 

منبع : آموزش ویژوال کامپوزر

بخش پایانی آموزش (دوشنبه ۱۲ تیر ۱۳۹۶)

اضافه کردن تصاویر به صفحه
حال که شما سطرها و ستون های مورد نظر خود را ایجاد نمودید و به نوعی صفحه خود را بخش بندی نمودید می توانید شروع به اضافه نمودن محتواها در صفحه نمایید. برای اضافه نمودن یک تصویر به صفحه ابتدا باید بر روی کلید “+” یا “Add Element” کلیک کنید و پس از وارد شدن به کتابخانه المان های ویژوال کامپوزر المان “Single Image” را انتخاب نمایید. در این بخش شما می توانید یک تصویر را انتخاب نمایید که درون ستون مورد نظر از سطر ایجاد شده خود آن را جای دهید، علاوه بر این شما می توانید در این بخش تصویری را که انتخاب می نمایید ویرایش کنید و سایز آن را به سایز دلخواه خود تغییر دهید.
پس از انجام تنظیمات و قرار دادن تصویر درون صفحه شما می توانید از تصویر کپی برداری یا نسخه برداری نمایید و همان تصویر را در صورت نیاز در دیگر ستون های صفحه خود نیز قرار دهید. در بخش های بعدی چندین عنوان آورده ایم که اختصاصا مربوط به عکس ها و چگونگی استفاده از عکس ها و ایجاد گالری عکس ها در یک صفحه از وب سایت می باشند، در این بخش ها شما خواهید توانست آموزش های دقیق تری درباره اضافه کردن عکس ها به صفحات وب سایت با استفاده از ویژوال کامپوزر مطالعه نمایید.
افزودن بلوک متنی
برای آنکه درست در زیر تصویری که به صفحه اضافه نموده اید یک بلوک متنی قرار دهید و یک محتوای نوشتاری را به آن محل اضافه نمایید ابتدا باید از میان گزینه های موجود در کنار تصویری که در صفحه قرار داده اید بر روی گزینه “Prepend To Column” کلیک نمایید و سپس المان محتوای “Text Block” را انتخاب کنید تا بتوانید با استفاده از آن محتوای متنی را در آن قسمت اضافه نمایید.
کلون کردن یا نسخه برداری از تصاویر
اگر شما نیاز داشته باشید که تصویری را که درون صفحه قرار داده اید نسخه برداری کنید یا به عبارتی کپی برداری کنید و همان تصویر را در دیگر بخش های صفحه نیز استفاده نمایید باید از میان گزینه های موجود در کنار تصویر برر روی گزینه “Clone Single Image” کلیک کنید تا تصویر شما کپی برداری شود و یک کپی از آن در زیر تصویر اصلی ظاهر گردد سپس می توانید به روش درگ اند دراپ کردن تصویر ثانویه ایجاد شده را به محل مورد نظر خود انتقال دهید.
شما می توانید مشابه همین کار را برای کپی برداری از بلوک های متنی نیز انجام دهید و یک بلوک متنی را کپی برداری نموده و در جای دیگری درگ کنید. البته پس از درگ کردن امکان ایجاد تغییرات ویرایش هم در تصاویر و هم در بلوک های متنی وجود دارد.
ایجاد زبانه ها و منوهای آکاردئونی و تورها
ویژوال کامپوزر به شما امکان ایجاد زبانه ها و منوهای آبشاری و آکاردئونی و تورها را نیز می دهد و شما می توانید با استفاده از این امکان محتوا ها و گزینه هایی ایجاد کنید که تنها در صورتی که کاربر نشان گر موس را بر روی آنها قرار داد نمایش داده شوند نه در هیچ صورت دیگری.
برای افزودن یک زبانه شما باید ابتدا بر روی گزینه “Add Element” کلیک کنید و از داخل کتابخانه المان ها، المان “Tabs” را انتخاب نمایید. به همین صورت برای ایجاد منوهای آکاردئونی و تورها نیز باید به ترتیب المان های “Accordion” و “Tour” را از داخل کتابخانه المان های محتوای درون ویژوال کامپوزر انتخاب نمایید.
ایجاد کلید Call To Action با استفاده از ویژوال کامپوزر
یکی از انواع صفحاتی که در اکثر وب سایت هایی که فعالیت های تجاری انجام می دهند کاربرد دارد، صفحات CTA می باشد. صفحات CTA کاربران را در چرخه خرید و سفارش محصولات یک وب سایت قرار می دهد و در واقع صفحات CTA مهم ترین گام در چرخه ترغیب مشتری به خرید تا خرید محصول، می باشد. در ویژوال کامپوزر یک المان محتوای مجزا برای ایجاد صفحات CTA برای محصولات وجود دارد. برای ایجاد یک صفحه CTA شما باید ابتدا بر روی کلید “Add Element” کلیک کنید و سپس المان محتوای “Call To Action” را انتخاب نمایید.
پس از آنکه صفحه جدید برای شما نمایش داده شد تغییرات زیر را در صفحه نام برده اعمال نمایید. زمانیکه صفحه مربوط به المان محتوای “Call To Action” برای شما نمایش داده می شود، زبانه “General” در حال نمایش بوده و آپشن های زیر در آن قابل رویت می باشند:
Heading: در این بخش شما می توانید یک عنوان مناسب و جذاب برای صفحه CTA خود انتخاب نمایید و آن را در کادری که در زیر عبارت “Heading” قرار دارد تایپ کنید.
Subheading: در این بخش شما می توانید یک زیر عنوان برای بخش مجزایی از صفحه CTA خود انتخاب نمایید و آن را در کادری که در زیر عبارت “Subheading “ قرار دارد تایپ کنید.
Text Alignment: با استفاده از این گزینه می توانید چینش متن ها درون بلوک CTA را تعیین کنید، مثلا می توانید متن ها را چپ چین، راست چین و یا وسط چین نمایید.
Shape: با استفاده از این آپشن شما می توانید شکل بلوک CTA را درون صفحه خود تعیین نمایید، این گزینه به صورت پیش فرض به شکل دایره تنظیم شده است اما شما می توانید هر شکل هندسی که تمایل دارید برای بلوک CTA خود انتخاب نمایید.
Style: با استفاده از این گزینه می توانید فرم نمایش بلوک CTA خود را تعیین نمایید.
Color: همان طور که از نام این گزینه پیداست با استفاده از این گزینه شما می توانید رنگ های مربوط به بلوک CTA خود را تعیین کنید.
Text : در این بخش شما می توانید متنی را که می خواهید در صفحه CTA خود قرار دهید تایپ کنید. می توانید در این بخش ویژگی های برجسته و آنچه موجب متمایز شدن محصول و یا خدمات شما از دیگر شرکت های عرضه کننده آن محصول یا خدمات می شود را ذکر نمایید، یا هر مطلب دیگری که از دید شما می تواند کاربر را مجاب کند که خرید از شما بهترین گزینه پیش روی او است. به خاطر داشته باشید که توضیحاتی که در این بخش می آورید باید کاملا مختصر و مفید باشد.
Width: با استفاده از این گزینه شما می تواندی پهنای بلوک CTA خود را تعیین نمایید. تنظیمات این بخش معمولا به صورت درصد می باشد و به صورت پیش فرض ۱۰۰% است. استفاده از پهنای ۱۰۰% موجب می گردد که بلوک CTA شما ماکزیمم کارایی را داشته باشد.
Add Button : ممکن است شما بخواهید در بلوک CTA خود دکمه های اضافه ای ایجاد نمایید. برای این کار باید در چک باکس مربوط به “Button” گزینه “Yes” را تیک بزنید. در این صورت دو زبانه دیگر در کنار زبانه “General” در بالای صفحه به نام های “Button” و “Designing Options” برای شما نمایش داده می شوند که شما می توانید با استفاده از آنها تنظیمات مربوط به کلید اضافه شده در صفحه CTA خود را انجام دهید. برخی از تنظیمات مربوط به زبانه “Button” در ادامه آورده شده است:
Text: با استفاده از این آپشن شما می توانید متن روی کلیدی که ایجاد می نمایید را تعیین کنید. مثلا شما می توانید کلیدی برای وارد شدن به پرسه پرداخت بانکی طراحی کنید و بر روی آن متنی به شکل : “Bye now” و یا “Shop Now” حک کنید و یا مثلا اگر می خواهید یک فایل آموزشی را برای فروش بگذارید می توانید کلیدی طراحی کنید که عبارت “دانلود” بر روی آن حک شود و کاربران با کلیک کردن بر روی این کلید به مرحله پرداخت وجه هدایت گردند.
URL Link: شما می توانید در این بخش لینک صفحه فروش محصول خود را وارد نمایید. این لینک در واقع آدرس محلی است که کاربر پس از کلیک کردن بر روی دکمه به آن هدایت می شود.
Style: با استفاده از این گزینه می توانید فرم و شکل قرار گیری کلید CTA خود را تعیین نمایید. برای مثال تو خالی یا تو پر بودن و یا سایه دار یا بدون سایه بودن کلید را می توانید تعیین نمایید.
Shape: شما می توانید با استفاده از این آپشن شکل کلیدی که می خواهید در بلوک CTA خود قرار دهید را تعیین کنید. مثلا می توانید کلیدی به شکل دایره، بیضی و … ایجاد کنید.
Color: شما می تواندی با استفاده از این آپشن رنگ کلیدی که در بلوک CTA خود ایجاد می نمایید را تعیین کنید و آن را به رنگ دلخواه خود تنظیم نمایید.
Alignment: شما می توانید با استفاده از این آپشن محل قرار گیری و یا چینش کلیدی که طراحی می نمایید را تعیین کنید، مثلا می توانید کلید را چپ چین و یا راست چین نمایید یعنی تعیین کنید که کلید شما در منتها الیه سمت چپ یا راست قرار گیرد.
موارد نام برده در این لیست تنها تعدادی از تنظیمات متنوعی است که شما می توانید با استفاده از ویژوال کامپوزر در بلوک CTA خود ایجاد نمایید. در این بخش تنظیمات متعدد دیگر وجود دارد که این امکان را برای شما فراهم می کند که تمامی جزییات مربوط به بلوک و کلید های CTA را شخصی سازی نمایید.
ایجاد پست گرید یا شبکه محتوا
آیا دوست دارید پست های سایت وردپرس خود را بصورت جدولی نمایش دهید؟ برخی قالب های وردپرس قابلیت نمایش پست ها بصورت شبکه ای را ندارند. پس شما مجبور می شوید خودتان دست به کار شوید برای نمایش مطالب سایت به آن شکلی که دوست دارید. در واقع با نمایش شبکه ای پست ها ، مرور کردن آنها برای کاربر راحت تر می شود. برای اینکار نیازی به کد نویسی پی اچ پی ،اچ تی ام ال و سی اس اس ندارید. شما می توانید بدون نیاز به کد نویسی مطالب سایتتان را بصورت جدولی نمایش دهید. برای این کار تنها باید از المان محتوای “Grid Builder” استفاده نمایید.
چگونگی ایجاد گرید با استفاده از ویژوال کامپوزر را در یک بخش آموزشی مجزا برای شما توضیح خواهیم داد.
افزودن پست گرید
ویژوال کامپوزر یکی از بهترین پلاگین ها برای نمایش پست گرید در صفحات وب سایت است. برای ایجاد و نمایش پست گرید با استفاده از ویژوال کامپوزر شما می توانید از المان محتوای “Post Grid” در این پلاگین استفاده نمایید. شما می توانید با استفاده از ابزار گرید بیلدر ویژوال کامپوزر کاستوم گرید نیز ایجاد نمایید. ما در بخش های بعدی یک بخش آموزشی مختص آموزش ایجاد پست گرید، کاستوم گرید و چگونگی ایجاد آنها با استفاده از ابزار”Post Grid” ویژوال کامپوزر برای علاقه مندان قرار داده ایم.
افزودن فونت های گوگل
با استفاده از المان محتوای “Custom Heading” شما می توانید فونت های رایج گوگل را به پست ها و یا صفحات وب سایت خود اضافه نمایید. در این مجموعه آموزشی ما یک بخش مجزا را به آموزش استفاده از المان “Custom Heading” اختصاص داده ایم و شما می توانید برای یادگیری چگونگی افزودن فونت های گوگل به پست ها و یا صفحات وب سایت خود به این بخش از مجموعه آموزش ویژوال کامپوزر مراجعه نمایید.
پست اسلایدر
اگر در سایت وردپرس خود مطالب جذابی قرار می دهید و مقالات جالبی می نویسید و نمی خواهید حتی یک کاربر را زمانی که صفحه اصلی سایت شما باز می شود از دست دهید شما احتیاج به یک اسلایدر وردپرس خواهید داشت. اسلایدرها المان های بسیار کار آمدی هستند که می توانند تصاویر، ویدیوها و مطالب سایت شما را به صورت خارق العاده ای در مرکز توجه کاربران قرار دهند. با استفاده از پست اسلایدر ها شما می توانید محتواهای وب سایت خود و همچنین پست های وبلاگ مربوط به وب سایت خود را به شکل اسلایدر یا متحرک در بسیاری از صفحات برای کاربران نمایش دهید تا زمانی که کاربران به یکی از صفحات وب سایت شما مراجعه می نمایند، محتواهای دیگر وب سایت شما را نیز برای آنها به صورت پیش نمایش عرضه گردند تا کاربران ترغیب به مراجعه به آن صفحات گردند.
بسیاری از کاربران وردپرس، پلاگین مجزایی برای ایجاد اسلایدر در صفحات خود نصب می نمایند، اما شما می توانید به سادگی از المان محتوای”Post Slider” در ویژوال کامپوزر استفاده نمایید. برای استفاده از این المان ابتدا باید بر روی گزینه “Add Element” کلیک کنید و سپس المان محتوای”Post Slider” را انتخاب نمایید. در صفحه ای که برای شما نمایش داده می شود باید موارد زیر را تغییر دهید تا اسلایدری مطابق با سلیقه شخصی خودتان درون صفحه ایجاد نمایید:
Widget Title: در این بخش شما می توانید عنوانی را برای اسلایدر خود انتخاب کنید که این عنوان در بالای اسلایدر درون صفحه شما نمایش داده می شود.
Slider Type: در این بخش شما می توانید نوع اسلایدری که می خواهید درون صفحه شما ایجاد گردد را انتخاب نمایید.
Slider Count: در این بخش شما می توانید تعداد اسلاید هایی که می خواهید درون اسلایدر شما نمایش داده شود را مشخص نمایید. اگر شما در این بخش عدد مشخصی تعیین ننمایید و گزینه “All” را انتخاب کنید اسلایدر شما برای شما امکان نمایش تعداد زیادی اسلاید را فراهم می کند، درواقع هر تعداد اسلایدی که شما ایجاد کنید درون اسلایدر نمایش داده خواهد شد.
Auto Rotate: شما می توانید در این بخش مدت زمانی را انتخاب نمایید که در آن زمان گردش یا نمایش اسلاید ها مجددا به صورت اتوماتیک شروع گردد. برای مثال شما اگر زمان ۳۰ ثانیه را انتخاب نمایید، نمایش اسلایدهای مد نظر شما در زمانی کمتر از این زمان به پایان می رسد و پس از آن با دوره گردش ۳۰ ثانیه نمایش اسلاید ها به صورت مکرر انجام می شود.
Post Types: شما در این بخش می توانید نوع محتواهایی که اسلایدهای درون اسلایدر از آن ها بر گرفته می شود را انتخاب نمایید. برای مثال می توانید نوع را “Page” و یا “Post” انتخاب کنید، در حالت اول اسلاید های درون اسلایدر شما از صفحات وب سایت شما برگرفته می شوند و در حالت دوم اسلایدها برگرفته از پست های درون وب سایت شما خواهند بود.
Description: در این گزینه شما باید منبعی را به اسلایدر معرفی کنید که توضیحات مربوط به اسلاید ها را از آنها اخذ نماید.
Out Put Post Title: اگر شما این گزینه را انتخاب نمایید عنوان مطلبی که هر اسلاید از آن برگرفته شده است پیش از نمایش اسلاید اصلی در اسلایدر نمایش داده خواهد شد.
این تنظیمات و بسیاری تنظیمات دیگر همچون سایز تصاویر و Thumbnail ها، صعودی یا نزولی بودن مرتب سازی اسلاید ها در اسلایدر و … در المان محتوای “Post Slider” برای شما وجود دارد و شما می توانید با تغییر آنها اسلایدری مطابق با سلیقه و نیاز خودتان در صفحات وب سایتتان ایجاد نمایید.
ماسونری مدیا گرید (Masonry Media Grid)
مدیا گرید در واقع برای نمایش مدیا ها در ترتیب ها، چدیمان ها و فرم های مختلف استفاده می شود. ماسونری مدیا گرید نیز نوعی مدیا گرید است که با استفاده از آن کاربران می توان مدیا های خود را ترتیب ها و چیدمان های مختلف نمایش دهند اما تفاوت آن با مدیا گرید این است که در مدیا گرید تمامی مدیا با اندازه یکسانی قرار داده می شوند (یعنی اگر شما در مدیا گرید خود ۸ تصویر متفاوت قرار داده باشید تمامی تصاویر باید سایز و فرم یکسانی داشته باشند) اما در ماسونری مدیا گرید شما می توانید مدیا هایی با اندازه ها و فرم های مختلف داشته باشید (یعنی اگر شما در ماسونری مدیا گرید خود ۸ تصویر متفاوت قرار داده باشید هریک از تصاویر می تواند سایز و فرم متفاوتی داشته باشد).
شما با استفاده از ویژوال کامپوزر هم می توانید مدیا گرید ایجاد کنید و هم ماسونری مدیا گرید. برای این کار تنها کافیست از المان های محتوا “Media Grid” و “Masonry Media Grid” استفاده نمایید.
در بخش های بعدی آموزش استفاده از مدیا گرید و ماسونری مدیا گرید نیز به صورت مجزا برای شما آورده شده است.
فلیکر ویجت (Flickr Widget)
فلیکر ویجت ابزاری است که به شما این امکان را می دهد که جدیدترین تصاویری را که در وب سایتتان قرار داده اید در یک لیست عمودی در نوار کناری خود به صورت بند انگشتی نمایش دهید. با این کار تصاویر شما در معرض دید کاربر قرار می گیرند و احتمال آنکه کاربر بر روی آنها کلیک نماید و از صفحه مربوط به آنها دیدن کند افزایش می یابد. ویژوال کامپوزر امکان ایجاد فلیکر ویجت با در وب سایت را با استفاده از یک المان محتوای مجزا برای کاربران فراهم نموده است.
برای ایجاد فلیکر ویجت در صفحات وب سایت خود با استفاده از ویژوال کامپوزر شما باید بر روی دکمه ی “Add Element” کلیک کنید و سپس المان محتوای “Flickr Widget” را انتخاب نمایید. پس از آنکه این المان برای شما بار گذاری شد در صفحه باز شده آپشن های زیر را تنظیم نمایید:
Widget Title: در این بخش شما می توانید متنی را وارد کنید تا آن متن یا عبارت عنوان ویجت شما را تشکیل دهد.
Flickr ID : شما می توانید از ابزار IdGetter برای شناسایی آی دی فلیکر خود استفاده نمایید . برای این کار تنها کافیست که لینک مربوط به مجموعه عکس هایی که می خواهید در فلیکر ویجت خود استتفاده نمایید را در این ابزار کپی کنید.
Number Of Photos: در این بخش شما باید تعداد عکس هایی که می خواهید در فلیکر ویجت شما نمایش داده شوند را تعیین کنید.
Type: شما می توانید در این بخش نوع و فرم فلیکر ویجت خود را تعیین نمایید.
Display Order: شما می توانید در این بخش تعیین کنید که تصاویر با چه ترتیبی نمایش داده شوند.
این گزینه های و بسیاری گزینه های دیگر در فلیکر ویجت وجود دارد که شما می توانید با استفاده از آنها تنظیمات مربوط به نمایش تصاویر مد نظر خود در نوار کناری را تنظیم نمایید. فقط به خاطر داشته باشید زمانی که کار شما به اتمام رسید باید بر روی گزینه “Save Changes” کلیک نمایید تا تغییرات مد نظر شما اعمال گردد، در غیر این صورت تمامی تلاش های شما در این بخش بی ثمر خواهد ماند.
افزودن گوگل مپ به صفحه
برای افزودن گوگل مپ به صفحه مد نظر خود باید ابتدا بر روی کلید “Add Element” کلیک کنید و سپس المان محتوای “Google Maps” را انتخاب کنید. سپس باید تنظیماتی که در زیر برای شما نام برده شده اند را در صفحه مربوط به المان محتوای گوگل مپ انجام دهید:
Map Embed iframe: در این بخش شما می توانید مپ خود را در گوگل مپ بیابید و درون صفحه جایگذاری کنید. برای این کار شما باید ابتدا بر روی انکر تکست “Google Maps” در زیر کادر کلیک کنید تا به صفحه گوگل مپ هدایت شوید و سپس در این صفحه مراحل زیر را گام به گام انجام دهید:
ابتدا لوکیشن خود را بیابید.
بر روی نماد چرخ دنده کلیک کنید (این گزینه در بخش میانی پایین صفحه قرار دارد) و سپس گزینه “Share or Embed Map” را انتخاب کنید.
در پنجره گشوده شده گزینه “Embed Map” را انتخاب کنید.
در مرحله آخر باید کد Iframe مربوطه را کپی نمایید و در کادر زیر “Map embed iframe” آن را جایگذاری کنید.
Map Height: شما می توانید اندازه نقشه مورد نظر خود را در این بخش تعیین نمایید. این گزینه به صورت پیش فرض بر روی “Standard” تنظیم شده است. شما می توانید در صورت نیاز آن را تغییر دهید.
اگر شما پس از انجام تنظیمات مد نظر خود در این صفحه بر روی کلید “Save Changes” کلیک نمایید خواهید توانست نتایج این تغییرات را در صفحه مد نظر خود ببینید.
ایجاد گالری تصاویر
اگر تمایل به ایجاد گالری تصاویر درون صفحات وب سایت خود دارید می توانید با استفاده از ویژوال کامپوزر این کار را به سادگی انجام دهید. برای ایجاد گالری تصاویر در صفحات وب سایت با استفاده از ویژوال کامپوزر باید از المان محتوای “Image Gallery” استفاده نمایید. چگونگی استفاده از این المان و ایجاد گالری تصاویر درون صفحات را در یک بخش مجزا برای شما آورده ایم. برای کسب اطلاعات بیشتر در زمینه ایجاد گالری تصاویر به بخش نام برده مراجعه نمایید.
ویدیو پلیر (Video Player)
شما می توانید با استفاده از المان محتوای “Video Player” ویژوال کامپوزر ویدیوهای یوتیوب را درون صفحات وب سایت خود قرار دهید. برای استفاده از ویدیو پلیر باید ابتدا بر روی آپشن “Add Element” کلیک نمایید و سپس المان “Video Player” را انتخاب نمایید و تنظیماتی که در زیر اشاره شده است را در آن اعمال نمایید:
Widget title: این بخش برای تعیین نام ویجت ایجاد شده توسط شما مورد استفاده قرار می گیرد و پر کردن یا پر نکردن کادر مربوط به نام ویجت اختیاری است و هیچ الزامی وجود ندارد که شما حتما نام آن را تعیین نمایید.
Video Link: در این بخش شما باید لینک ویدیوی یوتیوبی که می خواهید درون صفحه قرار دهید را وارد کنید.
Extra Class Name: در این بخش شما می توانید در صورت نیاز به کلاس های اضافه ای برای ایجاد تغییرات در ویدیوی مد نظر خود ، نام آنها را وارد نمایید تا بتوانید از آنها برای ایجاد فرم دهی های مجزا در ویدیوهای خود استفاده نمایید.
مثل همیشه شما باید پیش از آنکه از این صفحه خارج شوید تغییرات ایجاد شده را به نوعی ذخیره سازی نمایید. برای این کار باید بر روی کلید “Save Changes” کلیک نمایید.
پراگرس بار یا نوار پیشرفت (Progress bar)
اگر تمایل به ایجاد پراگرس بار در صفحات وب سایت خود دارید، می توانید برای این کار از ویژوال کامپوزر استفاده نمایید. برای افزودن پراگرس بار به صفحات خود باید بر روی گزینه “Add Element” کلیک کنید و سپس المان “Progress Bar” را از میان المان های محتوای موجود در کتابخانه المان های ویژوال کامپوزر انتخاب نمایید. پس از باز شدن صفحه مربوط به پراگرس بار باید تغییرات نام برده شده در زیر را درون این صفحه اعمال نمایید:
Style: در این بخش شما باید نوع و شکل پراگرس باری که می خواهید درون صفحه شما قرار گیرد را انتخاب نمایید. در این آپشن انواع مختلفی از پراگرس بارها وجود دارد که شما می تواندی بر حسب سلیقه خود پراگرس بار مد نظر خود را انتخاب نمایید. پس از آن در صفحه ای که ظاهر می شود باید گزینه “Bar” را انتخاب نمایید.
Progress Bar Title: این گزینه به شما امکان انتخاب عنوانی برای پراگرس بار مد نظرتان را می دهد.
Percentage: برای تعیین درصدی مد نظر شما است. شما هر عددی که در کادر زیر این گزینه بنویسید به صورت در صد در پراگرس بار برای شما نمایش داده خواهد شد.
Color: در این بخش شما می توانید رنگ پراگرس بار مدنظرتان را تعیین نمایید.
در این بخش تنظیمات متعددی وجود داردکه شما می توانید با استفاده از آنها پراگرس بار خود را به هر شکل و فرمی که می خواهید در آورید. به خاطر داشته باشید که پیش از خروج از صفحه بر روی دکمه “Save Changes” کلیک نمایید.
ایمیج کاروسل
کاروسل ابزارهای مفیدی برای نمایش اطلاعیه ها ، سر تیترهای خبری یا اخبار داغ، ویدیو ها و یا تصاویر به صورت گردشی می باشد. در المان محتوای “Image Carousel” شما می توانید با ایجاد اسلات های تصویری ، تصاویر را به صورت گردشی در قسمتی از سایت خود به نمایش بگذارید .ایمیج کاروسل به شما امکان تنظیمات متعددی را می دهد که برخی از آنها به شرح زیر می باشد:
Image: در این بخش شما می توانید تصاویری را که می خواهید در لیست گردشی شما قرار داده شوند اضافه نمایید.
Carousel Size: شما می توانید در این بخش سایز تصاویر را در لیست گردان خود تعیین نمایید. برای این کار می توانید به دو شیوه مختلف عمل کنید، شیوه اول انتخاب سایز به صورت Thumbnail، Medium، Large و … و شیوده دوم تعیین سایز تصاویر به صورت تعداد پیکسل، برای مثال شما می توانید اندازه تصاویر را به شکل ۲۰۰* ۱۰۰ پیکسل (طول و عرض) انتخاب نمایید.
On Click Action : با استفاده از این آپشن شما می توانید تعیین کنید که اگر کاربر بر روی یکی از عکس ها کلیک نمود چه فید بکی دریافت کند. مثلا شما می توانید تعیین کنید که زمانی که کاربر بر روی یک تصویر کلیک نمود، تصویر بزرگ شده و در یک صفحه مجزا نمایش داده شود و یا در همان صفحه نمایش داده شود. اگر نمی خواهید در هنگام کلیک کردن کاربر اتفاقی بیفتد می توانید گزینه “No Action” را انتخاب نمایید.
Slider Orientation: همان طور که از نام این آپشن پیداست شما می توانید با استفاده از این آپشن جهت گردش تصاویر در لیست گردان را تعیین نمایید.
Slider Speed: سرعت جا به جایی و یا سرعت انتقال اسلایدها با استفاده از این گزینه تعیین می شود. شما می توانید زمانی را در کادر زیر این گزینه تعیین کنید (به صورت میلی ثانیه)، این زمان فاصله زمانی از شروع حرکت اسلاید اول تا جایگزین شدن اسلاید بعدی را تعیین می نماید.
Slide Per View: این گزینه تعداد اسلاید هایی را که در هر لحظه به صورت همزمان نشان داده می شوند را تعیین می کند. برای مثال اگر شما ۱۲ تصویر در لیست گردان خود داشته باشید می توانید تعیین کنید که در هر گردش ۳ تا از آنها به صورت همزمان نمایش داده شوند.
Enable Autoplay: اگر شما چک باکس این گزینه را تیک بزنید، کاروسل شما به حالت نمایش خودکار در خواهد آمد. یعنی زمانی که کاربر صفحه ای که در آن کاروسل قرار دارد را باز کند بدون آنکه گزینه نمایش را کلیک کند کاروسل به صورت اتوماتیک شروع به گردش می نماید.
Hide Pagination Control: اگر کاربر چک باکس مربوط به این آپشن را تیک بزن، شمارنده اسلاید که معمولا به شکل دایره های ریز در پایین تصاویر نمایش داده می شود، از پایین تصاویر حذف می گردد و کاربر برای جلو و یا عقب بردن اسلاید ها باید از گزینه های Next/Prev استفاده نماید.
Hide next/Prev Buttons : با استفاده از این گزینه شما می توانید کلید های Next و Previous را از سمت چپ و راست کاروسل خود حذف نمایید و در این صورت کاربر برای جا به جا کردن اسلاید ها باید از شمارنده های پایین صفحه استفاده نماید.
Partial view : اگر چک باکس مربوط به این گزینه را تیک بزنید بخشی از اسلاید بعدی در هنگام نمایش هر اسلاید، در کنار آن نمایش داده می شود.
Slider Loop : اگر چک باکس این گزینه را تیک بزنید کاروسل شما در یک چرخه قرار می گیرد که نمایش آن دائما به صورت تکرار شونده انجام می وشد و هیچ گاه متوقف نمی گردد.
این تغییرات و بسیاری تغییرات دیگر در رابطه با کاروسل ها در المان محتوای “Image Carousel” برای شما امکان پذیر می باشد و شما می توانید با استفاده از این گزینه ها یک لیست تصاویر گردشی کاملا مطابق با سلیقه خود ایجاد نمایید. به خاطر داشته باشید که حتما پس از اتمام پروسه ایجاد تنظیمات در صفحه باید بر روی گزینه “Save Changes” کلیک نمایید تا تغییراتی که ایجاد نموده اید ذخیره سازی گردد، اگر فراموش کنید که پیش از خروج از صفحه این کار را انجام دهید، تمامی زحمات شما برای ایجاد کاروسل به هدر خواهد رفت.

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


مطالب دیگری که خواندنش حتما پیشنهاد میشود

مهدیزاده
نویسنده

حامد مهدی زاده هستم 37 سال سن , 8 سال سابقه در رابطه با برنامه نویسی سئو و بهینه سازی سایت دارم , در سئو چون باید طبق الگوریتمها به روزبود نام سایت را سئو روز نهادم, همراهی کنید در شبکه های اجتماعی


√ انجمن سئو امروز راه اندازی شد . سوالات و مشکلات و نظرات خود را میتوانید به اشتراک بگذارید 

2 نظر

  1. majid | ۱۳۹۶/۰۳/۰۳ at ۱۰:۵۵

    سلام و خسته نباشید
    شما سایتتون رو با ویژوال کامپوزر طراحی کردید. درسته؟

    پاسخ دادن
    • مهدیزاده | ۱۳۹۶/۰۳/۰۴ at ۰۸:۴۹

      سلام بله دوست عزیز

      پاسخ دادن

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

مطالب اخیر