ماژول منوی عرض کامل Divi به کاربران Divi کنترل زیادی روی طراحی آن می دهد. این شامل توانایی ایجاد هر لوگوی کاملاً واکنش گرا می شود. مجموعه ای از کنترل ها، عرض لوگو و حداکثر عرض آرم، برای تعیین اندازه لوگو با هم عالی کار می کنند. تنها با چند ترفند، هر کاربر Divi می تواند مطمئن شود که لوگوی خود در هر صفحه ای عالی کار می کند. در این پست نحوه بهینه سازی اندازه لوگوی سفارشی Divi را در ماژول منوی کامل عرض Divi خواهیم دید.
بیا شروع کنیم.
درباره تنظیمات نمونه ماژول منوی عرض کامل من
قبل از شروع، اجازه دهید نگاهی به مثال من و تنظیمات آن بیندازیم. می بینیم که لوگو برای هدر بزرگ است. این یک لوگو مربع است. همچنین خواهیم دید که چگونه تنظیمات را برای اندازه ها و اشکال دیگر تنظیم کنیم. این یک نقطه شروع به ما می دهد و خواهیم دید که چگونه آن را در حین حرکت تنظیم کنیم. همچنین نشان خواهد داد که چرا باید آن را تعمیر کنیم.
اینم تنظیمات من:
- لوگو: 150×150
- رنگ پس زمینه: #f4f4f4
- سبک: تراز چپ (همچنین زمانی که به نشان دادن تنظیمات کمک می کند، یک لوگوی درون خطی را نشان خواهم داد)
- جهت کشویی: پایین
- پیوندهای منو را تمام عرض کنید: خیر
- فونت منو: Arvo
- رنگ متن: مشکی
- اندازه فونت: 16 پیکسل
- آستر: 2vh بالا و پایین
در اینجا هدر زمانی است که روی دسکتاپ دیده می شود.
در اینجا هدر تبلت است. اندازه لوگو حتی بیشتر خودنمایی می کند.
در نهایت، در اینجا ظاهر گوشی است. این باعث می شود هدر بیش از حد بزرگ باشد.
این مثال‌ها به خوبی نشان می‌دهند که چرا یک لوگو در یک ماژول منوی عرض کامل باید پاسخگو باشد.
درباره اندازه لوگو
اندازه لوگوی توصیه شده در وب متفاوت است. بیشترین اندازه توصیه شده معمولا بین 250×100 و 250×150 است. لوگوهایی که ما در چیدمان های Divi خود قرار می دهیم معمولاً در محدوده 160×50 یا 225×100 هستند، اما برخی از آنها بر اساس شکلشان بسیار متفاوت هستند.
من از یک آرم 150×150 استفاده می کنم و نمونه هایی را با آرم های با اندازه های مختلف نشان خواهم داد. شما باید با تنظیمات خود بر اساس اندازه تصویر لوگوی خود بازی کنید.
تنظیمات اندازه آرم ماژول عرض کامل
در قسمت Sizing 10 تنظیمات وجود دارد. چهار مورد از این تنظیمات لوگو را هدف قرار می دهند.
تنظیمات شامل:
- عرض لوگو – درصد حداکثر عرض. پیش فرض خودکار است.
- Logo Max Width – حداکثر عرض را بر حسب پیکسل تعیین می کند که عرض نمی تواند از آن بیشتر شود. پیش فرض 100٪ است.
- ارتفاع لوگو – درصد حداکثر ارتفاع. پیش فرض خودکار است.
- حداکثر ارتفاع لوگو – حداکثر ارتفاع را بر حسب پیکسل تنظیم می کند که ارتفاع نتواند از آن بیشتر شود. پیش فرض 100٪ است.
تنظیمات عرض با هم کار می کنند و تنظیمات ارتفاع با هم کار می کنند، اما عرض و ارتفاع نباید با هم استفاده شوند. این تنظیمات به ما کنترل خوبی بر روی عرض یا ارتفاع لوگو می دهد. هنگامی که با تنظیمات دسکتاپ، تبلت و تلفن استفاده می شود، بدون در نظر گرفتن اندازه صفحه نمایش کاربر، همیشه یک لوگوی کاملاً پاسخگو خواهیم داشت.
برای این آموزش، ما بر روی عرض لوگو و حداکثر عرض لوگو تمرکز خواهیم کرد. هنگام استفاده از تنظیمات عرض، ارتفاع باید روی Auto و حداکثر ارتفاع باید روی 100٪ تنظیم شود.
عرض لوگو و حداکثر عرض لوگو
تنظیم عرض لوگو، عرض آرم را به عنوان درصدی از حداکثر مقدار عرض تنظیم می کند. حداکثر مقدار عرض معمولاً بر حسب پیکسل یا vw تنظیم می شود. ارتفاع برای مطابقت اندازه گیری می شود و در صورت تغییر اندازه، شکل لوگو حفظ می شود.
به عنوان مثال، اگر حداکثر عرض 50 پیکسل و عرض 80 درصد باشد، لوگو عرض 40 پیکسل را نمایش می دهد.
با تنظیم حداکثر تعداد پیکسل برای عرض و سپس تنظیم عرض آرم به عنوان درصدی از حداکثر آن برای هر اندازه صفحه، می توانیم اطمینان حاصل کنیم که آرم همیشه عالی پاسخ می دهد.
نمونه های عرض و حداکثر عرض
بیایید چند مثال خوب و بد را برای نشان دادن پاسخگویی لوگو ببینیم. این مثال هر دو تنظیمات عرض پیش فرض را نشان می دهد. من برای نشان دادن عرض در دو طرف لوگو، Inline Centered Logo را انتخاب کردم.
مثال بد
حالا بیایید به یک مثال بد نگاه کنیم. من در اعداد اغراق کردم تا واضح تر شود. اگر حداکثر عرض را افزایش دهیم و عرض را روی 100% قرار دهیم، پیوندهای منو را از لوگو دور می کند. این در تبلت ها و تلفن ها حتی بدتر به نظر می رسد.
- عرض لوگو: 100%
- حداکثر عرض: 500 پیکسل
ما می توانیم از حداکثر عرض برای محدود کردن عرض استفاده کنیم. در این مثال من حداکثر عرض را روی 150 پیکسل و عرض را روی 600٪ تنظیم کرده ام. عرض را نمی توان بالاتر از حداکثر عرض که 150 پیکسل است نمایش داد. این به ما کمک می کند تا عرض ممکن را محدود کنیم و به ما کمک می کند تا اندازه لوگو را برای پاسخگویی طراحی کنیم.
- عرض لوگو: 600%
- حداکثر عرض: 150 پیکسل
یک مثال خوب
در مرحله بعد، بیایید به یک مثال خوب نگاه کنیم. برای شروع، توصیه می‌کنم که Width را در حالت پیش‌فرض بگذارید و حداکثر عرض را تنظیم کنید تا محدوده پیکسلی را پیدا کنید که برای لوگوی شما به خوبی کار می‌کند. عرض را روی 80 درصد حداکثر عرض قرار دادم که 120 پیکسل است. لوگو در این هدر بسیار بهتر به نظر می رسد.
- عرض لوگو: 80%
- حداکثر عرض: 120 پیکسل
برای بهترین نتایج پاسخگو، باید تبلت و تلفن را روی حداکثر عرض پیکسل های مختلف تنظیم کنیم. در اینجا آرم تراز چپ برای دسکتاپ، تلفن همراه و تلفن است. 120 پیکسل برای دسکتاپ، 100 پیکسل برای رایانه لوحی و 80 پیکسل برای تلفن ها تنظیم می کنیم.
- عرض لوگو: 80%
- حداکثر عرض: دسکتاپ 120 پیکسل، تبلت 100 پیکسل، تلفن 80 پیکسل
در اینجا نسخه دسکتاپ است.
در اینجا نسخه دسکتاپ است. من گزینه Tablet را برای Maximum Logo Width انتخاب کردم و روی 100px قرار دادم. این بسیار بهتر از تنظیمات پیش فرض به نظر می رسد.
در نهایت، در اینجا نسخه تلفن 80px است. اکنون لوگو به هر سه گزینه صفحه نمایش کاملاً پاسخ می دهد.
نمونه های اندازه لوگوی واکنش گرا
تا به حال یک لوگوی مربعی دیده ایم. حالا بیایید به چند نوع مختلف لوگو نگاه کنیم تا نحوه استفاده از تنظیمات عرض و حداکثر عرض را ببینیم. من قصد دارم چند سرصفحه رایگان Divi را تغییر دهم تا یک ماژول منوی تمام عرض داشته باشد و یک لوگو اضافه کنم.
می توانید این تنظیمات را انجام دهید تا مطمئن شوید که یک لوگوی قابل تنظیم دارید. بیایید نگاهی به مثالی بیندازیم که چگونه می توانید از آنها در قسمت جلویی یک وب سایت استفاده کنید.
اولین نمونه از یک لوگوی واکنش گرا
برای این مثال، من از صفحه فرود از بسته طرح‌بندی رایگان Stone Factory موجود در Divi استفاده می‌کنم. من از نسخه اصلاح شده قالب رایگان سرصفحه و پاورقی استفاده می کنم.
این لوگوی داخلی است. این 161×50 است که آن را به یک لوگوی کوتاه و پهن تبدیل می کند. تنظیمات فعلی من در اینجا آمده است:
- لوگو: 161×50
- رنگ پس زمینه: #f4f4f4
- سبک: تراز چپ
- جهت کشویی: پایین
- پیوندهای منو را تمام عرض کنید: خیر
- فونت منو: Arvo
- رنگ متن: مشکی
- اندازه فونت: 16 پیکسل
تنظیمات پیش‌فرض بیش از حد گسترده هستند و باعث می‌شوند پیوندهای منو به خط بعدی بسته شوند.
اندازه اولین لوگوی واکنشگرا را بهینه کنید
حالا بیایید با استفاده از گزینه های اندازه ای که در مورد آن صحبت کردیم، لوگو را بهینه کنیم. در حین رفتن تنظیمات را نشان خواهم داد. حداکثر عرض 184 پیکسل باعث بسته شدن منو می شود، اما 183 خوب است.
- عرض لوگو: اتوماتیک
- حداکثر عرض: 184 پیکسل
حداکثر عرض بین 180 تا 145 پیکسل برای دسکتاپ عالی به نظر می رسد، بنابراین من از آن به عنوان یک محدوده تقریبی استفاده می کنم و حد بالایی را روی 170 پیکسل قرار می دهم. من عرض را روی 80٪ تنظیم کردم تا همیشه در آن اندازه عالی به نظر برسد.
- عرض لوگو: 80%
- حداکثر عرض: 170 پیکسل
برای تبلت، از حداکثر عرض 170 پیکسل به عنوان نقطه شروع استفاده کردم و آن را به 150 پیکسل کاهش دادم. عرض را 80 درصد گذاشتم.
- عرض لوگو: 80%
- حداکثر عرض: 150 پیکسل
برای نسخه گوشی، حداکثر عرض را به 120 پیکسل کاهش دادم. روش قدیمی. عرض لوگو را 80% گذاشتم.
- عرض لوگو: 80%
- حداکثر عرض: 120 پیکسل
نمونه دوم از لوگوی واکنش گرا
برای این مورد، من از بسته طرح بندی خدمات برق رایگان استفاده می کنم که در Divi موجود است. من از نسخه اصلاح شده قالب رایگان سرصفحه و پاورقی استفاده می کنم. این از لوگوی Job Line استفاده می کند. این 226×100 است، که آن را به یک لوگوی عریض و کوتاه تبدیل می کند که از نمونه قبلی ما بزرگتر است. در اینجا تنظیمات فعلی من برای ماژول منوی عرض کامل آمده است:
- لوگو: 226×100
- رنگ زمینه: سفید
- سبک: تراز چپ
- جهت کشویی: پایین
- پیوندهای منو را تمام عرض کنید: خیر
- فونت منو: چاکرا پچ
- سبک: جسورانه
- رنگ متن: مشکی
- اندازه فونت: 16 پیکسل
مانند آخرین مثال، تنظیمات پیش‌فرض بیش از حد گسترده هستند و باعث می‌شوند پیوندهای منو به خط بعدی بسته شوند.
اندازه دومین لوگوی واکنشگرا را بهینه کنید
حالا بیایید لوگوی دوم خود را با استفاده از گزینه های اندازه ای که در مورد آن بحث کردیم بهینه سازی کنیم. در حین رفتن تنظیمات را نشان خواهم داد. این لوگو با حداکثر عرض بین 190 تا 207 پیکسل عالی به نظر می رسد.
- عرض لوگو: اتوماتیک
- حداکثر عرض: 207 پیکسل
من از 200 پیکسل به عنوان حداکثر عرض استفاده خواهم کرد. من عرض را روی 80٪ تنظیم کردم تا همیشه در آن اندازه عالی به نظر برسد.
- عرض لوگو: 80%
- حداکثر عرض: 200 پیکسل
برای تبلت، از حداکثر عرض 200 پیکسل به عنوان نقطه شروع استفاده کردم و آن را به 190 پیکسل کاهش دادم. عرض را 80 درصد گذاشتم.
- عرض لوگو: 80%
- حداکثر عرض: 190 پیکسل
برای نسخه گوشی، حداکثر عرض را به 180 پیکسل کاهش دادم. مانند قبل، عرض لوگو را 80% گذاشتم.
- عرض لوگو: 80%
- حداکثر عرض: 180 پیکسل
پایان افکار
این نگاه ما به نحوه بهینه سازی اندازه لوگوی پاسخگو Divi در ماژول منوی تمام عرض است. تنظیمات Width و Max Width برای کمک به شما در یافتن اندازه بهینه و محدود کردن لوگو به آن اندازه برای هر صفحه نمایش عالی هستند. برای به دست آوردن تنظیمات دلخواه، کمی تغییر نیاز است، اما تنظیمات آسان هستند. فقط چند ترفند باعث می شود که لوگوی Divi شما برای هر صفحه ای کاملاً پاسخگو باشد.
ما می خواهیم از تو بشنویم. آیا اندازه لوگوی خود را در ماژول منوی عرض کامل Divi بهینه کرده اید؟ در نظرات به ما اطلاع دهید.