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

কিভাবে Weebly সাইটে কন্টেন্ট প্যানেল যোগ করবেন?

1

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

Weebly এর জন্য বিষয়বস্তু প্যানেল

এই নিবন্ধে আমরা CSS কোড ব্যবহার করে ছোটখাটো পরিবর্তন সহ প্রতিটি প্যানেলের চারটি ভিন্ন শৈলী ব্যাখ্যা করব। আমরা নীচের কোডটি নিয়ে যাওয়ার আগে একটি উদাহরণ বিষয়বস্তু প্যানেল যা আমরা কথা বলছি।

বিভ্রান্তি এড়ানোর জন্য আমরা প্যানেলের জন্য আলাদা কোডের সেট ব্যবহার করেছি কিন্তু যদি আপনি কোডটি দেখেন তবে বেশিরভাগ CSS ক্লাস সব প্যানেলের জন্য একই।

1 সহজ কন্টেন্ট প্যানেল

সাধারণ বিষয়বস্তু প্যানেলে একটি শিরোনাম এবং নীচের চিত্রের মতো একই পটভূমির রঙের সামগ্রী রয়েছে:

কিভাবে Weebly সাইটে কন্টেন্ট প্যানেল যোগ করবেন?

আপনি সাধারণ কন্টেন্ট প্যানেলের জন্য বিভিন্ন উপায়ে CSS কোড যোগ করতে পারেন:

  • প্রধান স্টাইলশীটের অধীনে "main.less" এবং ট্যাগ ছাড়া
  • পৃষ্ঠার " হেডার কোড " বিভাগে
  • HTML কোড সহ " এম্বেড কোড " উপাদানটির ভিতরে ।
<style> .panel { margin-bottom: 20px; background-color: #f4f4f4; border: 1px solid transparent; border-radius: 5px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); border-color: #d8d8d8; } .panel > .panel-heading { color: #333333; background-color: #f4f4f4; border-color: #d8d8d8; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-right-radius: 4px; border-top-left-radius: 4px; } .panel-title { font-size: 20px; margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .panel-body { padding: 15px; } </style>

একবার সিএসএস কোড যুক্ত হয়ে গেলে নীচের HTML কোডটি "এম্বেড কোড" উপাদানটির ভিতরে পেস্ট করুন:

<!-- Content Panel --> <div class="panel"> <div class="panel-heading"> <h3 class="panel-title">Default Panel</h3> </div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <!-- End Default Panel -->

শিরোনাম বিভাগে পটভূমির রঙ যুক্ত করার বিষয়ে কী? শিরোনামের রঙ সহ "অ্যাকোয়া" হিসাবে একটি সামগ্রী প্যানেল যুক্ত করার জন্য নীচের সিএসএস / এইচটিএমএল কোডটি ব্যবহার করুন। অ্যাকুয়া রঙের পরিবর্তে আপনি আপনার ইচ্ছামতো যেকোনো রঙ ব্যবহার করতে পারেন।

কিভাবে Weebly সাইটে কন্টেন্ট প্যানেল যোগ করবেন?

/* CSS Code Start */ <style> .panel-aqua { margin-bottom: 20px; background-color: #f4f4f4; border: 1px solid transparent; border-radius: 5px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); border-color: #86b998; } .panel-aqua > .panel-heading { background-color: #66a67c; border-color: #a6ccb4; color: #FFFFFF; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-right-radius: 4px; border-top-left-radius: 4px; } .panel-title { font-size: 20px; margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .panel-body { padding: 15px; } </style> /* CSS Code End */ <!-- HTML Code for Panel with Aqua Header --> <div class="panel-aqua"> <div class="panel-heading"> <h3 class="panel-title">Panel withh Aqua Header</h3> </div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <!-- End Aqua Panel -->

3 সম্পূর্ণ রঙের সামগ্রী প্যানেল

আসুন শিরোলেখ এবং বিষয়বস্তু উভয় বিভাগে রঙ যোগ করি:

কিভাবে Weebly সাইটে কন্টেন্ট প্যানেল যোগ করবেন?

এবং এখানে সম্পূর্ণ রঙের বিষয়বস্তু প্যানেলের কোড:

/* CSS Code Start */ <style> .panel-brown { margin-bottom: 20px; background-color: #f4f4f4; border: 1px solid transparent; border-radius: 5px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); border-color: #6f6f55; } .panel-brown > .panel-heading { background-color: #52523f; border-color: #8c8c6b; color: #FFFFFF; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-right-radius: 4px; border-top-left-radius: 4px; } .panel-title { font-size: 20px; margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .panel-body { padding: 15px; background: #6f6f55; color: #FFFFFF; } </style> /* CSS Code End */ <!-- HTML for Full Color Panel in Brown --> <div class="panel-brown"> <div class="panel-heading"> <h3 class="panel-title">Full Color Panel in Brown</h3> </div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <!-- End Brown Panel -->

পরিশেষে আসুন প্যানেলে একটি পাদলেখ যুক্ত করি এবং কিছু নোট যুক্ত করি।

কিভাবে Weebly সাইটে কন্টেন্ট প্যানেল যোগ করবেন?

নীচে ফুটার সহ সামগ্রী প্যানেলের কোড রয়েছে:

/* Start of CSS for Content Panel with Footer */ <style> .panel-with-footer { margin-bottom: 20px; background-color: #f4f4f4; border: 1px solid transparent; border-radius: 5px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); border-color: #bc5e43; } .panel-with-footer > .panel-heading { color: #ffffff; background-color: #bc5e43; border-color: #e4bfb4; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-right-radius: 4px; border-top-left-radius: 4px; } .panel-title { font-size: 20px; margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .panel-body { padding: 15px; background: #c97e69; color: #FFFFFF; } .panel-footer { background: #bc5e43; border-color: #e4bfb4; color: #FFFFFF; padding: 10px 15px; border-top: 1px solid #d8d8d8; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } </style> /* End of CSS for Content Panel with Footer */ <!-- HTML for Content Panel with Footer --> <div class="panel-with-footer"> <div class="panel-heading"> <h3 class="panel-title">Content Panel with Footer</h3> </div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="panel-footer">Panel Footer</div></div> <!-- End Panel with Footer-->

প্যানেলের ভিতরে ছবি যোগ করা

যদিও আমরা পাঠ্য বিষয়বস্তু সহ সমস্ত উদাহরণ দেখিয়েছি, আপনি যে কোনও HTML উপাদানকে সামগ্রী হিসাবে যুক্ত করতে পারেন । উদাহরণস্বরূপ, নীচে একটি পাদলেখের সাথে সামগ্রী প্যানেল রয়েছে যার ভিতরে একটি চিত্র রয়েছে।

কিভাবে Weebly সাইটে কন্টেন্ট প্যানেল যোগ করবেন?

চূড়ান্ত শব্দ

আপনি দেখতে পাচ্ছেন, উইবলিতে উইজেট তৈরি করা এবং একক বা একাধিক পৃষ্ঠায় সন্নিবেশ করা খুব সহজ । কন্টেন্ট প্যানেল কাস্টমাইজ করতে পারেন আকার, রং এবং প্যানেলের ভিতরে উপাদান ertোকানোর জন্য।

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

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