آموزش حاشیه، گوشه گرد (ردیوس) و سایه کادر در المنتور

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

حاشیه

شاید برای شما هم پیش آمده باشد که بخواهید محیط پیرامون و مرز المان، ردیف یا ستون را مشخص کنید. افزودن کادر تزیینی به عناصر صفحه سایت به سادگی، با ویژگی حاشیه (Border) امکان‌پذیر است.

برای شروع کار یک برگه جدید ایجاد کنید و پس او نوشتن عنوان مناسب برای آن به “ویرایشگر زنده المنتور” بروید یا یکی از برگه‌هایی که قبلاً طراحی کردید را در حالت “ویرایش با المنتور” باز کنید.  پس از ایجاد ساختار مناسب با تعداد ستون دلخواه، ابزارک موردنظر خود را درون یکی از ستون‌ها قرار دهید. همچنین می‌توانید ابتدا ویجت ردیف داخلی را اضافه کرده و سپس ابزارک‌ها را درون آن بگذارید.

برای افزودن بوردر به ردیف داخلی یا المان، روی آن را کلیک کنید تا پنل ویرایش مربوط به آن تغییر کند. از تب “استایل” سربرگ “حاشیه” را انتخاب کنید.

• نوع کادر دور: این گزینه تنظیم اصلی مربوط به مدیریت حاشیه است. با انتخاب هرکدام از انواع کادر، خطوط مرزی دورتادور عنصر قرار می‌گیرند. تنوع بالای طرح‌بندی کادر به‌گونه‌ای است که می‌توانید انواع Border از جمله یکپارچه، دوبل، نقطه‌ای را انتخاب کنید.
• عرض: ضخامت کادر بالا، چپ، راست و پایین را تعیین کنید. معمولاً اندازه 1 پیکسل برای هر چهار طرف استاندارد است.
• رنگ: از جعبه‌رنگ نیز رنگ مناسبی برای حاشیه دور عناصر انتخاب کنید.

انحنای مرز

وضعیت Border radius این امکان را به شما می‌دهد با تعیین مقدار انحنای گوشه‌های مرز، ظاهری برجسته با حاشیه‌های فانتزی برای عناصر المنتور اعمال کنید. استفاده از این قابلیت در المنتور باعث شده تا صفحات وب جذاب‌تر برای جلب‌توجه مخاطب ایجاد کنید. حاشیه گرد مخصوصاً برای ویجت‌های “اقدام برای عمل”  (Call to Action) مانند دکمه و بنرهای تبلیغاتی در سطح وب می‌تواند مناسب و تأثیرگذار باشد.

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

جعبه سایه

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

• رنگ: رنگ دلخواه‌تان برای کادر سایه‌دار را انتخاب کنید. هرچند انتخاب رنگ به سلیقه شما تغییر می‌کند اما استفاده از رنگ‌های خنثی مانند طیف خاکستری جلوه بهتری در طراحی وب دارند. نوار کاهش و افزایش شفافیت (Opacity) گزینه‌ی دیگری است که می‌توانید برای ظاهر بهتر حاشیه‌های سایه از آن استفاده کنید.
• اندازه افقی و عمودی سایه: موقعیت سایه را در دو جهت افقی و عمودی تنظیم کنید. مقدار 1 برای هر دو گزینه مناسب است. توجه داشته باشید موقعیت سایه با مقدار افقی تعیین می‌شود. در این حالت سایه در سمت راست عناصر قرار می‌گیرد.
• محوشدگی: اگر می‌خواهید مرز حاشیه سایه به صورت مات یا محو نمایش داده شود این گزینه را به کار ببرید. پیشنهاد ما 10 پیکسل برای مقدار محوشدگی است که در طراحی وب بسیار کاربرد دارد.
• گسترده: مقدار گسترده اندازه جعبه سایه را تعیین می‌کند. هرچه این عدد را افزایش دهید گسترش سایه در محدوده عناصر بیشتر خواهد شد.
• جایگاه: جعبه بازشونده “جایگاه” دارای دو مقدار “خط بیرونی” و “خط درونی” است. با این ویژگی جعبه سایه را در داخل یا خارج از آیتم‌ها تنظیم کنید.

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

امیدواریم این آموزش برای شما مفید بوده باشد. اگر در استفاده از Border، Border radius و Box Shadow با مشکل مواجه شدید یا سؤالی برایتان پیش آمد در بخش نظرات به ما اطلاع دهید تا شما را راهنمایی کنیم.