WooCommerce এ Elementor পপআপ তৈরি করুন

আমরা সবাই WooCommerce এর বিশাল ভক্ত। এটি সেট আপ এবং কাস্টমাইজ করা সহজ। একটি গতিশীল এবং শক্তিশালী ই-কমার্স স্টোর তৈরি এবং পরিচালনা করা সহজ করে তোলে এমন বৈশিষ্ট্যগুলি প্যাকেজের সাথে অন্তর্ভুক্ত করা হয়েছে।

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

• পপআপ উইন্ডোর কনফিগারেশন
• এছাড়াও আপনি এলিমেন্টরে ভিজ্যুয়াল বিল্ডার ব্যবহার করে পপআপ তৈরি করতে পারেন
• পছন্দ প্রকাশ করুন

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

আপনার কাছে সেগুলি পুনরায় ডিজাইন করার বা শুরু থেকে আবার শুরু করার বিকল্প রয়েছে৷ আপনি আপনার ওয়েবসাইটের অন্যান্য পৃষ্ঠাগুলির জন্য প্রক্রিয়াটি পুনরাবৃত্তি করতে পারেন।

একটি উষ্ণ ধন্যবাদ পৃষ্ঠা তৈরি করে এবং আপনার আমার অ্যাকাউন্ট এবং পরিষেবার শর্তাদি পৃষ্ঠাগুলি আপডেট করার মাধ্যমে, আপনি আপনার গ্রাহকদের হৃদয় ও মন জয় করতে পারেন৷

এই টিউটোরিয়ালের সাথে মিলিত Elementor-এর ড্র্যাগ এবং ড্রপ কার্যকারিতা নিশ্চিত করবে যে আপনার পৃষ্ঠাগুলি তৈরি করার সময় আপনার সমস্যা-মুক্ত অভিজ্ঞতা রয়েছে।

আপনার wooCommerce স্টোর সেট আপ করার পরে, আপনি এটিকে আপনার দর্শক এবং গ্রাহকদের কাছে আরও আকর্ষণীয় করে তুলতে চাইতে পারেন৷ পপআপ যোগ করা ব্যবহারকারীকে অন্য একটি ছাপ দেয় এবং আপনার দোকানে থাকার জন্য একটি নতুন আকাঙ্ক্ষা দেয়।

 একটি পপআপ তৈরি করতে, মেনু বারে টেমপ্লেট > পপআপে যান। আপনাকে আপনার সমস্ত পপআপগুলির একটি তালিকা উপস্থাপন করা হবে এবং আপনি যদি এখনও একটি তৈরি না করে থাকেন তবে আপনি নিম্নলিখিতগুলির মতো কিছু দেখতে পাবেন:

একবার আপনি ADD NEW POPUP-এ ক্লিক করলে (যা বেশ স্ব-ব্যাখ্যামূলক), আপনাকে এটির একটি নাম দিতে বলা হবে এবং তারপরে প্রদর্শিত প্রিমেড এক্স amp les থেকে একটি টেমপ্লেট নির্বাচন করুন৷ বিভিন্ন টেমপ্লেট একাধিক উদ্দেশ্যে উপলব্ধ; কিছু ঘোষণার জন্য উপযুক্ত, অন্যগুলি ডিসকাউন্ট প্রচারের জন্য, অন্যগুলি ব্যবহারকারীদেরকে কিছুতে সাইন আপ করতে উত্সাহিত করার জন্য আদর্শ৷ এমনকি ব্যবহারকারীদের কুকি ব্যবহার বা অন্যান্য জিডিপিআর বিজ্ঞপ্তি সম্পর্কে সতর্ক করার জন্যও এক্সাম amp লেস রয়েছে৷ যত তাড়াতাড়ি আপনি আপনার পছন্দের কিছু খুঁজে পেয়েছেন, একটি বৃহত্তর পূর্বরূপ দেখতে এটিতে ক্লিক করুন, এবং তারপর সন্নিবেশ বোতাম টিপুন।

এই বোতামটি ক্লিক করার পরে আপনাকে ওয়ার্ডপ্রেস ব্যাকএন্ডের পপআপ নির্মাতার কাছে নিয়ে যাওয়া হবে।

আপনি যদি অতীতে Elementor-এর সাথে কাজ করে থাকেন, তাহলে ইন্টারফেস, বিকল্পগুলি এবং আপনার জন্য যেভাবে সবকিছু সাজানো হয়েছে তা আপনি বাড়িতেই ঠিক অনুভব করবেন। এটি মূলত ওয়ার্ডপ্রেসে এলিমেন্টর পৃষ্ঠা টেমপ্লেট তৈরি করার মতো একই প্রক্রিয়া।

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

পপআপ উইন্ডোর কনফিগারেশন

 এটি হল যখন আপনি আপনার পপআপের একটি পূর্বরূপ দেখতে পাবেন - হয় একটি ফাঁকা স্লেট বা আপনার বেছে নেওয়া টেমপ্লেট৷

পপআপ সেটিংস, সর্বদা ডিফল্টরূপে খোলা, আপনাকে পপআপ ক্যানভাস কীভাবে কাজ করে তা কাস্টমাইজ করার অনুমতি দেয়। তারা নিম্নরূপ:

• এখানেই আপনি সবচেয়ে বেশি সময় কাটাতে চাইবেন কারণ এখানেই আপনি বিভিন্ন ধরনের পপআপ তৈরি করতে পারবেন। অন্য কথায়, এই সেটিংস সামঞ্জস্য করে, আপনি নিম্নলিখিত প্রভাবগুলি তৈরি করতে সক্ষম হবেন:

• মোডাল পপআপ হল এক ধরনের মডেল উইন্ডো।
• স্লাইড-ইন, বিজ্ঞপ্তি বার, ইত্যাদি।

এছাড়াও, আপনি অন্যান্য গুরুত্বপূর্ণ সেটিংস কাস্টমাইজ করতে পারেন।

সেটিংস উপলব্ধ :

• ছবির উচ্চতা এবং প্রস্থ পরিবর্তন করুন।
• বস্তুর উল্লম্ব বা অনুভূমিক অভিযোজন পরিবর্তন করুন ( amp , আপনি একটি বিজ্ঞপ্তি বার তৈরি করতে এটিকে উপরে বা নীচে ঠিক করতে পারেন)
• একটি ওভারলে ব্যবহার করবেন কি না সে বিষয়ে সিদ্ধান্ত নিন (এটি আপনাকে, amp , পপআপ সক্রিয় থাকাকালীন পটভূমিকে ধূসর করতে দেয়)
• আপনার ব্রাউজারে বন্ধ বোতামটি অক্ষম করুন।
• প্রবেশদ্বারের জন্য একটি অ্যানিমেশন অন্তর্ভুক্ত করুন।

স্টাইল নিম্নলিখিত জিনিসগুলি করতে পারেন :

• আপনি পটভূমির রঙ পরিবর্তন করতে পারেন, এটি একটি গ্রেডিয়েন্ট করতে পারেন, বা পটভূমি হিসাবে একটি চিত্র ব্যবহার করতে পারেন।
• ওভারলে সক্ষম হলে, এটি কনফিগার করুন।
• যদি আপনার কাছে বন্ধ বোতামটি সক্রিয় থাকে তবে আপনাকে অবশ্যই এটি কনফিগার করতে হবে।

অবশেষে, উন্নত ট্যাবে কিছু বিবিধ আমদানি সেটিংস রয়েছে যা আপনাকে নিম্নলিখিতগুলির মতো জিনিসগুলি করতে দেয়:

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

• পৃষ্ঠাটি নীচে স্ক্রোল করার ক্ষমতা অক্ষম করুন।
• একাধিক পপআপ এড়িয়ে চলুন (যদি আপনি একই পৃষ্ঠায় একাধিক পপআপ লক্ষ্য করে থাকেন, তাহলে এটি আপনার দর্শকদের বিরক্ত হতে বাধা দেবে)।

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

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

এছাড়াও আপনি এলিমেন্টরে ভিজ্যুয়াল বিল্ডার ব্যবহার করে পপআপ তৈরি করতে পারেন

যত তাড়াতাড়ি আপনি মৌলিক পপআপ সেটিংস সম্পূর্ণ করেছেন, আপনি ভিজ্যুয়াল ড্র্যাগ-এন্ড-ড্রপ ইন্টারফেসে উপাদানগুলিকে টেনে এবং ড্রপ করে আপনার পপআপের প্রকৃত বিষয়বস্তু ডিজাইন করা শুরু করতে পারেন।

আপনি আপনার ইচ্ছামত যেকোন এলিমেন্টর উইজেট ব্যবহার করতে পারেন, যা আপনাকে চূড়ান্ত ডিজাইনের উপর অনেক বেশি নিয়ন্ত্রণ দেয়। ফর্ম উইজেট হল একমাত্র জিনিস যা আপনাকে অবশ্যই অন্তর্ভুক্ত করতে হবে কারণ এটিই একমাত্র যা আপনাকে আপনার ইমেল অপ্ট-ইন ফর্ম তৈরি করতে দেয়৷

ফর্ম উইজেটের সাথে, আপনি যে ক্ষেত্রগুলি অফার করতে চান তার উপর আপনার সম্পূর্ণ নিয়ন্ত্রণ আছে, সেইসাথে সাবমিট বোতামের পাঠ্য এবং উপস্থিতি। amp জন্য:

এর বাইরে, আমি দৃঢ়ভাবে আপনাকে এলিমেন্টরের সমস্ত উইজেট এবং ডিজাইন বিকল্পগুলির সাথে পরিচিত হওয়ার পরামর্শ দিচ্ছি।

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

পছন্দ প্রকাশ করুন

আপনি যা তৈরি করেছেন তাতে আপনি সন্তুষ্ট হলে, আপনি এটি বিশ্বের সাথে ভাগ করতে চাইবেন। পাবলিশ বোতাম টিপলে, আপনাকে একাধিক প্রশ্ন উপস্থাপন করা হবে। একটি দৃষ্টান্ত হিসাবে:

যে শর্তে আপনি পপআপটি দেখতে চান তা কি নির্দিষ্ট করা সম্ভব? আপনি আপনার অনুসন্ধান ফলাফল থেকে কোন পৃষ্ঠাগুলি অন্তর্ভুক্ত বা বাদ দিতে চান তা চয়ন করতে পারেন৷ আপনি আপনার ইচ্ছা হিসাবে অনেক শর্ত থাকতে পারে.

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

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

আপনি যেভাবে চান সেভাবে সেটিংস সম্পূর্ণ করুন, তারপর সংরক্ষণ করুন এবং বন্ধ করুন ক্লিক করুন। এই বোতামে ক্লিক করার পর আপনার পপআপ amp হবে তার জন্য আপনাকে নিয়ে যাওয়া হবে।

পপআপগুলি কাস্টমাইজ করা যেতে পারে এবং তাদের সাথে গতিশীল সামগ্রী যুক্ত করা যেতে পারে।

জিনিসগুলিকে পরবর্তী স্তরে নিয়ে আসব, আমরা কি করব? এই মুহুর্তে, আমরা একটি টেমপ্লেট নির্বাচন করেছি এবং এক বা দুটি সিটিং টুইক করেছি, এবং এটিই। আমরা আমাদের পপআপকে আরও কাস্টমাইজ করতে চাই এমন পরিস্থিতি বিবেচনা করুন।

আমরা প্রক্রিয়াটির নতুন পপআপ যোগ করার পর্যায়ে ফিরে এসেছি, যেখানে আমরা একটি শিরোনাম নির্দিষ্ট করতে পারি এবং আরও একবার একটি টেমপ্লেট বেছে নিতে পারি।

এর পরে, আমরা এটি নির্বাচন করতে পারি, মৌলিক সেটিংসে প্রয়োজনীয় পরিবর্তন করতে পারি এবং আরও একবার পাবলিশ চাপতে পারি।

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

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

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

ধরুন ডাটাবেসের বিবরণ সঠিকভাবে পুনরুদ্ধার করা হয়নি। সেক্ষেত্রে, কিছু টেক্সটের আগে, কিছু টেক্সটের পরে এবং একটি ফলব্যাক টেক্সট (যদি ডাটাবেসের বিবরণ সঠিকভাবে উদ্ধার করা না হয়) উল্লেখ করা সম্ভব।

সুতরাং আসুন বোতামটির জন্য এই প্রক্রিয়াটি নকল করা যাক, যা পণ্যের মূল্য প্রদর্শন করবে। আমাদেরকে একটি বাধ্যতামূলক কল টু অ্যাকশন প্রদান করার জন্য আমরা পূর্ববর্তী পাঠ্যটিকে এখনই কিনুন হিসাবে বাক্যাংশ করতে পারি:

এমনকি আমরা এটিকে আরও এক ধাপ এগিয়ে নিতে পারি এবং পপআপ উইন্ডোর পটভূমি হিসাবে পণ্যের চিত্রটি ব্যবহার করতে পারি।

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

যদিও ডিজাইনটি উন্নত করা যেতে পারে, আপনি দেখতে পাচ্ছেন যে আমরা পপআপের পটভূমি হিসাবে পণ্যের নাম, এর দাম এবং পণ্যটির একটি চিত্র প্রদর্শন করছি। উজ্জ্বল !