امروزه اکثر طراحان سایت ها به طراحی با المنتور رو آورده اند زیرا با استفاده از این صفحه ساز می توانند تمامی بخش های سایت خود مانند باکس محصولات، هدر و فوتر و … را به سلیقه خود طراحی نمایند.
در این مقاله می خواهیم به طراحی باکس 6 ضلعی با المنتور بپردازیم. با آموزش این بخش می توانید عکس ها، محصولات، بیوگرافی ها و… سایت خود را به صورت شش ضلعی جذاب طراحی نمایید. همچنین می توانید یک هاور روی آن ایجاد نمایید تا کاربر با کلیک بر روی آن اطلاعاتی را مشاهده نماید تا جذب سایت شما شود و دقایق بیشتری را در آن سپری کند.
ساخت باکس شش ضلعی هاور دار در المنتور
برای طراحی باکس وارد صفحه که می خواهید با المنتور طراحی کنید شوید و روی + کلیک نمایید و چند ستون به دلخواه خود ایجاد نمایید. (بهتر است اندازه ی آنها هم اندازه ی صفحه نمایش باشد) سپس یک بخش داخلی به ستونی که می خواهیم درون آن عکس هاور دار ایجاد نماییم را اضافه می کنیم.
پس از اضافه نمودن بخش داخلی یکی از بخش های داخل ستون مدنظر را حذف می کنیم و ارتفاع آن را در کمترین ارتفاع(مثلا 400) می گذاریم.
سپس عکس دلخواه خود را درون بخش داخلی از قسمت پس زمینه که در استایل است انتخاب می کنیم. تنظیمات عکس را مانند تصویر بالا به صورت جایگاه وسط، بدون تکرار و سایز کاور قرار دهید.
بعد از طی کردن این مراحل وارد قسمت روکش پس زمینه که درون همان استایل است می شویم و بر روی گرادینت کلیک می کنیم و رنگ دلخواه خود را در این قسمت انتخاب می کنیم که روکشی رنگی به تصویر ببخشیم. اگر می خواهید باکسی زیباتر درون سایت خود بسازید از قسمت رنگ ثانویه، رنگ دیگر انتخاب نمایید.
اگر می خواهید متنی درون عکسی که توسط المنتور طراحی کرده اید قرار دهید، کافی است از بخش ابزارهای المنتور سربرگ و ویرایشگر متن را کشیده و به بخش داخلی ستون مورد نظر که در قبل آن را ایجاد کرده اید، اضافه کنید و متن دلخواه خود را درون آن بنویسید.
اکنون به سراغ شش گوشه کردن باکس می رویم. برای این کار کافی است تا روی ویرایش بخش داخلی که در تصویر زیر نشان داده شده است کلیک نمایید.
سپس در قسمت پیشرفته، CSS سفارشی را انتخاب نمایید و کد زیر را کپی کرده و درون آن وارد نمایید تا باکس یا عکس شش ضلعی شما ساخته شود.
کدی که باید وارد شود:
selector{
clip-path: polygon(0 25%, 50% 0, 100% 25%, 99% 75%, 50% 100%, 0 75%);
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
}
چگونه متن روی عکس شش ضلعی را ناپدید کنیم؟
اگر می خواهید متن های روی باکس شش ضلعی المنتوری را ناپدید نمایید تا در صورت کلیک کاربر بر روی باکس نمایان شوند کافی است تا کدی که در زیر برای شما آورده ایم را کپی کرده و در ادامه کدی که در قسمت قبل در CSS سفارشی وارد کرده ایم را بیفزایید. سپس اگر بر روی عکس خود بروید، متن شما نمایان می شود.
کدی که باید وارد شود:
/*Gradient Overlay Show/Hide CSS*/
selector .elementor-background-overlay{
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
opacity: 0 !important;
}
selector:hover .elementor-background-overlay{
opacity: 0.85 !important;
}
/*Column Element Show/Hide CSS*/
selector .elementor-column{
opacity: 0;
-webkit-transition: all 0.8s !important;
transition: all 0.8s !important;
}
selector:hover .elementor-column{
opacity: 1;
}
چگونه باکس شش ضلعی را متحرک کنیم؟
اگر می خواهید طراحی شما بی نظیر باشد و باکس شما در صورت حرکت موس کاربر بر روی آن حرکت کند و متن را نمایش دهد کافی است تا کد زیر را در ادامه ی کد های قبلی وارد کنید.
کدی که باید وارد شود:
/*Shadow transition Effect CSS*/
selector:hover{
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
اکنون می خواهیم تا با کمک یکدیگر هاله ای زیر باکس شش ضلعی محصولات و تصاویر خود ایجاد نماییم تا زیبایی بیشتری به طراح خود ببخشیم. برای این کار کد زیر را به CSS سفارشی ستون عکس خود (نه بخش داخلی) که در تصویر زیر آن را نشان داده ایم، وارد نمایید.
کدی که باید وارد شود:
.hexa-mom::before{
content: ”;
position: absolute;
bottom: -70px !important;
width: 100%;
color: #fff;
height: 60px;
border-radius: 50%;
background: -webkit-radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
background: radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
display: block;
-webkit-transition: all 0.8s !important;
transition: all 0.8s !important;
z-index: 999;
}
.hexa-mom:hover::before{
opacity: 1 !important;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
تنها نکته ای که در این بخش حائز اهمیت است این است که باید برای کد خود یک کلاس ایجاد نماییم تا دستورات بالا اجرا شوند. بنابراین همانطور که در تصویر زیر نشان داده شده است وارد قسمت پیشرفته شده و در بخش “کلاس های CSS” نامی که در کد بالا وارد شده است “hexa-mom” را کپی کرده و وارد نمایید. اکنون همانطور که مشاهده می کنید، عکس شش ضلعی شما به همین راحتی طراحی شده است.
آیا برای ساخت باکس های دیگر در المنتور نیاز است که همه ی این مراحل را طی نماییم؟
ممکن است بخواهید تعداد زیادی از باکس های شش ضلعی را برای سایت خود طراحی نمایید. برای این کار نیاز نیست که تمام مراحلی که در بالا بیان کرده ایم را طی کنید، بلکه تنها کافی است از ستون باکس المنتوری کپی گرفته و در قسمت ستون دیگر کلیک راست کرده و بر روی پیست کلیک نمایید تا همان باکس برای شما ایجاد شود و شما تنها عکس و نوشته های آن را به دلخواه خود تغییر نمایید.
در این مقاله طراحی باکس شش ضلعی متحرک به وسیله المنتور را برای شما بیان کردیم تا بتوانید سایت خود را زیباتر طراحی نمایید. درادامه با ما همراه باشید تا آموزش های بیشتری را در ارتباط با طراحی با المنتور بیاموزید.
