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

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

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

آن را چک کنید!

بررسی

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

بیایید آموزش را شروع کنیم

آنچه شما باید برای شروع کار

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

1. اگر قبلاً این کار را نکرده اید، آن را نصب و فعال کنید تم دیوی نصب شده (یا افزونه DIVI سازنده اگر از آن استفاده نمی کنید تم دیوی).
2. یک صفحه جدید در وردپرس ایجاد کنید و از Divi Builder برای ویرایش صفحه در قسمت جلویی (سازنده بصری) استفاده کنید.
3. از تصاویر مختلف 5 در کتابخانه بارگیری کنید تا از آنها به عنوان تصاویر پس زمینه مورد نیاز آموزش استفاده شود.

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

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

ایجاد خط

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

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

• عرض روده: 1
• عرض: 100٪
• حداکثر عرض: 800px
• ارتفاع: 400 پیکسل (دسک تاپ) 700 پیکسل (تبلت و تلفن)

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

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

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

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

قرص

flex-direction: column;

خاصیت flex صفحات آکاردئونی را به صورت افقی روی دسک تاپ و به صورت عمودی روی تبلت و تلفن تراز می کند. ارتفاع 100٪ به ماژول هایی که می خواهیم اضافه کنیم اجازه می دهد تا از مقدار ارتفاع 100٪ نیز استفاده کنند.

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

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

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

طراحی ماژول انتزاعی

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

عنوان را ساختگی نگه دارید و محتویات از بدن ما همیشه می توانیم بعداً این را تغییر دهیم.

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

• نماد (دسک تاپ): نمادی که یک خط پیکان افقی را نشان می دهد (تصویر را ببینید)

• نماد (شناور): نماد را علامت بزنید (تصویر را ببینید)

• نماد (رایانه لوحی و تلفن): نمادی که نمایانگر یک خط پیکان عمودی است (تصویر را ببینید)

زمینه

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

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

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

شناور

• پس زمینه شیب چپ (شناور): # 3e215b
• شیب پس زمینه به سمت راست رنگ (شناور): rgba (0,0,0,0)
• جهت گرادیان: 90deg
• شیب را بالای تصویر پس زمینه قرار دهید: بله

تصویر

• رنگ نماد: #ffffff
• تصویر / مکان نمادها: سمت چپ

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

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

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

قد و سایه جعبه

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

• ارتفاع: 100٪
• Box Shadow: تصویر را ببینید
• سایه جعبه موقعیت افقی: -12px
• سایه جعبه موقعیت عمودی: 0px

سفارشی کردن CSS سفارشی

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

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

دفتر

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

قرص

flex:5;

سپس css سفارشی زیر را به CSS Blurb Content اضافه کنید:

دفتر

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

قرص

width: 100%;height: 100%;position: relative !important;

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

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

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

برای داشتن صفحه های بیشتر آکاردئون ، Blurbs را کپی کنید

بالای ماژول ارائه شده بروید و چهار بار روی نماد تکراری کلیک کنید تا در مجموع پنج صفحه (یا ماژول) آکاردئون ایجاد کنید.

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

نتیجه نهایی

آخرین افکار

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