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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

این مطلب را از دست ندهید :
تغییر اولویت ترجمه زبان ها در وردپرس با افزونه Preferred Languages

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

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

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

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

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

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

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

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

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

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

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

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

تب css سفارشی

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

این مطلب را از دست ندهید :
تغییر کلمات در وردپرس با افزونه Say What
تنظیمات شورت کدها در ویژوال کامپوزر
تنظیمات کدهای کوتاه

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

این مطلب را از دست ندهید :
ساخت فهرست ریسپانسیو در وردپرس با افزونه Responsive Menu
تنظیمات ردیف
تنظیمایت یک ردیف در کامپوزر

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

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

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

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

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

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

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

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

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

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

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

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

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

عاطفه نوربخش

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

دیدگاهتان را بنویسید

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

۲ دیدگاه

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

دوره آموزش وردپرس در اصفهانثبت نام رایگان (کد تخفیف : WpNarenji)
+