به راحتی وب سایت خود را با Elementor بسازید

Elementor به شما امکان می دهد ایجاد کنید به راحتی و رایگان هر طراحی وب سایت یا وبلاگ با ظاهری حرفه ای. از پرداخت هزینه زیاد برای وب سایتی که خودتان می توانید انجام دهید خودداری کنید.

کشوهای پاورقی اضافه شده مفیدی به هر وب سایت است زیرا محتوای اضافی را ذخیره می کند که به راحتی برای کاربران قابل دسترسی است. کشوهای پاورقی محتویات محتوای وب هستند (مانند بخش Divi) که با کلیک کردن روی یک دکمه یا قرار گرفتن در بالای آن باز و بسته می شوند. این مانند این است که کمی محتوای برتر داشته باشید.

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

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

نحوه اضافه کردن الگوی کشو Footer به سایت Divi شما

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

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

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

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

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

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

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

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

تغییرات طرح تقسیم را ذخیره کنید

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

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

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

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

انتخاب ویرایشگر Divi

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

یک پاورقی مدل divi اضافه کنید

یک طرح از پیش تعریف شده را به یک طرح جهانی پیش زمینه اضافه کنید

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

Divi: بهترین تم وردپرس تمام وقت!

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

divi مدل پیش ساخته را انتخاب کنید

در پنجره بازشو از بارگیری از کتابخانه ، طرح صفحه فرود لوازم التحریر را پیدا کنید. سپس بر روی "Use this layout" کلیک کنید.

از یک مدل divi استفاده کنید

محتوای ناخواسته را از طرح premade حذف کنید

پس از بارگذاری طرح در ویرایشگر ، با کلیک روی نماد لایه ها در منوی تنظیمات ، جعبه pop-up Layers را گسترش دهید. سپس تمام بخشهای طرح را به جز دو بخش آخر حذف کنید.

بخش غیرضروری را حذف کنید

دو بخش را حرکت داده و برچسب گذاری کنید

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

پاورقی Divi

متن را در قسمت پایین تغییر دهید تا "Footer Drawer" را بخوانید. این بخشی خواهد بود که ما به عنوان محتوای کشوی پاورقی خود استفاده خواهیم کرد.

برچسب پانویس divi را تغییر دهید

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

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

ایجاد دکمه کشو پاورقی

یک خط جدید اضافه کنید

در قسمت پایین "سینی" ، یک ردیف جدید را به یک ستون اضافه کنید.

کشو پا ثابت

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

تقسیم بندی طرح انتخاب

بالشتک ردیف

قبل از افزودن ماژول ، تنظیمات ردیف را باز کرده و padding را به صورت زیر به روز کنید:

  • بالشتک: 0px زیاد ، 0px کم
فاصله تقسیم تقسیم

بالشتک بخش

سپس تنظیمات را در قسمت "Footer drawer" باز کرده و بالشتک را به شرح زیر به روز کنید:

پیکربندی فاصله بخش Divi

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

در اینجا چگونه است.

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

ماژول متن ارائه را به خط "دکمه کشو" در قسمت بالای بخش اضافه کنید.

divi کشوی پاورقی
ویرایش محتوا / نماد

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

divi کشوی پاورقی نماد را انتخاب کنید
طراحی شفاف

سپس متن ارائه را به شرح زیر ارائه دهید:

  • رنگ زمینه: # 081540
پس زمینه divi را تغییر دهید

آیا می خواهید محصولات خود را در اینترنت بفروشید؟

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

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

  • رنگ آیکون: #eeeeee
  • نماد حلقه: بله
  • رنگ دایره: # 081540
  • از اندازه قلم نماد استفاده کنید: بله
  • اندازه قلم نماد: 17 پیکسل
دکمه blur divi را سفارشی کنید
اندازه متن ارائه

حالا به ماژول قد و عرض به شرح زیر بدهید:

  • عرض: 30px
  • ارتفاع: 30px

این باعث می شود که نماد دایره در ظرف متن سرریز شود تا شکل قطره آب ایجاد شود.

طراحی دکمه divi را ویرایش کنید
موقعیت آشفتگی

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

  • مقام: مطلق
  • محل سکونت: مرکز برتر
تغییر موقعیت دکمه divi
تنظیمات تحول را نابود کنید

اکنون می توانیم از گزینه های تبدیل استفاده کنیم تا blurb / icon را به سمت بالا بچرخانیم و آن را دقیقاً بالای ظرف بخش قرار دهیم. اکنون وقتی این بخش را در زیر پنجره مرورگر مخفی می کنیم ، نماد قابل مشاهده / کلیک خواهد بود.

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

  • تبدیل محور X ترجمه کنید: -50٪
  • تبدیل محور Y ترجمه کنید: -250٪
  • چرخش محور Z را تغییر دهید: -45 درجه

سپس انیمیشن نماد پیش فرض را حذف کنید:

  • انیمیشن تصویر / آیکون: بدون انیمیشن
دکمه divi را برگردانید

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

  • کلاس CSS: کشو هدف
انتخابگر divi را تعریف کنید

تنظیمات بخش کشو پاورقی

اکنون می خواهیم قسمت "Footer Drawer" را با استفاده از گزینه translate transform پنهان کنیم. تنظیمات بخش را باز کنید و موارد زیر را به روز کنید:

  • تبدیل محور Y: 100٪

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

تقسیم بخش را تغییر دهید

به منظور بازگرداندن "کشو پاورقی" ، ما باید ترجمه تبدیل شده را که به بخش اضافه کردیم ، معکوس کنیم. برای انجام این کار ، باید عنصر را با کلاس CSS هدف قرار دهیم و با کلیک روی نماد ، تبدیل ترجمه را غیرفعال کنیم (کل بخش را به موقعیت اصلی خود برگردانیم).

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

در زیر زبانه پیشرفته ، کلاس CSS زیر را اضافه کنید:

  • کلاس CSS: دارای تغییر شکل است
کلاس افزودن دارای تقسیم تقسیم است

بخش کشو پاورقی موقعیت ثابت

برای آخرین مرحله ، باید کشوی پاورقی را ثابت کنیم تا (در کنار نماد) در پایین پنجره مرورگر شناور باشد.

موقعیت بخش "Footer Drawer" را به صورت زیر بروز کنید:

  • موقعیت: ثابت
  • محل سکونت: پایین سمت چپ
  • فهرست Z: 13
تغییر موقعیت در گوشه divi

محتوای تلفن همراه را خاموش کنید

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

پنهان کردن بخش در تلفن همراه

تنظیمات را از ردیف دوم تا آخر در بخش "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 را ذخیره کنید

همچنین تغییرات را در تولیدکننده تم ذخیره کنید.

ذخیره تغییرات

نتیجه نهایی

اکنون می توانیم به هر صفحه ای در وب سایت شما برویم تا نتیجه نهایی را ببینیم.

آخرین افکار

امیدوارم کشوی پاورقی شناور به شما کمک کند تا مطالب را به روشی سرگرم کننده و در دسترس تبلیغ کنید. مانند هر کشو دیگر می توانید آنرا با هر چیزی که فکرش را بکنید پر کنید.

منابع دیگر

در اینجا لیستی از آموزش هایی وجود دارد که می تواند به شما در رسیدن به ویژگی های داخلی دیوی کمک کند.

ترجمه شده از: تم زیبا

0 سهام
سهم
صدای جیر جیر
ثبات