طراحی سایت با ویژوال کامپوزر در وردپرس

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

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

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

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

پادکست :

طراحی سایت با ویژوال کامپوزر

یک مرحله قبل از طراحی سایت با ویژوال کامپوزر

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

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

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

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

طراحی سایت با ویژوال کامپوزر

روش طراحی سایت با ویژوال کامپوزر چیست؟

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

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

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

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

طراحی سایت با ویژوال کامپوزر

ادامه طراحی سایت با ویژوال کامپوزر چیست؟

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

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

پس نیاز اتس تا با قواعد طراحی سایت به شکل یک درونریزی استاندارد را بلد باشدی تا بتوانید یک طراجی سایت زیبایی داشته باشید. اما مرحله بعد این اتس که شم اقدام به ایجاد کنید. حالب با کلیک بر روی گزینه (+) یک صفحه ای بزرگ از کلی المان برای شما باز خواهد شد.

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

حالا می تاوانید هر کدام از آتیم ها را دوست داشتید ، فقط با حرکت drap & drog آن را بگیرید ، بکشید و در ستون مورد نظر رها کنید. به همین سادگی. لازم به ذکر اتس که قبل از کل این موارد نیاز است تا یک مبانی کلی از درونریزی ها ، المان ها و طراحی سایت داشته باشید تا بتوانید یک طراحی سایت خوب را با این افزونه داشته باشید.

طراحی سایت با ویژوال کامپوزر

امکانات عالی در visual composer

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

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

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

طراحی سایت با ویژوال کامپوزر

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

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

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

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

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

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

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

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

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

پلاگین چک کردن ریدارکت

آیا visual composer سئو شده است؟ آیا با یوست سئو سازگاری دارد؟

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

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

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

تماس با پویا وب

دیدگاه ها بسته شده است

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