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

آیا می خواهید یک نوار ناوبری بین پست ها ایجاد کنید که در Divi چسبنده باشد؟

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

در این آموزش، یک نوار ناوبری بین post sticky in ایجاد می کنیم DIVI. برای انجام این کار، از گزینه های داخلی Divi برای تبدیل یک ردیف به نوار چسبنده استفاده می کنیم. در مرحله بعد، از ماژول ناوبری مقاله برای طراحی پیوندهای «مقاله قبلی» و «مقاله بعدی» استفاده خواهیم کرد. 

علاوه بر این، یک عنوان پست را به عنوان محتوای پویا در وسط نوار اضافه می‌کنیم که به کاربران پستی را که در حال مشاهده آن هستند یادآوری می‌کند و به نوار ناوبری یک عنصر خوب «گذشته، حال و آینده» می‌دهد.

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

بررسی

در اینجا نگاهی گذرا به طرحی که در این آموزش ایجاد خواهیم کرد، است.

آنچه شما باید برای شروع کار

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

قالب پست وبلاگ "کیت غذا" را به Divi Theme Builder وارد کنید

برای شروع، دانلود کنید قالب رایگان پست وبلاگ برای بسته چیدمان کیت غذای Divi . برای انجام این کار، به پست وبلاگ .

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

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

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

1. به Divi > Theme Builder بروید.
2. بر روی نماد قابل حمل کلیک کنید.
3. در پنجره پاپ آپ Portability، تب import را انتخاب کنید.
4. فایل زیپ نشده قبلی دانلود شده را برای وارد کردن انتخاب کنید.
5. با کلیک بر روی « Import Divi Theme Builder قالب ».
6. برای ویرایش الگوی وارد شده روی نماد ویرایش کلیک کنید.

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

قسمت 1: ایجاد خط چسبنده

برای ایجاد نوار ناوبری چسبنده، از یک ردیف سه ستونی به عنوان محفظه چسبنده برای پیوندهای پیمایش بین پست و عنوان پست استفاده می کنیم.

دفعات بازدید: Divi: نحوه استفاده از گزینه Gradient Repeat برای ایجاد الگوهای پس زمینه سفارشی

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

تنظیمات خط

تنظیمات خط را باز کنید.

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

زیر زبانه فناوری، موارد زیر را به روز کنید:

• موقعیت چسبنده: به بالا و پایین بچسبید
• حد چسبنده بالا: بخش
• حد چسبنده پایین: ناحیه بدن

برای اطمینان از اینکه ستون‌ها روی موبایل انباشته نمی‌شوند، CSS سفارشی زیر را به آن اضافه کنید عنصر اصلی :

display:flex;
flex-wrap:nowrap;
align-items:center;

زیر زبانه محتوا، یک رنگ پس زمینه سفید به خط در حالت چسبنده به صورت زیر اضافه کنید:

• پس زمینه: هیچ
• Bakground: #ffffff (چسبنده)

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

• از عرض ناودان سفارشی استفاده کنید: بله
• عرض ناودان: 1
• عرض: 100%
• حداکثر عرض: 100٪
• بالشتک: 0 پیکسل (بالا و پایین)

ستون وسط را در تبلت و تلفن پنهان کنید

برای مخفی کردن ستون در تلفن همراه، تنظیمات ستون 2 (ستون میانی) را باز کنید و گزینه های دید را به صورت زیر به روز کنید:

• غیرفعال کردن در: تلفن، تبلت

قسمت 2: ایجاد پیوندهای پیمایش مقاله

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

لینک پست قبلی

در ستون 1، یک ماژول Post Navigation جدید اضافه کنید.

تنظیمات ماژول را باز کنید، تب گزینه ها را به روز کنید محتوا مطابق ذیل :

• لینک قبلی (متن): پست قبلی
• نمایش لینک پست قبلی: بله
• نمایش لینک پست بعدی: خیر
• پس زمینه: #000000

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

• قلم پیوندها: Kumbh Sans
• وزن قلم پیوندها: پررنگ
• سبک قلم: TT
• رنگ متن پیوندها: #ffffff
• اندازه متن پیوندها: 26 پیکسل (رومیزی)، 16 پیکسل (تبلت و تلفن)
• ارتفاع خط: 1,3 em
• بالشتک: 0,9em (بالا)، 0,7em (پایین)، 2em (چپ و راست)

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

همچنین ببینید: Divi: نحوه تغییر سبک چندین عنصر هنگام شناور کردن یا پس از کلیک

برای اطمینان از اینکه پیوند ناوبری 50٪ از نمای نمایش را در بر می گیرد، CSS سفارشی زیر را برای مشاهده رایانه لوحی به کادر پیوندهای CSS اضافه کنید:

display:block;
width:50vw;
text-align:center;
float:none;

ایجاد لینک پست بعدی

برای ایجاد پیوند برای پست بعدی، ماژول Post Navigation (با لینک پست قبلی) که طراحی کردیم را کپی کنید و آن را در ستون 3 (ستون سمت راست) قرار دهید.

سپس، تنظیمات پیمایش پست را برای ماژول تکراری در ستون سمت راست باز کنید و گزینه‌های برگه محتوای زیر را به‌روزرسانی کنید:

• لینک بعدی: پست بعدی
• نمایش لینک پست قبلی: خیر
• نمایش لینک پست بعدی: بله

• پس زمینه: #ffb100

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

• رنگ متن پیوندها: #000000

قسمت 3: ایجاد عنوان پست پویا

با وجود هر دو پیوند ناوبری، ما آماده ایم عنوان پست را به عنوان محتوای پویا در ستون وسط اضافه کنیم. 

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

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

زیر زبانه محتوا، روی نماد کلیک کنید «استفاده از محتوای پویا» در ناحیه بدن، سپس انتخاب کنید عنوان پست/آرشیو.

هنگامی که عنوان پست پویا اضافه شد، تنظیمات را باز کنید عنوان پست/آرشیو و قبل از به روز رسانی محتوا:

• قبل از خواندن

سپس تغییرات را ذخیره کنید.

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

• فونت متن: Kumbh Sans
• وزن قلم متن: پررنگ
• سبک قلم: TT
• رنگ متن: شفاف (رومیزی)، #000000 (چسبنده)
• اندازه متن: 16 پیکسل
• فاصله حروف: 1 پیکسل
• ارتفاع خط: 1,3 em
• تراز متن: در مرکز

• حداکثر عرض: 96٪
• ماژول تراز: مرکز
• بالشتک: 0,5em (بالا و پایین)

نتیجه نهایی

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

نتیجه

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

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

امیدوارم این برای سایت وبلاگ بعدی شما مفید باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد

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

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

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

...