হরিজনটাল পিরামিড গ্যালারি
এই সেশনে, আমরা শিখব কিভাবে একটি হরিজনটাল পিরামিড গ্যালারি তৈরি করা যায় শুধুমাত্র একটি রো ব্লক এবং কভার ব্লক ব্যবহার করে।
শেখার ফলাফল
১. একটি হরিজনটাল পিরামিড গ্যালারি তৈরি করা।
২. রো ব্লক এবং একাধিক কভার ব্লক নেস্টিং করা ।
৩. একটি কভার ব্লক স্পেসিং পরিবর্তন করা।
৪. কভার ব্লকের মধ্যে ব্লক ব্যবধান অপসারণ।
৫. একটি কভার ব্লকের ন্যূনতম উচ্চতা পরিবর্তন করা।
৬. একটি কভার ব্লকের ওভারলে (উপরের অংশ) পরিবর্তন করা।
সম্পূরক প্রশ্ন
১. গ্রুপ ব্লক এবং একটি রো ব্লকের মধ্যে পার্থক্য কি?
২. রো ব্লক ব্যবহার করার সময় আপনি কিভাবে মোবাইলের জন্য ছবি স্ট্যাক (স্তূপাকার) করবেন?
৩. কভার ব্লক ব্যবহার করার সুবিধা কি কি?
ট্রান্সক্রিপ্ট
হাই, লার্ন ওয়ার্ডপ্রেস স্বাগতম। এই সংক্ষিপ্ত ভিডিওতে, আমরা দেখতে চলেছি শুধুমাত্র ব্লক ব্যবহার করে কিভাবে আমরা এই হরিজনটাল পিরামিড গ্যালারিটি পুনরায় তৈরি করতে পারি, যার জন্য কোন কোড, কোন প্লাগইন এবং কোন সিএসএস এর প্রয়োজন নেই। এবং সবচেয়ে ভালো ব্যাপার হল যে এটি মোবাইল ডিভাইসে প্রদর্শিত হয়, আপনার শুধুমাত্র একটি রো ব্লক এবং কভার ব্লকের প্রয়োজন হবে। তাহলে চলুন শুরু করা যাক।
শুরু করার জন্য আমরা একটি নতুন পেজ তৈরি করব এবং একটি রো ব্লক যুক্ত করব। তারপর আমরা আমাদের প্রথম কভার ব্লক যোগ করব এবং তারপর মিডিয়া যোগ করব। লিস্ট ভিউ খুলুন এবং তারপরে প্যারাগ্রাপটি সরাতে তিনটি উল্লম্ব বিন্দু��ে ক্লিক করুন, কারণ এটা আমরা ব্যবহার করব না। তারপরে, ছবিটি নির্বাচন করুন এবং ��পনার সাইডবার সেটিংস ব্যবহার করুন এবং ফোকাল পয়েন্ট পিকারটিকে মুখের মাঝখানে পরিবর্তন করুন যাতে ছবির সবচেয়ে গুরুত্বপূর্ণ অংশটি সর্বদা প্রদর্শিত হয়, বিশেষ করে মোবাইলে। পরিশেষে, অপাসিটি (অস্বচ্ছতাকে) শূন্যে পরিবর্তন করুন যেন আমাদের কাছে একটি পরিষ্কার ছবি থাকে। এখন আমরা এই ধাপটি আরও চারবার পুনরাবৃত্তি করব।
নিশ্চিত করুন যে আপনি রো ব্লক নির্বাচন করেছেন, একটি কভার ব্লক যোগ করুন, মিডিয়া যোগ করুন, অনুচ্ছেদটি সরান, ফোকাল পয়েন্ট পিকার পরিবর্তন করুন এবং অপাসিটি( অস্বচ্ছতা) শূন্যে সেট করুন। এবং সব শেষে, পঞ্চম কভার ব্লক। একবার আপনি আপনার সমস্ত ছবি যোগ করলে, আপনি ইমেজ পিলারের মধ্যে ব্যবধান সরাতে চাইবেন। এটি করার জন্য, লিস্ট ভিউতে রো ব্লক নির্বাচন করুন এবং আপনার সাইডবার সেটিংসে ব্লক স্পেসিং টি শূন্যে পরিবর্তন করুন।
অবশেষে, আমরা সেই পিরামিড ইভেক্ট তৈরি করার জন্য প্রতিটি কভার ব্লকের উচ্চতা সামঞ্জস্য করতে যাচ্ছি। আপনি পিক্সেল আকার নিয়ে পরীক্ষা করতে পারেন, তবে চলুন প্রথম কভার ব্লকের ন্যূনতম উচ্চতা ১০০ পিক্সেল করা যাক। কভার ব্লক নির্বাচন করুন এবং কভারের ন্যূনতম উচ্চতা ১০০ এ পরিবর্তন করুন। এখন আমরা ছোট থেকে বড়োতে যেতে প্রতিটি কভার ব্লকের ন্যূনতম উচ্চতা ৫০ পিক্সেল বাড়াতে যাচ্ছি। সুতরাং দ্বিতীয় কভার ব্লক হবে ১৫০, তারপর ২০০, ২৫০ এবং ��০০।
এবং এখন আমরা এগিয়ে যেতে পারি একটি ভিন্ন ট্যাবে এবং তারপরে মোবাইল ভিউতেও প্রিভিউ করতে পারি। আমি সাইডবার সেটিংস ছেড়ে দিয়েছি যাতে ছবিগুলি মোবাইলে স্ট্যাক না হয় তা নিশ্চিত করতে একাধিক লাইনে মোড়ানোর অনুমতি দেয়৷
এমনকি আপনার কাছে প্রতিটি কভার ব্লকের কভার ওভারলে পরিবর্তন করার অপশন রয়েছে যেখানে ছবি নির্বাচন করে, ওভারলে রঙ পরিবর্তন করে এবং ওপাসিটি (অস্বচ্ছতা) পরিবর্তন করে একটি ভিন্ন ভিজ্যুয়াল ইফেক্ট তৈরি করা যায়। কয়েকটি ক্লিকে, আপনি এটি তৈরি করতে পারেন এবং এটাই।
তৈরি করতে থাকুন চমৎকারভাবে !