একটি নতুন পৃষ্ঠা নির্মাতা এইমাত্র ওয়ার্ডপ্রেস স্পেসে অবতরণ করেছে, এবং এটি অন্যদের মতো দেখাচ্ছে না। মোজাইক বিল্ডার ওয়ার্ডপ্রেস সাইট তৈরির জন্য একটি ক্লাস-ভিত্তিক, ডিজাইন-সিস্টেম পদ্ধতি গ্রহণ করে, এলিমেন্টরের চেয়ে ওয়েবফ্লো-এর কাছাকাছি। আমরা এটির সাথে সময় কাটিয়েছি, অফিসিয়াল শুরু হওয়া ওয়াকথ্রু অনুসরণ করেছি এবং এটি আসলে কী ভাল করে তা দেখতে স্ক্র্যাচ থেকে একটি সাইট তৈরি করেছি।
তাই এখানে আমাদের সম্পূর্ণ মোজাইক বিল্ডার পর্যালোচনা: এটি কী, সম্পাদক কেমন অনুভব করেন এবং আপনার এখনও একটি বাস্তব প্রকল্পের সাথে এটি বিশ্বাস করা উচিত কিনা।
আমরা শুরু করার আগে দ্রুত নোট: আমরা নির্মাণ করি এলিমেন্টরের জন্য মাস্টার অ্যাডঅন, তাই আমরা প্রতিদিন এলিমেন্টর ইকোসিস্টেমে বাস করি। এটি আমাদের একটি নতুন নির্মাতাকে বিচার করার জন্য একটি দরকারী লেন্স দেয় এবং আমরা যেখানেই আমাদের দৃষ্টিভঙ্গি রায়কে রঙিন করে সেখানে পতাকাঙ্কিত করব।
মোজাইক নির্মাতা কি?
মোজাইক একজন ওয়ার্ডপ্রেস পেজ বিল্ডার এবং থিম বিল্ডার কি এক হয়ে গেছে। এর পিচ সহজ: "ওয়ার্ডপ্রেসে ডিজাইনের সীমা ক্লান্ত? মোজাইকের সাথে দেখা করুন।”
একটি ক্যানভাসে উইজেটগুলি ফেলে দেওয়ার পরিবর্তে এবং প্রতিটিকে পৃথকভাবে স্টাইল করার পরিবর্তে, মোজাইক একটি ডিজাইন সিস্টেমের চারপাশে তৈরি করা হয়েছে। আপনি পাবেন:
- ক ক্লাস সিস্টেম এলিমেন্ট ক্লাস এবং ইউটিলিটি ক্লাসের সাথে, ডেভেলপাররা যেভাবে CSS লেখে তার অনুরূপ
- শৈলী গাইড এটি পুরো সাইট জুড়ে রঙ এবং টাইপোগ্রাফি নিয়ন্ত্রণ করে
- উপাদান, পুনঃব্যবহারযোগ্য উপাদান যা আপনি একবার সম্পাদনা করেন এবং সর্বত্র আপডেট করেন
- মাস্টার্স এবং টেমপ্লেট যেগুলি থিম-স্তরের লেআউটগুলি পরিচালনা করে (হেডার, ফুটার, আর্কাইভ, একক পোস্ট)
- একটি মিথস্ক্রিয়া নির্মাতা স্ক্রোল, হোভার এবং ক্লিক অ্যানিমেশনের জন্য
- ক লুপ নির্মাতা ব্লগ সংরক্ষণাগার এবং কাস্টম পোস্ট প্রকারের মত গতিশীল বিষয়বস্তুর জন্য
এটি তিনটি স্টার্টার থিম সহ পাঠানো হয়েছে: জিব্রাল্টার (বোল্ড, আধুনিক), মনোলিথ (ক্লিন, মিনিমালিস্ট), এবং শূন্য থেকে নির্মাণের জন্য ফাঁকা। আপনি যদি ওয়েবফ্লো বা ব্রিকস বিল্ডার ব্যবহার করেন তবে এই মডেলটি পরিচিত বোধ করবে। আপনি যদি সরাসরি এলিমেন্টর থেকে আসছেন, তাহলে মানসিক পরিবর্তনের আশা করুন।
শুরু করা: সেটআপ উইজার্ড
মোজাইকের অনবোর্ডিং আমাদের পরীক্ষা করা বেশিরভাগ প্লাগইনগুলির চেয়ে ভাল। অ্যাক্টিভেশনের পরে, একটি চার-পদক্ষেপ উইজার্ড আপনাকে সেটিংস, মাস্টার, টেমপ্লেট এবং পৃষ্ঠাগুলির মাধ্যমে নিয়ে যায়।
চতুর অংশ হল স্কিনিং সিস্টেম। মনোলিথের মতো একটি থিম বেছে নিন, তারপরে একটি রঙিন ত্বক (সায়ান, ভায়োলেট, রোজ, টিল এবং অন্য ছয়টি) এবং একটি ফন্ট স্কিন (নিরপেক্ষ, মার্জিত, নিরবধি, জ্যামিতিক, আধুনিক, ভবিষ্যত) চয়ন করুন। একটি হালকা বা গাঢ় রঙের মোড টগল সহ সম্পূর্ণ ডেমো সাইটটি তাত্ক্ষণিকভাবে পুনরায় স্টাইল করে।
এটি কাজ করে কারণ থিমের সবকিছুই হার্ড-কোডেড মানের পরিবর্তে স্টাইল ভেরিয়েবলের উল্লেখ করে। ব্র্যান্ডের রঙ একবার পরিবর্তন করুন এবং প্রতিটি বোতাম, লিঙ্ক এবং আইকন অনুসরণ করুন। এলিমেন্টরের গ্লোবাল কালার রয়েছে যা একই রকম কিছু করে, কিন্তু মোজাইকের বাস্তবায়ন আরও গভীরে যায় যেহেতু স্টার্টার থিমগুলি প্রথম দিন থেকেই পরিবর্তনশীল সিস্টেমে সম্পূর্ণরূপে তৈরি করা হয়েছে।
কয়েক মিনিটের মধ্যে আমরা একটি সম্পূর্ণ ডেমো সাইট ইনস্টল করেছি: হোমপেজ, ব্লগ সংরক্ষণাগার, ব্লগ পোস্ট, একটি মানচিত্র সহ যোগাযোগের পৃষ্ঠা, 404 পৃষ্ঠা এবং অনুসন্ধান ফলাফল, সমস্ত সম্পাদনাযোগ্য।
সম্পাদক: একটি কাঠামো-প্রথম ক্যানভাস
মোজাইকে একটি পৃষ্ঠা খুলুন এবং বিন্যাসটি স্বীকৃত: বাম দিকে উপাদান গাছ, মাঝখানে লাইভ ক্যানভাস, ডানদিকে শৈলী নিয়ন্ত্রণ। কিন্তু দর্শন এলিমেন্টরের থেকে আলাদা।
মোজাইকের নেভিগেটর আপনার পৃষ্ঠাটিকে একটি নেস্টেড কাঠামো হিসাবে দেখায়: বিভাগ, ধারক, সারি, তারপর শিরোনাম, অনুচ্ছেদ, বোতাম, আইকন বাক্স এবং ডিভের মতো উপাদান। আপনি যতবার ক্যানভাস থেকে গাছ থেকে উপাদান নির্বাচন করুন। ডান প্যানেল বাস্তব CSS ধারণাগুলিকে প্রকাশ করে: সর্বনিম্ন/সর্বোচ্চ মান সহ প্রস্থ, z-সূচক সহ অবস্থান, ফ্লেক্স নিয়ন্ত্রণ, রূপান্তর (অনুবাদ, স্কেল, ঘোরানো), বক্স ছায়া এবং ওভারফ্লো।
বিকাশকারীদের জন্য, এটি রিফ্রেশিং। কন্ট্রোল ম্যাপ এক-এক করে CSS দিয়ে আপনি হাতে লিখবেন, তাই কিছুই লুকানো বা নাম পরিবর্তন করা মনে হয় না। নতুনদের জন্য, এটি একটি খাড়া পাহাড়। এলিমেন্টর আপনাকে ফ্লেক্স কন্টেইনার কী তা না জেনেই একটি শিরোনাম স্টাইল করতে দেয়। মোজাইক শান্তভাবে আপনি অনুমান।
একটি জিনিস আমরা প্রশংসা করেছি: সম্পাদক আমাদের পরীক্ষা বিল্ড জুড়ে প্রতিক্রিয়াশীল ছিলেন, এমনকি সম্পূর্ণ মনোলিথ ডেমো লোড করেও।
ক্লাস সিস্টেম: মোজাইকের সবচেয়ে বড় আইডিয়া
এখানেই মোজাইক বেশিরভাগ ওয়ার্ডপ্রেস পৃষ্ঠা নির্মাতাদের থেকে নিজেকে আলাদা করে। প্রতিটি উপাদান ক্লাস বহন করতে পারে, এবং ক্লাস দুটি স্বাদে আসে:
- উপাদান ক্লাস কিছু কি তা সংজ্ঞায়িত করুন: বোতাম, কার্ড, নেভি লিঙ্ক
- ইউটিলিটি ক্লাস আপনি স্ট্যাক করতে পারেন এমন একক বৈশিষ্ট্য সংজ্ঞায়িত করুন: ব্যবধান, পাঠ্যের রঙ, আকার
ক্লাসও নেস্ট করে। মনোলিথ থিমের বোতাম ক্লাসে প্রাথমিক এবং মাধ্যমিক রূপ রয়েছে, প্রতিটিতে S, M, এবং L আকার রয়েছে। যেকোনো বোতাম নির্বাচন করুন, এর সাব-ক্লাস অদলবদল করুন এবং এটি অবিলম্বে পুনরায় স্টাইল করুন। প্রাথমিক শ্রেণী নিজেই সম্পাদনা করুন এবং সাইটের প্রতিটি প্রাথমিক বোতাম আপডেট করুন।
আপনি যদি কখনও একটি এলিমেন্টর সাইট উত্তরাধিকার সূত্রে পেয়ে থাকেন যেখানে প্রতিটি বোতাম হাত দ্বারা স্টাইল করা হয়েছিল, সামান্য ভিন্নভাবে, আপনি বুঝতে পারবেন যে সমস্যাটি এটি সমাধান করে। আপনি শৈলী সামঞ্জস্যপূর্ণ রাখতে শৃঙ্খলার উপর নির্ভর করা বন্ধ করুন; কাঠামো আপনার জন্য এটি করে।
ট্রেড-অফ বাস্তব, যদিও। একটি ক্লাস সিস্টেম পরিকল্পনা দাবি করে। আপনি তৈরি করার আগে আপনাকে নামকরণ, শ্রেণিবিন্যাস এবং পুনঃব্যবহারের বিষয়ে চিন্তা করতে হবে, যা ঠিক সেই ধরনের ওভারহেড যা একজন ফ্রিল্যান্সার পাঁচ পৃষ্ঠার ব্রোশিওর সাইটকে নক আউট করতে চায় না।
উপাদান, মাস্টার্স, এবং থিম বিল্ডিং
মোজাইক দুটি সংযুক্ত ধারণার মাধ্যমে সাইট-ব্যাপী লেআউট পরিচালনা করে:
মাস্টার্স আপনার বাইরের শেল কি: শিরোনাম, ফুটার, এবং প্রতিটি পৃষ্ঠা মোড়ানো কিছু। একবার মাস্টার সম্পাদনা করুন এবং পরিবর্তন সর্বত্র প্রদর্শিত হবে।
টেমপ্লেট মাস্টার্স এবং নিয়ন্ত্রণ বিষয়বস্তু এলাকায় বাস। মোজাইকের ডেমোতে হোমপেজ, ব্লগ আর্কাইভ, একক পোস্ট, পরিচিতি, সংরক্ষণাগার, 404 এবং অনুসন্ধান ফলাফলের টেমপ্লেট অন্তর্ভুক্ত রয়েছে।
আপনি যখন একটি নতুন পৃষ্ঠা তৈরি করেন, তখন একটি ডায়ালগ জিজ্ঞাসা করে যে একটি নতুন টেমপ্লেট, একটি বিদ্যমান, বা একটি স্বয়ংক্রিয় টেমপ্লেট বরাদ্দ করতে হবে যা প্রতিটি উদাহরণ জুড়ে পরিবর্তনগুলি প্রয়োগ করে৷।
উপাদান পুনঃব্যবহারযোগ্য ব্লক: একটি মূল্য কার্ড, একটি প্রশংসাপত্র, একটি CTA বিভাগ। দৃষ্টান্তগুলি যে কোনও জায়গায় ফেলে দিন, উপাদানটি সম্পাদনা করুন এবং সমস্ত দৃষ্টান্ত সিঙ্ক করুন৷।
এটি বাস্তব থিম বিল্ডিং, এবং এটি একটি পৃথক থিম ছাড়া কাজ করে। তুলনা করার জন্য, এলিমেন্টর ব্যবহারকারীরা এর মাধ্যমে একই কভারেজ পান মাস্টার অ্যাডঅন থিম বিল্ডার, যা এলিমেন্টরের সম্পাদকের উপরে কাস্টম হেডার, ফুটার, আর্কাইভ, একক টেমপ্লেট এবং 404 পৃষ্ঠা যুক্ত করে। শেষ ফলাফল অনুরূপ; মোজাইক এটিকে অ্যাড-অন লেয়ার হিসাবে বিবেচনা না করে মূল পণ্যে বেক করে।
মিথস্ক্রিয়া এবং অ্যানিমেশন
মোজাইক দুটি ট্রিগার বিভাগ সহ একটি মিথস্ক্রিয়া নির্মাতা অন্তর্ভুক্ত করে:
- সহজ ট্রিগার: ভিউতে স্ক্রোল করুন, হোভার করুন, ক্লিক করুন, পৃষ্ঠা লোড করুন, স্ক্রোল দিক পরিবর্তন করুন
- ক্রমাগত ট্রিগার: মাউস সরানো এবং স্ক্রোল করার সময়
কোন বিভাগ বা উপাদানের সাথে একটি ট্রিগার সংযুক্ত করুন, তারপর সংজ্ঞায়িত করুন কি অ্যানিমেট। এটি আধুনিক-ল্যান্ডিং-পৃষ্ঠার প্রয়োজনীয় বিষয়গুলিকে কভার করে: স্ক্রলে ফেড-ইন, প্যারালাক্স-স্টাইলের মুভমেন্ট, সাধারণ রঙের অদলবদলের বাইরে হোভার স্টেট।
এটি একটি সক্ষম সিস্টেম, যদিও বিপ্লবী নয়। এলিমেন্টর ব্যবহারকারীদের মোশন ইফেক্ট এবং অ্যাডঅনগুলির মাধ্যমে বছরের পর বছর ধরে একই রকম বিকল্প রয়েছে। মাস্টার অ্যাডঅন একা কভার করে প্রবেশদ্বার অ্যানিমেশন, ভাসমান প্রভাব, এবং স্ক্রোল-ভিত্তিক আন্দোলন, প্লাস কণা ব্যাকগ্রাউন্ড মত অতিরিক্ত। মোজাইক যা অফার করে তা হল কঠোর ইন্টিগ্রেশন: মিথস্ক্রিয়াগুলি ট্যাব জুড়ে ছড়িয়ে ছিটিয়ে থাকার পরিবর্তে অন্য সবকিছুর মতো একই প্যানেলে থাকে।
লুপ এবং গতিশীল বিষয়বস্তু
লুপ নির্মাতা আমাদের ব্লগ সংরক্ষণাগার পরীক্ষা ভালভাবে পরিচালনা করেছেন। আপনি একটি আইটেম ডিজাইন করেন (ছবি, বিভাগ, শিরোনাম, উদ্ধৃতি, লেখক, তারিখ), এবং মোজাইক প্রতিটি পোস্টের জন্য এটি পুনরাবৃত্তি করে, পৃষ্ঠা সংখ্যা নিয়ন্ত্রণ এবং একটি "কোন ফলাফল নেই" অবস্থা সহ সম্পূর্ণ।
লুপগুলি পোস্ট, পৃষ্ঠা এবং কাস্টম পোস্টের প্রকারের সাথে সংযোগ করে এবং টেমপ্লেট শর্তগুলির সাথে যুক্ত করে যাতে সংরক্ষণাগার, বিভাগ এবং অনুসন্ধান ফলাফল প্রতিটি সঠিক বিন্যাস পায়৷ শর্তসাপেক্ষ দৃশ্যমানতা যুক্তির সাথে মিলিত, আপনি প্রেক্ষাপটের উপর ভিত্তি করে বিষয়বস্তু দেখাতে বা লুকাতে পারেন, যা অনুরূপ ডিসপ্লে কন্ডিশন এলিমেন্টরে করে.
আপনি যদি বিষয়বস্তু-ভারী সাইটগুলি তৈরি করেন তবে এটি মোজাইকের সবচেয়ে শক্তিশালী এলাকাগুলির মধ্যে একটি। একটি কাস্টম ব্লগ লেআউট তৈরি করা আমাদের পরীক্ষা করা বেশিরভাগ নির্মাতার তুলনায় এখানে দ্রুত অনুভূত হয়েছে। এলিমেন্টর ব্যবহারকারীরা সাধারণত ব্লগ এলিমেন্টের মতো একটি উইজেটের জন্য পৌঁছান একটি ব্লগ পেজ তৈরি করুন, যা আপনাকে সেখানেও নিয়ে যায়, কিন্তু মোজাইকের পদ্ধতি আপনাকে প্রতিটি লুপ আইটেমের উপর সূক্ষ্ম কাঠামোগত নিয়ন্ত্রণ দেয়।
মোজাইক নির্মাতার মূল্য
মোজাইকের লঞ্চের মূল্য আক্রমনাত্মক, স্পষ্টভাবে একটি ব্যবহারকারীর ভিত্তি দ্রুত তৈরি করার জন্য ডিজাইন করা হয়েছে:
| পরিকল্পনা | দাম | সাইট | লাইসেন্স |
|---|---|---|---|
| ব্যক্তিগত | প্রথম বছর বিনামূল্যে, তারপর $39/বছর | 1 সাইট | বার্ষিক |
| সৃষ্টিকর্তা | প্রথম বছর বিনামূল্যে, তারপর $149/বছর | 10টি সাইট | বার্ষিক |
| এজেন্সি | $199 জীবনকাল (প্রাথমিক পাখি, নিয়মিত $499) | সীমাহীন | আজীবন |
জানার মতো কয়েকটি বিবরণ:
- দ্য বিনামূল্যে প্রথম বছর ব্যক্তিগত এবং সৃষ্টিকর্তার পরিকল্পনায় 2026 সালের শেষ পর্যন্ত চলমান একটি প্রারম্ভিক-পাখির অফার। আপনি এখন কিছুই দিতে পারবেন না এবং সাবস্ক্রিপশন দ্বিতীয় বছরে শুরু হবে।
- সমস্ত পরিকল্পনা প্রতিটি প্রো বৈশিষ্ট্য অন্তর্ভুক্ত। স্তরগুলি শুধুমাত্র সাইট গণনা এবং সক্রিয়করণ সীমার মধ্যে পৃথক হয় (ব্যক্তিগত ক্ষেত্রে প্রতি বছর 2, সৃষ্টিকর্তার জন্য 15, এজেন্সিতে সীমাহীন)।
- কোন স্থায়ী বিনামূল্যে সংস্করণ নেই।
সীমাহীন প্রো বৈশিষ্ট্য সহ একটি বিনামূল্যের বছর প্রবেশের বাধা যতটা কম। $199 লাইফটাইম এজেন্সি চুক্তিটিও শক্তিশালী মূল্য যদি পণ্যটি বেঁচে থাকে এবং পরিপক্ক হয়।
রায়: একজন প্রতিশ্রুতিশীল নির্মাতা যার সময় প্রয়োজন
মোজাইক বিল্ডার হল আরও আকর্ষণীয় ওয়ার্ডপ্রেস বিল্ডারদের মধ্যে একজন যা আমরা বছরের পর বছর লঞ্চ করতে দেখেছি। ক্লাস সিস্টেমটি ভালভাবে কার্যকর করা হয়েছে, অনবোর্ডিং চমৎকার, থিম বিল্ডিং বোল্ট করার পরিবর্তে তৈরি করা হয়েছে এবং ফ্রি-প্রথম বছরের মূল্য এটি চেষ্টা না করার কোনো অজুহাত সরিয়ে দেয়।
আমাদের সুপারিশ:
- চেষ্টা কর একটি স্টেজিং বা পার্শ্ব প্রকল্পে, বিশেষ করে যদি আপনি CSS জানেন এবং Webflow মডেল পছন্দ করেন। বিনামূল্যের বছর এটিকে শূন্য-ঝুঁকির পরীক্ষা করে তোলে।
- এলিমেন্টরের সাথে লেগে থাকুন আপনি যদি অ্যাডন ইকোসিস্টেমের উপর নির্ভর করেন, একটি বিনামূল্যের স্তর প্রয়োজন, বা ক্লায়েন্ট কাজের জন্য সবচেয়ে নিরাপদ পথ চান। একটি ভালভাবে নির্বাচিত স্ট্যাক মোজাইক আজ যা প্রতিশ্রুতি দেয় তার প্রায় সবকিছুই কভার করে, যে কারণে এলিমেন্টর এখনও আমাদের শীর্ষে রয়েছে পৃষ্ঠা নির্মাতা তুলনা.
আমরা এই মোজাইক বিল্ডার পর্যালোচনা আপডেট করব যখন একটি স্থিতিশীল রিলিজ জাহাজে। যদি ক্লাস সিস্টেমটি বাস্তব ক্লায়েন্ট সাইটগুলিতে ধরে থাকে, তাহলে এলিমেন্টরের একটি প্রতিদ্বন্দ্বী থাকবে যা গুরুত্ব সহকারে নেওয়ার যোগ্য, এবং সেই চাপ প্রতিটি নির্মাতাকে আরও ভাল করে তোলে।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
মোজাইক নির্মাতা কি?
মোজাইক বিল্ডার একটি নতুন ওয়ার্ডপ্রেস পেজ নির্মাতা এবং থিম নির্মাতা। এটি পুনঃব্যবহারযোগ্য উপাদান, স্টাইল ভেরিয়েবল, একটি ইন্টারঅ্যাকশন বিল্ডার এবং গতিশীল লুপ সহ একটি ক্লাস-ভিত্তিক ডিজাইন সিস্টেম ব্যবহার করে, যা প্রথাগত ওয়ার্ডপ্রেস নির্মাতাদের তুলনায় ওয়েবফ্লো-এর কাছাকাছি একটি পদ্ধতি গ্রহণ করে।
মোজাইক নির্মাতা কি বিনামূল্যে?
কোন স্থায়ী বিনামূল্যের সংস্করণ নেই, তবে ব্যক্তিগত এবং সৃষ্টিকর্তার বার্ষিক পরিকল্পনাগুলি 2026 সালের শেষ পর্যন্ত প্রারম্ভিক-পাখির অফার হিসাবে প্রথম বছরের জন্য বিনামূল্যে। এর পরে, $199 আজীবন এজেন্সি চুক্তির সাথে একটি সাইটের জন্য প্রতি বছর $39 থেকে পরিকল্পনা শুরু হয়।
নতুনরা কি মোজাইক বিল্ডার ব্যবহার করতে পারে?
নতুনরা এটি ব্যবহার করতে পারে, তবে শেখার বক্ররেখা এলিমেন্টরের চেয়ে খাড়া। মোজাইক ক্লাস, কন্টেইনার এবং ফ্লেক্সবক্সের মতো বিকাশকারী ধারণাগুলির চারপাশে তৈরি করা হয়েছে। অন্তর্ভুক্ত ভিডিও কোর্স সাহায্য করে, কিন্তু অ-প্রযুক্তিগত ব্যবহারকারীদের বাস্তব শেখার সময় বাজেট করা উচিত।
মোজাইক বিল্ডার কি বিদ্যমান ওয়ার্ডপ্রেস থিম নিয়ে কাজ করে?
মোজাইক আপনার থিম স্তরটিকে তার নিজস্ব মাস্টার্স এবং টেমপ্লেট সিস্টেমের সাথে প্রতিস্থাপন করে। এটি দুটি ডিজাইন করা থিম, জিব্রাল্টার এবং মনোলিথ, এবং স্ক্র্যাচ থেকে সম্পূর্ণরূপে নির্মাণের জন্য একটি ফাঁকা স্টার্টার সহ পাঠানো হয়।
সম্পর্কিত পড়া: আপনি যদি আপনার বিকল্পগুলি ওজন করেন তবে আমাদের রাউন্ডআপগুলি দেখুন৷ সেরা এলিমেন্টর থিম এবং এলিমেন্টরের জন্য সেরা লাইটওয়েট ওয়ার্ডপ্রেস থিম, বা চেক master Addons v3 এ নতুন কি আছে.
