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

می خواهید بدانید که چگونه یک ماژول Blurb را از آن قرار دهید DIVI در هنگام محو کردن دیگران برجسته شده است؟

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

یکی از ساده‌ترین راه‌ها برای ایجاد چنین فهرستی به شیوه‌ای جذاب، استفاده از ماژول Blurb از DIVI. ماژول های Blurb به شما این امکان را می دهند که ساختار زیبایی را ایجاد کنید محتویات از لیست در حالی که به شما امکانات طراحی بی پایان می دهد.

در این آموزش، ما آن را یک قدم جلوتر خواهیم برد و به شما نشان خواهیم داد که چگونه یک ماژول Blurb را در حالت شناور برجسته کنید و بقیه مواردی که نمایش داده اید را محو کنید. این یک راه عالی برای تأکید بر یک ماژول Blurb در یک زمان است، بدون اینکه اجازه دهید سایر ماژول‌های Blurb حواس خواننده را پرت کنند. 

برویم.

بررسی

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

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

نسخه موبایل

بیایید طراحی را با Divi شروع کنیم

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

رنگ پس زمینه

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

همچنین می توانید مشورت کنید: Divi: چگونه یک بخش اعضای تیم را به عنوان چرخ فلک ایجاد کنیم

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

• زمینه: #eaeaea

فاصله

همچنین مقادیر فاصله اضافه کنید.

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

مرز

پارامترهای بخش را با اضافه کردن یک شعاع حاشیه کامل کنید.

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

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

ساختار ستون

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

اندازه گیری

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

• برابر کردن ارتفاع ستون: بله
• عرض: 90%
• حداکثر عرض: 1 پیکسل
• حداقل ارتفاع: 500 پیکسل (رومیزی)، خودکار (تبلت و تلفن)

CSS سفارشی (عنصر اصلی)

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

align-items: center;

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

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

تنها ماژولی که در طول این آموزش استفاده می کنیم ماژول Blurb است.

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

اولین ماژول Blurb را به ستون 1 اضافه کنید و آن را وارد کنید محتویات د votre choix.

نماد را انتخاب کنید

سپس یک نماد را انتخاب کنید.

• از نماد استفاده کنید: بله
• نماد: اسکرین شات را ببینید

گرادیان پس‌زمینه (هور)

سپس از یک گرادیان پس‌زمینه فقط در شناور استفاده کنید.

• گرادیان متوقف می شود
  • 20%: #ffffff
  • 80٪: #0f1bff
• نوع گرادیان: خطی

تنظیمات آیکون (رومیزی)

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

• رنگ نماد: #ffffff
• گوشه های گرد تصویر/آیکون: 50 پیکسل
• عرض حاشیه تصویر/آیکون: 5 پیکسل
• رنگ حاشیه: #ffffff
• محل قرارگیری تصویر/آیکون: بالا
• تراز تصویر/آیکون: سمت چپ

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

رنگ های مختلف آیکون را در حالت شناور تغییر دهید.

• رنگ نماد (Hover): #0f1bff
• رنگ پس‌زمینه تصویر/آیکون (هور): #f7f7f7

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

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

• قلم عنوان: Source Sans Pro
• وزن قلم: پررنگ
• سبک قلم عنوان: TT (بزرگ)

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

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

• رنگ متن عنوان: #ffffff

توضیحات تنظیمات متن (رومیزی)

بعد تنظیمات متن بدنه است.

• فونت بدنه: Open Sans
• ارتفاع خط بدن: 2 میلی متر

تنظیمات متن توضیحات را نگه دارید

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

• رنگ متن بدنه (Hover): #ffffff

فاصله

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

• بالشتک (بالا، پایین، چپ و راست): 50 پیکسل

سایه جعبه (رومیزی)

ما همچنین از سایه جعبه استفاده می کنیم.

• قدرت تاری سایه جعبه: 80 پیکسل
• قدرت پخش سایه جعبه: -20 پیکسل
• رنگ سایه: rgba(255,255,255,0.18)

Box Shadow (Hover)

رنگ سایه شناور را تغییر دهید.

• رنگ سایه: rgba(0,0,0,0.18)

کلاس CSS

و برای اینکه افکت تاری اتفاق بیفتد، باید یک کلاس CSS به ماژول Blurb خود اختصاص دهیم. در ادامه مقاله از این کلاس CSS در کدهای JQuery استفاده خواهیم کرد.

• کلاس CSS: blurb-item

ماژول Blurb را دو بار کلون کنید و موارد تکراری را در ستون های باقی مانده قرار دهید

پس از تکمیل ماژول Blurb در ستون 1، می توانید آن را دو بار کلون کنید و موارد تکراری را در ستون های باقی مانده ردیف قرار دهید.

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

بسته به تعداد ماژول های Blurb که می خواهید در صفحه خود نمایش دهید، می توانید ردیف را هر چند بار که بخواهید کلون کنید.

ماژول های Blurb را به صورت جداگانه سفارشی کنید

البته، شما باید محتوای جداگانه هر ماژول Blurb را تغییر دهید.

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

ساختار ستون

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

فاصله

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

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

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

کد JQuery و CSS را وارد کنید

یک ماژول Code به ستون ردیف اضافه کنید و مقداری کد JQuery و CSS را وارد کنید تا اثر اتفاق بیفتد. 

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

jQuery(function($){
$('[class*="blurb-item"]').hover(function() {
var selector = $(this);
 
$('[class*="blurb-item"]').addClass('blur');
selector.removeClass('blur');
},
function() {
$('[class*="blurb-item"]').removeClass('blur');
 
});
});

همچنین بخوانید: Divi: نحوه ایجاد بخش Testimonials در قالب یک شبکه

.blur {
-webkit-filter: blur(3px); /* Safari */
filter: blur(3px);
}

بررسی

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

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

نسخه موبایل

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

نتیجه

در این مقاله، ما به شما نشان داده‌ایم که چگونه با ماژول‌های Blurb که در خود به اشتراک می‌گذارید خلاق شوید وب سایت. 

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

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

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

دریغ نکنید که با راهنمای ما در این زمینه نیز مشورت کنید ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

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

...