برای این شما باید بروید 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 که در این ماژول کد اضافه می‌کنیم به ما کمک می‌کند تا به اثر آشکار در شناور دست پیدا کنیم.
<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
فاصله پیش‌فرض (رومیزی)
سپس به تنظیمات فاصله بروید و کمی فضا به ماژول بدهید.
در این مقاله به شما نشان دادیم که چگونه با استفاده از یک منوی چسبنده قابل ارتقا بسازید از بسته چیدمان مکانیک Divi. ما دو نمونه طرح مختلف را پوشش داده‌ایم که می‌توانید آنها را تغییر دهید و در هر نوع وب‌سایتی که ایجاد می‌کنید استفاده کنید!
امیدواریم این آموزش الهام بخش شما برای پروژه های بعدی Divi باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد
آیا می خواهید با یک ماسک پس زمینه Divi Sticky بعد دیگری به وب سایت خود بدهید؟
گزینه های چسبنده Divi به شما این امکان را می دهد که طرح های مختلفی را برای وب سایت خود ایجاد کنید. آموزش امروز لیستی از کارهایی را که می توانید انجام دهید اضافه می کند. امیدواریم این کمک کند تا خلاقیت شما افزایش یابد.
ما به شما نشان خواهیم داد که چگونه یک ماسک پس زمینه چسبنده ایجاد کنید.
این آموزش گزینه های چسبنده 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
زمان انتقال
در نهایت به تب بروید پیشرفته و مدت زمان انتقال را افزایش دهید.
مدت زمان انتقال: 500 میلی‌ثانیه
بررسی
اکنون که همه مراحل را طی کردیم ، بیایید نگاهی نهایی به ظاهر آن در اندازه های مختلف صفحه بیندازیم.
آیا می خواهید یک نوار لغزنده آکاردئونی Divi پاسخگو ایجاد کنید؟
نوار لغزنده آکاردئونی یک راه سرگرم کننده و جذاب برای نمایش محتوا در یک فضای کوچک است.
لغزنده های آکاردئونی معمولاً از چندین عنصر (یا پانل) تشکیل شده اند که به صورت افقی مانند چین های یک پرده روی هم چیده شده اند. و هنگامی که ماوس را روی یکی از پانل‌ها نگه می‌دارید، در حالی که پانل‌های آکاردئونی دیگر منقبض می‌شوند، محتوا را نشان می‌دهد. اینجاست که اثر آکاردئونی مانند انبساط و انقباض را دریافت می کنیم.
در این آموزش به شما نشان خواهیم داد که چگونه یک اسلایدر آکاردئونی واکنشگرا در Divi تنها با استفاده از CSS ایجاد کنید. برای انجام این کار، ما از چندین ماژول Divi به عنوان پنل آکاردئونی استفاده می کنیم.
بررسی
در اینجا یک مرور سریع از آنچه در این آموزش به دست خواهیم آورد آورده شده است.
لغزنده آکاردئون را می توان با استفاده از هر نوع ماژول (های) ساخت. اگر بخواهیم می‌توانیم از ترکیب ماژول‌های مختلف به عنوان پنل آکاردئونی استفاده کنیم. اما برای این طراحی قرار است از ماژول های Blurb استفاده کنیم.
با اضافه کردن یک ماژول Blurb به خط شروع کنید.
Blurb Mod Design
تنظیمات ماژول ارائه را باز کنید و موارد زیر را به روز کنید:
عنوان داستانی و محتوای متن را حفظ کنید. ما همیشه می توانیم بعداً آن را تغییر دهیم.
سپس نماد ارائه را به صورت زیر به روز کنید:
نماد (رومیزی): نماد خط فلش افقی (نگاه کنید به تصویر)
نماد (هور): (نگاه کنید به تصویر)
نماد (تبلت و تلفن): (نگاه کنید به تصویر)
زمینه
سپس به blurb یک تصویر پس‌زمینه و یک همپوشانی گرادیان در شناور به صورت زیر بدهید:
یک تصویر پس‌زمینه با عرض حداقل 1000 پیکسل اضافه کنید
سپس به تب Design بروید و موارد زیر را به روز کنید:
عنوان و بدنه متن
قلم عنوان: Poppins
وزن قلم: نیمه پررنگ
رنگ متن عنوان: شفاف (رومیزی)، #ffffff (موشواره)
اندازه متن عنوان: 22 پیکسل
رنگ متن بدنه: شفاف (رومیزی)، #ffffff (مانوس کردن)
ارتفاع جعبه و سایه
هنگامی که متن سفارشی شد، به ماژول ارتفاع 100٪ و سایه کادر را به صورت زیر بدهید:
قد: 100%
سایه جعبه: اسکرین شات را ببینید
موقعیت افقی: -12px
موقعیت عمودی: 0px
CSS سفارشی
برای اینکه پانل‌های آکاردئونی ما (یا ماژول Blurb) رشد کنند و با بقیه ماژول‌ها منقبض شوند، باید CSS سفارشی اضافه کنیم تا اندازه ماژول را با flex-grow تغییر دهیم.
از آنجایی که قرار است در مجموع 5 ماژول داشته باشیم که آکاردئون را تشکیل می دهند، "flex:1" را برای حالت پیش فرض اضافه می کنیم و سپس در حالت شناور آن را به "flex:5" تغییر می دهیم.
در زبانه Advanced، CSS سفارشی زیر را به عنصر اصلی Blurb اضافه کنید:
خیلی خوب! این یک سفارشی سازی جدی ماژول Blurb بود. اما خبر خوب این است که تنها کاری که باید انجام دهیم این است که آنها را کپی کنیم تا پانل های آکاردئونی باقی مانده را ایجاد کنیم.
طرح‌بندی‌های تکراری برای پانل‌های آکاردئونی بیشتر
ماوس را روی ماژول ارائه نگه دارید و چهار بار روی نماد دوتایی کلیک کنید تا در مجموع پنج پانل آکاردئونی (یا ماژول) ایجاد کنید.
در مرحله بعد، تصاویر پس زمینه را برای هر یک از تارهای جدیدی که کپی کرده اید، به روز کنید.
نتیجه نهایی
حالا که تمام مراحل را طی کردیم، بیایید نتیجه نهایی را ببینیم.
این نوار لغزنده آکاردئونی پاسخگو واقعاً دارای عناصر منحصر به فردی است که استفاده از آن را سرگرم کننده می کند. پانل های آکاردئونی بدون هیچ گونه اشکال غیرمنتظره ای بر روی ماوس منبسط و منقبض می شوند.
و نمادهای ارائه در شناور و در تلفن همراه برای تقویت UX تغییر می کنند. امیدواریم این آموزش الهام بخش شما برای پروژه های بعدی 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 را بالای متن پاراگراف اضافه کنید. حالا هر دو داخل یک ماژول خواهند بود.
سپس کلاس 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 Menu اضافه کنید. این نماد همبرگر قبلاً به طور پیش فرض در صفحه نمایش های کوچکتر ظاهر می شود. اما در این آموزش مطمئن خواهیم شد که آیکون همبرگر روی دسکتاپ نیز ظاهر می شود.
این یک ظاهر حداقلی به هدر شما می دهد و در عین حال تعامل را نیز اضافه می کند.
برویم.
بررسی
قبل از فرو رفتن در این آموزش، اجازه دهید نگاهی گذرا به نتیجه بیاندازیم.
در این مقاله به شما نشان دادیم که چگونه با هدر جهانی خود در Divi Theme Builder خلاق شوید.
به طور خاص، ما به شما نشان دادیم که چگونه یک نماد منوی همبرگر را روی دسکتاپ نیز اضافه کنید. به طور پیش فرض، نماد همبرگر در تبلت و موبایل نمایش داده می شود.
امیدواریم این آموزش الهام بخش شما برای پروژه های بعدی Divi باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد
آیا می خواهید یک منوی اصلی Divi به شکل چرخ چرخان در حالت شناور ایجاد کنید؟
ایجاد یک چرخ منوی چرخان در شناور یک راه سرگرم کننده برای نمایش لینک های مفید در وب سایت شما است. این یک راه عالی برای ارائه چندین تماس برای اقدام در یک هدر برای هدایت کاربران به جایی است که باید بروند. و همچنین یک منوی زیرمجموعه جالب برای وبلاگ شما خواهد بود.
در این آموزش، ما به شما نشان خواهیم داد که چگونه یک چرخ منوی چرخشی در حالت شناور در Divi ایجاد کنید. این کار را می توان با استفاده از ترکیبی از گزینه های داخلی Divi و برخی قطعه های css سفارشی انجام داد.
بررسی
قبل از ورود به این آموزش، بیایید نگاهی به نتیجه ای که می خواهیم به دست آوریم بیندازیم.
از داشبورد وردپرس، به صفحات> افزودن جدید برای ایجاد یک صفحه جدید
عنوانی به آن بدهید که برای شما منطقی باشد و کلیک کنید از Divi Builder استفاده کنید
سپس روی کلیک کنید شروع به ساختن کنید (از خراش بسازید)
پس از آن یک بوم خالی برای شروع طراحی در دیوی خواهید داشت.
طراحی چرخ منوی چرخان در Divi
بخش و خط 1 را ایجاد کنید
در قسمتی که به طور پیش فرض وجود دارد، یک ردیف با ساختار ستون زیر اضافه کنید.
سپس یک ماژول متنی به خط با محتوای زیر اضافه کنید.
سپس طرح متن را به صورت زیر به روز کنید:
فونت متن: Share Tech
فاصله حروف متن: 1px
عنوان 2 حجم متن: 8vw
خط 2 را برای ساخت چرخ اضافه کنید
بعد، باید یک ردیف جدید به ستون زیر ردیف 1 اضافه کنیم.
قبل از اینکه ماژول های متن خود را برای پیوندهای خود اضافه کنیم، باید خط خود را به صورت چرخ طراحی کنیم. برای ایجاد طراحی چرخ ما بهینه سازی های زیادی در ردیف مورد نیاز خواهد بود.
برای شروع، تنظیمات ردیف 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 ماژول متن ایجاد شود.
تعیین موقعیت پیوندهای متنی / ماژول ها
ما اکنون آماده هستیم تا پیوندهای خود را در امتداد محیط چرخ قرار دهیم. برای انجام این کار، ما هر ماژول را به روز می کنیم متن با گزینه های تبدیل که ماژول را در جای خود جابجا/ترجمه و می چرخانند.
چرخش محور 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 را به صورت زیر به روز کنید:
چرخ پیوند چرخان یکی از آن عناصر طراحی ظریفی است که می تواند بازدیدکنندگان را با جلوه شناور ظریف و منحصر به فرد جذب کند. و بسیار شگفت انگیز است که چگونه می توان این طراحی را با تنظیمات طراحی داخلی Divi انجام داد.
امیدواریم این آموزش الهام بخش شما برای پروژه های بعدی Divi باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد
محرمانه بودن و کوکی ها: این سایت از کوکی ها استفاده می کند. با ادامه مرور این سایت ، شما با استفاده ما از آن موافقت می کنید.
برای کسب اطلاعات بیشتر ، از جمله نحوه کنترل کوکی ها ، به موارد زیر مراجعه کنید:
سیاست کوکی ها
