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

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

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

 

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

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

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

5. با استفاده از منوی سمت چپ که برای ردیف قرار داره به ترتیب (از چپ به راست) میتونید کارهای حذف ردیف، کپی ردیف، ویرایش ردیف و کوچک کردن ردیف رو انجام بدین. با استفاده از منوی سمت راست هم میتونید(از چپ به راست)؛ انتخاب اندازه هر ستون(چند ستونه کردن یک ردیف)، افزودن یک ستون تمام عرض، خاصیت کشیدن و رها کردن برای جابجایی ردیف رو داشته باشید.

در نهایت در منوی وسط هم میتونید ردیف فعلی رو ویرایش یا حذف کنید. با کلیک روی آیکون + پایینی هم میتونید ردیف جدید به صفحه اضافه کنید.

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

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

پس از اعمال تنظیمات خود در نهایت روی دکمه ذخیره تغییرات کلیک کنید تا المان به ردیف اضافه بشه.

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

8. حالا به همین ترتیب میتونید با کلیک روی آیکون + کلیک کرده و المان جدید اضافه کنید.

برای مثال یک ردیف دوستونه دیگر اضافه میکنیم.

بر روی مثبت کلیک کرده و ایتدا یک ردیف جدید ایجاد میکنیم.

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

چند حالت ستون آماده وجود دارد که میتوانیم انتخاب نماییم. در اینجا دو ستون هم اندازه را انتخاب میکنیم یعنی ردیف خود را 1/2+1/2 میکنیم.

با کلیک بر روی سفارشی میتوانید عرض دلخواه خود را به ستون ها بدهید. مثلا با وارد کردن 1/4+2/4+1/4 ردیف خود را به سه ستون تقسیم میکنید که ستون وسط، عرضی دو برابر ستون های دیگر دارد.

قدرست گرفته ازBetterDocs