Divi: چگونه یک منوی شناور چسبنده و قابل ارتقا ایجاد کنیم

Divi: چگونه یک منوی شناور چسبنده و قابل ارتقا ایجاد کنیم

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

در این آموزش، نحوه ایجاد یک منوی چسبنده قابل ارتقا با استفاده از شناور را به شما نشان خواهیم داد توسط Divi's Mechanic Layout Pack . 

ما دو طرح نمونه متفاوت را بررسی خواهیم کرد که می‌توانید از ابتدا بازآفرینی کنید و در هر نوع وب‌سایتی که ایجاد می‌کنید اعمال کنید! 

منو در حالت شناور روی دسکتاپ نمایش داده می شود و با کلیک روی دستگاه های تلفن همراه فعال می شود.

بیایید برویم

بررسی

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

به عنوان مثال 1

کامپیوتر رومیزی

منوی چسبنده قابل ارتقا در شناور با Divi

موبایل

منوی چسبنده قابل ارتقا در شناور با Divi

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

به عنوان مثال 2

کامپیوتر رومیزی

منوی چسبنده قابل ارتقا در شناور با Divi

موبایل

منوی چسبنده قابل ارتقا در شناور با Divi

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

مراحل کلی

ناوبری ثابت را غیرفعال کنید

به گزینه های تم Divi دسترسی پیدا کنید

ما با چند مرحله کلی شروع می کنیم. این مراحل برای هر دو مثال یکسان است و برای رسیدن به نتیجه مطلوب ضروری است.

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

دفعات بازدید: نحوه ایجاد پوشش های سفارشی تصویر در Divi

برای این شما باید بروید Divi >> گزینه های تم از داشبورد وردپرس

ناوبری ثابت را غیرفعال کنید

در آنجا باید غیرفعال کنید "نوار پیمایش ثابت" تا مطمئن شوید که هیچ فضایی در بالای صفحه شما باقی نمانده است.

  • نوار ناوبری ثابت: غیرفعال است

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

تنظیمات صفحه را باز کنید

به صفحه ای که می خواهید منوی چسبنده قابل ارتقا را اضافه کنید بروید و تنظیمات صفحه را باز کنید.

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

منوی اصلی را با افزودن خطوط زیر کد CSS به صفحه خود مخفی کنید.

#main-header {
display: none;
}

یک بخش جدید در انتهای صفحه اضافه کنید

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

فاصله

تنظیمات بخش را باز کنید و تنظیمات زیر را در تب تغییر دهید طرح تحت گزینه فاصله.

  • بالشتک (بالا و پایین): 0 پیکسل

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

ساختار ستون

با افزودن یک ردیف جدید با استفاده از ساختار ستون زیر ادامه دهید:

اندازه

بدون افزودن ماژول، تنظیمات خط را باز کنید و تنظیمات زیر را در برگه تغییر دهید طرح تحت گزینه اندازه گیری

  • از عرض ناودان سفارشی استفاده کنید: بله
  • عرض ناودان: 1
  • عرض: 100%
  • حداکثر عرض: 100٪

فاصله

سپس تمام لایه های پیش فرض بالا و پایین را در زیر گزینه حذف کنید فاصله.

  • بالشتک (بالا و پایین): 0 پیکسل

عنصر اصلی

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

bottom: 0px;
position: fixed;

شاخص Z

و ما مطمئن می شویم که خط (و ماژول Text که در مراحل بعدی اضافه خواهیم کرد) در بالای تمام محتوای صفحه با افزایش شاخص Z، گزینه Drop down باقی می ماند. موقعیت.

  • شاخص Z: 99

ماژول کد را به ستون اضافه کنید

کد CSS را بین تگ های سبک اضافه کنید

آخرین قسمت از مراحل کلی اضافه کردن یک ماژول کد به خط جدید است. کد CSS که در این ماژول کد اضافه می‌کنیم به ما کمک می‌کند تا به اثر آشکار در شناور دست پیدا کنیم. 

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

خطوط زیر کد CSS را در ماژول قرار دهید:

<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>

نمونه طرح شماره 1

یک ماژول Text به ستون اضافه کنید

اضافه کردن محتوا

اکنون که تمام مراحل را طی کردیم، می‌توانیم بر روی دو نمونه طراحی مختلف تمرکز کنیم، از نمونه اول شروع کنیم! 

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

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

رنگ پس زمینه پیش فرض

به تنظیمات پس زمینه ماژول بروید و رنگ پس زمینه را تغییر دهید.

  • زمینه: #ffffff

رنگ پس‌زمینه روی شناور

این رنگ پس‌زمینه را در حالت شناور تغییر دهید.

  • پس زمینه (Hover): rgba(255,255,255,0.83)

پیشینه شیب

و همچنین پس زمینه گرادیان پیش فرض را اضافه کنید.

  • رنگ سمت چپ: rgba (255,255,255,0)
  • رنگ راست: #ffffff
  • سمت راست: 60%

تنظیمات پیش فرض متن

با رفتن به تب ادامه دهید طرح و تغییر تنظیمات متن

  • قلم متن: خند
  • وزن قلم: پررنگ
  • رنگ متن: #021827
  • حجم متن: 3vh
  • جهت: مرکز

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

برخی از تنظیمات متن شناور را تغییر دهید.

  • رنگ متن (Hover: rgba(255,255,255,0)
  • اندازه متن (Hover): 0vh

تنظیمات متن پیوند

سپس به تنظیمات متن پیوند بروید و رنگ متن پیوند را تغییر دهید.

  • رنگ متن پیوند: #000000

فهرست پیش‌فرض‌ها (رومیزی)

به تنظیمات متن فهرست پیش‌فرض بروید و آن را به دلخواه شخصی‌سازی کنید. مطمئن شوید که از '0px' برای اندازه متن در حالت پیش فرض استفاده می کنید.

  • فونت لیست نامرتب: Khand
  • سبک قلم فهرست: TT
  • ترازبندی متن فهرست: در مرکز
  • رنگ متن نامرتب: rgba (255,255,255,0)
  • اندازه متن فهرست نامرتب: 0 پیکسل
  • وزن متن فهرست: 0em
  • موقعیت سبک لیست نامرتب: داخل

تنظیمات لیست ماوس را نگه دارید

سپس برخی از مقادیر را در hover تغییر دهید تا آیتم های منو ظاهر شوند.

  • رنگ متن فهرست (Hover): #000000
  • اندازه متن فهرست نامرتب (Hover): 2vh
  • ارتفاع متن فهرست نامرتب (Hover): 2,1 em

فاصله پیش‌فرض (رومیزی)

سپس به تنظیمات فاصله (گزینه فاصله) و به ماژول Text شکل بدهید.

  • حاشیه (چپ و راست): 45vw (رومیزی)، 39vw (تبلت)، 33vw (تلفن)
  • پد (بالا و پایین): 2vw (رومیزی)، 4vw (تبلت)، 6vw (تلفن)

فاصله شناورها

همین مقادیر را در شناور تغییر دهید.

  • حاشیه (چپ و راست): 14vw
  • بالشتک (بالا و پایین): 8vw

حاشیه پیش فرض (رومیزی)

به تنظیمات حاشیه بروید و مطمئن شوید که هر یک از گوشه های گرد دارای مقدار '0px' هستند.

مرز روی شناور

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

  • بالا سمت چپ: 50vw
  • بالا سمت راست: 50vw

جعبه سایه

با دادن عمق به ماژول با استفاده از سایه جعبه ادامه دهید. این باعث می شود که منو در صفحه مورد توجه قرار نگیرد.

  • قدرت تاری سایه های جعبه: 1000 پیکسل
  • رنگ سایه: rgba (0,0,0,0.68)

کلاس CSS

همچنین یک کلاس CSS به ماژول اضافه می کنیم.

  • کلاس CSS: dt-menu

گذار

در نهایت، مدت زمان انتقال را در تنظیمات انتقال کاهش دهید.

  • مدت زمان انتقال: 100 میلی‌ثانیه

نمونه طرح شماره 2

یک ماژول Text به ستون اضافه کنید

اضافه کردن محتوا

بریم سراغ مثال دوم! در اینجا دوباره اضافه می کنیم "≡منو" با استفاده از سبک متن پاراگراف و آیتم های منو با استفاده از یک لیست نامرتب. همچنین پیوندی به هر یک از آیتم های منو به صورت جداگانه اضافه می کنیم.

رنگ پس‌زمینه پیش‌فرض (رومیزی)

به تنظیمات پس زمینه بروید و رنگ پس زمینه را تغییر دهید.

  • زمینه: #ffffff

رنگ پس‌زمینه روی شناور

رنگ پس‌زمینه را در شناور تغییر دهید.

  • پس زمینه (Hover): #f71535

تنظیمات متن پیش‌فرض (رومیزی)

سپس به برگه بروید طرح و تغییراتی در ظاهر متن ایجاد کنید.

  • قلم متن: خند
  • وزن قلم: پررنگ
  • رنگ متن: #021827
  • حجم متن: 3vh

تنظیمات متن را نگه دارید

این تنظیمات را در حالت شناور تغییر دهید.

  • رنگ متن (Hover): rgba (255,255,255,0)
  • اندازه متن (Hover): 0vh

تنظیمات متن پیوند

به تنظیمات متن بروید و رنگ متن پیوند را تغییر دهید.

  • رنگ متن پیوند: #ffffff

تنظیمات متن فهرست پیش‌فرض

همچنین تنظیمات طراحی آیتم های لیست نامرتب را تغییر دهید.

  • فونت لیست نامرتب: Khand
  • سبک قلم فهرست نامرتب: TT
  • فهرست ترازبندی متن: مرکز
  • رنگ متن فهرست نامرتب: rgba(255,255,255,0)
  • اندازه متن فهرست: 0 پیکسل
  • ارتفاع خط لیست نامرتب: 0em
  • موقعیت سبک لیست نامرتب: داخل

تنظیمات لیست ماوس را نگه دارید

و برخی از این مقادیر را در حالت شناور تغییر دهید.

  • رنگ متن فهرست نامرتب: #ffffff
  • اندازه متن فهرست: 2vh
  • ارتفاع خط لیست نامرتب: 2,1 em

فاصله پیش‌فرض (رومیزی)

سپس به تنظیمات فاصله بروید و کمی فضا به ماژول بدهید.

  • حاشیه (راست): 88 vw (رومیزی و تبلت)، 71 vw (تلفن)
  • پد (بالا): 6 vw (رومیزی))، 10 vw (تبلت)، 18 vw (تلفن)
  • پد (پایین): 4 vw (رومیزی)، 10 vw (تبلت)، 12 vw (تلفن)
  • لایه سمت چپ: 1vw

فاصله شناورها

تغییر مقادیر در شناور

  • حاشیه (راست): 59vw
  • بالشتک: (بالا)13vw، (پایین)8vw، (چپ)1vw، (راست)13vw
گسترش منوی چسبنده

مرز

و برای ایجاد این طرح ربع، حاشیه بالا سمت راست را در تنظیمات حاشیه تغییر می دهیم.

  • بالا سمت راست: 50vw

جعبه سایه

همچنین برای ایجاد عمق در صفحه یک سایه کادر اضافه می کنیم.

  • قدرت تاری سایه جعبه: 1000 پیکسل
  • رنگ سایه: rgba (0,0,0,0.68)

کلاس CSS

در ادامه یک کلاس CSS در تب اضافه می کنیم پیشرفته.

  • کلاس CSS: dt-menu

گذار

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

  • مدت زمان انتقال: 100 میلی‌ثانیه

بررسی

اکنون که همه مراحل را طی کردیم ، بیایید نگاهی نهایی به ظاهر آن در اندازه های مختلف صفحه بیندازیم.

مثال شماره 1

دفتر

گسترش منوی چسبنده

موبایل

گسترش منوی چسبنده

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

مثال شماره 2

کامپیوتر رومیزی

موبایل

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

نتیجه

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

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

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

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

...

Divi: چگونه یک ماسک پس زمینه چسبناک ایجاد کنیم

Divi: چگونه یک ماسک پس زمینه چسبناک ایجاد کنیم

آیا می خواهید با یک ماسک پس زمینه Divi Sticky بعد دیگری به وب سایت خود بدهید؟

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

ما به شما نشان خواهیم داد که چگونه یک ماسک پس زمینه چسبنده ایجاد کنید.

این آموزش گزینه های چسبنده Divi را با حالت های ترکیب فیلتر ترکیب می کند. 

بررسی

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

دفتر

ماسک پس زمینه Divi Sticky

موبایل

ماسک پس زمینه Divi Sticky

یک طرح در Divi ایجاد کنید

یک بخش جدید اضافه کنید

تصویر پس زمینه

با افزودن یک بخش جدید به صفحه ای که روی آن کار می کنید شروع کنید. 

  • یک تصویر پس زمینه به انتخاب خود آپلود کنید.
  • اندازه تصویر پس زمینه: جلد
DIVI

فاصله

به برگه طراحی بخش بروید و تنظیمات فاصله پیش‌فرض زیر را حذف کنید:

  • بالشتک (بالا و پایین): 0 پیکسل

سرریز می کند

سپس سرریزهای بخش را در تب پنهان کنید پیشرفته.

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

خط شماره 1 را اضافه کنید

ساختار ستون

با افزودن یک ردیف جدید با استفاده از ساختار ستون زیر ادامه دهید:

اندازه

بدون افزودن ماژول، تنظیمات خط را باز کنید و تنظیمات اندازه را بر اساس آن تغییر دهید:

  • عرض: 100%
  • حداکثر عرض: 100٪

فاصله

همچنین تمام حاشیه های پیش فرض را حذف کنید.

  • بالشتک (بالا و پایین): 0 پیکسل

فیلتر

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

  • حالت ترکیبی: صفحه نمایش

شاخص Z

برای اطمینان از باقی ماندن این ردیف در زیر ردیف دومی که به بخش اضافه می کنیم، z-index را در برگه تغییر می دهیم. پیشرفته.

  • Z Index: 9

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

سپس تنظیمات ستون را باز می کنیم.

رنگ پس زمینه

از رنگ زمینه کاملا سفید استفاده می کنیم.

  • رنگ پس زمینه: #ffffff

عنصر اصلی CSS

همچنین یک مقدار ارتفاع به عنصر اصلی در تب اضافه می کنیم پیشرفته.

height: 100vh;

یک ماژول "متن" به خط اضافه کنید

منطقه محتوا را خالی بگذارید

پس از اتمام تنظیمات ردیف، یک ماژول Text را به ستون آن اضافه کنید. 

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

رنگ پس زمینه

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

  • رنگ پس زمینه: #0b3835

اندازه

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

  • عرض:
    • دسکتاپ: 20vw
    • تبلت و تلفن: 70 vw
  • قد:
    • دسکتاپ: 30 ولت ساعت
    • تبلت و تلفن: 10vh

فاصله

ما همچنین حاشیه برتر اضافه می کنیم.

  • حاشیه (بالا): 3vh

مرز

و ما می خواهیم گوشه های گرد را اضافه کنیم.

  • گوشه های گرد: 15 پیکسل

خط 2 را اضافه کنید

ساختار ستون

با افزودن یک ردیف دیگر به بخش با استفاده از ساختار ستون زیر ادامه دهید:

اندازه

تنظیمات خط را باز کنید و تغییرات زیر را در گزینه ها اعمال کنید اندازه گیری ذیل:

  • عرض: 100%
  • حداکثر عرض: 100٪

شاخص Z

همچنین z-index ردیف را افزایش دهید. این کمک می کند تا اطمینان حاصل شود که محتوای ردیف بالاتر از ردیف قبلی باقی می ماند.

  • شاخص Z: 12

یک ماژول "متن" به خط اضافه کنید

محتوای H2 را اضافه کنید

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

تنظیمات متن H2

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

  • فونت: Playfair Display
  • تراز متن: در مرکز
  • رنگ متن: #0b3835
  • اندازه :
    • دسکتاپ: 150 پیکسل
    • تبلت و تلفن: 45 پیکسل
  • ارتفاع خط: 1,2 em

اندازه

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

  • حداکثر عرض: 980 پیکسل
  • ماژول تراز: مرکز

فاصله

حاشیه بالای منفی را نیز درج کنید.

یک ماژول "Button" به ردیف اضافه کنید

اضافه کردن محتوا به دکمه

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

تراز دکمه

به تب تغییر دهید طرح ماژول را تغییر دهید و تراز دکمه را تغییر دهید.

  • تراز دکمه: مرکز

تنظیمات دکمه

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

  • استفاده از سبک های سفارشی برای دکمه: بله
  • اندازه متن دکمه: 15 پیکسل
  • رنگ متن دکمه: #ffffff
  • رنگ پس زمینه دکمه: #000000
  • عرض حاشیه دکمه: 0 پیکسل
  • شعاع حاشیه دکمه: 100 پیکسل
  • قلم دکمه: مونتسرات
  • وزن قلم دکمه: نیمه پررنگ
  • سبک قلم: TT

فاصله

ما همچنین مقادیر حاشیه و padding سفارشی را به تنظیمات فاصله اضافه می کنیم.

  • حاشیه (پایین): 60vh
  • بالشتک (بالا و پایین): 15 پیکسل
  • بالشتک (چپ و راست): 40 پیکسل

جلوه های چسبنده را اعمال کنید

خط شماره 1 را باز کنید

اکنون که پایه طراحی خود را ساخته ایم، زمان اعمال سبک های چسبنده فرا رسیده است. تنظیمات خط اول را باز کنید.

ماسک ته چسبنده

گزینه های چسبنده را اعمال کنید

برو به برگه پیشرفته و تنظیمات مداوم زیر را اعمال کنید:

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

گزینه های چسبنده ماژول متن

اکنون که خط Sticky است، می‌توانیم استایل‌ها را در ماژول Text داخل خط اعمال کنیم. تنظیمات ماژول را باز کنید.

ماسک ته چسبنده

اندازه چسبنده

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

  • عرض (چسبنده): 80 vw
  • ارتفاع (چسبنده): 90vh
DIVI

زمان انتقال

در نهایت به تب بروید پیشرفته و مدت زمان انتقال را افزایش دهید.

  • مدت زمان انتقال: 500 میلی‌ثانیه

بررسی

اکنون که همه مراحل را طی کردیم ، بیایید نگاهی نهایی به ظاهر آن در اندازه های مختلف صفحه بیندازیم.

دفتر

ماسک پس زمینه Divi Sticky

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

موبایل

ماسک پس زمینه Divi Sticky

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

نتیجه

در این مقاله، ما یک بار دیگر به شما نشان دادیم که چگونه با گزینه های چسبنده Divi خلاق شوید. 

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

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

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

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

...

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

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;
یک نوار لغزنده آکاردئونی Divi پاسخگو ایجاد کنید

قرص

position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;
یک نوار لغزنده آکاردئونی Divi پاسخگو ایجاد کنید

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

  • سرریز افقی: پنهان
  • سرریز عمودی: پنهان
  • مدت زمان انتقال: 400 میلی‌ثانیه
  • منحنی سرعت انتقال: خطی
یک نوار لغزنده آکاردئونی Divi پاسخگو ایجاد کنید

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

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

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

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

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

نتیجه نهایی

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

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

نتیجه

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

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

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

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

...

Divi: نحوه ایجاد پوشش های سفارشی تصویر

Divi: نحوه ایجاد پوشش های سفارشی تصویر

آیا دوست دارید نحوه طراحی همپوشانی تصویر سفارشی با Divi را بیاموزید؟

پوشش تصویر برای مدت طولانی در طراحی وب وجود داشته است. آنها برای جذب بازدیدکنندگان با آشکار کردن محتوای اضافی و عناصر طراحی زمانی که ماوس را روی تصویر می‌برید عالی هستند. 

در این آموزش به شما نشان می‌دهیم که چگونه روی Divi تصاویر سفارشی طراحی کنید. وقتی ماوس را روی تصویر می‌برید، این پوشش‌ها تغییر می‌کنند و عناصر را نشان می‌دهند. 

هیچ پلاگینی مورد نیاز نیست.

بیایید شروع کنیم!

بررسی

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

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

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

سازنده دیوی

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

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

سازنده دیوی

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

ایجاد پوشش های سفارشی تصویر در Divi

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

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

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

  • پس زمینه: #3a0ca3

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

  • کلاس CSS: et-overlay-container
  • سرریز افقی: پنهان
  • سرریز عمودی: پنهان

تصویر اضافه کن

اکنون که بخش، سطر و ستون آماده هستند، یک ماژول Image جدید به ستون 1 اضافه کنید. این تصویر اصلی پشت طرح های همپوشانی ما خواهد بود.

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

توجه: می توانید از تصاویر منظره استفاده کنید، اما ممکن است لازم باشد موقعیت عناصر همپوشانی را بر این اساس تنظیم کنید تا روی هم قرار نگیرند.

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

  • حاشیه (پایین): 0 پیکسل

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

  • کلاس CSS: et-overlay-image

افزودن رنگ پوشش تصویر با استفاده از ماژول "Divider".

برای ایجاد رنگ پوشش تصویر، از ماژول Divider استفاده می کنیم.

ابتدا یک ماژول Divider زیر تصویر اضافه کنید.

سپس جداکننده را در حالت مطلق قرار دهید تا بالای تصویر قرار گیرد:

  • موقعیت: مطلق

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

  • نمایش تقسیم کننده: خیر
  • رنگ پس زمینه: rgba (247,37,133,0.8)

سپس ارتفاع و عرض جداکننده را به روز کنید:

  • عرض: 100%
  • قد: 100%

با طراحی در جای خود، کلاس CSS زیر را به اسپلیتر اضافه کنید:

  • and-overlay-item

توجه: این کلاس باید به تمام عناصر طراحی همپوشانی که می‌خواهید فقط در حالت شناور نمایش داده شوند اضافه شود. اگر نمی خواهید عنصر در ابتدا مخفی شود، آن را کنار بگذارید.

برای کمک به پیگیری عناصر/ماژول‌های طراحی، لایه‌های modal را باز کنید و ماژول را Divider ("Overlay Color") برچسب بزنید.

متن سرصفحه همپوشانی اضافه شد

در ماژول Divider، یک ماژول Text جدید اضافه کنید. این به عنوان متن هدر همپوشانی است که در بالای تصویر در حالت شناور ظاهر می شود.

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

<h2>Coaching</h2>

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

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

  • تراز متن: در مرکز
  • رنگ متن: روشن
  • فونت: Cormorant Garamond
  • وزن قلم: پررنگ
  • اندازه متن: 40 پیکسل
  • عرض: 100%
  • حداکثر عرض: 85٪

زیر زبانه پیشرفته، موقعیت را به شرح زیر به روز کنید:

  • موقعیت: مطلق
  • مکان: مرکز بالا
  • افست عمودی: 10%

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

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

  • کلاس CSS: et-overlay-item move-down

علاوه بر کلاس "and-overlay-item"، یک کلاس اضافی اضافه می کنیم "حرکت به پایین" به منظور استفاده از CSS سفارشی برای جابجایی هدر کمی به پایین هنگام شناور.

ایجاد متن بدنه همپوشانی

برای ایجاد پوشش متنی بدنه، می‌توانیم ماژول Text مورد استفاده برای همپوشانی هدر را کپی کنیم. قبل از به روز رسانی پارامترهای تکراری، برچسب را به "Overlay Body" تغییر دهید.

تنظیمات متن ماژول جدید Text را باز کنید و محتوای بدنه را با چند جمله از متن پاراگراف به روز کنید.

زیر زبانه پیشرفته، مکان مطلق ماژول را به مرکز تغییر دهید.

از آنجایی که نمی‌خواهیم این مورد به حالت شناور (فقط ظاهر می‌شود)، کلاس CSS را به‌روزرسانی کنید تا فقط موارد زیر را شامل شود:

  • کلاس CSS: et-overlay-item

ایجاد دکمه همپوشانی

آخرین پوشش روی این تصویر دکمه خواهد بود. برای ایجاد دکمه، یک ماژول دکمه جدید در زیر ماژول متن دوم اضافه کنید.

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

  • موقعیت: مطلق
  • افست عمودی: 10%

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

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

  • کلاس CSS: et-overlay-item move up
  • عنصر اصلی CSS:
min-width: 15em;

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

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

  • تراز دکمه: در مرکز
  • استفاده از سبک های سفارشی برای دکمه: بله
  • اندازه متن دکمه: 14 پیکسل
  • رنگ پس زمینه: #4361ee
  • پهنای حاشیه دکمه: 0 پیکسل
  • فاصله حروف دکمه ها: 0,1em
  • وزن قلم: پررنگ
  • سبک قلم دکمه: TT
  • بالشتک: 0,8em (بالا و پایین)، 0px (چپ و راست)

افزودن CSS سفارشی با ماژول کد

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

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

<style>
 @media all and (min-width: 981px) {
   
  .et-fb-root-ancestor .et-overlay-item {
    opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
  }
  .et-overlay-item {
    opacity: 0; /*hides overlay items by default*/
    margin-bottom: 0px;
  }
  .et-overlay-item, .et-overlay-image {
    transition: all 400ms !important; /*sets transition speed of all overlay items*/
  }
  .et-overlay-container:hover .et-overlay-item {
    opacity: 1; /*reveals hidden overlay items on hover*/
  }
  .et-overlay-container:hover .et-overlay-image {
    /*add new styles here to change image on hover*/
  }
  .et-overlay-container:hover .et-overlay-image.et-scale {
    transform: scale(1.2); /*adjust scale of image here*/
  }
  .et-overlay-container:hover .et-overlay-image.et-rotate {
    transform: scale(1.4)
    rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
  }  
  .et-overlay-container:hover .et-overlay-item.move-up {
    margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
  }
  .et-overlay-container:hover .et-overlay-item.move-down {
    margin-top: 10%; /*adjust how far you want the overlay item to move down*/
  }
 
}
</style>

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

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

لایه modal را باز کنید، ابتدا دو ستون خالی را حذف کنید.

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

ایجاد طرح پوشش تصویر شماره 2

برای این طراحی بعدی، دکمه را در مرکز تصویر (همیشه قابل مشاهده) قرار می دهیم. در مرحله بعد، هدر و متن متن را از بالا و پایین تصویر به نمای منتقل می کنیم.

قرار دادن متن بدنه و کلاس CSS را تنظیم کنید

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

  • مکان: پایین مرکز
  • افست عمودی: 5%

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

  • کلاس CSS: et-overlay-item move up

مکان دکمه و کلاس CSS را تنظیم کنید

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

  • مکان: مرکز

در مرحله بعد، کلاس CSS را حذف کنید زیرا می خواهیم دکمه همیشه قابل مشاهده باشد.

تنظیمات ماژول Divider (رنگ پوشش) را باز کنید و پس زمینه را به صورت زیر تغییر دهید:

  • پس زمینه: rgba(67,97,238,0.8)

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

  • رنگ پس زمینه: #f72585

تصویر و کلاس CSS را تنظیم کنید

سپس تنظیمات تصویر را باز کرده و یک تصویر جدید (در صورت تمایل) آپلود کنید.

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

  • کلاس CSS: et-overlay-image et-scale

توجه داشته باشید که علاوه بر کلاس "et-overlay-image" یک کلاس اضافی به نام "et-scale" وجود دارد که اندازه تصویر را افزایش می دهد و جلوه بزرگنمایی در شناور ایجاد می کند.

ایجاد طرح پوشش تصویر شماره 3

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

محتوای متن متن و کلاس CSS را تنظیم کنید

با باز کردن تنظیمات ماژول متن متن همپوشانی در ستون 3 شروع کنید. سپس عنوان H2 را بالای متن پاراگراف اضافه کنید. حالا هر دو داخل یک ماژول خواهند بود.

پوشش های تصویر Divi

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

تنظیم افست دکمه و کلاس CSS

تنظیمات ماژول Button را باز کنید و افست موقعیت عمودی را به روز کنید:

  • افست عمودی: 5%

سربرگ Overlay را حذف کنید

سپس، ماژول Overlay Header Text را حذف کنید.

رنگ همپوشانی و کلاس CSS را تنظیم کنید

تنظیمات ماژول Divider (رنگ پوشش) را باز کنید و پس زمینه را به موارد زیر به روز کنید:

  • رنگ گرادیان پس زمینه سمت چپ: rgba (67,97,238,0.8)
  • رنگ گرادیان پس زمینه سمت راست: rgba (247,37,133,0.8)
  • موقعیت شروع: 25%
  • موقعیت نهایی: 75%

و از آنجایی که می خواهیم همپوشانی گرادیان را همیشه قابل مشاهده نگه داریم، کلاس CSS را حذف کنید.

کلاس CSS تصویر را تنظیم کنید

در نهایت، یک کلاس CSS اضافی ("et-rotate") به تصویر اصلی اضافه می کنیم که اندازه تصویر را تغییر می دهد و در حالت شناور می چرخد.

  • کلاس CSS: et-overlay-image et-rotate

لمس های نهایی

قبل از بررسی نتایج نهایی خود، باید برخی تنظیمات را انجام دهیم.

حاشیه پایین پیش فرض را برای همه ماژول ها حذف کنید

از آنجایی که ما قبلاً حاشیه را با حاشیه پایین 0 پیکسل به روز کرده ایم، می توانیم این حاشیه را به همه ماژول ها گسترش دهیم.

روی تنظیمات حاشیه کلیک راست کرده و انتخاب کنید "توسعه حواشی".

سپس گسترش حاشیه به همه ماژول های صفحه را انتخاب کنید.

ماژول های کد تکراری را حذف کنید

مطمئن شوید که ماژول های کد اضافی را که از تکرار ستون اول منتقل شده اند حذف کنید. شما فقط باید یکی داشته باشید. شما می توانید این کار را به راحتی از لایه های مدال انجام دهید.

DIVI

نتایج نهایی

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

پوشش های سفارشی تصویر با Divi

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

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

پوشش های سفارشی تصویر با Divi

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

نتیجه

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

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

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

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

...

Divi: چگونه یک نماد همبرگر را به ماژول منو اضافه کنیم

Divi: چگونه یک نماد همبرگر را به ماژول منو اضافه کنیم

آیا می خواهید یک نماد همبرگر به ماژول منوی Divi اضافه کنید؟

اگر هدر خود را در Divi می سازید، راه های مختلفی برای انجام آن وجود دارد. 

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

این یک ظاهر حداقلی به هدر شما می دهد و در عین حال تعامل را نیز اضافه می کند.

برویم.

بررسی

قبل از فرو رفتن در این آموزش، اجازه دهید نگاهی گذرا به نتیجه بیاندازیم.

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

با Divi Builder یک قالب جهانی سربرگ جدید ایجاد کنید

به Divi Theme Builder بروید

از داشبورد وردپرس، به «Divi > تم ساز' سپس کلیک کنید "افزودن سربرگ جهانی"

قالب ساز Divi

یک سرصفحه جدید جهانی اضافه کنید

یک منوی کشویی ظاهر می شود. برای شروع ساختن از صفر، با انتخاب ادامه دهید "ساخت سربرگ جهانی".

طراحی هدر سراسری

تنظیمات بخش

رنگ پس زمینه

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

  • رنگ پس زمینه: #f6f9fb

فاصله

به تب تغییر دهید طرح از بخش و پارامترهای زیر را تغییر دهید.

  • بالشتک (بالا و پایین): 0 پیکسل

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

ساختار ستون

با افزودن یک ردیف جدید با استفاده از ساختار ستون زیر ادامه دهید:

اندازه

تنظیمات خط را باز کنید، به تب بروید طرح و حداکثر عرض را در تنظیمات اندازه تغییر دهید.

  • حداکثر عرض: 1 پیکسل

فاصله

سپس بالشتک بالا و پایین را در تنظیمات فاصله تغییر دهید.

  • بالشتک (بالا و پایین): 5 پیکسل

یک ماژول منو به ستون اضافه کنید

منوی مورد نظر را برای افزودن انتخاب کنید

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

لوگو را دانلود کنید

یک لوگو بارگذاری کنید.

رنگ پس زمینه را حذف کنید

سپس رنگ پس‌زمینه سفید پیش‌فرض را از ماژول حذف کنید.

تنظیمات متن منو

به تب تغییر دهید طرح ماژول و پارامترهای متنی منو را بر این اساس تغییر دهید:

  • منوی فونت: Poppins
  • وزن قلم منو: نیمه پررنگ
  • رنگ متن: #003e51
  • اندازه متن منو: 16 پیکسل
  • تراز متن: راست

تنظیمات منوی کشویی

سپس تنظیمات را از منوی کشویی تغییر دهید.

  • رنگ خط منوی کشویی: #7159c8

تنظیمات نماد

تنظیمات آیکون را نیز تغییر دهید.

  • رنگ نماد سبد خرید: #670fff
  • رنگ نماد جستجو: #670fff
  • رنگ نماد منوی همبرگر: #670fff

اندازه

بعد، به تنظیمات اندازه بروید و حداکثر عرض لوگو را تعیین کنید.

  • حداکثر عرض لوگو: 280 پیکسل

فاصله

همچنین حاشیه پایین پیش فرض را از ماژول حذف کنید.

  • حاشیه (پایین): 0 پیکسل

بخش را چسبناک کنید

اکنون که منوی ما آماده شده است، بخش را نیز چسبناک می کنیم. تنظیمات بخش را باز کنید، به تب بروید پیشرفته و تنظیمات زیر را اعمال کنید:

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

رنگ پس زمینه در حالت چسبناک

سپس رنگ پس زمینه قسمت را به حالت چسبنده تغییر دهید.

  • رنگ پس زمینه: #ffffff

سایه جعبه حالت چسبنده

همچنین سایه جعبه را روی قسمت اعمال کنید.

  • رنگ سایه (رومیزی): rgba (0,0,0,0)
  • رنگ سایه (چسبنده): rgba (0,0,0,0.04)

یک نماد همبرگر به ماژول منو اضافه شد

شناسه CSS را به ماژول منو اضافه کنید

ابتدا تنظیمات ماژول منو را باز کنید، به تب بروید پیشرفته و یک CSS ID اختصاص دهید.

  • شناسه CSS: منوی بخش

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

در مرحله بعد، یک ماژول کد زیر ماژول منو اضافه کنید.

تگ های اسکریپت و سبک را اضافه کنید

ما از کدهای CSS و JQuery استفاده خواهیم کرد. برای آماده شدن برای این کار، تگ های سبک و اسکریپت را اضافه می کنیم.

کد CSS را اضافه کنید

ما خطوط زیر از کد CSS را بین تگ های سبک قرار می دهیم:

.toggle-icon:after {
content: "\61";
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
 
#divi-menu .et_pb_menu__menu>nav {
margin-right: 38px;
visibility: hidden;
opacity: 0;
   
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
   
transform: translateY(50%);  
}
   
.reveal-menu-items {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0%) !important;
}
   
.icon-switch:after {
content: '\4d';
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;    
}

JQuery را اضافه کنید

خطوط باز کردن کد JQuery را اضافه کنید

در مرحله بعد کد JQuery را خواهیم داشت. خطوط زیر از کد JQuery را بین تگ های اسکریپت اضافه کنید:

jQuery(function($){
$(document).ready(function(){
 
});
});

متغیرها را ایجاد کنید

در ادامه چند متغیر ایجاد کنید.

var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');

نماد ضامن را در ماژول منو قرار دهید

در مرحله بعد، با استفاده از خط کد زیر، متغیر نماد تعویض را در ماژول Menu قرار دهید:

toggleIcon.insertAfter(desktopMenu);

یک تابع کلیک اضافه کنید

ما همچنین یک تابع کلیک اضافه می کنیم.

toggleIcon.click(function(){
    desktopMenu.toggleClass('reveal-menu-items');
  $(this).toggleClass('icon-switch');
});

تغییرات Divi Theme Builder را ذخیره کنید

اکنون که همه چیز سر جای خود است، تنها کاری که باید انجام دهید این است که تمام تغییرات Divi Theme Builder را ذخیره کرده و نتیجه را مشاهده کنید!

قالب ساز Divi

بررسی

اکنون که تمام مراحل را طی کردیم، اجازه دهید آخرین نگاهی به نتیجه نهایی بیندازیم.

نماد همبرگر در ماژول منوی Divi

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

نتیجه

در این مقاله به شما نشان دادیم که چگونه با هدر جهانی خود در Divi Theme Builder خلاق شوید. 

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

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

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

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

...

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

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

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

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

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

بررسی

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

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

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

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

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

منوی اصلی Divi به شکل یک چرخ چرخان روی شناور

عنوانی به آن بدهید که برای شما منطقی باشد و کلیک کنید از 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 باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد

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

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

...