ফিতা হল আপনার ওয়েবসাইটে একটি ঘোষণা করার একটি দৃশ্যত আনন্দদায়ক উপায়। যদিও এমন অনেক পরিস্থিতি রয়েছে যেখানে আপনি ফিতা ব্যবহার করতে পারেন কিন্তু আপনি প্রায়শই Woocommerce স্টোরগুলিতে বিক্রয়, ডিসকাউন্ট বা স্টকের বাইরের ঘোষণাগুলির সাথে এটি খুঁজে পান।

ভিজিটর আপনার ওয়েবসাইটে আসার সাথে সাথে একটি বিক্রয় বা ছাড় সম্পর্কে জানাতে ফিতা ব্যবহার করা হয়। এই টিউটোরিয়ালে, আমরা বুঝব কিভাবে আপনি Elementor ব্যবহার করে ফিতা যোগ করতে পারেন।

কেন আপনি Ribbons? ব্যবহার করা উচিত

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

ফিতা একটি নির্দিষ্ট পদ্ধতিতে ব্যবহার করা হলে দৃশ্যত আকর্ষণীয় হয়। তারা ব্যবহারকারীকে সম্পর্কহীন পণ্যের মধ্য দিয়ে যেতে এবং আপনার ওয়েবসাইটের রূপান্তর এবং বিক্রয় উন্নত করতে সহায়তা করতে পারে।

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

প্রক্রিয়াটি শুরু করতে, আপনাকে একটি অভ্যন্তরীণ বিভাগ যোগ করতে হবে যেখানে আমরা উইজেটগুলি যুক্ত করব।

এরপরে, আপনাকে বিভাগে একটি কলাম টেনে আনতে হবে। এই টিউটোরিয়ালের জন্য, আমরা একটি এক-কলামের কাঠামো ব্যবহার করব।

একবার আপনি উপরের সেটিংসের সাথে সম্পন্ন হলে, আপনি এগিয়ে যেতে পারেন এবং আপনার রিবনের জন্য একটি শিরোনাম তৈরি করতে পারেন।

পরবর্তী ধাপের জন্য, উন্নত ট্যাবে CSS ক্লাসে এগিয়ে যান এবং ক্ষেত্রে " gc-ribbon-style " যোগ করুন।

এর নীচে আপনাকে নিম্নলিখিত কাস্টম CSS যোগ করতে হবে।

.gc-ribbon-style {
text-shadow: 0em 0em 0.3em rgba(0,0,0,0.2);
background: #61CE70;
color: #ffffff;
font-size: 17px;
display: block;
width: calc(100% + 20px);
height: 50px;
line-height: 50px;
text-align: center;
margin-left: -10px;
margin-right: -10px;
position: relative;
top: 0px;
Z-index:10;
}

.gc-ribbon-style:before {
border-top: 10px solid #63a06c;
content: "";
position: absolute;
height: 0;
width: 0;
bottom: -10px;
left: 0;
border-left: 10px solid transparent;
}

.gc-ribbon-style:after {
border-top: 10px solid  #63a06c;
content: "";
position: absolute;
height: 0;
width: 0;
right: 0;
bottom: -10px;
border-right: 10px solid transparent;
}

আপনি প্রায় সম্পন্ন. এটি প্রকাশ করুন এবং এটি কিভাবে কাজ করে তা দেখতে আপনার ওয়েবসাইট পরীক্ষা করুন।

এইভাবে আপনি Elementor ব্যবহার করে আপনার পণ্যগুলিতে ফিতা যোগ করতে পারেন। আমাদের বিষয়বস্তু সম্পর্কে ঘন ঘন আপডেট পেতে আমাদের Facebook এবং Twitter-এ আমাদের সাথে যোগদান নিশ্চিত করুন।