TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে Weebly এ আইকন প্যানেল উইজেট যুক্ত করবেন?

1

আইকন প্যানেলগুলি আপনাকে খুব আকর্ষণীয় উপায়ে বিষয়বস্তু প্রদর্শন করতে সহায়তা করে। আপনি সাধারণত একটি অবতরণ পৃষ্ঠায় এটি ব্যবহার করতে পারেন সাইটে প্রদত্ত বিভিন্ন ধরণের পরিষেবা প্রদর্শন করতে। একটি একক প্যানেল কল টু অ্যাকশন বক্স হিসেবে কাজ করতে পারে এবং আপনি পাশে রেখে একাধিক প্যানেল দেখাতে পারেন। যদিও Weebly একটি অ্যাপ হিসেবে কল আউট বক্স অফার করে, কিন্তু সমান কলাম স্টাইলের আইকন প্যানেল আরও আকর্ষণীয় চেহারা তৈরি করবে।

নীচে আইকন প্যানেল উইজেট যা আমরা কথা বলছি এবং আপনার Weebly সাইটের জন্য এই ধরনের একটি প্যানেল তৈরি করতে আরও পড়ুন।

আইকন প্যানেলের বৈশিষ্ট্য

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

একটি আইকন প্যানেল তৈরি করা একটি দুই ধাপের প্রক্রিয়া – প্রথমে CSS সংজ্ঞায়িত করুন এবং তারপর HTML যোগ করুন।

আইকন প্যানেল উইজেটের জন্য শৈলী সংজ্ঞায়িত করা

ধাপ 1 – কলাম এবং প্যানেল কনটেইনার সংজ্ঞায়িত করা

আসুন একটি কন্টেনারের মধ্যে সমান উচ্চতা বিশিষ্ট চারটি কলাম c1, c2, c3 এবং c4 সহ একটি উইজেট তৈরি করি যার নাম panel_container।

/* Equal column height container */ .panel_container { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; } /* Four columns c1, c2, c3 & c4 */ .c1, .c2, .c3, .c4{ float: left; padding: 20px; width: 22%; }

ভিতরে চারটি শিশু কলামের ব্যক্তিগত উচ্চতা নির্বিশেষে আমরা প্যারেন্ট কন্টেইনারের উচ্চতা স্থির রাখতে ফ্লেক্স অ্যাট্রিবিউট ব্যবহার করি। Weebly থিমের প্রস্থে ফিট করার জন্য আমরা প্রতিটি কলামের জন্য 20% প্রস্থ ব্যবহার করেছি; আপনি আপনার থিম এবং আপনার প্রয়োজনীয় কলামের সংখ্যার উপর ভিত্তি করে প্রস্থকে চেষ্টা করে কাস্টমাইজ করতে পারেন।

দ্রষ্টব্য: সমস্ত আধুনিক ব্রাউজার সিএসএস ফ্লেক্স অ্যাট্রিবিউট সমর্থন করে। যাইহোক, ইন্টারনেট এক্সপ্লোরারের মতো পুরানো ব্রাউজার এটি সমর্থন করে না।

ধাপ 2 – কলামের পটভূমি সংজ্ঞায়িত করা

এখন যেহেতু চারটি সমান উচ্চতার কলাম সংজ্ঞায়িত করা হয়েছে, এখন প্রতিটি কলামের পটভূমির রঙ নির্ধারণ করার সময় এসেছে। আমরা কিছু ওয়েব নিরাপদ রং ব্যবহার করেছি, আপনি যে কোন রঙে আপনার প্রয়োজন পরিবর্তন করতে পারেন।

/* Color definitions for each column */ .c1{ background-color: lightgreen; } .c2{ background-color: skyblue; } .c3{ background-color: orange; } .c4{ background-color: lightgrey; }

ধাপ 3 – ফন্ট অসাধারণ আইকনগুলির জন্য স্টাইল সংজ্ঞায়িত করা

আমরা আইকনগুলির জন্য অসাধারণ ফন্ট ব্যবহার করি যাতে এটি ব্যবহার করা সহজ হয় এবং আপনার প্রয়োজনের জন্য বেছে নিতে আপনার কাছে প্রচুর আইকন থাকবে। আইকনটি একটি বর্গাকার বাক্স হিসাবে সংজ্ঞায়িত করা হয়েছে যার মধ্যে কিছু হভার প্রভাব সহ 80px x 80px আকার রয়েছে।

/* Font Awesome icons stylesheet */ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> /* Font Awesome icon definition with 80x80 box */ .icon{ background: rgba(255, 87, 34, 0.77); color:#ffffff; width:80px; height:80px; margin:0 auto; border-radius:5px; font-size:40px; line-height:80px; text-align:center; } /* Hover effect for icons */ .icon:hover{ opacity: 0.8; background-color: #333333; color: yellow; } /* Icon alignment */ .fa { margin:20px 15px 20px 20px; }

ধাপ 4 – অতিরিক্ত উপাদানগুলির জন্য স্টাইল

শিরোনাম (শিরোনাম), অনুচ্ছেদ (প্যারা) এবং বোতাম (বিটিএন) এর মতো অতিরিক্ত উপাদানগুলির জন্য নীচে শৈলী রয়েছে।

/* Heading */ .heading { font-size:20px; font-family: georgia; margin:20px; } /* Paragraph */ .para { font-size: 16px; font-family: verdana; } /* Button */ .btn { display: inline-block; padding: 6px 12px; margin-top: 20px; font-size: 16px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; color: #ffffff; background-color: #f1f1f1; border-color: #4cae4c; } /* Button hover */ .btn:hover { color: #ffffff; background-color: #b6f0ff; border-color: #398439; }

ধাপ 5 – উইজেটে প্রতিক্রিয়াশীলতা যোগ করা

সিএসএস সংজ্ঞায়িত করার চূড়ান্ত ধাপ হল নীচের মত মিডিয়া প্রশ্নগুলি ব্যবহার করে প্রতিক্রিয়াশীলতা যোগ করা:

/* Responsive CSS media queries */ @media only screen and (max-device-width: 768px) { .panel_container { display: block; } .c1, .c2, .c3, .c4 { width: 80% ; margin:10px; } }

এখন CSS অংশটি সম্পন্ন হয়েছে এবং সম্পূর্ণ CSS নীচের মত দেখাবে:

/* Font Awesome icons stylesheet */ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <style> /* Equal column height container */ .panel_container { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; } /* Four columns c1, c2, c3 & c4 */ .c1, .c2, .c3, .c4{ float: left; padding: 20px; width: 22%; } /* Color definitions for each column */ .c1{ background-color: lightgreen; } .c2{ background-color: skyblue; } .c3{ background-color: orange; } .c4{ background-color: lightgrey; } /* Font Awesome icon definition with 80x80 box */ .icon{ background: rgba(255, 87, 34, 0.77); color:#ffffff; width:80px; height:80px; margin:0 auto; border-radius:5px; font-size:40px; line-height:80px; text-align:center; } /* Hover effect for icons */ .icon:hover{ opacity: 0.8; background-color: #333333; color: yellow; } /* Icon alignment */ .fa { margin:20px 15px 20px 20px; } /* Heading */ .heading { font-size:20px; font-family: georgia; margin:20px; } /* Paragraph */ .para { font-size: 16px; font-family: verdana; } /* Button */ .btn { display: inline-block; padding: 6px 12px; margin-top: 20px; font-size: 16px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; color: #ffffff; background-color: #f1f1f1; border-color: #4cae4c; } /* Button hover */ .btn:hover { color: #ffffff; background-color: #b6f0ff; border-color: #398439; } /* Responsive CSS media queries */ @media only screen and (max-device-width: 768px) { .panel_container { display: block; } .c1, .c2, .c3, .c4 { width: 80% ; margin:10px; } } </style>

আপনার Weebly পৃষ্ঠার "হেডার কোড" বিভাগের অধীনে সম্পূর্ণ CSS আটকান।

কিভাবে Weebly এ আইকন প্যানেল উইজেট যুক্ত করবেন?

পৃষ্ঠায় হেডার কোড যোগ করুন

আইকন প্যানেল উইজেটের জন্য HTML সংজ্ঞায়িত করা

একটি "এম্বেড কোড" উপাদান টেনে আনুন এবং নীচে HTML কোডটি যুক্ত করুন। এটি একটি একক আইকন প্যানেলের জন্য এবং "ফা-হোম" আইকনটি হোম আইকন দেখানোর জন্য ব্যবহৃত হয়। পরীক্ষা করে দেখুন ফন্ট সন্ত্রস্ত আইকন রেফারেন্স তালিকা আপনার প্রয়োজনীয় আইকন চয়নের জন্য। এছাড়াও শিরোনাম, অনুচ্ছেদ এবং # কে আপনার প্রকৃত সামগ্রী এবং লিঙ্ক দিয়ে প্রতিস্থাপন করুন।

<div class="panel_container"> <div class="c1" style="width:100%"> /* Width is defined as 100% to align within a row */ <div class="icon"><span class="fa fa-home"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div>

নীচে বিভিন্ন উচ্চতার দুটি প্যানেলের কোড রয়েছে – একটিতে একটি বোতাম রয়েছে এবং অন্যটিতে আরও পড়ার পাঠ্য লিঙ্ক রয়েছে।

<div class="panel_container"> <div class="c1" style="width:100%"> /* Inline width for alignment */ <div class="icon"><span class="fa fa-home"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c2"style="width:100%"> /* Inline width for alignment */ <div class="icon"><span class="fa fa-pencil-square-o"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <div class="para"><a href="#">Read More</a></div> </div> </div>

দ্রষ্টব্য: প্রস্থের জন্য ইনলাইন স্টাইল ব্যবহার করুন = 100% কলামের জন্য যখন আপনি একক বা দুটি প্যানেল ব্যবহার করতে চান এবং পাশে থাকা কিছু অন্যান্য উপাদান ব্যবহার করুন। এটি নিশ্চিত করে যে প্যানেলটি সম্পূর্ণ প্রস্থের সাথে সংযুক্ত এবং শৈলীতে কলামের নির্ধারিত প্রস্থে সঙ্কুচিত হয় না। প্যানেলের প্রকৃত প্রস্থ এবং সংলগ্ন উপাদান Weebly এডিটরের উপাদানগুলির প্রস্থ সমন্বয় করে স্বাভাবিক হিসাবে সামঞ্জস্য করা যেতে পারে।

নিচে চারটি কলাম আইকন প্যানেল উইজেটের সম্পূর্ণ HTML কোড দেওয়া হল:

<div class="panel_container"> <div class="c1"> <div class="icon"><span class="fa fa-home"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c2"> <div class="icon"><span class="fa fa-pencil-square-o"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c3"> <div class="icon"><span class="fa fa-download"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c4"> <div class="icon"><span class="fa fa-shopping-cart"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div>

ডিফল্টরূপে উইজেটের কলামগুলি তাদের মধ্যে স্থান ছাড়া থাকে, আপনি কলামগুলির মধ্যে ফাঁক তৈরি করতে সঠিক মার্জিন প্রদান করতে পারেন।

.c1, .c2, .c3, .c4{ float: left; padding: 20px; width: 22%; margin-right: 20px; /* Add right margin to create space between panels */ }

কিভাবে Weebly এ আইকন প্যানেল উইজেট যুক্ত করবেন?

আপনি বিভিন্ন প্রকরণ সহ একক, দুই, তিন বা চারটি প্যানেল ব্যবহার করতে পারেন।

রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত