آیا می خواهید یک لوگوی پاسخگو به ماژول منوی Fullwidth خود اضافه کنید DIVI به طوری که آن را با دید در تلفن همراه سازگار است؟
آیا می دانید که بیش از 50 درصد از ترافیک اینترنت از دستگاه های تلفن همراه می آید؟ این بدان معناست که نسخه موبایل شما وب سایت بسیار مهم است و حتی ممکن است راهی اصلی برای بازدید از صفحه شما باشد.
مطمئن شوید که شما وب سایت واکنش گرا و سازگار با موبایل یک گام اساسی در طراحی است وب سایت.
در این آموزش، به شما نشان خواهیم داد که چگونه با استفاده از گزینه‌های واکنش‌گرای داخلی، یک لوگوی واکنشگرا به ماژول منوی Fullwidth خود اضافه کنید. DIVI.
این به شما امکان می دهد یک لوگوی بزرگتر یا پیچیده تر را اضافه کنید که در صفحه های بزرگتر ظاهر می شود و یک لوگوی کوچکتر یا ساده تر که در صفحه های کوچکتر ظاهر می شود.
بیایید شروع کنیم!
بررسی
در اینجا پیش نمایشی از آنچه ما طراحی خواهیم کرد است. نسخه دسکتاپ وب سایت دارای یک لوگوی توسعه یافته با متن اضافی خواهد بود و نسخه تلفن همراه لوگو فقط دارای مارک اصلی لوگو خواهد بود.
آنچه شما باید برای شروع کار
تمام ابتدا تم Divi را نصب و فعال کنید و مطمئن شوید که آخرین نسخه را دارید DIVI در وب سایت شما در مرحله بعد، مطمئن شوید که حداقل دو نسخه از لوگوی خود دارید: یکی برای نمای دسکتاپ سایت خود و دیگری برای نمای موبایل. در نهایت قالب را دانلود کنید قالب‌های سرصفحه و پاورقی برای بسته طرح‌بندی دبیرستان Divi.
اکنون شما آماده شروع هستید!
چگونه یک لوگوی پاسخگو به ماژول هدر تمام پهنای خود در Divi اضافه کنید
ماژول Fullwidth Header را ایجاد کنید
دفعات بازدید: Divi: نحوه نمایش ماژول Fullwidth Header به صورت تمام صفحه
یک بخش با عرض کامل اضافه کنید
از آنجایی که منوی اصلی با یک ماژول منوی استاندارد ساخته شده است، باید طرح بندی را تغییر دهیم تا یک ماژول Fullwidth Header اضافه کنیم.
ابتدا یک بخش با عرض کامل اضافه کنید (تمام عرض) به سربرگ جهانی زیر منوی موجود.
در تنظیمات بخش تمام عرض، به مسیر بروید فناوریو پس از آن جلوه های پیمایش کنید.
- موقعیت چسبنده: به بالا بچسبید
سپس رنگ پس زمینه را اضافه کنید.
- پس زمینه: #f5f0eb
یک رنگ متفاوت برای پس زمینه در حالت چسبناک اضافه کنید.
- پس زمینه (چسبنده): #ffffff
یک ماژول Fullwidth Header اضافه کنید
حالا بیایید ماژول Fullwidth Header را اضافه کنیم.
تنظیمات ماژول را باز کنید و پس زمینه را حذف کنید.
برای تکرار آسان ظاهر منوی اصلی، می‌توانیم از ویژگی Copy Styles برای کپی کردن برخی از تنظیمات سفارشی استفاده کنیم.
همچنین ببینید: Divi: نحوه تغییر گرادیان پس‌زمینه در شناور
تنظیمات منوی اصلی را باز کنید و روی آن راست کلیک کنید منوی متنی و انتخاب کنید سبک های متن منو کپی کنید.
پس از کپی کردن، روی سه نقطه ماژول Fullwidth Header کلیک کنید و سپس انتخاب کنید سبک های متن منوی گذشته.
حالا همین مراحل را با تنظیمات منوی کشویی تکرار می کنیم.
یک بار دیگر برای نمادها تکرار کنید.
تراز متن را به سمت راست تنظیم کنید.
- تراز متن: سمت راست
حداکثر ارتفاع لوگو را در زیر تنظیم کنید طرحسپس اندازه گیری.
- حداکثر ارتفاع لوگو: 50 پیکسل
CSS زیر را به بخش اضافه کنید منوی پیوند تحت CSS سفارشی.
padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;
در نهایت، بالشتک بالا و پایین را تنظیم کنید.
- Padding-Top: 10px
- بالشتک-پایین: 10 پیکسل
اکنون بخش منوی اصلی را حذف کنید.
اضافه کردن لوگوی واکنشگرا
اکنون لوگوی واکنش گرا را اضافه می کنیم. خوشبختانه، Divi این کار را با گزینه های پاسخگو داخلی آسان می کند.
تحت محتوا، تنظیمات لوگو را باز کنید و نسخه دسکتاپ لوگوی خود را آپلود کنید.
نماد حالت موبایل را برای استفاده از گزینه‌های واکنشگرا انتخاب کنید، سپس آرم تلفن همراه را با لوگوی واکنشگرا جایگزین کنید.
یک صفحه جدید با یک طرح از پیش تعریف شده ایجاد کنید
برای مشاهده منوی تمام عرض با لوگوی واکنشگرا، بیایید یک صفحه جدید با طرح‌بندی از پیش تعریف‌شده از کتابخانه Divi ایجاد کنیم.
برای این طراحی، ما از صفحه اصلی دبیرستان استفاده خواهیم کرد بسته چیدمان دبیرستان برای مطابقت با سر و پاورقی.
یک صفحه جدید به وب سایت خود اضافه کنید و به آن عنوان بدهید، سپس گزینه را انتخاب کنید از Divi Builder استفاده کنید. از آنجایی که ما طرح‌بندی سرصفحه و پاورقی را به عنوان سرصفحه و پاورقی جهانی وارد کردیم، از طرح‌بندی پیش‌فرض برای این صفحه استفاده کنید.
ما از یک طرح از پیش ساخته شده از کتابخانه Divi برای این مثال استفاده خواهیم کرد، پس انتخاب کنید طرح بندی ها را مرور کنید.
طرح بندی را پیدا کرده و انتخاب کنید صفحه اصلی دبیرستان.
Sélectionnez از این طرح بندی استفاده کنید تا طرح بندی را به صفحه خود اضافه کنید.
نتیجه نهایی
حالا بیایید نگاهی به طراحی نهایی خود بیندازیم.
اکنون DIVI را دانلود کنید!!!
نتیجه
داشتن یک وب سایت سازگار با موبایل و واکنش گرا بیش از همیشه مهم است. و به لطف گزینه های پاسخگو داخلی Divi، ساختن یکی از همیشه آسان تر است!
با یک لوگوی واکنش گرا، بدون در نظر گرفتن اندازه صفحه نمایش، هویت برند شما همیشه واضح خواهد بود.
امیدواریم این آموزش الهام بخش شما برای پروژه های بعدی Divi باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد
همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.
اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.
...
