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

ویژوال کامپوزر (Visual Composer) یکی از محبوب‌ترین افزونه‌های پیج بیلدر در میان کاربران وردپرس است. این افزونه با فروش و استفاده‌ای بسیار بیشتر از سایر پیج بیلدرهای مشابه، به یکی از انتخاب‌های اصلی طراحان و توسعه‌دهندگان وب تبدیل شده است.

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

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

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

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

چگونه پلاگین ویژوال کامپوزر را در وردپرس نصب و فعال‌سازی نماییم؟

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

۱. خرید ویژوال کامپوزر

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

۲. ورود به پیشخوان وردپرس

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

۳. نصب ویژوال کامپوزر

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

۴. فعال‌سازی پلاگین

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

۵. فعال‌سازی لایسنس

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

1. به پیشخوان وردپرس بروید.
2. بر روی ویژوال کامپوزر در منوی سمت راست کلیک کنید.
3. به بخش تنظیمات یا لایسنس بروید.
4. کد لایسنس خود را وارد کنید و بر روی فعال‌سازی کلیک کنید.

۶. دریافت بروز رسانی‌ها

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

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

خطرات استفاده از نسخه‌های منسوخ

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

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

مراحل نصب ویژوال کامپوزر

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

1. اکسترکت کردن فایل: پس از دانلود، فایل را اکسترکت کنید. درون آن، فایلی با نام “js_composer” مشاهده خواهید کرد.

2. انتقال فایل: این فایل را به صورت درگ اند دراپ به روی دسکتاپ منتقل کنید.

3. ورود به پنل ادمین: وارد پنل ادمین وب‌سایت خود شوید.

4. نصب پلاگین:

   • به مسیر Plugins -> Add Plugin (Add New) بروید.
   • بر روی Upload Plugin کلیک کنید.
   • فایل “js_composer” را انتخاب کنید و بر روی Open کلیک نمایید.
   • سپس بر روی گزینه Install Now کلیک کنید و منتظر بمانید تا پلاگین ویژوال کامپوزر نصب گردد.

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

برای فعال‌سازی لایسنس ویژوال کامپوزر، ابتدا مراحل زیر را دنبال کنید:

۱. دانلود گواهی لایسنس

1. به وب‌سایت codecanyon.net/downloads بروید.

2. به بخش مربوط به ویژوال کامپوزر مراجعه کنید.

3. بر روی دکمه Download کلیک کنید و گزینه “License certificate & certificate code” را انتخاب نمایید. (اگر این گزینه را نیافتید، به دنبال گزینه‌ای با نام مشابه بگردید.)

4. در اینجا دو گزینه مشابه وجود دارد؛ شما باید گزینه‌ای که جلوی آن عبارت “text” نوشته شده است را انتخاب و دانلود کنید.

5. فایل دانلود شده را باز کرده و Item Purchase Code یا کد خرید محصول را بیابید.

۲. دریافت Secret API Code

1. برای دریافت یک Secret API Code، باید در Envato یک حساب کاربری ایجاد کنید. برای این کار:
   • به codecanyon.net مراجعه کنید.
   • نشانگر موس خود را بر روی Account Username قرار دهید و گزینه Settings را انتخاب کنید.
   • بر روی گزینه “API Key” کلیک کنید.
   • یک کلمه دلخواه را در قسمت مربوطه تایپ کنید و سپس بر روی گزینه “Generate API Key” کلیک کنید تا یک API Key جدید دریافت نمایید.

۳. فعال‌سازی لایسنس در وردپرس

1. وارد پنل اکانت وردپرس خود شوید.

2. به مسیر Visual Composer Product License بروید.

3. در صفحه جدید، اطلاعات زیر را وارد کنید:

   • نام اکانت خود در Envato
   • API Key محرمانه دریافتی
   • کد خرید محصول

4. پس از وارد کردن اطلاعات، اگر لایسنس شما با موفقیت فعال شود، پیام “License successfully activated” را بر روی صفحه مشاهده خواهید کرد.

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

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

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

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

1. به بخش General Settings در ویژوال کامپوزر بروید.

2. در این بخش، یک چک‌باکس با نام “Disable responsive content elements” مشاهده خواهید کرد.

   • اگر این گزینه فعال باشد (تیک خورده): ریسپانسیو بودن غیرفعال خواهد بود.
   • اگر تیک این گزینه برداشته شود: ریسپانسیو بودن برای المان‌های محتوا فعال می‌شود.

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

نکات مهم

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

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

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

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

نحوه کنترل دسترسی یوزر گروپ‌ها در ویژوال کامپوزر

برای کنترل دسترسی هر یوزر گروپ به بخش‌های مختلف ویژوال کامپوزر، باید از Role Manager استفاده کنید. مراحل انجام این کار به شرح زیر است:

1. وارد پنل مدیریت وردپرس خود شوید.

2. به بخش Visual Composer در منوی مدیریتی بروید.

3. از این قسمت به بخش Role Manager وارد شوید.

4. در این بخش، می‌توانید دسترسی‌ها را برای گروه‌های مختلف کاربری تنظیم کنید:

   • ادمین‌ها: دسترسی کامل به تمامی بخش‌ها.
   • ویرایشگرها: دسترسی محدود به برخی از ویژگی‌ها.
   • نویسندگان: تنها دسترسی به ویرایش محتوا.
   • مهمان‌ها: دسترسی به مشاهده صفحات بدون امکان ویرایش.

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

مزایای استفاده از Role Manager

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

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

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

منوهای آبشاری موجود در Role Manager

1. Post Types:

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

2. Backend Editor:

   • در این منو، دو گزینه اصلی وجود دارد:
     • Disable: با انتخاب این گزینه، ویرایشگر Backend برای تمامی کاربرانی که دسترسی به آن دارند غیرفعال می‌شود.
     • Enable: این گزینه به شما اجازه می‌دهد تا ویرایشگر Backend ویژوال کامپوزر را برای گروه‌های مختلف فعال کنید.

   این گزینه‌ها به شما این امکان را می‌دهند که بتوانید برای کاربران مختلف، ویرایشگر Backend را فعال یا غیرفعال کنید. برای مثال، اگر می‌خواهید دسترسی ویرایشگر Backend را تنها برای گروه‌های خاصی از کاربران فعال کنید، از این منو استفاده کنید.

نحوه استفاده از این تنظیمات

برای تنظیم دقیق دسترسی‌ها، کافی است از منوهای آبشاری موجود در Role Manager استفاده کنید و بر اساس نیاز خود گزینه‌های مربوطه را انتخاب نمایید. به عنوان مثال، اگر می‌خواهید به نویسندگان یا ویرایشگران اجازه ویرایش صفحات را بدهید اما دسترسی به ویرایش پست‌ها را نداشته باشند، کافی است گزینه Only Page را انتخاب کنید و برای ویرایشگر Backend نیز طبق نیاز خود Enable یا Disable را تنظیم کنید.

نکات تکمیلی:

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

کنترل دسترسی یوزر گروپ‌ها با استفاده از Frontend Editor و دیگر تنظیمات در Role Manager

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

1. Frontend Editor:

• مشابه Backend Editor، این منو نیز دارای دو گزینه اصلی است:
  • Disable: این گزینه به شما اجازه می‌دهد تا ویرایشگر Frontend را برای تمامی ویرایشگران سایت غیرفعال کنید.
  • Enable: با انتخاب این گزینه، می‌توانید ویرایشگر Frontend را برای کاربران فعال کنید تا آن‌ها بتوانند صفحات را به صورت زنده در نمای Frontend ویرایش کنند.

2. Page Setting:

• این منو برای کنترل دسترسی به صفحه تنظیمات ویژوال کامپوزر استفاده می‌شود.
• پیشنهاد می‌شود گزینه Disable را انتخاب کنید تا دسترسی به تنظیمات ویژوال کامپوزر برای تمامی گروه‌های کاربری محدود شود و تنها ادمین‌ها دسترسی کامل داشته باشند. این کار به حفظ امنیت سایت کمک می‌کند و از تغییرات ناخواسته توسط کاربران غیرمجاز جلوگیری می‌کند.

3. Settings Options:

• این منو برای کنترل دسترسی به بخش‌های مختلف تنظیمات ادمین در ویژوال کامپوزر، از جمله General Settings و Shortcode Mapper، استفاده می‌شود.
• شما می‌توانید دسترسی گروه‌های مختلف به این تنظیمات را محدود کنید تا تنها ادمین‌ها به تنظیمات پیشرفته و حساس دسترسی داشته باشند.

4. Templates:

• این منو به شما این امکان را می‌دهد که دسترسی یوزر گروپ‌ها به تمپلیت‌ها و تمپلیت‌های پیش‌ساخته را کنترل کنید.
• اگر می‌خواهید دسترسی کاربران را برای اضافه کردن یا حذف تمپلیت‌ها محدود کنید، گزینه “Apply Templates Only” را انتخاب کنید.

5. Elements:

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

6. Grid Builder:

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

7. Element Presets:

• این منو برای تنظیم دسترسی به تنظیمات پیش‌فرض المان‌ها در فرم ویرایش المان‌ها استفاده می‌شود.
• اگر می‌خواهید فقط گروه‌های خاصی از کاربران قادر به تغییر تنظیمات پیش‌فرض المان‌ها باشند، گزینه “Apply Preset Only” را انتخاب کنید. این تنظیم به شما کمک می‌کند که کاربران نتوانند تنظیمات پیش‌فرض را تغییر یا حذف کنند.

نکات مهم برای استفاده از Role Manager:

• ذخیره تغییرات: پس از انجام هر گونه تغییر در دسترسی‌ها، حتماً باید بر روی Save Changes کلیک کنید تا تنظیمات جدید ذخیره شوند. در غیر این صورت، تغییرات اعمال نخواهند شد و تنظیمات به حالت قبلی باز خواهند گشت.
• تنظیمات دقیق: با استفاده از Role Manager می‌توانید سطح دسترسی کاربران را به جزئیات بیشتری کنترل کنید، از جمله دسترسی به ابزارهای ویرایش صفحات، تمپلیت‌ها، المان‌ها، و تنظیمات.

تغییر ظاهر سایت با استفاده از ویژوال کامپوزر (Designing Options)

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

1. دسترسی به بخش Designing Options

برای انجام تغییرات در ظاهر سایت، ابتدا باید وارد پنل وردپرس خود شوید و سپس مسیر زیر را طی کنید:

• Visual Composer -> Designing Options

پس از ورود به این بخش، ابتدا باید چک‌باکس مربوط به فعال‌سازی گزینه‌های طراحی را تیک بزنید. این چک‌باکس در بالای صفحه قرار دارد و عبارت “Use Custom Designing Options” در کنار آن نوشته شده است. تا زمانی که این گزینه را فعال نکنید، امکان ویرایش و تغییر ظاهر سایت برای شما فعال نخواهد شد.

2. تنظیمات قابل ویرایش در Designing Options

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

• Main Accent Color: تغییر رنگ زمینه اصلی سایت.
• Hover Color: تنظیم رنگ ثانویه یا رنگ شناور برای لینک‌ها و دکمه‌ها.
• Call to Action (CTA) 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: تغییر اندازه عرض صفحه در دستگاه‌های موبایل.

3. نحوه اعمال تغییرات

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

4. ذخیره یا بازنشانی تغییرات

در انتهای این صفحه، دو دکمه با عناوین زیر وجود دارند:

• Save Changes: با کلیک بر روی این دکمه، تمامی تغییراتی که انجام داده‌اید ذخیره می‌شود.
• Restore Default: با استفاده از این دکمه، تمامی تنظیمات به حالت اولیه باز می‌گردند و تغییرات اعمال شده لغو می‌شوند.

نکات مهم:

• چک باکس “Use Custom Designing Options”: تا زمانی که این چک‌باکس را تیک نزنید، امکان استفاده از گزینه‌های طراحی در دسترس شما نخواهد بود.
• دقت در تغییرات: تغییرات اعمال‌شده در این بخش تاثیر زیادی بر طراحی و تجربه کاربری سایت شما خواهند داشت، پس هنگام ویرایش این بخش‌ها دقت کنید.

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

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

1. دسترسی به بخش Custom CSS در ویژوال کامپوزر

برای استفاده از این ویژگی و اضافه کردن کدهای CSS به سایت، ابتدا باید وارد پنل وردپرس خود شوید و سپس مسیر زیر را طی کنید:

• Visual Composer -> Custom CSS

2. نحوه اضافه کردن CSS به سایت

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

3. ویژگی‌های بخش Custom CSS

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

• عدم نیاز به پلاگین اضافی: در صورتی که از نسخه جدید ویژوال کامپوزر استفاده می‌کنید، نیاز به نصب پلاگین‌های جداگانه برای اضافه کردن CSS نخواهید داشت.

• قابلیت پیش‌نمایش سریع: بعد از اضافه کردن کدهای CSS، می‌توانید پیش‌نمایش تغییرات خود را مشاهده کرده و در صورت نیاز، آنها را ویرایش کنید.

4. نکات مهم

• ورژن ویژوال کامپوزر: این قابلیت تنها در نسخه‌های جدید ویژوال کامپوزر موجود است. اگر از نسخه‌های قدیمی‌تر استفاده می‌کنید، این بخش ممکن است غیرفعال باشد و برای اضافه کردن CSS باید روش‌های دیگر را دنبال کنید.

• اعمال تغییرات: پس از نوشتن کدهای CSS دلخواه، حتماً باید تغییرات را ذخیره کنید. در غیر این صورت، تغییرات شما اعمال نخواهد شد.

5. مزایای استفاده از Custom CSS در ویژوال کامپوزر

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

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

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

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

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

افزودن شورت کدها به ویژوال کامپوزر یکی از ویژگی‌های مهمی است که می‌تواند به کاربران کمک کند تا قابلیت‌های اضافی و سفارشی را به سایت خود اضافه کنند. این ویژگی به ویژه برای افرادی که می‌خواهند از کدهای ثانویه و شورت کدها برای ساده‌تر کردن فرآیند ویرایش صفحات و پست‌ها استفاده کنند، بسیار مفید است. ویژوال کامپوزر این امکان را در بخش Shortcode Mapper به کاربران ارائه می‌دهد تا بتوانند شورت کدهای سفارشی و شخصی‌سازی شده را به پلاگین خود اضافه کنند.

1. دسترسی به بخش Shortcode Mapper

برای اضافه کردن شورت کدها به ویژوال کامپوزر، ابتدا باید وارد پنل وردپرس خود شوید و سپس مسیر زیر را طی کنید:

• Visual Composer Shortcode Mapper

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

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

در این بخش، شما می‌توانید شورت کدهایی مانند کدهای ویدیو، دکمه‌ها، فرم‌ها و سایر المان‌های مختلف را به ویژوال کامپوزر خود اضافه کنید. به عنوان مثال، فرض کنید شما می‌خواهید یک شورت کد برای نمایش ویدیوهای یوتیوب در سایت خود اضافه کنید. برای این کار باید مراحل زیر را طی کنید:

1. ایجاد شورت کد جدید

• وارد بخش Shortcode Mapper شوید.
• برای افزودن شورت کد جدید، روی دکمه Add New کلیک کنید.
• در بخش جدید، باید اطلاعات زیر را وارد کنید:
  • Name: نام شورت کد (مثلاً YouTube Video).
  • Shortcode: کد شورت کدی که می‌خواهید اضافه کنید (مثلاً [youtube_video src=”video_url”]).
  • Category: دسته‌بندی شورت کد (اختیاری).

2. تنظیمات و ویژگی‌ها

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

• Description: توضیحاتی در مورد شورت کد وارد کنید تا دیگران بدانند از آن برای چه کاربردی استفاده کنند.
• Icon: آیکونی را برای شورت کد خود انتخاب کنید تا در ویرایشگر ویژوال کامپوزر قابل شناسایی باشد.
• Attributes: در صورتی که شورت کد شما نیاز به ورودی‌های خاص دارد (مثل URL ویدیو در شورت کد یوتیوب)، می‌توانید این ورودی‌ها را به عنوان Attributes تعریف کنید.

3. ذخیره شورت کد

پس از تکمیل این مراحل، بر روی دکمه Save Changes کلیک کنید تا شورت کد جدید شما ذخیره شود.

3. استفاده از شورت کد در ویرایشگر ویژوال کامپوزر

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

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

4. مثال شورت کد یوتیوب

فرض کنید شما یک شورت کد برای نمایش ویدیوهای یوتیوب می‌خواهید اضافه کنید. شورت کد به این شکل خواهد بود:

• نام شورت کد: YouTube Video
• کد شورت کد: [youtube_video src=”video_url”]
• ویژگی‌ها: src برای وارد کردن لینک ویدیو.

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

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

1. نصب و فعال‌سازی پلاگین یوتیوب

• وارد پنل مدیریت وردپرس شوید.
• از بخش پلاگین‌ها افزودن جدید، پلاگین YouTube Free یا هر پلاگین مشابه یوتیوب را جستجو کنید.
• پس از نصب، پلاگین را فعال کنید.

2. شناسایی شورت کد یوتیوب

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

• وارد بخش YouTube Free در پلاگین شوید.
• شورت کدی که برای نمایش ویدیوهای یوتیوب در این پلاگین در نظر گرفته شده است را شناسایی کنید. معمولاً شورت کد به شکل [youtube_video src="video_url"] خواهد بود که باید URL ویدیو یوتیوب را در آن قرار دهید.

3. افزودن شورت کد به ویژوال کامپوزر

حالا برای اضافه کردن شورت کد یوتیوب به ویژوال کامپوزر:

• وارد ویژوال کامپوزر شوید.
• به بخش Shortcode Mapper در ویژوال کامپوزر بروید.
• در کادر بالای صفحه که با عبارت ShortCode String مشخص شده است، شورت کد یوتیوب (مانند [youtube_video src="video_url"]) را وارد کنید.
• سپس بر روی دکمه Parse Code در پایین صفحه کلیک کنید.

4. استفاده از شورت کد در صفحات

پس از پارس کردن شورت کد و اضافه کردن آن به ویژوال کامپوزر:

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

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

1. تنظیم پارامترهای اضافی (اختیاری)

اگر می‌خواهید پارامترهای اضافی مانند عنوان، نوع و توضیحات را به شورت کد اضافه کنید:

• وارد بخش General Information در Shortcode Mapper شوید.
• چک باکس Include content Param into shortcode را تیک بزنید.
• این گزینه به شما این امکان را می‌دهد که اطلاعات اضافی مانند عنوان، توضیحات و دیگر پارامترها را به شورت کد وارد کرده و سفارشی کنید.

2. ذخیره تغییرات

پس از اعمال تغییرات و تنظیم پارامترهای اضافی، برای ذخیره آن‌ها:

• بر روی دکمه Save Changes کلیک کنید.

3. افزودن شورت کد به صفحه با استفاده از Frontend Editor

حالا که شورت کد یوتیوب را به ویژوال کامپوزر اضافه کرده‌اید، برای وارد کردن ویدیوهای یوتیوب در صفحات:

• وارد ویژوال کامپوزر شوید.
• وارد Frontend Editor شوید (اگر از ویرایشگر Frontend استفاده می‌کنید).
• بر روی دکمه Add Element کلیک کنید.
• از فهرست کشویی، گزینه My Shortcode را انتخاب کنید.
• سپس روی گزینه Embedyt کلیک کنید.

4. وارد کردن لینک ویدیو یوتیوب

پس از انتخاب Embedyt، در پنجره باز شده:

• لینک ویدیوی یوتیوب مورد نظر خود را وارد کنید.
• سپس بر روی دکمه Update کلیک کنید.

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

آموزش کامل کار با ویرایشگر Backend در ویژوال کامپوزر

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

1. ورود به پنل ادمین وردپرس

برای شروع، ابتدا به پنل ادمین وردپرس خود وارد شوید.

2. ایجاد یک صفحه جدید

پس از ورود به پنل ادمین، مسیر زیر را طی کنید تا یک صفحه جدید ایجاد کنید:

• Pages -> Add New Page

3. انتخاب ویرایشگر Backend

پس از ایجاد صفحه جدید، شما به صورت پیش‌فرض در ویرایشگر وردپرس قرار دارید. برای استفاده از ویرایشگر Backend ویژوال کامپوزر:

• بر روی دکمه Backend Editor که در بالای ویرایشگر قرار دارد کلیک کنید.

4. آشنایی با محیط ویرایشگر Backend

ویرایشگر Backend دارای محیط مشابهی با ویرایشگر پیش‌فرض وردپرس است. شما می‌توانید المان‌ها و محتوای خود را به راحتی اضافه و ویرایش کنید. در اینجا برخی از قابلیت‌های این ویرایشگر را بررسی خواهیم کرد:

4.1 اضافه کردن المان‌ها

• با کلیک بر روی دکمه Add Element می‌توانید از میان انواع المان‌های موجود یکی را انتخاب کرده و به صفحه خود اضافه کنید. این المان‌ها شامل متن، تصویر، اسلاید شو و … هستند.

4.2 سفارشی‌سازی المان‌ها

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

4.3 استفاده از حالت فول اسکرین

• ویرایشگر Backend دارای قابلیت فول اسکرین است. با کلیک بر روی دکمه Full Screen می‌توانید محیط ویرایش را بزرگ‌تر کرده و تمرکز بیشتری بر روی ویرایش خود داشته باشید.

5. ذخیره تغییرات

پس از انجام تغییرات، حتماً بر روی دکمه Save Changes یا Publish کلیک کنید تا تغییرات شما ذخیره شود.

6. دسترسی به ویرایشگر Backend از ویرایشگر پست‌ها

اگر به بخش Post Editor یا ویرایشگر پست‌ها در وردپرس مراجعه کنید، دو دکمه اضافی را مشاهده خواهید کرد:

• Backend Editor
• Frontend Editor

برای دسترسی به ویرایشگر Backend ویژوال کامپوزر، کافیست بر روی دکمه Backend Editor کلیک کنید. با این کار، ویرایشگر Backend بارگذاری خواهد شد و شما می‌توانید محتوای پست خود را به شیوه‌ای مشابه با ویرایشگر پیش‌فرض وردپرس ویرایش کنید.

7. ویژگی‌های اضافی ویرایشگر Backend

• مدیریت آسان محتوا: شما می‌توانید المان‌های مختلف را به سادگی اضافه یا حذف کنید.
• تنظیمات سفارشی: هر المان دارای گزینه‌های سفارشی‌سازی خاص خود است که می‌توانید از آن‌ها استفاده کنید.
• نظارت بر پیش‌نمایش: اگرچه ویرایشگر Backend به اندازه Frontend بصری نیست، اما هنوز هم می‌توانید نحوه چینش محتوا را ببینید.

8. انتقال به ویرایشگر Frontend

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

آموزش کار با ویرایشگر Backend ویژوال کامپوزر

زمانی که شما وارد ویرایشگر Backend ویژوال کامپوزر می‌شوید، با چند گزینه مختلف مواجه می‌شوید که هر یک وظیفه خاصی دارند:

1. لوگوی ویژوال کامپوزر: با کلیک بر روی این لوگو به وب‌سایت ارائه‌دهنده ویژوال کامپوزر هدایت خواهید شد.

2. کلید “+ Add New Element”: این گزینه به شما این امکان را می‌دهد که یک المان جدید از میان المان‌های موجود در کتابخانه ویژوال کامپوزر انتخاب کنید.

3. کلید تمپلیت (علامت “T”): با استفاده از این کلید می‌توانید یک تمپلیت جدید از میان تمپلیت‌های پیش‌ساخته موجود در ویژوال کامپوزر انتخاب کنید. این تمپلیت‌ها به شما در ایجاد صفحات مختلف مانند صفحات لندینگ و CTA کمک می‌کنند.

4. کلید تنظیمات (علامت چرخ‌دنده): این کلید برای دسترسی به تنظیمات است. شما می‌توانید با استفاده از آن CSS های مشخصی را به صفحات خود اضافه کنید.

5. کلید Responsive Preview (علامت مربع): با این کلید می‌توانید نحوه نمایش صفحه خود را در اندازه‌های مختلف صفحه‌نمایش (لپ‌تاپ، تبلت، موبایل) بررسی کنید.

6. کلید “Backend Editor”: این کلید به شما اجازه می‌دهد که به ویرایشگر Backend سوئیچ کنید. در صورت نیاز به استفاده از ویرایشگر Backend، حتماً پیش از کلیک بر روی این دکمه، تغییرات را با استفاده از دکمه “Update” ذخیره کنید.

7. کلید “Update”: با کلیک بر روی این دکمه، تغییرات شما ذخیره می‌شوند.

8. کلید بستن (علامت “×”): این دکمه برای خروج از ویرایشگر و بستن پنجره ویژوال کامپوزر است.

9. کلید فول اسکرین: با این کلید می‌توانید ویرایشگر را در حالت تمام صفحه نمایش دهید.

اضافه کردن المان‌های جدید

برای اضافه کردن یک المان جدید، مراحل زیر را دنبال کنید:

1. کلیک بر روی “Add New Element”: این گزینه را انتخاب کنید و یک پنجره جدید باز خواهد شد.

2. انتخاب المان “Row”: از لیست المان‌ها، گزینه “Row” را انتخاب کنید تا یک سطر جدید به صفحه شما اضافه شود. سطر مهم‌ترین المان برای سازماندهی محتوا در صفحه است.

3. انتخاب چیدمان ستون‌ها: پس از اضافه کردن سطر، می‌توانید با استفاده از گزینه “Choose Column” یکی از چیدمان‌های پیش‌ساخته را انتخاب کنید یا از گزینه “Add Column” برای اضافه کردن ستون‌های جدید استفاده کنید.

اضافه کردن محتوا به ستون‌ها

1. اضافه کردن تصویر: برای اضافه کردن یک تصویر به یکی از ستون‌ها، بر روی “Add Element” کلیک کنید و “Single Image” را انتخاب کنید. پس از انتخاب تصویر و تعیین سایز آن (معمولاً سایز “Medium” مناسب است)، بر روی “Prepend To Column” کلیک کنید تا تصویر در ستون مورد نظر قرار گیرد.

2. اضافه کردن متن: برای قرار دادن متن در زیر تصویر، از المان “Text Block” استفاده کنید و محتوا را درون آن وارد کنید.

3. کپی کردن محتوا: اگر بخواهید یک تصویر یا متن را در چند ستون استفاده کنید، می‌توانید از گزینه “Clone” استفاده کنید. با کلیک بر روی “Clone Image” یا “Clone Text Block” می‌توانید تصویر یا متن را کپی کنید و در ستون‌های دیگر قرار دهید.

نکته: 

برای اضافه کردن هر المان، باید از طریق گزینه “Add Element” اقدام کنید و هر یک را به صورت جداگانه درون صفحه قرار دهید. این روش به شما این امکان را می‌دهد که طراحی خود را به شکل دلخواه و با دقت بیشتری انجام دهید.

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

برای اعمال تغییرات در سطرهای ایجاد شده در صفحه، مراحل زیر را دنبال کنید:

1. ورود به تنظیمات سطر: بر روی گزینه “Edit This Row” کلیک کنید تا به صفحه “Row Setting” وارد شوید.

2. تنظیمات موجود در “Row Setting”:

   • Row Stretch: با استفاده از این گزینه می‌توانید طول سطر را مشخص کنید. به یاد داشته باشید که طول سطر باید با المان‌های داخل آن متناسب باشد. در غیر این صورت ممکن است با مشکل Overflow مواجه شوید.

   • Columns Gap: این گزینه به شما این امکان را می‌دهد که فاصله بین ستون‌ها را در یک سطر تنظیم کنید.

   • Full Height Row: با تیک زدن این گزینه، سطر به ارتفاع تمام صفحه گسترش می‌یابد و سطرهای دیگری در صفحه نخواهند گنجید.

   • Equal Height: اگر این گزینه را فعال کنید، تمام ستون‌های موجود در یک سطر به ارتفاع برابر خواهند رسید.

   • Content Position: با این گزینه می‌توانید محل قرارگیری محتوا درون یک ستون را تعیین کنید (بالا، وسط، پایین).

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

نسخه‌برداری از سطرها

شما می‌توانید سطرها را به سادگی نسخه‌برداری (Clone) کنید:

• برای این کار از نوار ابزار بالای سطر، گزینه “Clone This Row” را انتخاب کرده و سطر کپی شده را در محل دلخواه دراپ کنید.

سایر گزینه‌ها

از نوار ابزار سطر، می‌توانید سایر اقدام‌ها مانند:

• حذف سطرها: با انتخاب گزینه مربوطه، سطرهای اضافی را حذف کنید.
• ادغام سطرها: در صورت نیاز، سطرهای مختلف را با هم ادغام کنید.

ذخیره و پیش‌نمایش

پس از اتمام کار بر روی صفحه، بر روی دکمه “Update” کلیک کنید تا تغییرات اعمال شوند. سپس می‌توانید با استفاده از گزینه “Preview” صفحه ایجاد شده را مشاهده نمایید و از نتیجه کار خود مطمئن شوید.

اضافه کردن تصاویر به صفحه با ویژوال کامپوزر

برای افزودن تصاویر به صفحه پس از ایجاد سطرها و ستون‌های لازم، مراحل زیر را دنبال کنید:

1. انتخاب المان:

   • بر روی کلید “+” یا “Add Element” کلیک کنید تا به کتابخانه المان‌های ویژوال کامپوزر وارد شوید.

2. انتخاب المان تصویر:

   • از بین المان‌های موجود، گزینه “Single Image” را انتخاب کنید. این گزینه به شما امکان می‌دهد که یک تصویر را به صفحه اضافه کنید.

3. انتخاب و ویرایش تصویر:

   • پس از انتخاب “Single Image”، پنجره‌ای برای انتخاب تصویر از گالری رسانه‌های وردپرس به شما نمایش داده می‌شود. تصویری را که می‌خواهید اضافه کنید انتخاب کنید.
   • شما می‌توانید سایز تصویر را نیز در این مرحله تنظیم کنید. گزینه‌هایی مانند “Medium”، “Large” و غیره برای انتخاب سایز وجود دارد.

4. کپی و استفاده مجدد از تصویر:

   • پس از اضافه کردن تصویر به صفحه، می‌توانید آن را کپی کنید و در دیگر ستون‌ها یا بخش‌های صفحه خود قرار دهید. برای این کار، از گزینه “Clone” یا نسخه‌برداری استفاده کنید.

افزودن بلوک متنی به صفحه

برای افزودن یک بلوک متنی درست زیر تصویر، مراحل زیر را دنبال کنید:

1. انتخاب گزینه مناسب:

   • در کنار تصویری که به صفحه اضافه کرده‌اید، بر روی گزینه “Prepend To Column” کلیک کنید. این گزینه به شما اجازه می‌دهد محتوای جدیدی را درون ستون موجود اضافه کنید.

2. انتخاب المان متنی:

   • از لیست المان‌ها، گزینه “Text Block” را انتخاب کنید. این المان به شما امکان می‌دهد متن دلخواه خود را وارد کنید.

3. ویرایش متن:

   • پس از انتخاب “Text Block”، پنجره ویرایش متن برای شما باز می‌شود. محتوای متنی که می‌خواهید در این بخش نمایش دهید را وارد کنید و از گزینه‌های ویرایشی مانند تغییر فونت، اندازه و رنگ استفاده کنید.

4. ذخیره تغییرات:

   • پس از افزودن متن، بر روی دکمه “Update” کلیک کنید تا تغییرات شما ذخیره شود.

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

کلون کردن یا نسخه‌برداری از تصاویر

اگر می‌خواهید تصویری که در صفحه قرار داده‌اید را نسخه‌برداری کنید، مراحل زیر را دنبال کنید:

1. انتخاب گزینه کلون:

   • در کنار تصویری که می‌خواهید کپی کنید، بر روی گزینه “Clone Single Image” کلیک کنید. با این کار یک نسخه از تصویر در زیر تصویر اصلی ظاهر خواهد شد.

2. انتقال تصویر کپی:

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

3. ویرایش تصویر:

   • پس از کلون کردن، می‌توانید تغییرات لازم را بر روی تصویر جدید اعمال کنید. برای مثال، می‌توانید سایز، متن جایگزین یا هر ویژگی دیگری را تغییر دهید.

کلون کردن بلوک‌های متنی

این روند مشابهی برای بلوک‌های متنی نیز وجود دارد:

1. انتخاب گزینه کلون:

   • در کنار بلوک متنی که می‌خواهید کپی کنید، بر روی گزینه “Clone Text Block” کلیک کنید.

2. انتقال بلوک متنی:

   • با روش درگ‌اند‌دراپ، بلوک متنی کپی‌شده را به محل جدیدی در صفحه انتقال دهید.

3. ویرایش بلوک متنی:

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

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

ایجاد زبانه‌ها و منوهای آکاردئونی و تورها در ویژوال کامپوزر

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

۱. ایجاد زبانه‌ها

• اضافه کردن زبانه:
  1. بر روی گزینه “Add Element” کلیک کنید.
  2. از کتابخانه المان‌ها، المان “Tabs” را انتخاب کنید.
  3. محتوای مورد نظر برای هر زبانه را وارد کنید.

۲. ایجاد منوهای آکاردئونی

• اضافه کردن منو آکاردئونی:
  1. بر روی گزینه “Add Element” کلیک کنید.
  2. از کتابخانه المان‌ها، المان “Accordion” را انتخاب کنید.
  3. محتوای مربوط به هر بخش آکاردئونی را وارد کنید. کاربر می‌تواند با کلیک بر روی هر بخش، محتوا را مشاهده کند.

۳. ایجاد تورها

• اضافه کردن تور:
  1. بر روی گزینه “Add Element” کلیک کنید.
  2. از کتابخانه المان‌ها، المان “Tour” را انتخاب کنید.
  3. محتوای مربوط به هر بخش تور را تنظیم کنید.

نکات مهم

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

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

ایجاد کلید Call To Action (CTA) با استفاده از ویژوال کامپوزر

صفحات CTA (Call To Action) نقش مهمی در ترغیب مشتریان به خرید و سفارش محصولات دارند. با استفاده از ویژوال کامپوزر می‌توانید به راحتی این صفحات را ایجاد کنید. در ادامه، مراحل ساخت یک صفحه CTA را بررسی می‌کنیم:

۱. افزودن المان Call To Action

• افزودن المان:
  1. بر روی کلید “Add Element” کلیک کنید.
  2. از کتابخانه المان‌ها، المان “Call To Action” را انتخاب کنید.

۲. تنظیمات المان Call To Action

پس از اضافه کردن المان، صفحه تنظیمات آن نمایش داده می‌شود. زبانه “General” به طور پیش‌فرض فعال است و گزینه‌های زیر در دسترس است:

• Heading: عنوان جذاب برای صفحه CTA خود را وارد کنید.
• Subheading: یک زیرعنوان برای صفحه اضافه کنید.
• Text Alignment: چینش متن‌ها (چپ، راست، وسط) را انتخاب کنید.
• Shape: شکل بلوک CTA را تعیین کنید (پیش‌فرض دایره).
• Style: فرم نمایش بلوک CTA را تنظیم کنید.
• Color: رنگ بلوک CTA را انتخاب کنید.
• Text: متنی مختصر و مفید درباره محصول یا خدمت خود را وارد کنید.
• Width: پهنای بلوک CTA را تعیین کنید (پیش‌فرض 100%).

۳. افزودن دکمه (Button)

اگر می‌خواهید دکمه‌ای به بلوک CTA اضافه کنید:

• تیک گزینه Button: چک باکس مربوط به “Button” را تیک بزنید. این کار دو زبانه جدید به نام‌های “Button” و “Designing Options” را به شما نمایش می‌دهد.

تنظیمات دکمه:

• Text: متن روی دکمه (مثلاً “Buy Now” یا “Shop Now”).
• URL Link: لینک صفحه محصول یا پرداخت را وارد کنید.
• Style: فرم و شکل دکمه (تو خالی، تو پر، سایه‌دار، بدون سایه) را انتخاب کنید.
• Shape: شکل دکمه (دایره، بیضی و غیره) را تعیین کنید.
• Color: رنگ دکمه را تنظیم کنید.
• Alignment: محل قرارگیری دکمه (چپ یا راست) را انتخاب کنید.

نکات مهم

• اطمینان حاصل کنید که توضیحات و متن‌های وارد شده در صفحه CTA مختصر و قانع‌کننده باشد تا کاربر را به خرید تشویق کند.
• از طراحی بصری جذاب برای بلوک CTA و دکمه‌ها استفاده کنید تا توجه کاربران را جلب کنید.

با استفاده از این مراحل و تنظیمات، می‌توانید به راحتی یک صفحه Call To Action موثر ایجاد کنید که تجربه کاربری بهتری را فراهم کند و نرخ تبدیل را افزایش دهد.

ایجاد پست گرید یا شبکه محتوا

اگر می‌خواهید پست‌های سایت وردپرسی خود را به صورت گرید یا شبکه‌ای نمایش دهید، می‌توانید از المان محتوای “Post Grid” در ویژوال کامپوزر استفاده کنید. این روش به کاربران کمک می‌کند تا راحت‌تر مطالب را مرور کنند، بدون اینکه نیاز به کدنویسی داشته باشید.

مراحل افزودن پست گرید

1. افزودن المان:

   • بر روی گزینه “Add Element” کلیک کنید.
   • از کتابخانه المان‌ها، المان “Post Grid” را انتخاب نمایید.

2. تنظیمات گرید:

   • در این بخش می‌توانید تنظیمات مربوط به نمایش پست‌ها را اعمال کنید. این تنظیمات شامل انتخاب دسته‌بندی‌ها، تعداد پست‌ها و نوع چیدمان است.

افزودن فونت‌های گوگل

برای اضافه کردن فونت‌های رایج گوگل به پست‌ها یا صفحات خود، می‌توانید از المان محتوای “Custom Heading” استفاده کنید. برای یادگیری نحوه استفاده از این المان، به بخش‌های آموزشی اختصاصی مراجعه کنید.

ایجاد پست اسلایدر

اگر می‌خواهید محتواهای سایت خود را به صورت متحرک و جذاب به نمایش بگذارید، می‌توانید از المان “Post Slider” استفاده کنید:

1. افزودن المان:

   • بر روی گزینه “Add Element” کلیک کنید.
   • المان “Post Slider” را انتخاب نمایید.

2. تنظیمات اسلایدر:

   • Widget Title: عنوانی برای اسلایدر خود انتخاب کنید.
   • Slider Type: نوع اسلایدری که می‌خواهید ایجاد کنید را انتخاب کنید.
   • Slider Count: تعداد اسلایدها را مشخص کنید (می‌توانید گزینه “All” را انتخاب کنید).
   • Auto Rotate: مدت زمان گردش اسلایدها را تنظیم کنید.
   • Post Types: نوع محتواهای اسلایدها (صفحات یا پست‌ها) را انتخاب کنید.
   • Description: منبع توضیحات اسلایدها را مشخص کنید.
   • Out Put Post Title: اگر این گزینه را فعال کنید، عنوان هر اسلاید پیش از نمایش آن نمایش داده می‌شود.

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

ماسونری مدیا گرید (Masonry Media Grid)

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

نحوه ایجاد ماسونری مدیا گرید

برای ایجاد ماسونری مدیا گرید با ویژوال کامپوزر:

1. افزودن المان:
   • روی گزینه “Add Element” کلیک کنید.
   • از کتابخانه المان‌ها، “Masonry Media Grid” را انتخاب کنید.
2. تنظیمات:
   • پس از بارگذاری المان، تنظیمات مربوط به تصاویر و چیدمان را اعمال کنید.

فلیکر ویجت (Flickr Widget)

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

مراحل ایجاد فلیکر ویجت

1. افزودن المان:
   • بر روی “Add Element” کلیک کرده و “Flickr Widget” را انتخاب کنید.
2. تنظیمات:
   • Widget Title: عنوان ویجت خود را وارد کنید.
   • Flickr ID: از ابزار IdGetter برای شناسایی ID فلیکر خود استفاده کنید.
   • Number Of Photos: تعداد تصاویری که می‌خواهید نمایش دهید را تعیین کنید.
   • Type: نوع و فرم ویجت را مشخص کنید.
   • Display Order: ترتیب نمایش تصاویر را تعیین کنید.
3. ذخیره تغییرات: پس از اعمال تنظیمات، بر روی “Save Changes” کلیک کنید.

افزودن گوگل مپ به صفحه

برای اضافه کردن نقشه گوگل به صفحه، مراحل زیر را دنبال کنید:

1. افزودن المان:
   • بر روی “Add Element” کلیک کنید و “Google Maps” را انتخاب کنید.
2. تنظیمات:
   • Map Embed iframe: برای بدست آوردن کد iframe:
     • به صفحه گوگل مپ بروید و لوکیشن مورد نظر خود را پیدا کنید.
     • روی نماد چرخ دنده کلیک کنید و “Share or Embed Map” را انتخاب کنید.
     • گزینه “Embed Map” را انتخاب کرده و کد iframe را کپی کنید.
   • Map Height: ارتفاع نقشه را تعیین کنید.
3. ذخیره تغییرات: پس از تنظیمات، بر روی “Save Changes” کلیک کنید.

ایجاد گالری تصاویر

برای ایجاد گالری تصاویر در صفحات وب‌سایت خود با استفاده از ویژوال کامپوزر:

1. افزودن المان:
   • بر روی “Add Element” کلیک کرده و “Image Gallery” را انتخاب کنید.
2. تنظیمات گالری: جزئیات گالری را تنظیم کنید (تعداد تصاویر، ترتیب و غیره).
3. ذخیره تغییرات: پس از اتمام تنظیمات، بر روی “Save Changes” کلیک کنید.

با استفاده از این ابزارها می‌توانید تجربه کاربری جذاب‌تری برای بازدیدکنندگان وب‌سایت خود ایجاد کنید.

ویدیو پلیر (Video Player)

با استفاده از المان محتوای “Video Player” در ویژوال کامپوزر، می‌توانید ویدیوهای یوتیوب را به راحتی در صفحات وب‌سایت خود قرار دهید. این ابزار به شما امکان می‌دهد محتوای ویدیویی را به شکل جذاب و کاربرپسند نمایش دهید.

مراحل ایجاد ویدیو پلیر

1. افزودن المان:

   • روی گزینه “Add Element” کلیک کنید.
   • المان “Video Player” را انتخاب کنید.

2. تنظیمات:

   • Widget Title: این بخش برای تعیین نام ویجت اختیاری است. می‌توانید این کادر را پر کنید یا خالی بگذارید.
   • Video Link: لینک ویدیوی یوتیوبی که می‌خواهید درون صفحه قرار دهید را در این بخش وارد کنید.
   • Extra Class Name: اگر نیاز به اضافه کردن کلاس‌های CSS برای شخصی‌سازی ویدیو دارید، نام کلاس‌ها را در این قسمت وارد کنید.

3. ذخیره تغییرات:

   • پس از اعمال تنظیمات، روی “Save Changes” کلیک کنید تا تغییرات شما ذخیره شود.

پراگرس بار یا نوار پیشرفت (Progress Bar)

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

مراحل ایجاد پراگرس بار

1. افزودن المان:

   • بر روی گزینه “Add Element” کلیک کنید.
   • المان “Progress Bar” را از میان المان‌های موجود انتخاب کنید.

2. تنظیمات:

   • Style: در این بخش، نوع و شکل پراگرس بار را انتخاب کنید. گزینه‌های مختلفی برای انتخاب وجود دارد. پس از انتخاب سبک مورد نظر، گزینه “Bar” را انتخاب کنید.
   • Progress Bar Title: عنوانی برای پراگرس بار خود انتخاب کنید.
   • Percentage: درصد پیشرفت مورد نظر خود را وارد کنید. عددی که وارد می‌کنید به صورت درصد در پراگرس بار نمایش داده خواهد شد.
   • Color: رنگ پراگرس بار را تعیین کنید.

3. ذخیره تغییرات:

   • پس از اعمال تنظیمات، فراموش نکنید که بر روی دکمه “Save Changes” کلیک کنید تا تغییرات شما ذخیره شود.

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

ایمیج کاروسل (Image Carousel)

ایمیج کاروسل ابزاری بسیار مفید برای نمایش اطلاعیه‌ها، سر تیترهای خبری، ویدیوها یا تصاویر به صورت گردشی در صفحات وب‌سایت شماست. با استفاده از المان محتوای “Image Carousel” می‌توانید تصاویری را به صورت اسلات‌های گردشی اضافه کنید و به کاربرانتان تجربه‌ای جذاب ارائه دهید.

تنظیمات اصلی ایمیج کاروسل

1. Image: تصاویری را که می‌خواهید در کاروسل نمایش دهید اضافه کنید.

2. Carousel Size: سایز تصاویر را تعیین کنید. می‌توانید از گزینه‌های آماده مانند Thumbnail، Medium، Large و… استفاده کنید یا سایز دلخواهی به صورت پیکسل وارد کنید (مثلاً 200×100 پیکسل).

3. On Click Action: مشخص کنید که وقتی کاربر بر روی تصویر کلیک کرد، چه عملی انجام شود. می‌توانید تصویر را در یک صفحه جدید نمایش دهید، در همان صفحه بزرگ کنید یا هیچ عملی انجام نشود (No Action).

4. Slider Orientation: جهت گردش تصاویر (افقی یا عمودی) را انتخاب کنید.

5. Slider Speed: سرعت جابجایی اسلایدها را تعیین کنید. زمان را به میلی‌ثانیه وارد کنید (مثلاً 3000 میلی‌ثانیه برای 3 ثانیه).

6. Slide Per View: تعداد اسلایدهایی که همزمان نمایش داده می‌شوند را مشخص کنید.

7. Enable Autoplay: با فعال کردن این گزینه، کاروسل به صورت خودکار شروع به گردش می‌کند.

8. Hide Pagination Control: با تیک زدن این گزینه، شمارنده اسلایدها را مخفی کنید.

9. Hide Next/Prev Buttons: با این گزینه می‌توانید دکمه‌های جلو و عقب را حذف کنید.

10. Partial View: با فعال کردن این گزینه، بخشی از اسلاید بعدی در کنار اسلاید جاری نمایش داده می‌شود.

11. Slider Loop: با تیک زدن این گزینه، کاروسل به صورت مداوم و چرخه‌ای به نمایش ادامه می‌دهد.

نکات پایانی

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

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

سوالات متداول درباره ویژوال کامپوزر (Visual Composer)