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

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

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

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

WPBakery Page Builder (که قبلا ویژوال کامپوزر نامیده می شد) منعطف ترین و غنی ترین افزونه صفحه ساز وردپرس است. این افزونه تقریباً با هر قالب مدرن وردپرس سازگار است و برای انجام آن به هیچ مهارت برنامه نویسی نیاز ندارید.در واقع، در حین استفاده از آن، حتی نیازی به تایپ هیچ کد کوتاهی نخواهید داشت.

با ویرایشگرهای پیشرفته که WPBakery Page Builder ارائه می دهد، می توانید صفحات مختلف طراحی کنید.

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

افزودن برگه

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

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

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

حال بایستی روی علامت جمع کلیک کنید تا ابزارها نمایش داده شود.

موارد مهم در تصویر زیر با علامت مشخص کرده ام.

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

زمانی که ردیف اضافه می شود شامل یک ستون است. اما شما در اکثر قالب ها دیده اید که چند ابزار در چند ستون نمایش داده می شود و این مسئله دارای اهمیت زیادی است.

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

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

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

حال قصد دارم در هر ستون یک ابزار قرار دهم که در ادامه توضیح می دهم.

من قصد دارم در سمت راست یک متن قرار دهم و در سمت چپ یک متن.

روی علامت جمع در هر کدام که کلیک کنید ابزارها ظاهر می شود و میتوانید ابزار دلخواه را انتخاب کنید.

روی علامت جمع در سمت راست کلیک می کنم و "بلاک متن" را انتخاب می کنم.

پنجره ای باز می شود و می بایست اطلاعات مورد نیاز را تغییر دهم.

من ابتدا یک عنوان را انتخاب می کنم و آن را تیتر 2 می گذارم. سپس یک متن تایپ می کنم که از یک متن تستی انتخاب کرده ام.

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

در نظر داشته باشید در پنجره ظاره شده چندین گزینه وجود دارد.

یکی از گزینه های مهم "سایز تصویر" است من آن را large یا بزرگ وارد کرده ام. باید یکی از گرینه ها را تایپ کنید.

همچنین در قسمت پایین تر "جای تصویر" را روی وسط قرار دهید.

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

سپس روی تغییرات ذخیره کلیک کنید تا به برگه جدید برگردید.

حال برای تست می توانید برگه را ببینید. به دو روش میتوانید برگه را مشاهده کنید و نتیجه را ببینید:

اولین روش کلیک روی "پیش نمایش" در سمت چپ صفحه می باشد.

روش دوم کلیک روی انتشار و مشاهده برگه می باشد. تا زمانی که برگه را به منو اضافه نکرده اید انتشار نیز مشکلی بوجود نمی آورد. من برگه را منتشر می کنم و نتیجه را به شما نشان می دهم.

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

حال می توانیم آن را بهتر کنیم و پیشرفته تر نماییم. پس ادامه می دهیم.

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

تنظیمات ردیف

ما در css دو دستور داریم padding و margin که برای فاصله گذاری بین عناصر بکار می رود مثلا در عکس بالا مشاهده می کنید که عکس زیر فوتر قرار گرفته است. برای اینکه فاصله آن را از پایین بیشتر کنیم باید از دستور margin استفاده کنیم. در ویژوال کامپوزر این دستور وجود دارد و براحتی می توانید این کار را انجام دهید.

به سراغ تنطیمات ردیف می رویم و آن را تغییر می دهیم.

روی ویرایش ردیف یا مداد کلیک کنید. در تصویر با رنگ قرمز مشخص است.

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

همچنین در بخش "پس زمینه"  می توانیم رنگ پس زمینه را تغییر دهیم.

حال اگر می خواهید فاصله از بالا نیز بیشتر شود کافی است مقدار margin را در بالا تغییر دهید.

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

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

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

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

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

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

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

امیدواریم این آموزش مورد توجه شما عزیزان قرار گرفته باشد.

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

موفق باشید.