[ad_1]
بیایید شروع کنیم!
بررسی
برای کمک به شما در تجسم نتیجه ای که در تلاش برای رسیدن به آن هستیم، اجازه دهید به نتیجه نهایی نگاه کنیم:
طرح را به صورت رایگان بارگیری کنید
برای دستیابی به طرح های این آموزش، ابتدا باید آن را با استفاده از دکمه زیر دانلود کنید. برای دسترسی به دانلود، باید با استفاده از فهرست پستی روزانه Divi مشترک شوید فرم زیر به عنوان یک مشترک جدید، مزایای Divi بیشتر و بسته طرح بندی رایگان Divi را هر دوشنبه دریافت خواهید کرد! اگر قبلاً در لیست هستید، فقط آدرس ایمیل خود را در زیر وارد کنید و روی دانلود کلیک کنید. شما "دوباره مشترک" نمی شوید یا ایمیل های اضافی دریافت نمی کنید.
برای وارد کردن طرح بندی بخش به کتابخانه Divi خود، به کتابخانه Divi بروید.
روی دکمه Import کلیک کنید.
در پنجره پاپ آپ قابل حمل، تب import را انتخاب کنید و فایلی را که می خواهید از رایانه خود آپلود کنید انتخاب کنید.
سپس بر روی دکمه import کلیک کنید.
پس از اتمام، طرح بندی بخش ها در Divi Builder در دسترس خواهد بود.
در مورد آموزش، می خواهید؟
آنچه شما باید برای شروع کار
برای شروع، باید موارد زیر را انجام دهید:
- اگر قبلاً این کار را نکرده اید، آن را نصب و فعال کنید تم دیوی.
- یک صفحه جدید در وردپرس ایجاد کنید و از Divi Builder برای ویرایش صفحه در قسمت جلو (ویژوال ساز) استفاده کنید.
- گزینه «ساخت از ابتدا» را انتخاب کنید.
پس از آن یک بوم خالی برای شروع طراحی در دیوی خواهید داشت.
یک نوار ناوبری چسبنده از پایین به بالا در Divi ایجاد کنید
قسمت 1: ایجاد بخش و هدر بالای خط آب
برای قسمت اول این آموزش، می‌خواهیم بخش و هدر بالای خط آب ایجاد کنیم که به عنوان بخش اصلی صفحه ما عمل می‌کند. این بخش روی دسکتاپ تمام صفحه خواهد بود تا اطمینان حاصل شود که بخش کل پنجره را اشغال می کند.
یک ردیف اضافه کنید
برای شروع، یک ردیف به یک ستون به بخش پیش فرض اضافه کنید.
تنظیمات بخش
قبل از اضافه کردن یک ماژول، تنظیمات بخش را باز کنید و یک پس زمینه به صورت زیر اضافه کنید:
- رنگ پس زمینه: # e9f9ff
- تصویر پس زمینه: [افزودن تصویر]
در تب Design، حداقل ارتفاع و بالشتک را به روز کنید.
- حداقل ارتفاع: 100 ولت ساعت (رایانه رومیزی)، اتوماتیک (تبلت و تلفن)
- بالشتک: 20 ولت ساعت بالا، 20 ولت ساعت پایین
متن سرصفحه
برای ایجاد متن سرصفحه، یک ماژول متن جدید به خط اضافه کنید.
سپس محتوا را با هدر H1 زیر به روز کنید:
<h1>Above the Fold</h1>
تنظیمات متن
در برگه طراحی تنظیمات متن، سبک های قلم عنوان را به صورت زیر به روز کنید:
- قلم عنوان: روبیک
- وزن قلم سرصفحه: نیمه پررنگ
- سبک قلم TT Header
- تراز متن سرصفحه: مرکز
- رنگ متن عنوان: # 302ea7
- اندازه متن عنوان: 130 پیکسل (رومیزی)، 70 پیکسل (تبلت)، 40 پیکسل (تلفن)
- فاصله حروف سربرگ: 2 پیکسل
- ارتفاع خط سرفصل: 1,3 em
قسمت 2: ایجاد بخش زیر چین
برای نشان دادن عملکرد نوار ناوبری چسبنده، باید بخشی را در زیر تاشو اضافه کنیم تا بتوانیم فضایی برای اسکرول داشته باشیم.
برای ایجاد بخش، قسمت بالای خط آبی را که ایجاد کردیم، کپی کنید.
پس زمینه بخش تکراری را به روز کنید.
- رنگ پس زمینه: # f4def1
سپس به قسمت حداقل ارتفاع زیادی بدهید تا فضایی برای اسکرول صفحه داشته باشیم. این فقط بخشی برای پر کردن به جای محتوای واقعی یک صفحه است.
سپس محتوای ماژول متن را با جایگزینی کلمه "زیر" با "بالا" به روز کنید.
قسمت 3: نوار پیمایش چسبنده را ایجاد کنید
برای ایجاد نوار پیمایش چسبنده از پایین به بالا، اولین قدم ما ایجاد یک بخش جدید با یک سطر به یک ستون است.
یک بخش جدید و یک خط جدید اضافه کنید
یک بخش معمولی جدید را مستقیماً زیر قسمت بالای خط آب اضافه کنید.
سپس یک ردیف به یک ستون به بخش اضافه کنید.
پس زمینه بخش و بالشتک
تنظیمات بخش را باز کنید و رنگ پس زمینه را به روز کنید.
- رنگ پس زمینه: # 302ea7
سپس بالشتک بالا و پایین را بردارید تا نوار ناوبری ارتفاع کمتری داشته باشد.
- Infill: 0px بالا، 0px پایین
سرریز قابل مشاهده را اضافه کنید
برای اطمینان از اینکه منوهای کشویی قابل مشاهده باقی می مانند، گزینه های دید را به صورت زیر به روز کنید:
- سرریز افقی: قابل مشاهده است
- سرریز عمودی: قابل مشاهده است
به بخش یک موقعیت مطلق در موبایل بدهید
منوی کشویی موبایل به طور پیش فرض در زیر نماد همبرگر باز می شود. اگر نوار ناوبری را در پایین نگه داریم، اگر کاربر روی آن در موقعیت پایین کلیک کند، منوی کشویی پنهان می شود. برای تجربه کاربری بهتر، می‌خواهیم نوار پیمایش از بالای صفحه در صفحه تبلت و تلفن شروع شود.
برای انجام این کار، بخش را در تبلت و تلفن یک موقعیت مطلق قرار دهید.
- موقعیت: نسبی (رایانه رومیزی)، مطلق (تبلت و تلفن)
موقعیت چسبنده را برای دسکتاپ و موبایل اضافه کنید
برای افزودن موقعیت چسبنده به بخش نوار پیمایش، موارد زیر را به روز کنید:
- موقعیت چسبنده: چسبیدن به بالا و پایین (رومیزی)، چسبیدن به بالا (تبلت و تلفن)
به روز رسانی padding
پس از تکمیل قسمت چسبنده، تنظیمات ردیف را در داخل بخش باز کنید و fill را به صورت زیر به روز کنید:
- بالشتک: 10 پیکسل در بالا، 10 پیکسل در پایین
یک منوی ناوبری ایجاد کنید
با قرار دادن بخش و ردیف، آماده ایجاد منوی پیمایش هستیم.
با اضافه کردن یک ماژول منو به سطر یک ستون شروع کنید.
محتوای منو
محتوای منو را به صورت زیر به روز کنید:
- منو را از لیست کشویی انتخاب کنید
- اضافه کردن تصویر لوگو (من از تصویر 122 پیکسل در 52 پیکسل استفاده می کنم)
- حذف رنگ پس زمینه پیش فرض
در تب Design، متن منو و تنظیمات نماد زیر را به‌روزرسانی کنید:
- رنگ پیوند فعال: #fff
- فونت منو: روبیک
- سبک قلم منو: TT
- رنگ متن منو: #fff
- اندازه متن منو: 16 پیکسل
- تراز متن: سمت راست
- رنگ خط منوی کشویی: # e19dff
- رنگ متن منوی موبایل: # 302ea7
- رنگ نماد سبد خرید: #fff
- رنگ نماد جستجو: #fff
- رنگ نماد منوی همبرگر: #fff
استفاده از حاشیه برای جبران موقعیت مطلق نوار پیمایش در تلفن همراه
از آنجایی که بخش نوار ناوبری در تلفن همراه دارای موقعیت مطلق است، نوار بالای قسمت بالای صفحه قرار می گیرد (و قطع می کند). برای حل این مشکل، باید قسمت بالایی را با استفاده از یک حاشیه بالایی با همان ارتفاع نوار / بخش ناوبری، آفست کنیم.
ارتفاع قسمت نوار ناوبری را در موبایل بررسی کنید
برای تعیین ارتفاع نوار پیمایش در تلفن همراه، نسخه زنده صفحه را در یک پنجره مرورگر جدید باز کنید. سپس می توانید عرض مرورگر را به زیر 980 پیکسل کاهش دهید تا منوی موبایل را ببینید. بر روی قسمت حاوی منو کلیک راست کرده و گزینه Inspect Item را از منوی زمینه مرورگر انتخاب کنید. شما باید جعبه ابزاری را در زیر بخش ببینید که ابعاد (از جمله ارتفاع) بخش را نشان می دهد. برای این مثال، ارتفاع بخش نوار ناوبری 72 پیکسل است.
یک افست حاشیه بالایی به قسمت بالای تاشو اضافه کنید
حالا که ارتفاع قسمت را مشخص کردیم، تنظیمات قسمت بالایی (بالای تا) را باز کنید.
در تب Design، حاشیه بالایی زیر را هم در تبلت و هم در تلفن اضافه کنید:
- عرض حاشیه بالایی: 72 پیکسل (تبلت و تلفن)
- رنگ حاشیه بالا: # 302ea7
از آنجایی که حاشیه همان ارتفاع قسمت با موقعیت مطلق است، نمی توانید حاشیه را ببینید زیرا فقط برای فشار دادن قسمت به سمت پایین عمل می کند تا بریده نشود.
نتیجه نهایی
نتیجه نهایی را کشف کنید!
آخرین افکار
ایجاد یک نوار ناوبری چسبنده از پایین به بالا را می توان به راحتی با استفاده از موقعیت داخلی و گزینه های چسبنده Divi به دست آورد. نکته کلیدی این است که به قسمت بالای چین ارتفاع 100 ولت ساعت بدهید، سپس قسمت نوار ناوبری را در زیر که به پایین و بالای ناوبر می چسبد اضافه کنید. امیدواریم که این کمک کند تا فضایی منحصر به فرد و جذاب در بالای خط آب به شما اضافه کنید وب سایت.
این نوار ناوبری چسبنده برای طراحی یک صفحه به جای یک الگوی کلی بهترین کار را دارد. با این حال، می توانید به راحتی از این به عنوان طراحی صفحه اصلی خود استفاده کنید و از یک سربرگ جهانی برای بقیه صفحات با استفاده از سازنده استفاده کنید. تم دیوی.
من نمی توانم صبر کنم تا از شما در نظرات بشنوم.
به سلامتی شما!
[ad_2]
