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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

নিম্নলিখিত বিকল্পগুলি সেটিংস ট্যাবে উপলব্ধ:

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

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

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

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

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

উইন্ডোর নীচে-ডানদিকে অবস্থান পরিবর্তন করেন তখন এটি কেমন দেখায়

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

"WooCommerce এ এলিমেন্টর পপআপ তৈরি করুন" নিয়ে 2টি চিন্তাভাবনা

  1. Здравствуйте, вопрос таков. При нажатии на кнопку в popup окне происходит переход на якорь(его мы указываем в ссылке) но при переходе на якорьаке окне. Каким образом можно организовать закрытие পপআপ окна и переход на якорь одновременно?

একটি মন্তব্য ত্যাগ করুন

আপনার ইমেইল ঠিকানা প্রচার করা হবে না. প্রয়োজনীয় ক্ষেত্রগুলি চিহ্নিত করা হয়েছে *