کشوهای پاورقی اضافه شده مفیدی به هر وب سایت است زیرا محتوای اضافی را ذخیره می کند که به راحتی برای کاربران قابل دسترسی است. کشوهای پاورقی محتویات محتوای وب هستند (مانند بخش 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
- نحوه شخصی سازی شبکه ها بر روی دیوی
ترجمه شده از: تم زیبا
