এলিমেন্টর: কীভাবে প্রভাব সহ হেক্স ম্যাপ তৈরি করবেন

শক্তিশালী এলিমেন্টর পেজ বিল্ডার ব্যবহার করে হোভার ইফেক্ট সহ একটি ষড়ভুজাকার মানচিত্র তৈরি করতে চান? যদি তাই হয়, কিভাবে সেখানে যেতে হয় এই নিবন্ধে খুঁজে বের করুন.

আপনি যদি এই টিউটোরিয়ালে আমরা কী বিষয়ে কথা বলব তার একটি সংক্ষিপ্ত বিবরণ পেতে চাইলে, আমরা আপনাকে নিম্নলিখিত ভিডিওটি দেখার জন্য আমন্ত্রণ জানাচ্ছি:

এই টিউটোরিয়ালটি সম্পূর্ণ করতে আপনার প্রয়োজন হবে এলিমেন্টরের প্রো সংস্করণ, যেহেতু আমরা কাস্টম CSS কোড ব্যবহার করব যা শুধুমাত্র Elementor-এর এই সংস্করণ দ্বারা সমর্থিত।

এছাড়াও আমাদের গাইড পড়ুন: কিভাবে একটি ওয়েবসাইটে ব্রেডক্রাম্ব যোগ করবেন এলিমেন্টারের সাথে

এর একটি কাঠামো সহ একটি নতুন বিভাগ তৈরি করা যাক 3 কলাম, তারপর প্যানেলে, এর সংজ্ঞায়িত করা যাক ঔদ্ধত্য sur ন্যূনতম উচ্চতাতারপর, উপর ন্যূনতম উচ্চতা এর ক্লিক করা যাক VH এবং স্লাইডারটিকে 100 এ সেট করুন।

এর একটি যোগ করা যাক অভ্যন্তরীণ বিভাগ উইজেট - অভ্যন্তরীণ বিভাগ - মাঝের কলামে। এই উইজেটটি ডিফল্টভাবে 2টি কলামের সাথে কনফিগার করা হয়েছে, আসুন তাদের একটি মুছে ফেলি। এর কনফিগার করা যাক ঔদ্ধত্য sur ন্যূনতম উচ্চতা এবং ন্যূনতম উচ্চতা এর সংজ্ঞায়িত করা যাক 400-এ স্লাইডার.

ট্যাবে শৈলী, আসুন আপনার লাইব্রেরি থেকে একটি ছবি নির্বাচন করে ব্যাকগ্রাউন্ড ইমেজ সেট করি, তারপর এর অবস্থান সেট করুন সুপিরিয়র কেন্দ্রিক, পুনরাবৃত্তি করুন অ-পুনরাবৃত্ত এবং সাইজ অন আচ্ছাদন.

উপর পটভূমি ওভারলেক্লিক করুন অবনমিত জন্য পটভূমির ধরন, নির্বাচন করুন এবং প্রধান রঙ পরিবর্তন করুন #2299EF এবং অবস্থান চালু 20, তারপর গৌণ রঙ চালু #1917BC এবং অবস্থান চালু 50, কোণ অন 140 এবং অস্বচ্ছতা চালু আছে 0.85

তারপর একটি যোগ করুন শিরোনাম উইজেট Dans L 'অভ্যন্তরীণ বিভাগ এবং হিসাবে উপাধি, আসুন একটি নাম দিই, তারপর শিরোনাম উইজেটের স্টাইল ট্যাবে, রঙ পরিবর্তন করুন #FFFFFF. তারপর একটি যোগ করুন টেক্সট এডিটর উইজেট, এবং ট্যাবে শৈলী টেক্সট কেন্দ্রে এবং রঙ পরিবর্তন করুন #FFFFFF.

আরও দেখুন: এলিমেন্টরের সাথে মূল্য সারণী উইজেটে কীভাবে চিত্র যুক্ত করবেন

আবার নির্বাচন করুন অভ্যন্তরীণ বিভাগ, ট্যাবে যান উন্নত, বিভাগে অভ্যন্তরীণ মার্জিন, প্রবেশ করান 25-2-2-2

অভ্যন্তরীণ বিভাগটি আবার নির্বাচন করুন এবং উন্নত ট্যাবে যান এবং কাস্টম 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);
}

তারপর মধ্যম কলাম এবং ট্যাবে নির্বাচন করা যাক অগ্রসর, প্রবেশ করান হেক্সা-মা মাঠে সিএসএস ক্লাস.

আসুন এই কলামটি 2 বার ডুপ্লিকেট করি এবং অন্য 2 টি কলাম মুছে ফেলি।

আসুন অন্যান্য উইজেটের ব্যাকগ্রাউন্ড ইমেজ পরিবর্তন করি অভ্যন্তরীণ বিভাগ, টেক্সট এডিটরের শিরোনাম এবং বিষয়বস্তু এবং ব্যাকগ্রাউন্ড ওভারলে গ্রেডিয়েন্টের রংও। আপনার এমন একটি ফলাফল থাকা উচিত যা এইরকম দেখাচ্ছে:

এখানে আপনি এই কাজটি সহজে সম্পন্ন করেছেন। শুধু আপনার ট্যাবলেট এবং স্মার্টফোনের কাজের পূর্বরূপ দেখুন, প্রতিটি ডিভাইসের সাথে মেলে মার্জিন পরিবর্তন করার চেষ্টা করুন।

এলিমেন্টর প্রো এখনই পান!

উপসংহার

তাই! এটি এই নিবন্ধটির জন্য যা আপনাকে দেখায় কিভাবে প্রভাব সহ একটি হেক্স মানচিত্র তৈরি করতে হয়। কিভাবে সেখানে যেতে হবে সে সম্পর্কে আপনার কোন উদ্বেগ থাকলে আমাদের জানান commentaires.

তবে আপনি পরামর্শ নিতে পারেন আমাদের সংস্থান, আপনার যদি ইন্টারনেট সাইট তৈরির প্রকল্পগুলি পরিচালনা করতে আরও উপাদানগুলির প্রয়োজন হয়, তবে আমাদের গাইডের সাথে পরামর্শ করে ওয়ার্ডপ্রেস ব্লগ তৈরি বা এক ডিভি: সর্বকালের সেরা ওয়ার্ডপ্রেস থিম.

কিন্তু ইতিমধ্যে, আপনার বিভিন্ন সামাজিক নেটওয়ার্কে এই নিবন্ধটি ভাগ করুন.

...