Divi: چگونه یک نوار منوی چسبناک از پایین به بالا ایجاد کنیم

آیا می خواهید یک نوار ناوبری در Divi ایجاد کنید که از پایین به بالای صفحه چسبنده باشد؟

در آموزش DIVI امروز قصد داریم گام به گام به شما نشان دهیم که چگونه یک نوار ناوبری چسبنده از پایین به بالا در Divi ایجاد کنید. 

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

می توانید بگویید که صفحه منوی پایین صفحه را "تسخیر" می کند و جلوه تعامل خوبی را به منوی اصلی شما و وب سایت.

بیایید شروع کنیم!

بررسی

برای کمک به شما در تجسم نتیجه ای که می خواهیم به آن برسیم، اجازه دهید به نتیجه نهایی نگاه کنیم:

اکنون DIVI را دانلود کنید!!!

بیایید با ایجاد یک صفحه جدید با Divi Builder شروع کنیم

برای شروع، باید موارد زیر را انجام دهید:

از داشبورد وردپرس، به صفحات> افزودن جدید برای ایجاد یک صفحه جدید

عنوانی به آن بدهید که برای شما منطقی باشد و کلیک کنید از Divi Builder استفاده کنید

سپس روی کلیک کنید شروع به ساختن کنید (از خراش بسازید)

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

یک نوار ناوبری چسبنده از پایین به بالا در Divi ایجاد کنید

قسمت 1: ایجاد بخش و هدر بالای خط آب

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

دفعات بازدید: Divi: بین طرح‌بندی شبکه‌ای و تمام عرض ماژول نمونه کارها فیلتر را انتخاب کنید

یک ردیف اضافه کنید

برای شروع، یک ردیف به یک ستون به بخش پیش فرض اضافه کنید.

تنظیمات بخش

قبل از اضافه کردن یک ماژول، تنظیمات بخش را باز کنید و یک پس زمینه به صورت زیر اضافه کنید:

• رنگ پس زمینه: #e9f9ff
• تصویر پس زمینه: [افزودن تصویر]

زیر زبانه طرح، حداقل ارتفاع و بالشتک را به روز کنید.

• حداقل ارتفاع: 100 ولت ساعت (رومیزی)، خودکار (تبلت و تلفن)
• بالشتک: 20 ولت ساعت (بالا و پایین)

متن سرصفحه

برای ایجاد متن سرصفحه، یک ماژول متن جدید به خط اضافه کنید.

سپس به روز رسانی کنید محتویات با هدر H1 زیر:

<h1>Above the Fold</h1>

تنظیمات متن

زیر زبانه طرح در تنظیمات ماژول متن، سبک های فونت هدر را به صورت زیر به روز کنید:

• عنوان:
  • فونت: روبی
  • وزن قلم: نیمه پررنگ
  • سبک: TT
  • تراز متن: در مرکز
  • رنگ متن: #302ea7
  • اندازه: 130 پیکسل (رومیزی)، 70 پیکسل (تبلت)، 40 پیکسل (تلفن)
  • فاصله حروف: 2 پیکسل
  • ارتفاع خط: 1,3 em

قسمت 2: ایجاد بخش زیر خط آب

برای نشان دادن عملکرد نوار ناوبری چسبنده، باید بخشی را در زیر تاشو اضافه کنیم تا بتوانیم فضایی برای اسکرول داشته باشیم.

برای ایجاد بخش، قسمت بالای چینی را که ایجاد کردیم، کپی کنید.

پس زمینه بخش تکراری را به روز کنید.

• رنگ پس زمینه: #f4def1

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

• حداقل ارتفاع: 200vh

سپس به روز رسانی کنید محتویات از ماژول متن با جایگزینی کلمه “زیر” تعادل "در بالا".

قسمت 3: نوار پیمایش چسبنده را ایجاد کنید

برای ایجاد نوار پیمایش چسبنده از پایین به بالا، اولین قدم ما ایجاد یک بخش جدید با یک سطر به یک ستون است.

بخش و خط جدید اضافه شد

ابتدا، اجازه دهید یک بخش معمولی جدید را مستقیماً زیر قسمت بالای تاشو اضافه کنیم.

بعد، بیایید یک ردیف یک ستونی به بخش اضافه کنیم.

پس زمینه بخش و بالشتک

تنظیمات بخش را باز کنید و رنگ پس زمینه را به روز کنید.

• رنگ پس زمینه: #302ea7

سپس بالشتک بالا و پایین را بردارید تا نوار ناوبری ارتفاع کمتری داشته باشد.

• بالشتک: 0 پیکسل (بالا و پایین)

سرریز قابل مشاهده را اضافه کنید

برای اطمینان از اینکه منوهای کشویی قابل مشاهده باقی می مانند، گزینه های دید را به صورت زیر به روز کنید:

• سرریز افقی: قابل مشاهده است
• سرریز عمودی: قابل مشاهده است

به بخش یک موقعیت مطلق در موبایل بدهید

منوی کشویی موبایل به طور پیش فرض در زیر نماد همبرگر باز می شود. اگر نوار ناوبری را در پایین نگه داریم، اگر کاربر روی آن کلیک کند، منوی کشویی پنهان می شود. 

برای تجربه کاربری بهتر، می‌خواهیم نوار ناوبری از بالای صفحه در صفحه تبلت و تلفن شروع شود.

برای این کار، به بخش یک موقعیت مطلق در تبلت و تلفن بدهید.

• موقعیت: نسبی (رومیزی)، مطلق (تبلت و تلفن)

موقعیت چسبنده را برای دسکتاپ و موبایل اضافه کنید

برای افزودن موقعیت چسبنده به بخش نوار پیمایش، موارد زیر را به روز کنید:

• موقعیت چسبنده: چسبیدن به بالا و پایین (رومیزی)، چسبیدن به بالا (تبلت و تلفن)

به روز رسانی padding

هنگامی که بخش چسبنده کامل شد، تنظیمات ردیف را در داخل بخش باز کنید و padding را به صورت زیر به روز کنید:

• بالشتک: 10 پیکسل (بالا و پایین)

یک منوی ناوبری ایجاد کنید

با قرار دادن بخش و خط، ما آماده ایجاد منوی پیمایش هستیم.

با افزودن یک ماژول منو به ردیف تک ستونی شروع کنید.

محتوای منو

محتوای منو را به صورت زیر به روز کنید:

• منو را از لیست کشویی انتخاب کنید
• اضافه کردن تصویر لوگو
• حذف رنگ پیش فرض پس زمینه

زیر زبانه طرح، متن منو و تنظیمات نماد زیر را به روز کنید:

• رنگ پیوند فعال: #fff
• قلم منو: روبی
• سبک قلم منو: TT
• رنگ متن: #fff
• اندازه متن منو: 16 پیکسل
• تراز متن: سمت راست
• رنگ خط منوی کشویی: #e19dff
• رنگ متن منوی موبایل: #302ea7
• رنگ نماد سبد خرید: #fff
• رنگ نماد جستجو: #fff
• رنگ نماد منوی همبرگر: #fff

استفاده از حاشیه برای جبران موقعیت مطلق نوار پیمایش در تلفن همراه

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

ارتفاع قسمت نوار ناوبری را در موبایل بررسی کنید

برای تعیین ارتفاع نوار پیمایش در تلفن همراه، نسخه زنده صفحه را در پنجره مرورگر جدید باز کنید. سپس می توانید عرض مرورگر را به زیر 980 پیکسل کاهش دهید تا منوی موبایل را ببینید. 

همچنین می توانید مشورت کنید: Divi: چگونه یک نوار ناوبری چسبنده ایجاد کنیم

روی قسمت حاوی منو کلیک راست کرده و گزینه را انتخاب کنید عنصر را بازرسی کنید در منوی زمینه مرورگر شما باید یک جعبه ببینید ابزار زیر قسمتی که ابعاد (از جمله ارتفاع) بخش را نشان می دهد. 

برای این مثال، ارتفاع بخش نوار ناوبری 72 پیکسل است.

یک افست حاشیه بالایی به قسمت بالای تاشو اضافه کنید

حالا که ارتفاع قسمت را مشخص کردیم، تنظیمات قسمت بالایی (بالای تا) را باز کنید.

زیر زبانه طرح، حاشیه بالایی زیر را روی رایانه لوحی و تلفن اضافه کنید:

• پهنای حاشیه بالا: 72 پیکسل (تبلت و تلفن)
• رنگ حاشیه بالایی: #302ea7

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

نتیجه نهایی

نتیجه نهایی را کشف کنید!

اکنون DIVI را دانلود کنید!!!

نتیجه

ایجاد یک نوار ناوبری چسبنده از پایین به بالا به راحتی با استفاده از موقعیت داخلی Divi و گزینه های چسبنده. 

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

این نوار ناوبری چسبنده برای طراحی یک صفحه به جای یک الگوی کلی بهترین کار را دارد. با این حال، می توانید به راحتی از این به عنوان طراحی صفحه اصلی خود استفاده کنید و از یک سربرگ جهانی برای بقیه صفحات با استفاده از مولد تم Divi .

امیدواریم این آموزش الهام بخش شما برای پروژه های بعدی Divi باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد

همچنین می توانید مشورت کنید منابع مااگر به عناصر بیشتری نیاز دارید تا پروژه های ایجاد سایت های اینترنتی خود را انجام دهید.

دریغ نکنید که با راهنمای ما در این زمینه نیز مشورت کنید ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.

...