স্পেসার ব্লক কীভাবে ব্যবহার করবেন


স্পেসার ব্লক কীভাবে ব্যবহার করবেন এবং সাইট এডিটরে থাকা বিভিন্ন রিসাইজিং এবং স্টাইলিং টুলগুলি কীভাবে ব্যবহার করতে হয় তা শিখুন।

শেখার ফলাফলঃ

  • আপনার ওয়ার্ডপ্রেস ওয়েবসাইটে স্পেসার ব্লক যোগ করুন।
  • স্পেসার ব্লকগুলিকে উন্নত এবং স্টাইল করার জন্য বিভিন্ন টুল ব্যবহার।
  • স্পেসার ব্লককে সঠিক মাত্রায় রিসাইজ করতে টুলগুলির ব্যবহার।
  • স্পেসার ব্লকগুলিকে আপনার পোস্ট, পেজ বা সাইট এডিটরের বিভিন্ন অংশে নিয়ে যাওয়া।
  • গ্রুপ ব্লক ব্যবহার করে স্পেসারের ব্যাকগ্রাউন্ডে রং যোগ করা।

সম্পূরক প্রশ্ন

১. স্পেসার ব্লকের উদ্দেশ্য কী?

  • ১. কিভাবে একটি প্যারাগ্রাফ বড় করতে হয়।
  • ২.‌ ছবি গুলোকে একসাথে কাছাকাছি আনা।
  • ৩. ব্লকগুলির মধ্যে স্পেস বা ফাঁকা স্থান যোগ করা।

২. একটি স্পেসার ব্লক এড করার উপায় কী?

  • ১. /spacer
  • ২. আপনার কম্পিউটারকে বলুন, “Spacer block appear”
  • ৩. একটি গ্রুপ ব্লক এড করুন।

৩. স্পেসারের কোনো স্টাইলিং টুল আছে কি?

  • ১. খুবই কম।
  • ২. এত বেশি যে আমি গুনে রাখতে পারি না।

উত্তর ১.৩ , ২.১ , ৩.১

ট্রান্সক্রিপ্ট

হ্যালো এবং ওয়ার্ডপ্রেসে স্বাগতম। এটি স্পেসার ব্লক ব্যবহারের উপর একটি টিউটোরিয়াল, আমি ওয়ার্ডপ্রেস ২০২৩ থিমটি ব্যবহার করব। এই টিউটোরিয়ালের উদ্দেশ্যগুলির একটি তালিকা এখানে দেওয়া হলো। আপনার ওয়ার্ডপ্রেস ওয়েবসাইটে স্পেসার ব্লক যোগ করুন। স্পেসার ব্লকগুলি উন্নত এবং স্টাইল করতে বিভিন্ন টুল ব্যবহার করুন। স্পেস ব্লকটি সঠিক মাত্রায় রিসাইজ করতে টুলগুলি ব্যবহার করুন, আপনার পোস্ট, পেজ বা সাইট এডিটরের বিভিন্ন অংশে স্পেসার ব্লকগুলি সরান। গ্রুপ ব্লক ব্যবহার করে একটি স্পেসারে ব্যাকগ্রাউন্ড রং যোগ করুন। আমি একটি স্পেসার ব্লক পৃষ্ঠা সেট আপ করেছি এবং কিছু শিরোনাম, প্যারাগ্রাফ এবং ছবি সেট আপ করেছি যাতে দেখানো যায় যখন একটি পৃষ্ঠায় খুব বেশি গাদাগাদি থাকে তখন জিনিসগুলি একে অপরের খুব কাছাকাছি থাকে। আমাদের শিরোনাম এবং একটি প্যারাগ্রাফ আছে, তারপর একটি শিরোনাম, দুটি প্যারাগ্রাফ, কিছু ছবি, আপনি দেখতে পাবেন যে প্যারাগ্রাফ এবং ছবির মধ্যে খুব সামান্য স্থান আছে। এটি কেমন দেখাচ্ছে। এখন, আমরা যা অর্জন করতে যাচ্ছি তা হলো। তাই আমাদের শিরোনাম এবং প্যারাগ্রাফের মধ্যে একটু বেশি জায়গা আছে, আমি এখানে স্পেসার ব্লক কীভাবে যোগ করতে হয় তা দেখাবো এবং সত্যিই এটিতে কিছু রং দেবো, তারপর এখানে আরেকটি স্পেসার যোগ করবো যাতে পৃষ্ঠাটি একটু শ্বাস নিতে পারে এবং দর্শকদের চোখ স্ক্রোল করার সময় বিশ্রামের জন্য একটি জায়গা থাকে। তাই আমরা এডিট পৃষ্ঠা মোডে যাবো। আমি আমার তালিকা ভিউ খুলবো। আপনি দেখতে পাবেন আমি বিভিন্ন গ্রুপ একত্র করেছি। গ্রুপ এক হলো আমাদের শিরোনাম এবং প্যারাগ্রাফ। এবং তারপর গ্রুপ দুই হলো একটি কলাম ব্লক, আমার তিনটি কলাম আছে। এবং তারপর প্রতিটি কলামের মধ্যে একটি করে ছবি আছে। এবং তৃতীয় গ্রুপ হলো আরেকটি শিরোনাম সহ প্যারাগ্রাফ। আমি আমার সেটিংস এবং স্টাইলিং খুলবো। স্পেসার ব্লক দিয়ে, আপনার কিছু সীমিত স্টাইলিং রয়েছে। এখানে সেটিংসগুলি আছে, আপনার কেবল একটি উচ্চতা রয়েছে, আপনি এটিকে একটি টগলে পরিবর্তন করতে পারেন, টি-শার্ট সাইজ ছোট, মাঝারি, বড়, আপনি পিক্সেল ব্যবহার করতে পারেন অথবা এখানে টগলটি ব্যবহার করতে পারেন। এখন পর্যন্ত শৈলীগুলির মধ্যে শুধুমাত্র উপরের এবং নিচের মার্জিন রয়েছে যা আপনি সামঞ্জস্য করতে পারবেন, যদি আপনি সেখানে ক্লিক করেন, এই মূহুর্তে এখানে কিছুই নেই।

২:২৬

চলুন এখন আমরা একটি স্পেসার যোগ করি। তাই আমরা এখন আমাদের প্যারাগ্রাফ থেকে শুরু করব।

২:৩৪

আমরা তিনটি ডটে ক্লিক করব। তারপর নিচে স্ক্রল করে অ্যাড আফটার-এ যাবো। আপনি দেখবেন যে আপনার কার্সরটি ঝলকানি শুরু করবে এবং বলবে ব্যাকস্ল্যাশ টাইপ করে একটি ব্লক নির্বাচন করুন। তাই আমরা ব্যাকস্ল্যাশ টাইপ করে স্পেসার লিখবো, আমরা সেটিতে ক্লিক করবো। ডিফল্ট অনুযায়ী, এটি ১০০ পিক্সেল দেয়, যেমন আপনি এখানে দেখতে পাচ্ছেন, আমি মনে করি এটি ঐ জায়গার জন্য একটু বেশিই। তাই আমরা এটিকে একটু সামঞ্জস্য করবো, আমি চাই এটিকে একটু বড় করতে যাতে আমরা আমাদের প্রধান পৃষ্ঠা দেখতে পারি। তাই সম্ভবত আমি ৭০ করবো, আপডেটে ক্লিক করবো। আমরা আমাদের মেইন পেজ যাবো, সম্পাদনা করা অংশে ফিরে যাবো, নিশ্চিত হবো যে আমি সেই পৃষ্ঠাটি রিফ্রেশ করেছি। আপনি দেখতে পাবেন যে এখন সেখানে একটি স্থান আছে। ঠিক আছে, খুবই সহজ যোগ করা। আমাদের পরবর্তী অংশটি গ্রুপ এক এবং গ্রুপ দুইয়ের মধ্যে যেখানে আমাদের ছবি আছে। এটি আমি একটু ভিন্নভাবে করবো, স্পেসার ব্লক যোগ করার বিভিন্ন উপায় আছে। তাই আমি দ্বিতীয় গ্রুপে ক্লিক করবো, যা এখানে। এবং আমি তিনটি ডটে ক্লিক করবো, এবার আমি অ্যাড বিফোর করবো। আবারও, আমি ব্যাকস্ল্যাশ করতে পারি। অথবা আমি এখানে প্লাস চিহ্নে গিয়ে স্পেসার লিখতে পারি। তাই স্পেসার ব্লক খোঁজার দুটি ভিন্ন উপায় রয়েছে, তারপর লাইব্রেরী ফিরে যেতে শুধু এক্স-এ ক্লিক করুন। এবং তারপর আমি আমার লিস্ট ভিউতে ফিরে যেতে উপরে তিনটি স্ল্যাশে ক্লিক করতে পারি। আমরা এখানে আকার সামঞ্জস্য করতে পারি, আমি এটিকে একটু বড় করবো কারণ আমরা এটি দিয়ে মজার কিছু করবো। ঠিক আছে। আবারও, আমি বলেছি এখানে কোনো স্টাইলিং নেই। নিশ্চিত হবো আমি এটি আপডেট করেছি যাতে এটি উপস্থিত হয়। তবে আমি যা করতে পারি তা হলো আমার কিছু বেসিক টুলস এখানে আছে। আমার কাছে স্পেসার আইকন আছে, আমি এটিকে বিভিন্ন স্থানে টেনে নিয়ে যেতে পারি। আমি এটিকে এখানে নিচে রাখতে পারি। এই বাটনটি উপরে সরান, নিচে সরান একই কাজ করে। এবং তৃতীয় অপশন, এটি কেবল আপনার মৌলিক সামগ্রিক টুলবার। তবে এখানে, যদি আমি এখানে ক্লিক করি, আমার কাছে এই ব্লকটিকে কলামের অংশ বা গ্রুপের অংশ করার বিকল্প রয়েছে। তাই আমরা এটিকে একটি গ্রুপ করবো। এখন আমি গ্রুপ সম্পাদনায় আছি। এবং আপনি দেখতে পাবেন এটি এখানে, তাই আমার আরেকটি অপশন রয়েছে এবং আমি এটিকে ফুল উইড করতে পারি। আমি এটিকে ওয়াইড উইড করতে পারি এবং এরকম অন্যান্য জিনিস করতে পারি। আপনি লিস্টভিউতে দেখতে পাচ্ছেন, স্পেসার ব্লকটি এখনও সেখানে আছে, এটি কেবল একটি গ্রুপের মধ্যে রয়েছে। তাই সেই গ্রুপটি আমাকে আরও সুযোগ দিচ্ছে। এবং আমি ইনার ব্লক ইউজ কন্টেন্ট উইড বন্ধ করবো, কারণ আমি চাই স্পেসার ব্লকটি পুরো প্রস্থে যাক কারণ আমি এটিকে একটি ব্যাকগ্রাউন্ড রং দিতে যাচ্ছি। তাই আমি আমার স্টাইলে যাবো। এবং এখন আমার রং যোগ করার ক্ষমতা আছে, সেই নীল রং যোগ করবো, তারপর আপডেট ক্লিক করবো। আমরা সেই পৃষ্ঠায় ফিরে যাবো, রিফ্রেশ করবো। এবং এখন আমাদের একটি ব্যান্ড আছে, যা একটি স্পেসার। এবং আমরা সর্বদা ফিরে গিয়ে এটি সামঞ্জস্য করতে পারি যদি এটি খুব বড় বা খুব ছোট হয়। সর্বশেষ স্পেসারটি আমরা ছবিগুলির পরে এবং শিরোনামের আগে রাখবো। আমি ছবিগুলির গ্রুপটি হাইলাইট করবো, তারপর তিনটি ডটে ক্লিক করবো। আমি অ্যাড আফটার করবো, ব্যাকস্ল্যাশ স্পেসার টাইপ করবো, এটিতে ক্লিক করবো এবং এটিকে একটু সামঞ্জস্য করবো। আপডেটগুলি পাবো, আমার প্রধান পৃষ্ঠায় ফিরে যাবো। এবং সেখানে আমার আরেকটি স্থান আছে। আরও শেখার অভিজ্ঞতার জন্য দয়া করে learn.wordpress.org ভিসিট করুন। ধন্যবাদ।

Workshop Details


Presenters

Laura Adamonis
@lada7042

– I own Add A Little Digital Services where I provide website design services
– I volunteer as a content creator with the Learn WordPress training team
– I am a team rep for the training team for 2024
– Contributor to DEIB working group
– I am a member of several WordPress Meetups
– I am a previous robotics and Lego educator
– I love helping others learn tech

Other Contributors

Shipon Karmakar