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

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

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

অনেকগুলি অন্তর্নির্মিত এলিমেন্টর ডাব্লুকমার্স মডিউল আপনাকে WooCommerce সামগ্রী বা কার্যকারিতা ব্লক sertোকাতে বা এলিমেন্টার বিল্ডার ব্যবহার করে এগুলিকে স্টাইল করতে দেয়। খুব দুর্দান্ত, তাই না?

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

চল শুরু করি.

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

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

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

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

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

প্রতিটি ডাব্লুকমার্স প্রোডাক্টের একটি পণ্য চিত্র বা চিত্র গ্যালারী গ্রাহকদের কাছে পণ্যের ফটোগ্রাফ প্রদর্শন করে। এলিমেন্টর একটি অন্তর্নির্মিত পণ্য চিত্র মডিউল সরবরাহ করে যা আমাদের এটি আমাদের টেমপ্লেটে সন্নিবেশ করতে দেয়।

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

নির্বাচক .অনসেল {back সিব্যাকগ্রাউন্ড-রঙ: # সিসি 3366; \ গুলি}

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

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

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

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

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

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

• সামগ্রীটি 'কার্টে যুক্ত করুন' এ সেট করুন।
• ব্যাকগ্রাউন্ডের রঙটি '# cc3366' এ সেট করুন
• সীমানা ব্যাসার্ধ 0 তে সেট করুন

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

এলিমেন্টর পণ্য ট্যাব সেট আপ করা হচ্ছে

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

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

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

.Wocommerce # রিভিউ ফর্ম # রিপ্লাই। ইনপুট জমা দিন {পটভূমি-রঙ: # সিসি 3366; রঙ: # fff; সীমানা ব্যাসার্ধ: 0 px; }

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

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

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

হ্যালো এলিমেন্টারের স্টাইলগুলি উত্তরাধিকার সূত্রে প্রাপ্ত হওয়ায় এখানে এখনও কোনও স্টাইলিংয়ের প্রয়োজন নেই।

এলিমেন্টর এবং WooCommerce পি রডাক্ট আপসেলগুলি

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

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

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

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

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

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

উপসংহার – এলিমেন্টর p roduct পেজ নির্মাতা

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

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

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