কী টেকঅ্যাওয়ে
- রাজমিস্ত্রি মানে ছবিগুলি একটি ইউনিফর্ম কার্ডে ক্রপ করার পরিবর্তে তাদের নিজস্ব অনুপাত বজায় রাখে, তাই একটি প্রতিকৃতি ফটো লম্বা থাকে।
- এলিমেন্টরের বিনামূল্যের ইমেজ গ্যালারি উইজেটে কোনো রাজমিস্ত্রির বিকল্প নেই। এর লেআউট নিয়ন্ত্রণ হল কলাম এবং ফাঁক।
- মাস্টার অ্যাডনস ফিল্টারযোগ্য ইমেজ গ্যালারিতে একটি রাজমিস্ত্রির সুইচ রয়েছে যা ক্রপিং বন্ধ করে দেয়, কিন্তু সামনের প্রান্তের স্ক্রিপ্টটি আইটেমগুলিকে সারিতে রাখে, তাই লম্বা কার্ডগুলি একই সারিতে ছোটগুলির নীচে একটি ফাঁক রেখে যায়।
- আপনি যদি কোনও ফাঁক ছাড়াই শক্তভাবে প্যাক করা কলাম চান, তাহলে একটি পাত্রে CSS কলামগুলি একটি বিনামূল্যে ইনস্টল করার সৎ রুট।
- পণ্যের শট এবং দলের ফটোগুলির জন্য একটি অভিন্ন গ্রিড সাধারণত রাজমিস্ত্রির চেয়ে ভাল পড়ে, তাই পরিবর্তে চিত্রের দিক অনুপাত চালু করুন।
রাজমিস্ত্রি হল সেই বিন্যাস যেখানে ছবিগুলি তাদের স্বাভাবিক উচ্চতায় বসে এবং কলামগুলি স্তব্ধ হয়ে যায়, আকৃতি Pinterest পরিচিত করে তোলে। এটি ফটোগ্রাফির জন্য উপযুক্ত, যেখানে একটি পোর্ট্রেট ফ্রেমকে একটি বর্গক্ষেত্রে ক্রপ করা অর্ধেক ছবি ফেলে দেয়।
এলিমেন্টর তিনটি ভিন্ন উপায়ে এর কাছাকাছি যেতে পারে এবং তারা সবাই একই জিনিস তৈরি করে না। তাদের মধ্যে একটিতে রাজমিস্ত্রি লেবেলযুক্ত একটি সুইচ রয়েছে যা নামের পরামর্শের চেয়ে কম করে, যা আপনি নির্মাণের আগে পড়ার মতো অংশ।
বিষয়বস্তুর সারণী
রাজমিস্ত্রি, গ্রিড এবং ন্যায়সঙ্গত: পার্থক্য
| বিন্যাস | এটা ইমেজ কি করে | জন্য সেরা পড়া |
|---|---|---|
| গ্রিড | প্রতিটি ছবি একই কার্ড আকারে ক্রপ করে | পণ্য, দলের ফটো, লোগো, আপনি পরিপাটি চান কিছু |
| রাজমিস্ত্রি | প্রতিটি ছবির উচ্চতা, কলাম স্তব্ধ রাখে | মিশ্র ফটোগ্রাফি, ল্যান্ডস্কেপের পাশে প্রতিকৃতি |
| ন্যায়সঙ্গত | অনুপাত রাখে কিন্তু প্রতিটি সারি একই উচ্চতায় প্রসারিত করে | ছবির প্রবন্ধ এবং যোগাযোগ শীট |
রাজমিস্ত্রি এবং ন্যায়সঙ্গত উভয়ই মূল ফসল রক্ষা করে। পার্থক্য হল গণিত কোন দিকে চলে: রাজমিস্ত্রি কলামের প্রস্থ ঠিক করে এবং উচ্চতা পরিবর্তিত হতে দেয়, ন্যায়সঙ্গত সারির উচ্চতা ঠিক করে এবং প্রস্থ পরিবর্তিত হতে দেয়।
রুট 1: এলিমেন্টরের গ্যালারি উইজেট (প্রো)
এলিমেন্টরের বিনামূল্যের ইমেজ গ্যালারি উইজেটে দুটি লেআউট নিয়ন্ত্রণ রয়েছে, কলাম এবং ব্যবধান, এবং এটি একটি অভিন্ন কার্ডে ক্রপ করে। গ্যালারি উইজেট, যা প্রো, তিনটি মান সহ একটি লেআউট নিয়ন্ত্রণ রয়েছে: গ্রিড, জাস্টিফাইড এবং রাজমিস্ত্রি। রাজমিস্ত্রির আসল জিনিস আছে, কলামগুলি কোন ফাঁক ছাড়াই প্যাক করা আছে এবং প্রো পোর্টফোলিও উইজেটের নিজস্ব ম্যাসনরি সুইচও রয়েছে। আপনি যদি ইতিমধ্যেই প্রো-এর মালিক হন, তাহলে এটাই সবচেয়ে ছোট পথ এবং ইনস্টল করার মতো কিছুই নেই।
রুট 2: ফিল্টারযোগ্য গ্যালারিতে রাজমিস্ত্রির সুইচ
একটি বিনামূল্যে এলিমেন্টর ইনস্টল, ফিল্টারযোগ্য ইমেজ গ্যালারি ইমেজ অ্যাসপেক্ট রেশিও এবং গুটারের পাশে এর সেটিংস বিভাগে একটি রাজমিস্ত্রির সুইচ রয়েছে।
রাজমিস্ত্রি চালু এবং চিত্রের দিক অনুপাত বন্ধ থাকায়, চিত্রগুলি তাদের নিজস্ব অনুপাত রাখে, তাই একটি প্রতিকৃতি ফ্রেম লম্বা থাকে এবং কিছুই কাটা হয় না। কলাম প্যাকিং এমন অংশ যা আপনি পাবেন না। বর্তমান রিলিজে স্ক্রিপ্ট যা গ্রিডটি সারিবদ্ধভাবে আইটেমগুলিকে সাজায়, তাই একটি ছোট চিত্র পরবর্তী সারি শুরু না হওয়া পর্যন্ত এটির নীচে একটি খালি জায়গা ছেড়ে দেয়।
এটি উপযোগী যখন আপনার ছবিগুলি আকৃতিতে মোটামুটি একই রকম হয়, যেহেতু কিছুই ক্রপ করা হয় না এবং সারিগুলি ঝরঝরে থাকে৷ প্যাক করা Pinterest-এর জন্য একটি বিনামূল্যে ইনস্টলে দেখুন, রুট 3 হল উত্তর৷।
রুট 3: একটি পাত্রে CSS কলাম
CSS-এর একটি কলাম লেআউট রয়েছে যা রাজমিস্ত্রির মতো বিষয়বস্তু প্যাক করে। আপনার ছবিগুলিকে একটি পাত্রে রাখুন, এতে CSS-এর কয়েকটি লাইন যোগ করুন এবং ব্রাউজার কোনও স্ক্রিপ্ট ছাড়াই কাজ করে।
selector {
column-count: 3;
column-gap: 24px;
}
selector img {
width: 100%;
margin-bottom: 24px;
break-inside: avoid;
}
@media (max-width: 767px) {
selector { column-count: 2; }
}দ্য selector কীওয়ার্ডটি আপনি যে উপাদানটি সম্পাদনা করছেন তা লক্ষ্য করে, তাই এই স্নিপেটটি কন্টেইনারের কাস্টম CSS বক্সে যায়। একটি বিনামূল্যে এলিমেন্টর ইনস্টল করুন যে বক্স একটি অ্যাডন থেকে আসে যেমন কাস্টম সিএসএস, যেহেতু Elementor তার নিজস্ব কাস্টম CSS ক্ষেত্রটিকে Pro হিসাবে চিহ্নিত করে৷।
ট্রেড-অফ অর্ডার করছে। সিএসএস কলাম প্রতিটি কলামে উপরে থেকে নীচে পূরণ করে, তাই পড়ার ক্রম কলাম এক, তারপর কলাম দুই নীচে চলে। একটি গ্যালারির জন্য কেউ ক্রমানুসারে পড়ে না যা ঠিক আছে। কালানুক্রমিক কিছুর জন্য তা নয়।
ছবির মাপ যা রাজমিস্ত্রিকে সঠিক দেখায়
- একটি সামঞ্জস্যপূর্ণ প্রস্থে আপলোড করুন। প্রায় 1,200px একটি তিন কলাম গ্রিডের জন্য প্রচুর এবং পৃষ্ঠাটি হালকা রাখে।
- উচ্চতা পরিবর্তিত হতে দিন এবং প্রস্থ একই রাখুন, যেহেতু রাজমিস্ত্রি কলামের প্রস্থ ঠিক করে কাজ করে।
- ইচ্ছাকৃতভাবে ইমেজ রেজোলিউশন সেট করুন। নয়টি ইমেজ গ্রিডে পূর্ণ আকারের ফাইলগুলি কোন ভিজ্যুয়াল লাভের জন্য একটি ধীর পৃষ্ঠা।
- গটার স্লাইডারটি প্রতিক্রিয়াশীল এবং 0 থেকে 40px পর্যন্ত চলে, তাই আপনি ফোনে এটি শক্ত করতে পারেন।
- একটি চরম ফ্রেম এড়িয়ে চলুন। বর্গাকার চিত্রগুলির মধ্যে একটি একক খুব লম্বা প্যানোরামা অন্য সবকিছু থেকে চোখ সরিয়ে দেয়।
যখন একটি অভিন্ন গ্রিড ভাল উত্তর হয়
ইমেজ অ্যাসপেক্ট রেশিও চালু করুন এবং আপনি একটি ইউনিফর্ম গ্রিড পাবেন, যা পণ্যের শট, টিম ফটো এবং লোগো চায়, সাথে অন্য যেকোন কিছু যা একটি সেটের মতো দেখতে হবে।
বেছে নেওয়ার একটি সহজ উপায়: যদি ছবিগুলি একটি ক্যামেরা সেটআপ সহ একটি সেশনে শ্যুট করা হয় তবে সেগুলিকে একটি গ্রিডে ক্রপ করুন৷ যদি তারা বিভিন্ন অভিযোজনে বিভিন্ন অঙ্কুর থেকে আসে, তাদের আকৃতি রাখতে দিন।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
Elementor একটি রাজমিস্ত্রি গ্যালারি আছে?
বিনামূল্যের ইমেজ গ্যালারি উইজেটে নয়, যা শুধুমাত্র কলাম এবং ফাঁক অফার করে। লেআউট বিকল্প সহ এলিমেন্টরের গ্যালারি উইজেট তার প্রো তালিকায় রয়েছে।
কেন আমার রাজমিস্ত্রির গ্যালারিতে এখনও ফাঁক আছে?
কারণ গ্রিডটি প্যাক করা কলামের পরিবর্তে সারিতে রাখা হয়। চিত্রগুলি তাদের স্বাভাবিক উচ্চতা বজায় রাখে, তাই একটি লম্বা ছবি সহ একটি সারিতে বসে একটি ছোট চিত্র নীচে স্থান ছেড়ে দেয়। CSS কলাম হল সত্যিকারের প্যাকিংয়ের পথ।
রাজমিস্ত্রি কি ফিল্টার ট্যাবগুলির সাথে কাজ করে?
হ্যাঁ। ফিল্টারিং এবং লেআউট আলাদা, তাই একটি বিভাগে ক্লিক করলে গ্রিড সংকুচিত হয় এবং অবশিষ্ট আইটেমগুলি নিজেদেরকে পুনরায় বিছিয়ে দেয়।
আমি কি শুধুমাত্র মোবাইলে রাজমিস্ত্রি সেট করতে পারি?
না। রাজমিস্ত্রির সুইচ প্রতিটি পর্দার আকারে প্রযোজ্য। গটার স্লাইডার হল নিয়ন্ত্রণ যা প্রতি ডিভাইসে পরিবর্তিত হয়।
রাজমিস্ত্রি কি পৃষ্ঠার গতির জন্য খারাপ?
লেআউট নিজেই সস্তা। আপনার জন্য যে খরচ হয় তা হল ছবি, তাই পূর্ণ আকারের ফাইলের পরিবর্তে একটি বুদ্ধিমান ইমেজ রেজোলিউশন সেট করুন এবং মনে রাখবেন যে গ্যালারির প্রতিটি আইটেম পৃষ্ঠার সাথে লোড হয়।
চূড়ান্ত চিন্তা
তিনটি রুট, তিনটি ভিন্ন ফলাফল। Elementor Pro এর গ্যালারি উইজেট আপনার জন্য কলাম প্যাক করে। ফিল্টারযোগ্য গ্যালারিতে রাজমিস্ত্রির সুইচ ক্রপিং বন্ধ করে এবং সারি রাখে, যা প্রায়শই যথেষ্ট। CSS কলামগুলি পড়ার অর্ডারের খরচে একটি বিনামূল্যে ইনস্টলে প্যাকড লুক দেয়।
আসল ফসল রক্ষা করা এবং একটি পরিপাটি গ্রিড রাখা দুটি ভিন্ন লক্ষ্য, তাই আপনার আসলে যে রুটটি আছে তার সাথে মেলে সেটি বেছে নিন।
সম্পর্কিত পড়া
