Divi: نحوه ایجاد یک نوار لغزنده آکاردئون پاسخگو

آیا می خواهید یک نوار لغزنده آکاردئونی ایجاد کنید DIVI پاسخگو؟

نوار لغزنده آکاردئونی یک راه سرگرم کننده و جذاب برای نمایش است محتویات در یک فضای کوچک 

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

در این آموزش، نحوه ایجاد یک اسلایدر آکاردئونی واکنشگرا را به شما نشان خواهیم داد DIVI فقط با استفاده از CSS برای این کار از چندین ماژول استفاده می کنیم DIVI به عنوان پانل های آکاردئونی خدمت می کنند. 

بررسی

در اینجا یک مرور سریع از آنچه در این آموزش به دست خواهیم آورد آورده شده است.

دانلود DIVI در حال حاضر!!!

ایجاد یک صفحه جدید با Divi Builder

برای شروع، باید موارد زیر را انجام دهید:

• از داشبورد وردپرس، به صفحات> افزودن جدید برای ایجاد یک صفحه جدید

• عنوانی به آن بدهید که برای شما منطقی باشد و کلیک کنید از Divi Builder استفاده کنید

• سپس روی کلیک کنید شروع به ساختن کنید (از خراش بسازید)

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

ایجاد نوار لغزنده آکاردئون پاسخگو در Divi

ایجاد خط

برای شروع، یک ردیف تک ستونی به بخش معمولی اضافه کنید.

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

• از عرض ناودان سفارشی استفاده کنید: بله
• عرض ناودان: 1
• عرض: 100%
• حداکثر عرض: 800 پیکسل
• ارتفاع: 400 پیکسل (رومیزی)؛ 700 پیکسل (تبلت و تلفن)

مقادیر عرض و حداکثر عرض را می توان با توجه به نیازهای شما تغییر داد. آکاردئون در هر عرض خط مناسب و کار می کند.

پارامترهای ستون

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

display:flex;
flex-direction: row;
align-items:center;
height: 100%;

قرص

display:flex;
flex-direction: column;
align-items:center;
height: 100%;

ایجاد پنل آکاردئون با ماژول های Blurb

لغزنده آکاردئون را می توان با استفاده از هر نوع ماژول (های) ساخت. اگر بخواهیم می‌توانیم از ترکیب ماژول‌های مختلف به عنوان پنل آکاردئونی استفاده کنیم. اما برای این طراحی قرار است از ماژول های Blurb استفاده کنیم.

با اضافه کردن یک ماژول Blurb به خط شروع کنید.

Blurb Mod Design

تنظیمات ماژول ارائه را باز کنید و موارد زیر را به روز کنید:

عنوان داستانی را حفظ کنید و محتویات از بدن ما همیشه می توانیم بعداً این را تغییر دهیم.

سپس نماد ارائه را به صورت زیر به روز کنید:

• نماد (رومیزی): نماد خط فلش ​​افقی (نگاه کنید به تصویر)

• نماد (هور): (نگاه کنید به تصویر)

• نماد (تبلت و تلفن): (نگاه کنید به تصویر)

زمینه

سپس به blurb یک تصویر پس‌زمینه و یک همپوشانی گرادیان در شناور به صورت زیر بدهید:

• یک تصویر پس‌زمینه با عرض حداقل 1000 پیکسل اضافه کنید
• موقعیت تصویر پس زمینه: وسط سمت چپ

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

شناور

• گرادیان پس‌زمینه سمت چپ (Hover): #3e215b
• گرادیان پس‌زمینه راست (مانوس‌گر): rgba(0,0,0,0،XNUMX،XNUMX،XNUMX)
• جهت گرادیان: 90 درجه
• گرادیان مربع در بالای پس‌زمینه تصویر: بله

تصویر

• رنگ نماد: #ffffff
• محل قرارگیری تصویر/آیکون: سمت راست

سپس به تب Design بروید و موارد زیر را به روز کنید:

عنوان و بدنه متن

• قلم عنوان: Poppins
• وزن قلم: نیمه پررنگ
• رنگ متن عنوان: شفاف (رومیزی)، #ffffff (موشواره)
• اندازه متن عنوان: 22 پیکسل
• رنگ متن بدنه: شفاف (رومیزی)، #ffffff (مانوس کردن)

ارتفاع جعبه و سایه

هنگامی که متن سفارشی شد، به ماژول ارتفاع 100٪ و سایه کادر را به صورت زیر بدهید:

• قد: 100%
• سایه جعبه: اسکرین شات را ببینید
• موقعیت افقی: -12px
• موقعیت عمودی: 0px

CSS سفارشی

برای اینکه پانل‌های آکاردئونی ما (یا ماژول Blurb) رشد کنند و با بقیه ماژول‌ها منقبض شوند، باید CSS سفارشی اضافه کنیم تا اندازه ماژول را با flex-grow تغییر دهیم. 

از آنجایی که قرار است در مجموع 5 ماژول داشته باشیم که آکاردئون را تشکیل می دهند، "flex:1" را برای حالت پیش فرض اضافه می کنیم و سپس در حالت شناور آن را به "flex:5" تغییر می دهیم.

در زبانه Advanced، CSS سفارشی زیر را به عنصر اصلی Blurb اضافه کنید:

دفتر

flex:1;
position: relative !important;
transition: flex 800ms !important;

در شناور

flex:5;
position: relative !important;
transition: flex 800ms !important;

سپس CSS سفارشی زیر را به CSS محتوای Blurb اضافه کنید:

دفتر

position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;

قرص

position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;

سرریز و انتقال

• سرریز افقی: پنهان
• سرریز عمودی: پنهان
• مدت زمان انتقال: 400 میلی‌ثانیه
• منحنی سرعت انتقال: خطی

خیلی خوب! این یک سفارشی سازی جدی ماژول Blurb بود. اما خبر خوب این است که تنها کاری که باید انجام دهیم این است که آنها را کپی کنیم تا پانل های آکاردئونی باقی مانده را ایجاد کنیم.

طرح‌بندی‌های تکراری برای پانل‌های آکاردئونی بیشتر

ماوس را روی ماژول ارائه نگه دارید و چهار بار روی نماد دوتایی کلیک کنید تا در مجموع پنج پانل آکاردئونی (یا ماژول) ایجاد کنید.

در مرحله بعد، تصاویر پس زمینه را برای هر یک از تارهای جدیدی که کپی کرده اید، به روز کنید.

نتیجه نهایی

حالا که تمام مراحل را طی کردیم، بیایید نتیجه نهایی را ببینیم.

دانلود DIVI در حال حاضر!!!

نتیجه

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

و نمادهای ارائه در شناور و در تلفن همراه برای تقویت UX تغییر می کنند. امیدواریم این آموزش الهام بخش شما برای پروژه های بعدی Divi باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد

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

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

...