Elementor: نحوه ایجاد نقشه هگز با افکت

نیاز به ایجاد یک نقشه هگزا با افکت شناور از طریق قدرتمند صفحه ساز Elementor ? اگر چنین است، در این مقاله نحوه رسیدن به آنجا را بیابید.

اگر می خواهید دیدی کلی از آنچه در این آموزش در مورد آن صحبت خواهیم کرد داشته باشید، از شما دعوت می کنیم ویدیوی زیر را تماشا کنید:

برای تکمیل این آموزش، شما نیاز دارید نسخه حرفه ای المنتور، زیرا ما از کد CSS سفارشی استفاده خواهیم کرد که فقط توسط این نسخه پشتیبانی می شودElementor.

همچنین راهنمای ما را در اینجا بخوانید: نحوه اضافه کردن Breadcrumbs به وب سایت با Elementor

بیایید یک بخش جدید با ساختار به ایجاد کنیم 3 ستون، سپس در پانل، بیایید تعریف کنیم ارتفاع سور حداقل ارتفاع، و سپس حداقل ارتفاع بیایید کلیک کنیم VH و نوار لغزنده را روی 100 قرار دهید.

بیایید یک را اضافه کنیم ویجت بخش داخلی – بخش داخلی – در ستون وسط. این ویجت به طور پیش فرض با 2 ستون پیکربندی شده است، بیایید یکی از آنها را حذف کنیم. بیایید آن را پیکربندی کنیم ارتفاع سور حداقل ارتفاع و حداقل ارتفاع بیایید آن را تعریف کنیم لغزنده به 400.

در برگه سبک، بیایید با انتخاب یک تصویر از کتابخانه خود، تصویر پس زمینه را تنظیم کنیم، سپس موقعیت آن را بر روی آن تنظیم کنیم برتر محور، تکرار کنید تکرار نشدنی و اندازه روشن است پوشش.

در باره پوشش پس زمینهروی کلیک کنید تنزل یافته برای نوع پس زمینه، رنگ اصلی را انتخاب و تغییر دهید #2299EF و مکان در 20، سپس رنگ ثانویه روشن است #1917 قبل از میلاد و مکان در 50، زاویه روشن است 140 و کدورت روشن است 0.85

سپس a را اضافه کنید ویجت عنوان دربخش داخلی و به عنوان عنوان، بیایید یک نام بدهیم، سپس در تب Style ویجت عنوان، رنگ را به # FFFFFF. سپس a را اضافه کنید ویجت ویرایشگر متن، و در برگه سبک متن را در مرکز قرار دهید و رنگ را به آن تغییر دهید # FFFFFF.

همچنین ببینید: نحوه افزودن تصویر به ویجت جدول قیمت با Elementor

دوباره انتخاب کنید بخش داخلی، به برگه بروید پیشرفته ، در بخش حاشیه داخلی، وارد 25-2-2-2

دوباره Inner Section را انتخاب کنید و به تب Advanced بروید و در قسمت Custom CSS کد زیر را کپی و پیست کنید:

/*Traçage Hexagone*/
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 pour Afficher/Masquer la Superposition du dégradé*/
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;
}
/*CSS pour Afficher/Masquer l'élément de la colonne*/
selector .elementor-column{
    opacity: 0;
    -webkit-transition: all 0.8s !important;
    transition: all 0.8s !important;
}
selector:hover .elementor-column{
    opacity: 1;
}

سپس بیایید قطعه زیر را نیز بچسبانیم.

/*CSS d'effet de transition avec ombre*/
selector:hover{
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
}
.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.

بیایید این ستون را 2 بار کپی کنیم و 2 ستون دیگر را حذف کنیم.

بیایید تصویر پس زمینه ویجت های دیگر را تغییر دهیم بخش داخلی، عنوان و محتویات از ویرایشگر متن و همچنین رنگ های گرادیان پوشش پس زمینه. شما باید نتیجه ای به شکل زیر داشته باشید:

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

اکنون Elementor Pro را دریافت کنید!

نتیجه

بنابراین ! این برای این مقاله است که به شما نشان می دهد چگونه یک نقشه هگزا با افکت ایجاد کنید. اگر در مورد نحوه رسیدن به آنجا نگرانی دارید، به ما اطلاع دهید نظر.

با این حال ، شما همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

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

...