ویجت تصویر (Image) در المنتور

تصویر همیشه در طراحی سایت نقش کلیدی داشته است. هیچ کاربری دوست ندارد فقط متن های طولانی و یکنواخت ببیند. عکسها به محتوای شما جان میدهند و باعث میشوند کاربر بهتر با موضوع ارتباط برقرار کند. در المنتور المانی به نام تصویر یا Image وجود دارد که به کمک آن میتوانید به راحتی عکس دلخواهتان را داخل صفحه قرار دهید و ظاهر سایت را جذابتر کنید.

چرا المان تصویر اهمیت دارد؟

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

بخش محتوا در ویجت تصویر المنتور

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

تنظیم رزولوشن تصویر در المان Image المنتور

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

گزینه زیرنویس در ویجت تصویر المنتور

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

بخش پیوند در ویجت تصویر وردپرس

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

پیشنهاد مطالعه: آموزش کامل بخش تیتر در المنتور

کار با المان تصویر در المنتور

وقتی وارد المنتور میشوید کافی است المان تصویر را از نوار کناری بگیرید و داخل بخش مورد نظر رها کنید. به محض این کار یک تصویر پیش فرض نمایش داده میشود و شما میتوانید آن را تغییر دهید. در پنل سمت چپ گزینه ای به نام انتخاب تصویر وجود دارد. با کلیک روی آن وارد کتابخانه رسانه وردپرس میشوید و میتوانید عکسی که قبلا آپلود کرده اید یا یک تصویر جدید را انتخاب کنید. بعد از انتخاب تصویر چند تنظیم اصلی در اختیارتان قرار میگیرد. اولین مورد اندازه است. شما میتوانید اندازه عکس را بر اساس گزینه های از پیش تعیین شده مثل Thumbnail یا Full تغییر دهید یا اندازه دلخواهتان را انتخاب کنید. این قابلیت به شما کمک میکند تصاویر هم زیبا باشند و هم سرعت بارگذاری صفحه را کند نکنند.

پیشنهاد مطالعه: روش های بهینه سازی تصاویر سایت

تنظیمات لینک و نحوه نمایش

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

بخش استایل ویجت تصویر در المنتور

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

 بخش تراز بندی ویجت Image در المنتور

در بخش تصویر (Image) المنتور، گزینه تراز بندی به شما امکان می‌ دهد تا موقعیت افقی تصویر را در داخل ستون یا کانتینری که در آن قرار گرفته است، تنظیم کنید این تنظیمات شامل سه گزینه اصلی هستند: چپ‌ چین، راست‌چین و وسط‌چین این قابلیت بسیار مهم است زیرا به شما اجازه می‌ دهد تصویر را به طور هماهنگ با سایر محتوای اطرافش، مانند متن یا دکمه‌ ها، چید مان کنید و یک ترکیب بصری متعادل ایجاد نمایید به عنوان مثال، می‌توانید یک تصویر را در سمت چپ متن قرار دهید یا آن را دقیقاً در مرکز صفحه تراز کنید تا توجه کاربر را به خود جلب کند .
گزینه‌ های ترازبندی شامل چپ، وسط و راست به شما اجازه می‌ دهند موقعیت افقی تصویر را در کانتینر خود مشخص کنید علاوه بر این، تنظیمات مربوط به ابعاد به شما امکان می‌ دهند عرض و حداکثر عرض تصویر را بر اساس درصد یا پیکسل تنظیم کنید تا مطمئن شوید تصویر هرگز از ظرف خود بیرون نمی‌ زند و در دستگاه‌ های مختلف به درستی نمایش داده می‌ شود . همچنین می‌ توانید یک ارتفاع ثابت بر حسب پیکسل تعیین کنید، اگرچه معمولاً توصیه می‌شود برای حفظ نسبت تصویر و واکنش‌ گرایی بهتر، از تنظیمات عرض انعطاف‌ پذیر استفاده شود. 

تنظیم شفافیت ویجت تصویر در المنتور

گزینه شفافیت (Opacity) که معمولاً در زیر تنظیمات یا گاهی در تنظیمات اصلی استایل قرار دارد، به شما امکان می‌ دهد میزان ماتی یا شفافیت تصویر را کنترل کنید این مقدار با یک نوار لغزنده از ۰ تا ۱۰۰ درصد قابل تنظیم است؛ ۱۰۰ درصد به معنای تصویر کاملاً واضح و ۰ درصد به معنای نامرئی شدن کامل تصویر است استفاده از این ویژگی برای ایجاد جلوه‌های بصری خاص، مانند کم‌رنگ کردن تصاویر پس‌ زمینه برای خوانایی بهتر متن روی آن‌ها، یا ایجاد یک افکت هاور که با قرار گرفتن ماوس کاربر روی تصویر، شفافیت آن تغییر می‌ کند، بسیار مفید و کاربردی است .

بخش فیلترهای CSS در ویجت Image المنتور

مجموعه‌ ای از ابزارها تحت عنوان فیلترهای CSS (CSS Filters) وجود دارد که به شما امکان می‌ دهد جلوه‌های گرافیکی پیشرفته‌ ای را مستقیماً در مرورگر اعمال کنید این فیلترها شامل گزینه‌ هایی مانند تاری برای مات کردن تصویر، روشنایی برای تنظیم نور، کنتراست ، اشباع رنگ وفیلتر سیاه و سفید هستند مزیت بزرگ این فیلترها این است که می‌ توانند بدون نیاز به ویرایش تصویر در نرم‌ افزارهایی مانند فتوشاپ، جلوه‌های بصری جذابی ایجاد کنند و حتی می‌توانند در حالت هاور استفاده شوند تا با حرکت ماوس کاربر، رنگ یا جلوه تصویر تغییر کند .

نوع حاشیه المان تصویر (Image) در المنتور

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

 تنظیمات سایه جعبه در ویجت تصویر المنتور

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

بخش پیشرفته المان تصویر در المنتور

 وقتی به سراغ بخش پیشرفته بروید امکانات بیشتری در اختیارتان قرار میگیرد. میتوانید فاصله داخلی و خارجی تصویر را تنظیم کنید تا نسبت به سایر المانهای صفحه مرتب دیده شود. همچنین امکان گذاشتن انیمیشن ورود وجود دارد. مثلا میتوانید کاری کنید که تصویر با افکت محو شدن یا اسلاید از سمت راست وارد شود. این افکتها به ویژه در صفحات معرفی محصول یا لندینگ پیج ها تاثیر زیادی دارند چون توجه کاربر را بیشتر جلب میکنند. علاوه بر این بخش پیشرفته امکان تعیین واکنشگرایی تصویر را فراهم میکند. یعنی میتوانید مشخص کنید عکس روی موبایل یا تبلت چه ابعادی داشته باشد. این موضوع اهمیت زیادی دارد چون بیشتر کاربران سایتها با موبایل وارد میشوند و اگر تصویر روی موبایل درست نمایش داده نشود تجربه کاربری به شدت افت میکند.

گزینه طرح‌ بندی ویجت تصویر وردپرس

در بخش طرح‌ بندی (Layout) یا همان تنظیمات ابعادی در تب استایل ویجت تصویر المنتور، شما می‌ توانید نحوه قرارگیری و اندازه تصویر را در صفحه کنترل کنید این تنظیمات شامل تعیین عرض و حداکثر عرض با استفاده از واحدهای مختلف مانند پیکسل یا درصد هستند که انعطاف‌ پذیری بالایی برای نمایش تصویر در دستگاه‌های مختلف فراهم می‌کنند همچنین، با استفاده از گزینه تراز بندی می‌توانید موقعیت افقی تصویر چپ، راست، وسط را تنظیم کرده و با مدیریت حاشیه‌ های داخلی و خارجی در بخش پیشرفته، فضای اطراف تصویر را مدیریت کنید تا مطمئن شوید تصویر به درستی و به صورت واکنش‌ گرا در جریان کلی طراحی صفحه شما قرار می‌ گیرد.

آموزش گرید در ویجت Image المنتور

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

جایگاه و تنظیمات جایگاه در المان تصویر

در حالت پیش‌فرض ، تصویر در جریان عادی محتوا قرار می‌ گیرد، اما با انتخاب حالت مطلق ، می‌ توانید تصویر را دقیقاً در هر نقطه دلخواهی از کانتینر والدش قرار دهید و حتی آن را روی عناصر دیگر هم پوشانی کنید . همچنین با استفاده از ایندکس می‌ توانید ترتیب قرارگیری تصاویر و سایر عناصر روی هم را مدیریت کنید این قابلیت‌ ها برای ایجاد طرح‌ بندی‌ های خلاقانه، مانند قرار دادن یک واترمارک یا یک المان تزئینی در گوشه‌ای خاص از صفحه، بسیار مفید هستند و انعطاف‌پذیری زیادی در طراحی بصری فراهم می‌کنند .
گزینه‌های ایندکس کلاس‌های CSS (CSS Classes) ابزارهای مهمی برای کنترل نحوه تعامل عناصر با یکدیگر و اعمال استایل‌های سفارشی هستند ایندکس Z یک عدد صحیح است که ترتیب قرارگیری عناصر روی هم در محور عمودی عمق صفحه را مشخص می‌ کند؛ شناسه CSS یک نام منحصر به فرد است که به یک عنصر خاص اختصاص داده می‌ شود و برای هدف قرار دادن دقیق همان عنصر با کد CSS یا جاوا اسکریپت سفارشی استفاده می‌ شود در مقابل، کلاس‌های CSS نام‌ هایی هستند که می‌ توانند به چندین عنصر اعمال شوند تا یک سبک یا رفتار مشترک را به اشتراک بگذارند، که این امر مدیریت استایل‌های تکراری را بسیار آسان‌ تر می‌ کند.

نمایش شرط‌ ها در ویجت Image المنتور

نمایش شرط‌ ها (Display Conditions) در المنتور که اغلب از طریق افزودنی‌ های جانبی یا نسخه پرو المنتور برای قالب‌ های سراسری در دسترس است به شما این امکان را می‌ دهد که تعیین کنید یک ویجت، بخش یا کل قالب مانند هدر یا فوتر دقیقاً کجا و تحت چه شرایطی در وب‌ سایت شما نمایش داده شود با استفاده از این قابلیت می‌ توانید محتوای پویا و شخصی‌سازی شده ایجاد کنید.

تنظیمات کش در المان تصویر المنتور

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

آموزش موشن افکت در ویجت تصویر

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

گزینه تبدیل در المان تصویر 

گزینه تبدیل مجموعه‌ای از ابزارهای قدرتمند CSS را در اختیار شما قرار می‌ دهد تا بتوانید ظاهر و موقعیت عناصر را بدون تأثیرگذاری بر چیدمان کلی صفحه تغییر دهید این قابلیت شامل توابعی مانند چرخش برای چرخاندن عنصر در زوایای مختلف، مقیاس برای کوچک یا بزرگ کردن اندازه آن، کج کردن برای ایجاد جلوه‌های زاویه‌دار، و انتقال برای جابجایی دقیق عنصر در محورهای افقی و عمودی است با استفاده از این ابزارها، می‌توانید جلوه‌های بصری خلاقانه و تعاملی ایجاد کنید و با فعال‌ سازی گزینه هاور ، این تبدیل‌ها را به صورت انیمیشنی هنگام قرار گرفتن ماوس کاربر روی عنصر اعمال نمایید.

گزینه پس زمینه در ویجت تصویر (Image) در المنتور

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

بخش حاشیه در ویجت Image المنتور

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

گزینه ماسک در المان تصویر المنتور

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

بخش واکنش‌ گرا در ویجت Image المنتور

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

گزینه ویژگی ها در المان تصویر

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

بخش css سفارشی در ویجت تصویر المنتور

در بخش پیشرفته(Advanced) المنتور پرو، گزینه CSS سفارشی یک ویژگی بسیار قدرتمند است که به کاربران امکان می‌ دهد کدهای استایل‌ دهی دلخواه خود را مستقیماً به یک ویجت، ستون، کانتینر یا سکشن خاص اضافه کنند این ویژگی برای طراحانی مفید است که نیاز به کنترل دقیقی فراتر از تنظیمات پیش‌فرض المنتور دارند، مانند اعمال جلوه‌های بصری منحصر به فرد یا رفع مشکلات جزئی چیدمان . با استفاده از این قابلیت، کد CSS نوشته شده تنها بر روی همان عنصر خاص اعمال می‌ شود و بدون نیاز به دسترسی به فایل‌ های اصلی قالب یا نصب افزونه‌های اضافی، امکان شخصی‌سازی بی‌ نهایت ظاهر وب‌ سایت را فراهم می‌ کند .

نقش تصاویر در سئو سایت

شاید فکر کنید گوگل فقط متنها را میخواند اما تصاویر هم بخش مهمی از سئو هستند. نکته اصلی این است که موتور جستجو تصویر را مستقیما درک نمیکند بلکه توضیحات شما را میخواند. به همین دلیل باید همیشه برای عکسها متن جایگزین یا Alt مناسب بنویسید. این متن باید کوتاه، مرتبط و شامل کلیدواژه اصلی باشد. مثلا اگر تصویری از "طراحی سایت با المنتور" دارید میتوانید متن جایگزین را "نمونه طراحی سایت با المنتور در وردپرس" قرار دهید. نوشتن متن جایگزین علاوه بر کمک به سئو، برای دسترس پذیری هم اهمیت دارد. کاربرانی که از نرم افزارهای صفحه خوان استفاده میکنند از طریق همین توضیحات متوجه میشوند عکس درباره چه موضوعی است. درباره اینکه متن جایگزین تصویر (alt) چیست؟ مطالعه کنید.

تمرین عملی برای یادگیری بهتر

برای اینکه کار با المان تصویر را بهتر یاد بگیرید پیشنهاد میکنم یک صفحه آزمایشی در المنتور بسازید. ابتدا یک تصویر ساده اضافه کنید. بعد از آن تغییر اندازه را امتحان کنید و ببینید چه تفاوتی ایجاد میشود. سپس گزینه لینک را روی حالت فایل رسانه بگذارید تا تصویر در اندازه بزرگتر نمایش داده شود. در مرحله بعد به بخش استایل بروید و گوشه های تصویر را گرد کنید. سایه اضافه کنید و رنگ قاب را تغییر دهید. در آخر هم به بخش پیشرفته بروید و یک انیمیشن ورود تعریف کنید. این تمرین ساده باعث میشود به خوبی با تمام امکانات المان تصویر آشنا شوید و دفعه بعد که سایت واقعی طراحی میکنید دقیقا بدانید چه تنظیماتی به کارتان می آید.

نکاتی برای استفاده حرفه ای از تصاویر در سایت

همیشه از تصاویر بهینه شده استفاده کنید. عکسهای با حجم بالا سرعت سایت را کاهش میدهند و برای سئو مضر هستند. از فرمت مناسب استفاده کنید. تصاویر JPEG برای عکسها مناسبند و PNG برای تصاویر شفاف یا آیکونها کاربرد دارد و برای هر تصویر یک عنوان و متن جایگزین مناسب انتخاب کنید. سعی کنید تصاویر با محتوای صفحه هماهنگ باشند. استفاده از عکسهای نامربوط باعث سردرگمی کاربر میشود. در طراحی موبایل حتما ابعاد تصاویر را بررسی کنید تا صفحه به هم ریخته دیده نشود.

پیشنهاد مطالعه: سئو و طراحی سایت: چرا این دو باید با هم هماهنگ باشند؟

کلام آخر

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

می توانید فیلم کامل آموزش جامع المان تصویر در المنتور که توسط استاد اسماعیلی از اساتید مجرب مجموعه آرتا رسانه، تدریس شده را   در یوتیوب مشاهده کنید.