در ابتدا نیاز است که توضیح بدم شما برای استفاده از طراحی باکس با هوار جذاب در المنتور به افزونه المنتور نسخه پرو نیازمند هستید. چون برای اجرای کار نیاز دارید که یک سری کد های CSS در صفحه ساز خودمون وارد کنیم تا طرح نهایی کار حاصل شود . برای تماشا نسخه تصویری این آموزش می توانید به صفحه اینستاگرام ما سر بزنید . برای استفاده از خدمات مشاوره رایگان از طریق صفحه تماس با ما با تیم پشتیبانی تماس بگیرید .
انتخاب یک سکشن :
در ابتدا کار نیاز داریم که یک سکشن تک ستونه بسازیم پس طبق تصویر زیر سکشن تک ستونه که توسط المنتور طراحی شده است را انتخاب می کنیم.
سپس مطابق تصاویر زیر ستون مورد نظر را استایل دهی می کنیم.
ارتفاع سکشن خود را طبق تصویر زیر انتخاب می نماییم.
از قسمت استایل رنگ سکشن خود را انتخاب می نماییم.
انتخاب یک بخش داخلی :
از قمست آیتم ها یک بخش داخلی را انتخاب کنید و در ستون اصلی خود قرار دهید همان طور که می بینید بخش داخلی شما دارای 2 ستون است برای آنکه مانند تصویر زیر 3 ستونه شود نیاز دارید که از یکی از ستون های آن تکثیر بکنید.
سپس به قسمت تنظیمات یکی از این سه ستون رفته و مطابق تصویر زیر از قسمت استایل رنگ مورد نظر خود را انتخاب کنید سپس از قسمت حاشیه انحنای مرز را روی 25px قرار دهید سپس در قسمت پیشرفته طبق تصویر حاشیه خارجی و فاصله داخلی ستون مورد نظر را انتخاب کنید و در پایان از قسمت کلاس های CSS کلاس card-box را به ستون خود بدهید. برای استفاده از کد های CSS شما به المنتور نسخه پرو نیاز دارید.
سپس طبق آموزش از قسمت آیتم های به ستون های بخش داخلی خود یک تیتر ، پاراگراف و دکمه اضافه خواهیم کرد. و به آنها استایل های مورد نظر خودمان را اعمال می کنیم.
سپس برای آنکه نیاز نباشد برای ستون های بعدی هم همین تنظیمات را مجدد انتخاب کنید از ستون طراحی شده خود 2 مرتبه تکثیر بگیرید و ستون های خالی اضافی را پاک نمایید تا مانند تصویر زیر شما یک طرح 3 ستونه داشته باشید.
تست حالت رسپانسیو :
برای انجام دادن این کار باید حالت رسپانسیو المنتور را فعال کنید . سپس به حالت تبلت رفته و ستون اصلی خود را انتخاب کرده ( همان ستون اصلی سکشن اولیه ) و تغییرات زیر را مطابق تصویر انجام دهید .
سپس به قسمت موبایل رفته و مجدد ستون اصلی خود را مطابق تصویر زیر تغییر دهید.
وارد کردن کد های CSS
مطابق تصویر زیر در نسخه المنتور پرو خود به قسمت پیشرفته و سپس CSS های سفارشی رفته و کد زیر را که برای شما قرار دادیم را وارد کنید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/*www.pasargadsg.ir*/ /*Blur Zoom Hover Effect*/ selector{ --zoom-in: 1.2; --zoom-out: 0.9; --hover-background: #8A00D4; } selector{ transition: all .5; } selector:hover .card-box{ filter: blur(5px); transform: scale(var(--zoom-out)); } .card-box{ transform: scale(1); transition: all .5s; } .card-box:hover{ transform: scale(var(--zoom-in)) !important; z-index: 2; filter: blur(0px) !important; } selector .elementor-widget-wrap{ transition: all .5s; } selector .card-box:hover .elementor-widget-wrap{ background: var(--hover-background) !important; } |
امیدوارم که از این آموزش لذت برده باشه شما می توانید از قسمت نظرات سوالات خود را با ما مطرح کنید .