آموزش طراحی سایت

تمرین طراحی با ردیف و ستون

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

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

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

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

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

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

برای ستون سمت چپ، المان بلوک متن را اضافه کنید. متن مورد نظرتان را در قسمت مشخص شده بنویسید.

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

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

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

نوشته های مشابه

تنظیمات ردیف و ستون

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

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

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

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

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

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

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

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

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

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

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

فعال کردن المان فضای خالی در ویژوال کامپوزر

برای ایجاد فاصله بین المان­ ها استفاده از المان فضای خالی با ارتفاع مناسب پیشنهاد می­شود. چنانچه در بین المان­ های ویژوال کامپوزر، المان فضای خالی را مشاهده نکردید، در پیشخوان ورد پرس از مسیر “زفایر> تنظیمات پوسته  >  تنظیمات پیشرفته” گزینه غیر فعال کردن ویژگی ­های اضافی WPBakery Page Builder را خاموش کنید.

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

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

ادامه طراحی با المان­ های Ultimate Addons

در ادامه طراحی بخش بعدی این صفحه می­خواهیم از المان­ های  Ultimate Addons استفاده کنیم. المان ­های Ultimate Addons  با افزونه Ultimate Addons WPBakery Page Builder  که بطور پیش فرض روی قالب زفایر که در سایت ابزار وردپرس ارائه شده است، وجود دارد.

برای طراحی بخش بعدی صفحه سایت، یک ردیف جدید به برگه اضافه کنید. دکمه افزودن المان را کلیک کرده و در صفحه افزودن المان تب Ultimate VS Addons، را انتخاب کنید. المان متن فنسی(متن جذاب)، برای ساخت متن با انیمیشن خاص (در این المان کلمات پشت سر هم نمایش داده می­شوند) را انتخاب نمایید.

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

در ادامه متن مورد نظرتان را در جعبه متن فنسی بنویسید. همچنین با استفاده از تب­های دیگر می­توانید طراحی­ های منحصر بفردی برای متن انجام دهید.

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

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

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

در صفحه تنظیمات Flip Box، تب آیکون، برای جعبه Flip، یک آیکون یا تصویر انتخاب کنید. المان Flip Box از دو قسمت جلو و پشت تشکیل شده است. هر کدام از این دو قسمت شامل عنوان و متن مخصوص خود می­باشند. از تب­ های front  و back  برای اضافه کردن عنوان و متن به قسمت جلو و پشت این المان استفاده کنید.

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

این کار را برای هر تعداد جعبه Flip Box  که در صفحه نیاز دارید تکرار کنید.

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

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

بازگشت به صفحه دوره آموزش طراحی سایت

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

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

دکمه بازگشت به بالا