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

آشنایی با تنظیمات ردیف و ستون

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

ویژوال کامپوسر

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

سربرگ

در سربرگ “همه”  می­توانید تمامی المان­ ها را یک­جا مشاهده کنید. تب “محتوا”، المان­ هایی هستند که بیشتر با متن و محتوای مطالب سر و کار دارند. در سربرگ “اجتماعی” المان­ های شبکه های اجتماعی را خواهید دید. سربرگ “ساختار” برای المان­ های زیر ساختی مثل کدهای HTML و JS کاربرد دارند. تب ابزارک­ ها المان­ هایی را شامل می­ شود که مخصوص وردپرس است و کاربرد چندانی ندارند.

سربرگ Ultimate VS Addson

سربرگ “Ultimate VS Addson  ” با فعال سازی افزونه Ultimate Addons WPBakery Page Builder ، در دسترس قرار می­گیرند و دارای المان های جذاب و کاربردی برای طراحی سایت می­باشد.

المان­ های نوشته

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

آموزش المان های ویژوال کامپوسر

معرفی المان ­های ویژوال کامپوزر

ردیف

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

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

بلاک متن

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

صفحه بلوک 

اگر بخواهید المان­ های ثابتی را در تعدادی از صفحات قرار دهید، از صفحه بلوک استفاده کنید. با ایجاد صفحه بلوک از مسیر “زفایر > صفحات جدید” و ایجاد یک بلوک صفحه جدید، المان­ ها و عناصری که می­ خواهید در صفحات مختلف تکرار شوند را در این بلوک قرار داده و ذخیره کنید. حال در هر جایی از برگه ­ها که این بلوک صفحه می­بایست نمایش داده شود.

المان

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

تصویر

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

آموزش المان های ویژوال کامپوسر

اسلایدر تصویر

 با انتخاب چند تصویر در این المان، تصاویر بصورت اسلایدر و پشت سر هم در سایت نمایش داده می­ شوند.

جداکننده

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

آموزش المان های ویژوال کامپوسر

دکمه

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

آموزش المان های ویژوال کامپوسر

جعبه ی آیکون

باکس آیکون

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

جعبه عملیات

برای اضافه کردن المان­ های فراخوانی جهت اقدام از جعبه عملیات استفاده کنید. این المان با داشتن یک دکمه کاربر را به اقدام برای انجام کاری ترغیب می­کند.

شمارنده

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

دکمه­ های اشتراک گذاری

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

لینک­های اجتماعی

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

 بازشونده(پاپ آپ)

 با کلیک روی دکمه­ ای که در این المان وجود دارد. یک کادر نوشتاری به کاربر نمایش داده خواهد شد که در جلب توجه کاربر تاثیرگذار است.

باکس چرخشی

 این المان دارای عنوان و متن جلو و پشت می­باشد.با قرار گرفتن موس روی آن جعبه چرخیده و علاوه بر محتوای جلو آن، محتوای پشت جعبه نیز به کاربر نمایش داده می شود. در سربرگ Ultimate VS Addons المان Flip Box نیز یک باکس چرخشی جذاب و با امکانات بیشتر برای استفاده شما فراهم کرده است.

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

در آموزش بعد با تعداد بیشتری از المان ­های ویژوال کامپوزر آشنا خواهید شد.

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

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

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

همچنین ببینید
بستن
دکمه بازگشت به بالا