ساخت کارت شیشه ای در المنتور، استفاده از سبک طراحی شیشه ای (glassmorphism)، یکی از جدیدترین ترند های طراحی سایته که استفاده از اون توی چند ساله اخیر محبوبیت زیادی رو بین طراحان سایت پیدا کرده. توی این سبک از طراحی با استفاده ازشفاف کردن و تار کردن زمینه و رنگ و سایه روشن برای حاشیه باکس ها و کارت های صفحه ،حالت شیشه ای رو برای المان ها و عناصر صفحه ایجاد می کنن. توی این مقاله از سری آموزش های المنتور از در سایت کنترل وب میخوایم آموزش کامل ساخت کارت شیشه ای در المنتور رو با هم یاد بگیریم و ببینیم با استفاده از صفحه ساز المنتور به چه طریقی می تونیم ساخت کارت های شیشه ای در المنتور رو پیاده سازی کنیم و سایت جذاب تری داشته باشیم.
برای شروع، اول به یک بخش یا section در المنتور نیاز داریم تا ساخت کارت شیشه ای در المنتور رو در این بخش انجام بدیم.
برای اینکار با کلیک کردن روی علامت + در صفحه یک بخش جدید ایجاد می کنیم.
برای اینکه در پس زمینه بخش تصویری قرار بدیم، در قسمت استایل، نوع پس زمینه روی نمایش کلاسیک قرار میدیم و کمی پایین تر توی کادر تصویر، تصویر پس زمینه رو انتخاب می کنیم.
با کلیک راست کردن روی بخش به قسمت ویرایش بخش میریم.توی قسمت ویرایش بخش، قسمت محتوا، عرض بخشمون رو روی مقداری که می خوایم تنطیم میکنیم.
برای اینکه ساخت کارت شیشه ای در المنتور رو داشته باشیم به المانی به نام “posts ” نیاز داریم. برای دسترسی به این المان، “پست” یا “posts” رو از نوار بالا در قسمت سرچ المان ها جست و میکنیم و در قسمت موردنظر قرار میدیم.
برای اینکه پست ها حالت کارت رو به خودشون بگیرن، توی تنظیمات استایل این المان، قسمت پوسته رو بر روی cards قرار می دهیم.
قدم نهایی برای ساخت کارت شیشه ای در المنتور، اینه که با استفاده از کد های سی اس اس سفارشی، استایل موردنظر رو به کارت ها بدیم و حالت نمایش شیشه ای رو برای اونها ایجاد کنیم. برای اینکار از قسمت تنظیمات پیشرفته المان، در قسمت css سفارشی، با قرار دادن کد هایی که در ادامه براتون قرار می دیم کار تمومه.
حالا میتونین با تغییر بقیه تنظیمات المان از قسمت استایل، رنگ ها و استایلای دلخواهتونم به محتویات کارت بدین.
امیدوارم که این آموزش براتون کاربردی بوده باشه و بتونین طراحای خیلی جذابی رو با این ترفند ایجاد کنین.
کد های سی اس اس:
selector .elementor-post__card{
background: rgba( 255, 255, 255, 0.25 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 6px );
-webkit-backdrop-filter: blur( 6px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
}
2 پاسخ
اه///چیزی نیست که استاد……زحمتو اینو بکشین و این دوتا کادر بالا که نوشته اینستا و تلگرام ما را دنبال کنید رو هم اموزش بدین چجوری ساخته میشن….ایکون ابی و قرمز
سلام. پیج اینستاگرام مارو دنبال کنید بزودی میزاریم آموزشش رو