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

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

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

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

نتیجه احتمالی

در اینجا مروری بر نوار پاورقی ثابت است که می خواهیم طراحی کنیم.

نحوه اضافه کردن قالب نوار پاورقی ثابت برای بارگیری در سایت دیوی خود

هشدار!: افزودن این مدل جایگزین آن خواهد شد قالب وب سایت به طور پیش فرض (اگر یکی از آنها را دارید) در سایت Divi خود. پیشنهاد می کنیم آن را به یک سایت آزمایشی اضافه کنید تا چیزی را در یک سایت زنده خراب نکنید.

برای وارد کردن الگوی نوار پاورقی ثابت به تنهایی وب سایت، فایل فشرده دانلود را از حالت فشرده خارج کنید تا به فایل JSON دسترسی پیدا کنید.

سپس به داشبورد وردپرس رفته و به بخش Divi> Theme Builder بروید.

سپس بر روی نماد قابلیت حمل در بالای سمت راست صفحه کلیک کنید.

در پنجره قابل حمل، فایل JSON را که به تازگی از حالت فشرده خارج کرده اید انتخاب کنید و گزینه «دانلود پشتیبان قبل از وارد کردن» را انتخاب کنید، فقط در صورتی که قبلاً چیزی در قالب وب سایت پیش فرضی که نمی خواستید آن را لغو کنید.

سپس بر روی دکمه Import کلیک کنید.

واردات دیوی

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

تغییرات divi را ذخیره کنید

حالا به آموزش بروید ، خوب؟

قسمت 1: افزودن پاورقی جهانی

تم ساز Divi به شما امکان می دهد با به روز رسانی پاورقی پیش فرض را با پاورقی جدید جایگزین کنید قالب وب سایت به طور پیش فرض

برای ایجاد یک پاورقی جهانی ، به داشبورد وردپرس بروید و به Divi> Theme Builder بروید. سپس بر روی فضای "Add Global Footer" در داخل الگوی پیش فرض وب سایت کلیک کنید.

ساخت پاورقی

سپس از لیست کشویی گزینه "Build a custom footer" را انتخاب کنید.

این ویرایشگر Model Layout را در آنجا مستقر می کند که سه گزینه برای چگونگی شروع کار شما بلافاصله از شما خواسته می شود. "ساخت از خراش" را انتخاب کنید.

ساختن از صفر

قسمت دوم: ایجاد نوار پاورقی ثابت

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

یک طرح سه ستونی را به خط اضافه کنید

ابتدا یک طرح سه ستونی به ردیف اضافه کنید.

3 بخش ردیف

ارتفاع بخش

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

برای تنظیم ارتفاع و بالشتک ، تنظیمات بخش را باز کرده و موارد زیر را به روز کنید:

  • ارتفاع: 85px
  • بالشتک: 0px زیاد ، 0px کم
پیکربندی ارتفاع بخش Divi 1

تنظیمات خط

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

زمینه

  • رنگ زمینه: # 1a1e36
دسترسی به تنظیمات خط

اندازه و فاصله

  • عرض روده: 1
  • عرض: 100٪
  • حداکثر عرض: 100٪
  • بالشتک: 0px به بالا ، 0px به پایین ، 3٪ سمت چپ ، 3٪ سمت راست
بخش divi را سفارشی کنید

CSS سفارشی

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

دفتر

قد: ارث! مهم ؛ نمایش: فلکس ؛ تراز وسایل: مرکز؛

تلفن

قد: ارث! مهم ؛ نمایش: بلوک.
کد css را اضافه کنید

موقعیت یابی ثابت

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

  • موقعیت: ثابت
  • محل سکونت: مرکز پایین
موقعیت پاورقی

قسمت دوم: ایجاد محتوای نوار پاورقی ثابت

در این مرحله یک نوار پاورقی ثابت برای محتوا آماده کرده ایم. ما می توانیم هر محتوایی را که می خواهیم به هر سه ستون اضافه کنیم. اما از آنجا که این نوار پاورقی است که ارتفاع آن به 85 پیکسل محدود می شود ، ما باید مقدار محتوا را محدود کنیم. به همین دلیل منوی کوچکی با یک آرم پویا و 4 مورد منو در ستون 1 اضافه خواهیم کرد. در ستون 2 متن حق چاپ را با سال جاری پویا اضافه خواهیم کرد. در ستون 3 ، ما سه نماد ردیابی شبکه های اجتماعی اضافه خواهیم کرد.

منو را به ستون 1 اضافه کنید

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

انتخاب منوی وردپرس

منو را انتخاب کنید

سپس یکی از منوهایی را که قبلا بر روی خود ایجاد کرده اید انتخاب کنید وب سایت. مطمئن شوید که آیتم های منو را روی 4 یا کمتر نگه دارید.

منوی انتخابی وردپرس

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

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

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

حذف پس زمینه

سپس پس زمینه پیش فرض منو را حذف کنید تا شفاف باشد.

پس زمینه را پاک کنید

طراحی منو

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

  • منوی قلم: Overpass
  • رنگ متن منو: # b59c61
  • تصویر سپیا: 100٪
  • حداکثر ارتفاع آرم: 50px
رنگ قلم را تغییر دهید

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

پس از راه اندازی منو ، برای افزودن متن حق چاپ ، به ستون 2 بروید.

ماژول متنی را اضافه کنید

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

تقسیم متن ماژول انتخاب

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

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

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

تاریخ انتخاب

در پنجره پاپ آپ کنونی Date ، موارد زیر را به روز کنید:

  • قبل از:
  • 01Copyright ©
  • پس:
  • 01| Tous Droits Reservés
  • فرمت تاریخ : عرف
  • قالب تاریخ سفارشی : 20 سال
تاریخ را سفارشی کنید

قالب بندی متن

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

  • فونت متن: Overpass
  • رنگ متن: # b59c61
  • ترتیب متن: مرکز
  • حاشیه (فقط تلفن): 10 پیکسل در بالا ، 10 پیکسل در پایین
ماژول متن انتخاب قلم Divi

این از متن کپی رایت پشتیبانی می کند.

نمادهای ردیابی رسانه های اجتماعی را به ستون 3 اضافه کنید

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

شبکه های اجتماعی را اضافه کنید

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

ماژول نظارت بر شبکه اجتماعی را اضافه کنید

تنظیمات ردیابی رسانه های اجتماعی

در مرحله بعد ، تنظیمات طراحی برای همه نمادهای ردیابی رسانه های اجتماعی را به شرح زیر کنید:

  • تراز ماژول: مستقیم (دسک تاپ و رایانه لوحی) ، مرکز (تلفن)
  • رنگ نماد: # 1a1e36
  • از اندازه نماد سفارشی استفاده کنید: بله
  • اندازه قلم نماد: 16 پیکسل (دسک تاپ و رایانه لوحی) ، 14 پیکسل (تلفن)
تقسیم پلیس Personnalsier

تنظیمات رسانه اجتماعی را به روز کنید

برای به روزرسانی طراحی نماد جداگانه شبکه اجتماعی ، تنظیمات شبکه اول را باز کرده و موارد زیر را به روز کنید:

  • رنگ زمینه: #ffffff
  • Padding: 8 پیکسل در سمت راست ، 8 پیکسل در سمت چپ
  • گوشه های گرد: 8px
نوار پای ثابت

تنظیمات رسانه های اجتماعی را برای همه گسترش دهید

سپس منوی تنظیمات اضافی برای شبکه اول را باز کرده و " سبک های مورد را گسترش دهید "در لیست. در پنجره بازشو Extend Styles ، گزینه Extend Styles in "را انتخاب کنید این ستون "و کلیک کنید گسترش .

این طرح را به بقیه نمادهای موجود در ستون گسترش می دهد.

آخرین افکار

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

برای این طرح ، فضای پایین صفحه با تنظیم یک ارتفاع ثابت برای بخش و سپس اجازه دادن به خط ثابت برای به ارث بردن ارتفاع بخش ، ایجاد می شود (اگرچه ثابت است). 

منابع دیگر

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