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

কিভাবে Weebly এ ফটো প্যানেল উইজেট যোগ করবেন?

1

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

একক ফটো প্যানেলের উইজেটগুলি নীচের মত দেখাবে এবং আপনি একক উইজেট বাড়িয়ে একটি রেস্তোরাঁ বা গ্যালারি তৈরি করতে পারেন।

কিভাবে Weebly এ ফটো প্যানেল উইজেট যোগ করবেন?

Weebly এর জন্য একক ছবির প্যানেল

একটি একক ছবির প্যানেল উইজেট তৈরি করা

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

ফটো প্যানেল উইজেটের বৈশিষ্ট্য

  • একটি একক উইজেট বা একাধিক কলাম হিসাবে যোগ করুন।
  • কোন প্রশ্ন ছাড়াই সহজ CSS দিয়ে তৈরি।
  • আপনার প্রয়োজন অনুযায়ী রঙ এবং ফন্ট কাস্টমাইজ করুন।
  • একটি কল টু অ্যাকশন বা রেস্তোরাঁর মেনুর মতো পূর্ণ পৃষ্ঠা উইজেটের জন্য ব্যবহার করুন।
  • সম্পূর্ণ প্রতিক্রিয়াশীল স্বয়ংক্রিয়ভাবে মোবাইল ডিভাইসের প্রস্থের সাথে মানানসই।

Weebly সাইটে ছবি আপলোড করা হচ্ছে

প্রথম ধাপ হল আপনার Weebly সাইটে "থিম> HTML / CSS সম্পাদনা করুন> সম্পদ> ফাইল আপলোড করুন …" এর অধীনে প্রয়োজনীয় ছবি আপলোড করা। আপলোড করা ছবিতে নিম্নলিখিত লিঙ্ক থাকবে:

https://yoursite.com/files/theme/image.jpg

সিঙ্গেল ফটো প্যানেলের জন্য CSS

প্রথমে আমরা বেইজ হিসাবে ব্যাকগ্রাউন্ড-কালার সহ একটি ধারক প্যানেল তৈরি করি। এটি প্যানেলের নিচের অংশে প্রদর্শিত রঙ এবং আপনি আপনার সাইটের থিম অনুসারে এটি যেকোনো রঙে পরিবর্তন করতে পারেন।

/* Photo Panel Container Definition */ .panel_container { float: left; border: 1px solid; border-color: lightgrey; background-color: beige; }

পাত্রে উপরের দিকে একটি ছবি এবং নীচে বিষয়বস্তু থাকবে। আসুন কিছু হোভার ইফেক্ট সহ ছবির উচ্চতা 200px হিসাবে সংজ্ঞায়িত করি।

/* Styles for Image */ .photo{ width:100%; height: 200px; margin:0; } /* Hover Effect for Image */ .photo:hover{ opacity: 0.8; color: yellow; }

পরবর্তীতে, আমরা হভারিং ইফেক্ট সহ কল ​​টু অ্যাকশন বাটন সংজ্ঞায়িত করি:

/* Call to Action Button */ .btn { display: inline-block; border: 1px solid #969696; margin: 15px; padding: 10px 32px 11px; font: bold 16px 'Economica', sans-serif; border-radius: 5px; color: gray; } /* Button Hover Effect */ .btn:hover { color: grey!important; border-color: #aaccaa; background-color: #aaccaa; }

CSS এর চূড়ান্ত অংশ হল লিঙ্ক, অনুচ্ছেদ এবং শিরোনামের জন্য অতিরিক্ত শৈলী নির্ধারণ করা।

/* Link Hover Effect to Overcome Default Effect */ a:hover { color: grey !important; } /* Paragraph Definition */ .para { font-size: 16px; font-family: verdana; padding: 10px; } /* Heading Definition */ .heading { font-size:20px; font-family: georgia; margin: 15px 0px 10px 0px; }

একটি সিঙ্গেল প্যানেলের জন্য সম্পূর্ণ সিএসএস নিচে দেখবে এবং আপনার ওয়েবলি পৃষ্ঠার "পৃষ্ঠা> আপনি যে পৃষ্ঠাটি প্যানেল যোগ করতে চান তা নির্বাচন করুন> এসইও সেটিংস> হেডার কোড" এর অধীনে কোড যোগ করুন।

কিভাবে Weebly এ ফটো প্যানেল উইজেট যোগ করবেন?

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

<style> /* Photo Panel Container Definition */ .panel_container { float: left; border: 1px solid; border-color: lightgrey; background-color: beige; } /* Styles for Image */ .photo{ width:100%; height: 200px; margin:0; } /* Hover Effect for Image */ .photo:hover{ opacity: 0.8; color: yellow; } /* Call to Action Button */ .btn { display: inline-block; border: 1px solid #969696; margin: 15px; padding: 10px 32px 11px; font: bold 16px 'Economica', sans-serif; border-radius: 5px; color: gray; } /* Button Hover Effect */ .btn:hover { color: grey!important; border-color: #aaccaa; background-color: #aaccaa; } /* Link Hover Effect to Overcome Default Effect */ a:hover { color: grey !important; } /* Paragraph Definition */ .para { font-size: 16px; font-family: verdana; padding: 10px; } /* Heading Definition */ .heading { font-size:20px; font-family: georgia; margin: 15px 0px 10px 0px; } </style>

একক ফটো প্যানেলের জন্য এইচটিএমএল

একবার সিএসএস যুক্ত হয়ে গেলে নিচের এইচটিএমএল কোডটি একটি "এম্বেড কোড" উপাদানটির ভিতরে যুক্ত করুন। আপনার নিজের সঙ্গে ইমেজ ইউআরএল প্রতিস্থাপন নিশ্চিত করুন।

<div class="panel_container"> <div> <img class="photo" src="https://img.webnots.com/2015/10/Weebly-Carbon-Upgrade.gif"> <h3 class="heading">Weebly Carbon Upgrade</h3> <p class="para">Weebly introduced a third generation upgrade and named it as Carbon...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div>

একটি সম্পূর্ণ পৃষ্ঠা ছবির প্যানেল উইজেট তৈরি করা হচ্ছে

আসুন একটি রেস্তোরাঁর মেনুর উদাহরণ দেই যাতে চারটি কলাম এবং একাধিক সারির মেনু আইটেম থাকে। উপরের একক প্যানেল উইজেটটি প্যানেলগুলিকে নমনীয় সমান উচ্চতার পাত্রে ফিট করার জন্য সংশোধন করতে হবে যাতে চারটি কলাম যেমন c1, c2, c3 এবং c4 এবং অন্যান্য সমস্ত স্টাইল একই থাকে। নীচে উদাহরণ পদ্ধতি, আপনি একটি একক পৃষ্ঠায় একাধিক প্যানেল তৈরি করতে পারেন।

কিভাবে Weebly এ ফটো প্যানেল উইজেট যোগ করবেন?

Weebly ফটো প্যানেল উইজেট

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

<style> /* Photo Panel Container Definition */ .photo_panel_container { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; margin: 10px 10px 80px 10px; } .c1, .c2, .c3, .c4 { float: left; border: 1px solid; border-color: lightgrey; background-color: beige; } .c1, .c2, .c3 { margin-right: 15px; } /* Styles for Image */ .photo{ width:100%; height: 200px; margin:0; } /* Hover Effect for Image */ .photo:hover{ opacity: 0.8; color: yellow; } /* Call to Action Button */ .btn { display: inline-block; border: 1px solid #969696; margin: 15px; padding: 10px 32px 11px; font: bold 16px 'Economica', sans-serif; border-radius: 5px; color: gray; } /* Button Hover Effect */ .btn:hover { color: grey!important; border-color: #aaccaa; background-color: #aaccaa; } /* Link Hover Effect to Overcome Default Effect */ a:hover { color: grey !important; } /* Paragraph Definition */ .para { font-size: 16px; font-family: verdana; padding: 10px; } /* Heading Definition */ .heading { font-size:20px; font-family: georgia; margin: 15px 0px 10px 0px; } @media only screen and (max-device-width: 768px) { .photo_panel_container { display: block; } .c1, .c2, .c3, .c4 { width: 80% ; margin:10px; } } </style>

নীচে দুটি সারিতে থাকা উইজেটের আটটি প্যানেল রয়েছে। ডামি কন্টেন্ট এবং ইমেজ ইউআরএল আপনার নিজের দ্বারা প্রতিস্থাপন করে একটি " এম্বেড কোড " এলিমেন্টের ভিতরে নিচের HTML যোগ করুন ।

<!-- First Row Contains 4 Panels --> <div class="photo_panel_container"> <div class="c1"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img1.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c2"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img2.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c3"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img3.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c4"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img4.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div> <!-- Second Row Contains another 4 Panels --> <div class="photo_panel_container"> <div class="c1"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img5.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c2"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img6.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c3"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img7.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c4"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img8.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div> <!-- Add More Rows Here -->

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

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