باکس جذاب در المنتور،با این آموزش از سری آموزش های جذاب المنتور کنترل وب همراه باشین تا بتونیم با ساخت باکس جذاب در المنتور، سایتمون رو جذاب تر کنیم و تعامل کاربر با صفحات سایتمون رو افزایش بدیم.
هدف از ساخت باکس جذاب در المنتور:
یکی از ترفند های ترغیب و جذب کاربر به کلیک کردن روی المان های مختلف سایت، اینه که حس کنجکاوی کاربر با دیدن یک المان جذاب، برانگیخته بشه.
ساخت باکس جذاب در المنتور یکی از روش هایی که با استفاده از اون میتونیم علاوه بر جذاب تر کردن سایتمون از لحاظ بصری، کاربر رو به کشف این موضوع ترغیب کنیم که بخواد بفهمه که این المان چه سوپرایزی رو براش داره!
برای ساخت این باکس جذاب در المنتور به هیچ افزونه جانبی نیاز نداریم و تنها به کمک صفحه ساز المنتور و فقط با چند خط کد سی اس اس ساده میتونیم خیلی سریع این باکس جذاب در المنتور برای سایت وردپرسی خودمون رو ایجاد کنیم.
بریم سر اصل آموزش ساخت باکس جذاب در المنتور:
در قدم اول آموزش، لازمه که المانی رو داشته باشیم تا بتونیم از اون المان به عنوان کارت استفاده کنیم و محتویات رو در اون قرار بدیم. برای این کار در قسمت موردنظر از سایتمون با قرار دادن یک ” بخش داخلی ” این کار رو انجام میدیم. برای این کار المان “بخش داخلی” رو از بین المان های المنتور پیدا می کنیم و در قسمت مورد نظر میندازیم.
برای اینکه بخش داخلی رو به یک کارت تبدیل کنیم، یکی از ستون های بخش داخلی رو حذف می کنیم تا از ستون باقی مونده به عنوان کارت استفاده کنیم.
قدم بعدی اینه که محتویات موردنظرمون رو توی این بخش داخلی قرار بدیم. به عنوان مثال مثل تصویر زیر، یک سربرگ و یک دکمه توب بخش داخلی به عنوان محتویات کارتمون قرار میدیم و اونا رو با توجه به طراحی موردنظرمون تنطیم می کنیم.
برای اینکه پس زمینه کارتی که طراحی کردیم به پس زمینه موردنظرمون تبدیل بشه، نیاز داریم تا با استفاده از کد های سی اس اس این ویژگی رو به المان بخش داخلی بدیم. بنابراین باید به قسمت “ویرایش بخش داخلی” بریم. برای اینکار روی ویرایش بخش داخلی کلیک می کنیم تا تنظیمات بخش داخلی فعال بشه.
در قدم بعدی از طریق پنجره تنظیمات بخش داخلی به قسمت “پیشرفته” می ریم.
در قدم بعدی در قسمت پیشرفته، قسمتی به نام “custom css” یا “سی اس اس سفارشی” وجود داره. در این قسمت می تونیم کد های سی اس اس موردنظر خودمون رو قرار بدیم. بنابراین کد های سی اس اسی که در ادامه براتون قرار می دیم رو در این قسمت قرار بدین.
بعد از اینکه این کد های سی اس اس رو در این قسمت قرار دادیم باید بخش داخلی موردنظر به ظاهری شبیه تصویر زیر تبدیل شده باشه. و این به خاطر کد های سی اس اسی هست که در قسمت قبلی توی این قسمت قرار دادیم.
برای اینکه المان هایی که درون کارتمون قرار دادیم روی قسمت های رنگی قرار بگیره و قسمت های رنگی با المان هایی که توی کارتمون قرار می دیم به طور صحیح دیده بشن، لازمه که ویژگی به نام “z index” اون ها رو عددی بیشتر از این ویژگی برای رنگ هامون قرار بدیم.
در اینن مرحله از قسمت ” پیشرفته” تنطیمات هر المان ، گزینه ای به نام ” ایندکس z “ یا “Z index” وجود داره. باید عددی بیشتر از صفر رو در این قسمت وارد کنیم.
اینکار رو برای هر کدوم از المان هایی که درون کارتمون قرار میدیم تکرار می کنیم.
شخصی سازی کد های سی اس اس آموزش باکس جذاب در المنتور:
برای اینکه کد های سی اس اس رو شخصی کنیم، اول کد های سی اس اس متغیر هایی وجود دارن که میتونید با تغییر هر کدوم از این متغیر ها به متغیر های موردنظر طراحی خودتون این کد ها رو با توجه به نیازتون شخصی سازی کنین.
به عنوان مثال در کد های سی اس اس متغیری به نام blur– تعریف شده که با تغییر این متغیر می تونین میزان محو شوندگی رنگ های ایجاد شده در پس زمینه رو تغییر بدین.
به این ترتیب با طی کردن این مراحل می تونیم این کارت جذاب رو برای سایتمون طراحی کنیم D: امیدوارم از این آموزش لذت برده باشین.
