Divi: نحوه ایجاد منوی چرخ چرخان در شناور

آیا می خواهید یک منوی اصلی Divi به شکل یک چرخ چرخان در حالت شناور ایجاد کنید؟

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

در این آموزش، ما به شما نشان خواهیم داد که چگونه یک چرخ منوی چرخشی در حالت شناور در Divi ایجاد کنید. این کار را می توان با استفاده از ترکیبی از گزینه های داخلی Divi و برخی قطعه های css سفارشی انجام داد.

بررسی

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

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

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

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

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

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

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

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

طراحی چرخ منوی چرخان در Divi

بخش و خط 1 را ایجاد کنید

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

سپس یک ماژول متنی به خط با محتوای زیر اضافه کنید.

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

• فونت متن: Share Tech
• فاصله حروف متن: 1px
• عنوان 2 حجم متن: 8vw

خط 2 را برای ساخت چرخ اضافه کنید

بعد، باید یک ردیف جدید به ستون زیر ردیف 1 اضافه کنیم.

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

دفعات بازدید: نحوه نمایش محتوا در قسمت Hover Section Divider در Divi 

برای شروع، تنظیمات ردیف 2 را باز کنید و موارد زیر را به روز کنید:

• رنگ پس زمینه: #02366b
• رنگ گرادیان پس‌زمینه سمت چپ: rgba(0,0,0,0.45)
• رنگ گرادیان پس زمینه سمت راست: #02366b
• نوع گرادیان: دایره ای
• جهت شعاعی: مرکز
• موقعیت شروع: 36%
• موقعیت پایانی: 0%

• از عرض ناودان سفارشی استفاده کنید: بله
• عرض ناودان: 1
• عرض: 500 پیکسل
• حداکثر عرض: 500 پیکسل (رومیزی)، خودکار (تبلت و تلفن)
• ارتفاع: 500 پیکسل (رومیزی)، خودکار (تبلت و تلفن)
• پد (رومیزی): 0 پیکسل (بالا و پایین)
• پد (تبلت و تلفن): 20 پیکسل (بالا، پایین و چپ)
• حاشیه (تلفن): -10% (راست)

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

• گوشه های گرد: 50%

در مرحله بعد، می توانیم سطح دیگری از طراحی دایره را با استفاده از سایه جعبه به صورت زیر اضافه کنیم:

• قدرت تاری سایه جعبه: 0 پیکسل
• قدرت پخش سایه جعبه: 210 پیکسل
• رنگ سایه: rgba (2,54,107,0.66)

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

display:flex;align-items:center;

افزودن لینک ها

هر پیوند در چرخ با یک ماژول ایجاد می شود متن. ما در مجموع شش ماژول ایجاد خواهیم کرد متن. پنج تا از ماژول ها متن حاوی پیوندهای چرخ و دیگری حاوی عنوان منو خواهد بود.

با ایجاد یک ماژول جدید "متن" شروع کنید.

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

• بادی: "Element 1"

• فونت متن: Share Tech
• رنگ متن: #ffffff
• اندازه: 16 پیکسل (پیش‌فرض)، 20 پیکسل (هور)
• فاصله حروف: 1 پیکسل
• ارتفاع خط متن: 60 پیکسل
• عرض: 250 پیکسل (رومیزی)، خودکار (تبلت و تلفن)
• ارتفاع: 60 پیکسل
• بالشتک (سمت چپ): 20 پیکسل

فعلا تنظیمات را ذخیره کنید. سپس ماژول متن را 4 بار کپی کنید تا در مجموع 5 ماژول متن ایجاد شود.

تعیین موقعیت پیوندهای متنی / ماژول ها

ما اکنون آماده هستیم تا پیوندهای خود را در امتداد محیط چرخ قرار دهیم. برای انجام این کار، ما هر ماژول را به روز می کنیم متن با گزینه های تبدیل که ماژول را در جای خود جابجا/ترجمه و می چرخانند.

همچنین کشف کنید: نحوه ایجاد یک شبکه ستون سیال در شناور در divi

برای تسهیل این کار، حالت نمایش قاب سیمی را اجرا کنید و ماژول های متن را که با پیوند 1 در بالا شروع می شود تا پیوند 5 در پایین برچسب بزنید.

پیوند 1

ما با ویرایش پیوند 1 شروع می کنیم. تنظیمات ماژول متن را برای پیوند 1 باز کنید و موارد زیر را به روز کنید:

• Transform Translate (محور Y): 120 پیکسل (رومیزی)، 0 پیکسل (تبلت و تلفن)

• چرخش تبدیل (محور Z): 60 درجه (رومیزی)، 0 پیکسل (تبلت و تلفن)

• مبدا: 50% (سمت راست)

پیوند 2

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

• دگرگون کردن
  • ترجمه (محور Y): 60 پیکسل (رومیزی)، 0 پیکسل (تبلت و تلفن)
  • چرخش محور Z: 30 درجه (رومیزی)، 0 پیکسل (تبلت و تلفن)
  • مبدا: 50% (سمت راست)

پیوند 3

از آنجایی که ماژول Text برای پیوند 3 در وسط قرار دارد، می توانیم آن را در جای خود رها کنیم.

پیوند 4

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

• تبدیل :
  • ترجمه محور Y: -60px (رومیزی)، 0px (تبلت و تلفن)
  • چرخش محور Z: -30 درجه (رومیزی)، 0 پیکسل (تبلت و تلفن)
  • مبدا: 50% (سمت راست)

پیوند 5

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

• تبدیل :
  • ترجمه محور Y: -120px (رومیزی)، 0px (تبلت و تلفن)
  • چرخش محور Z: -60 درجه (رومیزی)، 0 پیکسل (تبلت و تلفن)
  • مبدا: 50% (سمت راست)

حالا نتیجه را تا اینجا ببینیم. توجه کنید که چگونه پیوندها/متون در ماژول های متنی به طور کامل در امتداد محیط دایره اجرا می شوند.

برچسب منو اضافه شد

برای افزودن برچسب منو، باید ماژول Text دیگری را در بالای پنج ماژول متنی که قبلاً داریم اضافه کنیم. ادامه دهید و یک ماژول متن جدید در بالای پیوند 1 اضافه کنید.

در مرحله بعد، محتوای بدن را با موارد زیر به روز کنید:

Menu

سپس برای سرعت بخشیدن به طراحی، استایل های ماژول Text را برای لینک 3 کپی کنید و این سبک های ماژول را در ماژول جدید Text قرار دهید.

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

• ارتفاع خط نوشتار: 300 پیکسل (رومیزی)، 20 پیکسل (تبلت و تلفن)
• ارتفاع: بازیابی تنظیمات پیش فرض (خودکار)

• چرخش تبدیل (محور Z): 180 درجه (رومیزی)، 0 درجه (تبلت و تلفن)
• مبدا تبدیل: 50٪ (سمت راست)

پس از انجام کار، باید به ماژول Menu Label Text یک موقعیت مطلق بدهیم. برای انجام این کار، CSS سفارشی زیر را به عنصر اصلی اضافه کنید:

position: absolute!important;

حالا نتیجه را دریابید. باید ببینید که آیتم منو در سمت راست چرخ وارونه است.

افکت شناور چرخشی به خط/چرخ اضافه شد

برای افزودن افکت شناور چرخشی به ردیف، تنظیمات ردیف را به صورت زیر به روز کنید:

• چرخش تبدیل (محور Z): 180 درجه (رومیزی)، 0 درجه (هور)، 0 درجه (تبلت و تلفن)

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

• مدت زمان انتقال: 450 میلی‌ثانیه
• انتقال منحنی سرعت: سهولت در خارج

حالا نگاه کنید وقتی چرخ روی آن می چرخد ​​چگونه می چرخد.

ایجاد یک طرح دو ستونی برای بخش

در حال حاضر، طرح شامل دو ردیف تک ستونی است که روی هم قرار گرفته اند. با این حال، می توانیم از ویژگی flex css برای تراز افقی دو خط استفاده کنیم. 

برای این کار می‌توانیم یک قطعه کوچک از CSS سفارشی را به بخش اضافه کنیم. وقتی این کار انجام شد، باید فاصله را کمی تنظیم کنیم تا همه چیز درست باشد.

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

display:flex;

فاصله خط 1 را به روز کنید

سپس اندازه و فاصله خط 1 را به صورت زیر به روز کنید:

• عرض: 40% (رومیزی)
• حاشیه (رومیزی): 5% باقی مانده است

نتیجه نهایی

حالا بیایید نتیجه نهایی را ببینید.

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

طراحی جایگزین نیم چرخ

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

برای انجام این کار، پیش بروید و کل بخش حاوی طرحی را که ما ایجاد کردیم، کپی کنید. 

در قسمت تکراری، پارامترهای خط 1 را به صورت زیر به روز کنید:

• عرض: 70% (رومیزی)

در مرحله بعد، پارامترهای خط 2 را به روز کنید تا چرخ را به صورت زیر از قسمت خارج کنید:

• حاشیه: -250 پیکسل سمت راست

ما باید از -250px استفاده کنیم زیرا عرض کل چرخ 500px است و می خواهیم دقیقاً نیمی از خط را پنهان کنیم.

سپس نمایان بودن بخش را به صورت مخفی تنظیم کنید:

• سرریز افقی: پنهان
• سرریز عمودی: پنهان

نتیجه نهایی است.

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

نتیجه

چرخ گردان یکی از آن عناصر طراحی شیک است که می تواند درگیر شود آخرین بازدید با یک افکت شناور ظریف و منحصر به فرد. و بسیار شگفت انگیز است که چگونه می توان این طراحی را با تنظیمات طراحی داخلی Divi انجام داد. 

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

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

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

...