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

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

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

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

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

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

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

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

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

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

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

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

برای ایجاد فاصله بین المان­ ها استفاده از المان فضای خالی با ارتفاع مناسب پیشنهاد می­شود. چنانچه در بین المان­ های ویژوال کامپوزر، المان فضای خالی را مشاهده نکردید، در پیشخوان ورد پرس از مسیر “زفایر> تنظیمات پوسته  >  تنظیمات پیشرفته” گزینه غیر فعال کردن ویژگی ­های اضافی 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  که در صفحه نیاز دارید تکرار کنید.