کشوهای پایینی افزودنی های مفیدی برای هر کدام هستند وب سایت، زیرا آنها محتوای اضافی را ذخیره می کنند که به راحتی توسط کاربران قابل دسترسی است. کشوهای پاورقی محفظه های محتوای وب (مانند بخش Divi) هستند که می توانند با کلیک کردن روی یک دکمه یا نگه داشتن ماوس روی آنها باز و بسته شوند. مثل این است که برای محتوای ممتاز کمی ذخیره داشته باشید.
در این آموزش یک کشوی فوتر شناور در Divi طراحی می کنیم. کشوی پاورقی را به ناحیه جهانی پاورقی اضافه می کنیم قالب وب سایت به طوری که کشوی پاورقی در سراسر سایت با محتوای معمولی فوتر قابل دسترسی باشد.
با فرایندی که قصد استفاده از آن را داریم ، هر بخش Divi (و محتوای آن) می تواند در عرض چند دقیقه به یک کشوی پاورقی تبدیل شود.
نحوه اضافه کردن الگوی کشو Footer به سایت Divi شما
اضافه کردن این مدل جایگزین می شود قالب وب سایت به طور پیش فرض (اگر یکی از آنها را دارید) در سایت Divi خود. پیشنهاد می کنیم آن را به یک سایت آزمایشی اضافه کنید تا چیزی را در یک سایت زنده خراب نکنید.
برای وارد کردن الگوی کشوی پاورقی ثابت به تنهایی وب سایت، فایل فشرده دانلود را از حالت فشرده خارج کنید تا به فایل JSON دسترسی پیدا کنید.
سپس به داشبورد وردپرس رفته و به بخش Divi> Theme Builder بروید.
سپس بر روی نماد قابلیت حمل در بالای سمت راست صفحه کلیک کنید.
در پنجره قابل حمل، فایل JSON را که به تازگی از حالت فشرده خارج کرده اید انتخاب کنید و گزینه «دانلود پشتیبان قبل از وارد کردن» را انتخاب کنید، فقط در صورتی که قبلاً چیزی در قالب وب سایت پیش فرضی که نمی خواستید آن را لغو کنید.
سپس بر روی دکمه Import کلیک کنید.
در آخر ، تغییرات را در مولد تم ذخیره کنید و یک صفحه زنده نمایش دهید تا نوار پاورقی ثابت را ببینید.
حالا به آموزش بروید ، خوب؟
قسمت 1: افزودن پاورقی جهانی
ژنراتور موضوع Divi به شما امکان می دهد تا با به روزرسانی قالب وب سایت پیش فرض ، پیش زمینه پیش فرض را با موارد جدید جایگزین کنید.
برای ایجاد یک پاورقی جهانی ، به داشبورد وردپرس بروید و به Divi> Theme Builder بروید. سپس بر روی فضای "Add Global Footer" در داخل الگوی پیش فرض وب سایت کلیک کنید.
سپس از لیست کشویی گزینه "Build Global Footer" را انتخاب کنید.
یک طرح از پیش تعریف شده را به یک طرح جهانی پیش زمینه اضافه کنید
این ویرایشگر Model Layout را در آنجا مستقر می کند که سه گزینه برای چگونگی شروع کار شما بلافاصله از شما خواسته می شود. گزینه "انتخاب طرح از پیش تعریف شده" را انتخاب کنید.
در پنجره بازشو از بارگیری از کتابخانه ، طرح صفحه فرود لوازم التحریر را پیدا کنید. سپس بر روی "Use this layout" کلیک کنید.
محتوای ناخواسته را از طرح premade حذف کنید
پس از بارگذاری طرح در ویرایشگر ، با کلیک روی نماد لایه ها در منوی تنظیمات ، جعبه pop-up Layers را گسترش دهید. سپس تمام بخشهای طرح را به جز دو بخش آخر حذف کنید.
دو بخش را حرکت داده و برچسب گذاری کنید
پس از حذف بخش ها ، باید دو بخش داشته باشید ، یکی با عنوان "پاورقی" و دیگری با عنوان "چگونه کار می کند". بخش "پاورقی" را به بالای طرح منتقل کنید.
متن را در قسمت پایین تغییر دهید تا "Footer Drawer" را بخوانید. این بخشی خواهد بود که ما به عنوان محتوای کشوی پاورقی خود استفاده خواهیم کرد.
قسمت دوم: ایجاد کشو پاورقی ثابت
اکنون که یکی از این قسمت ها را به عنوان زیر انداز و قسمت دیگر را به عنوان کشوی پاورقی تعیین کرده ایم ، آماده ساخت کشو پاورقی ثابت خود هستیم. بیایید با ایجاد نماد blurb شروع کنیم که از آن برای ضامن کشوی زیر صفحه استفاده خواهیم کرد.
ایجاد دکمه کشو پاورقی
یک خط جدید اضافه کنید
در قسمت پایین "سینی" ، یک ردیف جدید را به یک ستون اضافه کنید.
ردیف جدید را "دکمه کشو" برچسب بزنید زیرا این ردیفی است که شامل دکمه استفاده شده برای باز و بسته شدن کشو است. سپس خط را به بالای قسمت منتقل کنید.
بالشتک ردیف
قبل از افزودن ماژول ، تنظیمات ردیف را باز کرده و padding را به صورت زیر به روز کنید:
- بالشتک: 0px زیاد ، 0px کم
بالشتک بخش
سپس تنظیمات را در قسمت "Footer drawer" باز کرده و بالشتک را به شرح زیر به روز کنید:
برای ایجاد دکمه قابل کلیک که کشوی پاورقی را تغییر می دهد ، ما از یک ماژول blurb با یک نماد استفاده خواهیم کرد. و ، ما می خواهیم با ترکیب شکل مربع محفظه غلاف Blurb با نماد دایره ، شکل قطره قطره منحصر به فرد به آن بدهیم.
در اینجا چگونه است.
ماژول Blurb را اضافه کنید
ماژول متن ارائه را به خط "دکمه کشو" در قسمت بالای بخش اضافه کنید.
ویرایش محتوا / نماد
بعد ، عنوان و محتوای بدنه پیش فرض را بردارید و نماد پیکان را که به گوشه بالا سمت چپ نشان داده شده را انتخاب کنید (به تصویر مراجعه کنید) ما از نماد چرخانده شده نیمه استفاده می کنیم زیرا بعداً می خواهیم آن را بچرخانیم.
طراحی شفاف
سپس متن ارائه را به شرح زیر ارائه دهید:
- رنگ زمینه: # 081540
سپس پارامترهای طراحی را به شرح زیر به روز کنید:
- رنگ آیکون: #eeeeee
- نماد حلقه: بله
- رنگ دایره: # 081540
- از اندازه قلم نماد استفاده کنید: بله
- اندازه قلم نماد: 17 پیکسل
اندازه متن ارائه
حالا به ماژول قد و عرض به شرح زیر بدهید:
- عرض: 30px
- ارتفاع: 30px
این باعث می شود که نماد دایره در ظرف متن سرریز شود تا شکل قطره آب ایجاد شود.
موقعیت آشفتگی
سپس متن ارائه را در مرکز بالای بخش موقعیت مطلق قرار دهید.
- مقام: مطلق
- محل سکونت: مرکز برتر
تنظیمات تحول را نابود کنید
اکنون می توانیم از گزینه های تبدیل استفاده کنیم تا blurb / icon را به سمت بالا بچرخانیم و آن را دقیقاً بالای ظرف بخش قرار دهیم. اکنون وقتی این بخش را در زیر پنجره مرورگر مخفی می کنیم ، نماد قابل مشاهده / کلیک خواهد بود.
موارد زیر را به روز کنید:
- تبدیل محور X ترجمه کنید: -50٪
- تبدیل محور Y ترجمه کنید: -250٪
- چرخش محور Z را تغییر دهید: -45 درجه
سپس انیمیشن نماد پیش فرض را حذف کنید:
- انیمیشن تصویر / آیکون: بدون انیمیشن
ما برای جابجایی کشو از JQuery استفاده خواهیم کرد ، بنابراین باید متن / آیکون را به عنوان یک عنصر قابل کلیک با کلاس CSS که بعداً در کد استفاده خواهیم کرد ، هدف قرار دهیم. کلاس CSS زیر را اضافه کنید:
- کلاس CSS: کشو هدف
تنظیمات بخش کشو پاورقی
اکنون می خواهیم قسمت "Footer Drawer" را با استفاده از گزینه translate transform پنهان کنیم. تنظیمات بخش را باز کنید و موارد زیر را به روز کنید:
- تبدیل محور Y: 100٪
زیبایی استفاده از تبدیل در اینجا این است که مقادیر درصد بر اساس اندازه واقعی کالا است. بنابراین ، 100٪ در محور Y به طور مستقیم به ارتفاع مقطع مربوط می شود (هر زمان که بخواهید از آنچه در آن قرار دارد) به عبارت دیگر ، عنصر دقیقاً به اندازه ارتفاع خودش به پایین منتقل می شود.
به منظور بازگرداندن "کشو پاورقی" ، ما باید ترجمه تبدیل شده را که به بخش اضافه کردیم ، معکوس کنیم. برای انجام این کار ، باید عنصر را با کلاس CSS هدف قرار دهیم و با کلیک روی نماد ، تبدیل ترجمه را غیرفعال کنیم (کل بخش را به موقعیت اصلی خود برگردانیم).
یک کلاس CSS را به قسمت زیر شلوار footer اضافه کنید
در زیر زبانه پیشرفته ، کلاس CSS زیر را اضافه کنید:
- کلاس CSS: دارای تغییر شکل است
بخش کشو پاورقی موقعیت ثابت
برای آخرین مرحله ، باید کشوی پاورقی را ثابت کنیم تا (در کنار نماد) در پایین پنجره مرورگر شناور باشد.
موقعیت بخش "Footer Drawer" را به صورت زیر بروز کنید:
- موقعیت: ثابت
- محل سکونت: پایین سمت چپ
- فهرست Z: 13
محتوای تلفن همراه را خاموش کنید
از آنجا که محتوای کشوی پاورقی به میزان محدودی متناسب با رایانه لوحی و تلفن خواهید داشت (به دلیل ارتفاع محدود صفحه ها) ، باید موارد غیر ضروری را از صفحه نمایش خاموش یا پنهان کنید. در این مثال ، ما می خواهیم ردیف میانی طرح بخش را مخفی کنیم.
تنظیمات را از ردیف دوم تا آخر در بخش "Footer Drawer" باز کنید. در زیر برگه Advanced ، گزینه Visibility را به روز کنید تا خط تلفن و رایانه لوحی خاموش شود.
اضافه کردن کد دلخواه
برای افزودن قابلیت کلیک و ضامن در کشوی پاورقی ، باید CSS و JQuery سفارشی را به صفحه اضافه کنیم. برای این کار ، یک ماژول کد جدید در زیر ماژول Blurb استفاده شده برای دکمه ایجاد کنید.
سپس کد زیر را در قسمت کد قرار دهید:
.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;} .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation'); $('.has-transform').toggleClass('toggle-drawer-animation'); }); });})( jQuery );
تغییرات را ذخیره کنید
قبل از اینکه از ویرایشگر خارج شوید ، طرح را ذخیره کنید.
همچنین تغییرات را در تولیدکننده تم ذخیره کنید.
نتیجه نهایی
اکنون می توانیم به هر صفحه ای از شما برویم وب سایت برای دیدن نتیجه نهایی
آخرین افکار
امیدواریم کشوی فوتر شناور به شما کمک کند ترویج محتوا به شیوه ای سرگرم کننده و در دسترس مانند هر کشو، می توانید آن را با هر چیزی که فکرش را بکنید پر کنید.
منابع دیگر
در اینجا لیستی از آموزش هایی وجود دارد که می تواند به شما در رسیدن به ویژگی های داخلی دیوی کمک کند.
- نحوه ایجاد جعبه ابزار تم در Divi
- نحوه ایجاد یک بخش تبلیغاتی متحرک در Divi
- نحوه شخصی سازی شبکه ها بر روی دیوی
ترجمه شده از: تم زیبا
