افزونه های وردپرس

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

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

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

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

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

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

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

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

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

این مطلب را از دست ندهید :
چگونه به ویرایشگر قبلی وردپرس برگردیم؟
تنظیمات عمومی افزونه ویژوال کامپوزر
تنظیمات عمومی ویژوال کامپوزر

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

تب تنظیمات عمومی

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

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

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

Disable Gutenberg Editor: با فعال کردن این گزینه، ویرایشگر گوتنبرگ غیرفعال خواهد شد و به راحتی تنها با کمک ویژوال کامپوزر می توانید صفحات خود را طراحی کنید.

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

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

تنظیمات مدیریت نقش ها در ویژوال کامپوزر
مدیریت نقش ها

تب مدیریت نقش ها

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

  • انتخاب امکان استفاده از صفحه ساز در انواع پست
  • فعال کردن امکان استفاده از ویرایشگر پیشرفته
  • امکان دسترسی به تنظیمات صفحه
  • امکان غیرفعال کردن ویرایشگر کلاسیک برای این کاربر
  • امکان استفاده از گزینه‌های تنظیمات ویژوال کامپوزر برای انواع المان
  • امکان استفاده از الگو
  • امکان استفاده و طراحی انواع المان
  • امکان استفاده از حالت شبکه بندی برای المان‌ها
  • امکان استفاده از تنظیمات پیشفرض برای هر المان
  • امکان استفاده از خاصیت کشیدن و رها کردن برای تغییر مکان المان یا افزودن یک المان در ویژوال کامپوزر
  • و…
این مطلب را از دست ندهید :
استفاده از تصاویر Unsplash در وردپرس با افزونه Instant Images
تنظیمات طراحی ویژوال کامپوزر
تنظیمات طراحی

تب تنظیمات طراحی

در این تب می توانید ظاهر پیش فرض المان های محتوایی در Visual Composer را که از پوسته خاکستری روشن استفاده می کند، تغییر دهید.

با زدن روی دکمه ذخیره تغییرات، تغییرات دلخواهتان را ذخیره کرده و یا با زدن دکمه بازگردانی موارد پیش فرض، طراحی را به حالت پیش فرض تغییر دهید.

افزودن css سفارشی در ویژوال کامپوزر
css سفارشی

تب css سفارشی

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

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

تب نقشه بردار شورتکد

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

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

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

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

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

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

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

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

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

طراحی صفحات با کامپوزر
ساخت صفحه با کامپوزر

با انتخاب هر یک از دکمه های افزودن المان، بلاک متن و افزودن قالب می توانید محتوای دلخواه خود را اضافه نمایید.

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

افزودن محتوا با کمک کامپوزر
افزودن یک بخش به محتوا با کمک کامپوسر

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

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

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

تنظیمات ردیف
تنظیمایت یک ردیف در کامپوزر

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

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

این مطلب را از دست ندهید :
ایمیل مارکتینگ در وردپرس با افزونه AvangPress

با کمک دکمه های موجود در وسط نیز می توانید به ردیف خود محتویات دلخواهتان را اضافه کنید. همچنین با کلیک روی آیکون + می توانید یک ردیف جدید در پایین ردیف قبلی اضافه کنید.

افزودن آخرین پست ها
نمایش آخین پست ها

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

تنظیمات المان
تنظیمات المان اضافه شده

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

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

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

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

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

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

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

عاطفه نوربخش

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

پاسخی بگذارید

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

۱۸ دیدگاه

  1. سلام و وقت بخیر

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

    ممنون از شما

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

  2. سلام خدا قوت ممنون از آموزش های خوبتون خانم نوربخش و تیم قوی نارنجی

    ببخشید همچین باکس های رو چطور میشه ساخت تو متن یه برگه؟

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

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

  3. سلام خانم نور بخش
    خیلی ممنون بابت اموزش زیباتون
    ببخشید یک سوالی دارم
    چجوری میتونیم فونت دلخواهمون رو اضافه کنیم!؟
    ممنون میشم راهنمایی بفرمایید

    1. سلام وقتتون بخیر
      خواهش می کنم، امیدوارم مفید بوده باشه.
      متاسفانه در نسخه رایگان المنتور این قابلیت وجود نداره، اما با نصب نسخه تجاری و رفتن به منوی المنتور >> فونت های سفارشی (custom fonts) می تونید فونت دلخواهتون رو به المنتور اضافه کنید.

      1. سلام مجدد و ممنون بابت پاسخگویی سریعتون
        ببخشید ولی من منظورم ویژوال کامپوزر بود نه المنتور!

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

          1. ممنون ولی ظاهرا با کدنویسی میشه اینکارو کرد. دنبال روند کدنویسی ش بودم بیشتر
            به هر حال ممنون

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

    1. سلام وقتتون بخیر
      از چه المانی برای نمایش آگهی ها استفاده کردید؟ کافیه به اون المان استایل بدید تا به تمام آگهی ها اعمال بشه

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

تخفیف های جشنواره نوروز 1399 را از دست ندهید!شرکت در جشنواره نوروزی
+
بستن