Elementor এর সাথে একটি আশ্চর্যজনক WooCommerce পণ্য পৃষ্ঠা তৈরি এবং ডিজাইন করুন

প্রতিযোগিতা থেকে আপনার ই-কমার্স স্টোরকে আলাদা করতে এবং আপনার ক্লায়েন্টদের একটি অনন্য অভিজ্ঞতা প্রদান করতে আপনাকে অবশ্যই আপনার পণ্যের পৃষ্ঠাটি পরিবর্তন করতে হবে। উপরন্তু, আপনার পণ্য পৃষ্ঠাকে নান্দনিকভাবে ব্যক্তিগতকৃত করার বিকল্পটি আপনার অনলাইন স্টোর জুড়ে একটি সামঞ্জস্যপূর্ণ ভিজ্যুয়াল ডিজাইন বজায় রাখার জন্য গুরুত্বপূর্ণ।

এলিমেন্টর হল বাজারের শীর্ষস্থানীয় ওয়ার্ডপ্রেস ওয়েবসাইট নির্মাতাদের মধ্যে একটি, কিন্তু আপনি কি জানেন যে আপনি এটি ব্যবহার করে WooCommerce স্টোর তৈরি করতে পারেন?

অনেক অন্তর্নির্মিত Elementor WooCommerce মডিউল আপনাকে WooCommerce বিষয়বস্তু বা কার্যকারিতা ব্লক সন্নিবেশ করতে বা Elementor বিল্ডার ব্যবহার করে স্টাইল করার অনুমতি দেয়। বেশ মহান, তাই না?

স্টাইলিং এবং কাস্টমাইজ করার জন্য WooCommerce প্রতিটি ক্ষুদ্র পরিবর্তনের জন্য PHP এবং CSS এর প্রয়োজন ছিল, কিন্তু Elementor-এর মতো সরঞ্জামগুলি উন্নত এবং আরও জটিল হয়ে উঠলে, আপনার স্টোরের চেহারা এবং কাজ করার পদ্ধতি নিয়ন্ত্রণ করার জন্য আরও বেশি বিকল্প উপলব্ধ হতে থাকে।

চল শুরু করি.

• একটি এলিমেন্টর টেমপ্লেট তৈরি করা হচ্ছে
• বিল্ডিং এলিমেন্টর পণ্যের ছবি বা গ্যালারি
• WooCommerce পণ্যের শিরোনাম, মূল্য এবং কার্টে যোগ করুন
• Elementor পণ্য ট্যাব সেট আপ করা হচ্ছে
• এলিমেন্টর পণ্যের সংক্ষিপ্ত বিবরণ
• এলিমেন্টর এবং WooCommerce পণ্য আপসেল
• উপসংহার - এলিমেন্টর পণ্য পৃষ্ঠা নির্মাতা

একটি এলিমেন্টর টেমপ্লেট তৈরি করা হচ্ছে

পদ্ধতির প্রথম ধাপ হল ওয়ার্ডপ্রেস ড্যাশবোর্ডে টেমপ্লেটগুলিতে নেভিগেট করে একটি নতুন এলিমেন্টর টেমপ্লেট তৈরি করা। 'নতুন তৈরি করুন'-এ ক্লিক করুন তারপর আপনি যে টেমপ্লেটটি তৈরি করতে চান তা হিসাবে একক পণ্য বেছে নিন।

যেহেতু আমরা স্ক্র্যাচ থেকে এই টেমপ্লেটটি বিকাশ করি, কোন ব্লক রাখার দরকার নেই; পরবর্তী বক্স থেকে প্রস্থান করুন যতক্ষণ না আপনি একটি নতুন পৃষ্ঠার জন্য সাধারণ এলিমেন্টর নির্মাতা পর্দায় পৌঁছান।

বিল্ডিং এলিমেন্টর পণ্যের ছবি বা গ্যালারি

প্রতিটি WooCommerce পণ্যের একটি পণ্যের ছবি বা ইমেজ গ্যালারি থাকে যা গ্রাহকদের কাছে পণ্যের ফটোগ্রাফ প্রদর্শন করে। Elementor একটি বিল্ট-ইন প্রোডাক্ট ইমেজ মডিউল প্রদান করে যা আমাদের টেমপ্লেটে এটি সন্নিবেশ করতে দেয়।

একটি সাধারণ 2 কলাম সারি তৈরি করুন এবং বাম কলামে পণ্য চিত্র মডিউল লিখুন; এটি ব্যবহারিক দেখায় এবং কাজটি সম্পাদন করে, তবে আসুন এই নিবন্ধটির জন্য ব্যবহৃত এলিমেন্টর হ্যালো থিমের সাথে মেলে বিক্রয় ব্যাজটিকে কাস্টমাইজ করি। এটি করার জন্য, আমাদের কাস্টম CSS-এর একটি ছোট লাইন প্রয়োগ করতে হবে, যা Advanced > Custom CSS-এ গিয়ে নিচের কোডটি পেস্ট করে প্রবর্তন করা যেতে পারে।

নির্বাচক .onsale { \sbackground-color: #cc3366 ; \s}

WooCommerce পণ্যের শিরোনাম, মূল্য এবং কার্টে যোগ করুন

পণ্যের শিরোনাম, পণ্যের মূল্য, এবং ডানদিকের কলামে কার্টে জন্য এলিমেন্টর মডিউল যোগ করব

এলিমেন্টর কনস্ট্রাক্টরে এই তিনটি মডিউলের জন্য অনুসন্ধান করুন, তারপরে উপরে বর্ণিত ক্রম অনুসারে সাজানোর জন্য তাদের টেনে আনুন এবং ড্রপ করুন; এটি সম্পূর্ণরূপে কার্যকরী, কিন্তু আমরা উপরের বিভাগের Hello Elementor থিমের মতো স্টাইলিং এর সাথে মেলে এটি কাস্টমাইজ করতে চাই। এলিমেন্টরের সাথে মডিউল স্টাইল করা সহজ, আপনাকে যা করতে হবে তা হল মডিউলটিতে ক্লিক করুন এবং সম্পাদককে বাম দিকে স্টাইলিং বিকল্পগুলি খুলতে হবে।

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

তারপর আমাদের পণ্যের মূল্যের জন্য একই কাজ করতে হবে এবং প্রতিটি মডিউলে ক্লিক করে এবং পাঠ্যের রঙ পরিবর্তন করে বাস্কেট মডিউল যোগ করতে হবে। পণ্যের মূল্যের জন্য, আমি শিরোনামের বিপরীতে একটি গাঢ় ধূসর ব্যবহার করতে যাচ্ছি, তাই এই হেক্স কোডটি টাইপ করুন যদি আপনি অনুসরণ করেন - #54595f

এরপর, Add to Cart মডিউলে, আমরা কিছু জিনিস আপডেট করব। নীচের সেটিংস ব্যবহার করে বোতামের পটভূমির রঙ এবং বোতামের সীমানা ব্যাসার্ধ:

• বিষয়বস্তু 'কার্টে যোগ করুন'-এ সেট করুন।
• পটভূমির রঙ '#cc3366' এ সেট করুন
• সীমানা ব্যাসার্ধ 0 এ সেট করুন

আমি পরিমাণ নির্বাচকের সীমানা ব্যাসার্ধকে 0 এ পরিবর্তন করেছি, যা আপনি পরিমাণের জন্য স্টাইল ট্যাবের মধ্যে করতে পারেন।

Elementor পণ্য ট্যাব সেট আপ করা হচ্ছে

প্রতিটি পণ্যকে কিছু মৌলিক তথ্য প্রদর্শন করতে হবে যেমন একটি পণ্যের বিবরণ এবং উপলব্ধ থাকলে পর্যালোচনা; এটি সাধারণত পণ্য ট্যাবের মাধ্যমে পরিচালিত হয়।

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

এটি করার জন্য, আমাদের আবার একটু কাস্টম CSS প্রয়োজন হবে। পণ্য ডেটা ট্যাব সম্পাদনা শুরু করুন তারপর উন্নত ট্যাবে ক্লিক করুন এবং কাস্টম CSS-এ স্ক্রোল করুন। নীচের CSS ইনপুট করুন, এবং আপনি আপনার নকশা অনুযায়ী রং সামঞ্জস্য করতে পারেন।

.woocommerce #রিভিউ ফর্ম #উত্তর .ফর্ম-সাবমিট ইনপুট { ব্যাকগ্রাউন্ড-রং: #cc3366; রঙ: #fff; সীমানা-ব্যাসার্ধ: 0px; }

এলিমেন্টর পণ্যের সংক্ষিপ্ত বিবরণ

ঠিক আছে, তাই এখন পর্যন্ত আমাদের কাছে একটি শালীন, সাধারণ-সুদর্শন নকশা রয়েছে, তবে এটি একটু বিচ্ছিন্ন দেখাচ্ছে। উপরের অংশে একটি পণ্য সংক্ষিপ্ত বিবরণ মডিউল যোগ করা এটিকে প্যাড করতে এবং আরও প্রসঙ্গ যোগ করতে সহায়তা করতে পারে।

অনুগ্রহ করে WooCommerce সংক্ষিপ্ত বিবরণ মডিউলটি অনুসন্ধান করুন, তারপর এটিকে পণ্যের মূল্যের নীচে এবং অ্যাড টু কার্ট মডিউলের উপরে টেনে আনুন।

এখানে এখনও কোন স্টাইলিং এর প্রয়োজন নেই কারণ এটি Hello Elementor থেকে স্টাইল উত্তরাধিকারসূত্রে প্রাপ্ত।

এলিমেন্টর এবং WooCommerce পণ্য আপসেল

প্রতিটি WooCommerce সাইটের জন্য আপনার গড় ঝুড়ির মান বাড়ানো অত্যন্ত গুরুত্বপূর্ণ, এই কারণেই আপনার দোকানে সহজেই কাস্টমাইজেশন সংহত করার জন্য Elementor একটি পণ্য আপসেলস মডিউল অন্তর্ভুক্ত করে।

অনুগ্রহ করে এলিমেন্টর বিল্ডারে পণ্য আপসেলস মডিউলটি অনুসন্ধান করুন এবং পণ্য ডেটা ট্যাবগুলির পিছনে একটি নতুন সারিতে এটি সন্নিবেশ করুন৷

আপনি দেখতে পাচ্ছেন, আমাদের বাকি শৈলীর পরিপূরক করার জন্য এর জন্য কিছুটা সামঞ্জস্যের প্রয়োজন। মডিউল পরিবর্তন করা শুরু করুন এবং নিম্নলিখিত পরিবর্তনগুলি করুন:

• শিরোনামের রঙ সেট করুন – #cc3366
• শিরোনামের রঙ সেট করুন – #cc3366
• দামের রঙ সেট করুন – #54595f
• বোতামের পটভূমির রঙ - #cc3366 এ সেট করুন
• বোতামের রঙ সেট করুন – #fff
• বোতাম সীমানা ব্যাসার্ধ t0 – 0 সেট করুন

সমাপ্ত পণ্য উপরের মত দেখতে হবে। আপনি যদি আপনার টেমপ্লেটের জন্য একটি জাম্পিং-অফ পয়েন্ট হিসাবে এই নির্দেশিকাটি ব্যবহার করেন তবে আপনি মানানসই রঙের হেক্স কোডটি সামঞ্জস্য করতে পারেন।

একবার আপনি সম্পন্ন হলে, আপনি আপনার টেমপ্লেট প্রকাশ করুন. পরবর্তী উইন্ডোতে, আপনি "আপনি আপনার টেমপ্লেটটি কোথায় প্রদর্শন করতে চান?" প্রশ্নটি দেখতে পাবেন। এই টেমপ্লেটটি কখন ব্যবহার করা উচিত তা নির্ধারণ করতে "শর্ত যোগ করুন" এ ক্লিক করুন৷ আপনি আপনার সমস্ত পণ্য পৃষ্ঠায় টেমপ্লেট ব্যবহার করতে "সমস্ত পণ্য" নির্বাচন করতে পারেন। আপনি শুধুমাত্র সেই পণ্যগুলির জন্য এই টেমপ্লেটটি ব্যবহার করতে বেছে নিতে পারেন যা একটি নির্দিষ্ট বিভাগে পড়ে বা তাদের সাথে যুক্ত একটি নির্দিষ্ট ট্যাগ রয়েছে৷

উপসংহার - এলিমেন্টর পণ্য পৃষ্ঠা নির্মাতা

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

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

প্রতিযোগিতা থেকে আপনার ই-কমার্স স্টোরকে আলাদা করতে এবং আপনার ক্লায়েন্টদের একটি অনন্য অভিজ্ঞতা প্রদান করতে আপনাকে অবশ্যই আপনার পণ্যের পৃষ্ঠাটি পরিবর্তন করতে হবে। উপরন্তু, আপনার পণ্য পৃষ্ঠাকে নান্দনিকভাবে ব্যক্তিগতকৃত করার বিকল্পটি আপনার অনলাইন স্টোর জুড়ে একটি সামঞ্জস্যপূর্ণ ভিজ্যুয়াল ডিজাইন বজায় রাখার জন্য গুরুত্বপূর্ণ। আপনার WooCommerce স্টোরের পৃষ্ঠাগুলি কাস্টমাইজ করার জন্য Elementor একটি দুর্দান্ত সরঞ্জাম, এবং এটি অত্যন্ত প্রস্তাবিত। ব্যবহার করা সহজ হওয়ার পাশাপাশি, পৃষ্ঠা নির্মাতা কাস্টম পণ্য পৃষ্ঠাগুলি তৈরি করতে আপনাকে সহায়তা করার জন্য সমস্ত প্রয়োজনীয় উইজেট এবং স্টাইলিং বিকল্পগুলি অন্তর্ভুক্ত করে৷ আমরা আশা করি আপনি এই টিউটোরিয়ালটিকে তথ্যপূর্ণ বলে মনে করেছেন এবং Elementor ব্যবহার করে আপনার WooCommerce পণ্য এবং পণ্য সংরক্ষণাগার পৃষ্ঠাগুলি কাস্টমাইজ করার জন্য প্রয়োজনীয় তথ্য প্রদান করেছেন। আপনি কি অতীতে WooCommerce পেজ তৈরি করতে Elementor ব্যবহার করেছেন? আপনি মন্তব্য বিভাগে আপনার চিন্তা শেয়ার করতে স্বাগত জানাই. আমরা একবার দেখে আনন্দিত হবে.