ডিভিতে কীভাবে স্টিকি টেস্টিমোনিয়াল মডিউল তৈরি করবেন

Rifat Divi Tutorials Apr 21, 2022

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

ডিজাইন প্রিভিউ

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

টেমপ্লেট

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

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

আশ্চর্যজনক ওয়েবসাইট তৈরি করুন

সেরা বিনামূল্যে পৃষ্ঠা নির্মাতা Elementor সঙ্গে

এখুনি শুরু করুন

ডিজাইন একটি স্টিকি প্রশংসাপত্র বিভাগ

একটি নতুন বিভাগে একটি একক-কলাম সারি যোগ করা প্রথম ধাপ। শিরোনাম এই সারিতে কেন্দ্রীভূত হবে।

শিরোনাম পাঠ্য

এখন এই নতুন সারিতে একটি শিরোনাম পাঠ্য মডিউল যোগ করুন।

সেটিংস খুলুন এবং নিম্নলিখিত সমন্বয় করুন।

  • পাঠ্য: শিরোনাম 3
  • বিষয়বস্তু: খুশি গ্রাহকদের

ডিজাইন সেটিংস

ডিজাইন ট্যাবের অধীনে, নিম্নলিখিত পরিবর্তন করুন।

  • পাঠ্য প্রান্তিককরণ: কেন্দ্রীভূত
  • হরফ: চক্র পেচ
  • ওজন: গাঢ়
  • রঙ: #000000

এবং এটি সম্পূর্ণ বন্ধ করতে, ফোনের জন্য ডেস্কটপ এবং ট্যাবলেটে 50 পিক্সেল এবং মোবাইল ডিভাইসে 20 পিক্সেলের একটি ফন্ট সাইজ চয়ন করুন৷ আপনার পরিবর্তনগুলি সংরক্ষণ করুন এবং মডিউলের কনফিগারেশন থেকে প্রস্থান করুন।

  • আকার: ডেস্কটপ 50px, ট্যাবলেট 28px, Phone20px

প্রথম প্রশংসাপত্র সারি

এর পরে, শিরোনামের নীচে একটি 2/3, 1/3 সারি রাখুন। এই সারি প্রাথমিক সাক্ষ্য অন্তর্ভুক্ত করা হবে.

সারি সেটিংস

ডিজাইন ট্যাবটি নির্বাচন করুন এবং সমান করুন কলাম উচ্চতা চেক বক্সটি চেক করুন।

  • কলামের উচ্চতা সমান করুন: হ্যাঁ

কলাম সেটিংস

সারির সেটিংসের সাথে একযোগে প্রথম কলামের সেটিংস খুলুন। বর্ডার স্টাইল ড্রপ-ডাউন মেনু থেকে টপ বর্ডার স্টাইল নির্বাচন করুন। প্রস্থ 2px এবং রঙ #ffd600 হওয়া উচিত। সারি কনফিগারেশন বন্ধ করুন। এটি প্রশংসাপত্রের উপরে একটি হলুদ লাইন যোগ করবে, যা আমরা পূর্বে প্রতিস্থাপন করেছি।

  • সীমানা শৈলী: শীর্ষ
  • উপরের সীমানার রঙ: #ffd600
  • প্রস্থ: 2px

প্রশংসামূলক পাঠ্য

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

প্রশংসামূলক টেক্সট সেটিংস

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

বিষয়বস্তু সম্পাদকের মধ্যে প্রশংসাপত্রের বিষয়বস্তু লিখুন।

তারপর ডিজাইন ট্যাবে নেভিগেট করুন। ফন্ট স্টাইল হিসাবে চক্র পেচ নির্বাচন করুন। ওজন হিসাবে বোল্ড এবং রঙ হিসাবে কালো নির্বাচন করুন। পাঠ্য আকারের জন্য ডেস্কটপের জন্য 30px এবং ট্যাবলেটের জন্য 14px চয়ন করুন৷ ফোন কনফিগারেশন স্বয়ংক্রিয়ভাবে ট্যাবলেটের সাথে সিঙ্ক হবে, তাই আমাদের কিছু আপডেট করার প্রয়োজন হবে না। টেক্সট লাইন উচ্চতা বৈশিষ্ট্য 2em সেট করা উচিত. এটি একটি বিশাল প্রিন্ট প্রশংসাপত্র যা মনোযোগ আদেশ করবে ফলাফল.

  • হরফ: চক্র পেচ
  • ওজন: গাঢ়
  • রঙ কালো
  • আকার: ডেস্কটপ 30px, ট্যাবলেট 14px
  • লাইনের উচ্চতা: 2em

টেক্সট অ্যালাইনমেন্ট ড্রপ-ডাউন মেনু থেকে কেন্দ্রীভূত নির্বাচন করুন। পাঠ্য মডিউলের কনফিগারেশন বন্ধ করুন।

  • প্রান্তিককরণ: কেন্দ্রীভূত

প্রশংসাপত্র মডিউল সেটিংস

তারপর, ডান কলামে, একটি প্রশংসাপত্র মডিউল যোগ করুন। এটি স্টিকি হবে এবং এতে ব্যক্তির নাম, কোম্পানির নাম, চাকরির শিরোনাম এবং ফটোগ্রাফ অন্তর্ভুক্ত থাকবে।

সামগ্রী সেটিংস

মডিউলের সেটিংসে প্রশংসাপত্রের বিষয়বস্তু লিখুন। বডি সেকশন খালি রাখুন। এটি পাঠ্য মডিউল ব্যবহারের মাধ্যমে সম্পন্ন হয়েছিল।

  • লেখক
  • কাজের শিরোনাম
  • প্রতিষ্ঠান
  • ছবি

নীচে স্ক্রোল করে পটভূমি সাদাতে সেট করুন।

  • পটভূমি: #ffffff

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

  • স্টিকি পটভূমির রঙ: #000000

উদ্ধৃতি আইকন

তারপর ডিজাইন ট্যাবে নেভিগেট করুন। উদ্ধৃতি আইকনের রঙ হিসাবে #ffd600 চয়ন করুন।

  • উদ্ধৃতি আইকনের রঙ: #ffd600

ছবি

নিচে স্ক্রোল করে ছবির প্রস্থ এবং উচ্চতা 150px কমিয়ে দিন। গোলাকার কোণগুলি 0px এ সেট করা উচিত।

  • ছবির প্রস্থ: 150px
  • গোলাকার কোণ: 0px

পাঠ্য

টেক্সট অ্যালাইনমেন্ট ড্রপ-ডাউন মেনু থেকে কেন্দ্রীভূত বিকল্পটি নির্বাচন করুন। এটি পাঠ্যের কেন্দ্রে লেখকের নাম, কাজের শিরোনাম এবং কোম্পানির নাম রাখে।

  • পাঠ্য প্রান্তিককরণ: কেন্দ্রীভূত

লেখক পাঠ্য

হরফের জন্য চক্র পেচ নির্বাচন করুন এবং ওজনের জন্য বোল্ড এবং লেখক পাঠ্যের অধীনে প্রান্তিককরণের জন্য কেন্দ্রীভূত করুন। ডিফল্ট রঙ হিসাবে কালো নির্বাচন করুন। পিন আইকনটি নির্বাচন করুন এবং স্টিকির রঙ #ffd600 এ পরিবর্তন করুন। ডেস্কটপের আকার 20px সেট করা উচিত, যখন ট্যাবলেটের আকার 14px সেট করা উচিত।

  • হরফ: চক্র পেচ
  • নিয়মিত পাঠ্যের রঙ: কালো
  • পিন করা পাঠ্যের রঙ: #ffd600
  • আকার: 20px ডেস্কটপ, 14px ট্যাবলেট

পজিশন টেক্সট

এর পরে, পজিশন টেক্সটে নিচে স্ক্রোল করুন। ফন্ট হিসাবে Exo নির্বাচন করুন। ডিফল্ট পাঠ্য রঙ হিসাবে কালো চয়ন করুন। পিন করা রঙটিকে সাদাতে সেট করতে, পিন আইকনে ক্লিক করুন।

  • হরফ: Exo
  • নিয়মিত পাঠ্যের রঙ: #000000
  • পিন করা পাঠ্যের রঙ: #ffffff

কোম্পানির পাঠ্য

"কোম্পানি পাঠ্য" শিরোনামের বিভাগে নীচে স্ক্রোল করুন। ফন্ট হিসাবে Exo নির্বাচন করুন। ডিফল্ট পাঠ্য রঙ হিসাবে কালো চয়ন করুন। পিন করা রঙটিকে সাদাতে সেট করতে, পিন আইকনে ক্লিক করুন।

  • হরফ: Exo
  • নিয়মিত পাঠ্যের রঙ: #000000
  • পিন করা পাঠ্যের রঙ: #ffffff

বক্স ছায়া

বক্স বিভাগে নিচে যান এবং প্রথম বিকল্পটি নির্বাচন করুন।

  • বক্স শ্যাডো: প্রথম ছায়া বিকল্প

স্ক্রোল প্রভাব

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

  • স্টিকি অবস্থান: উপরে লেগে থাকুন
  • স্টিকি টপ অফসেট: 50px
  • নীচের স্টিকি উপাদান: কলাম

স্টিকি অবস্থানের জন্য ট্যাবলেট চিহ্ন থেকে Do not Stick বেছে নিন। এটি মডিউলটিকে ট্যাবলেট এবং স্মার্টফোনগুলি মেনে চলতে বাধা দেয়। মডিউলের কনফিগারেশন বন্ধ করুন।

  • স্টিকি পজিশন: স্টিকি করবেন না

এখন, আপনি স্ক্রীনের নিচে নেভিগেট করার সাথে সাথে প্রশংসাপত্র মডিউলটি শীর্ষে থাকে এবং রঙ পরিবর্তন করে।

একবার মডিউলটি কলামের নীচের সাথে সারিবদ্ধ হয়ে গেলে, এটি কলামের সাথে লকস্টেপে স্ক্রোল করে।

সারি নকল

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

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

চূড়ান্ত নকশা

সমস্ত তাড়াহুড়ো করার পরে, আমাদের নকশাটি শেষ পর্যন্ত এইরকম দেখায়।

সর্বশেষ ভাবনা

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