Divi: কিভাবে একটি ব্লগ পোস্টে একটি হিরো বিভাগ যোগ করবেন

আপনি আপনার ব্লগ পোস্ট উন্নত করতে চান? Divi এটিতে একটি হিরো বিভাগ যোগ করে?

পূর্ণ-স্ক্রীন হিরো বিভাগগুলি যে কোনও ওয়েব পৃষ্ঠায় দুর্দান্ত দেখায়, তবে সেগুলি বিশেষ করে ব্লগ পোস্টগুলিতে দুর্দান্ত। 

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

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

এর শুরু করা যাক।

জরিপ

এই টিউটোরিয়ালে আমরা কী ডিজাইন করব তার একটি পূর্বরূপ।

আরও পড়ুন: Divi: কিভাবে আপনার ছবি সুন্দর করতে "গ্রেডিয়েন্ট বিল্ডার" ব্যবহার করবেন

পোস্ট শিরোনাম ডেস্কটপ সংস্করণ মডিউল সহ হিরো বিভাগ

পোস্ট শিরোনাম মোবাইল সংস্করণ মডিউল সহ হিরো বিভাগ

পোস্ট শিরোনাম ডেস্কটপ সংস্করণ মডিউল সহ বিকল্প হিরো বিভাগের বিন্যাস

এখন DIVI ডাউনলোড করুন!!!

মোবাইল পোস্ট শিরোনাম মডিউল সহ বিকল্প হিরো বিভাগের লেআউট

মেটাডেটা ডেস্কটপ সংস্করণ সহ হিরো বিভাগ

মেটাডেটা মোবাইল সংস্করণ সহ হিরো বিভাগ

এখন DIVI ডাউনলোড করুন!!!

আপনার ফুলস্ক্রিন হিরো বিভাগের জন্য ব্লগ পোস্ট টেমপ্লেট

আপনি Divi Theme Builder-এ শুরু থেকেই ব্লগ পোস্ট টেমপ্লেট তৈরি করতে পারেন অথবা Elegant Themes ব্লগ থেকে একটি টেমপ্লেট ডাউনলোড করতে পারেন। সেগুলি খুঁজে পেতে, ব্লগে অনুসন্ধান করুন। "ফ্রি ব্লগ পোস্ট টেমপ্লেট". আপনি একটি টেমপ্লেট ডাউনলোড করলে, এটি আনজিপ করতে ভুলবেন না।

আমাদের উদাহরণের জন্য, আমরা ব্যবহার করব  Divi এর ফ্যাশন ডিজাইনার লেআউট প্যাকের জন্য বিনামূল্যে ব্লগ পোস্ট টেমপ্লেট . আমরা বিনামূল্যে লেআউট প্যাক ব্যবহার করি হেডার এবং ফুটার ফ্যাশন ডিজাইনার .

আপনার ফুলস্ক্রিন হিরো বিভাগের জন্য আপনার ব্লগ পোস্ট টেমপ্লেট ডাউনলোড করুন বা তৈরি করুন

আপনি আপনার ব্লগ পোস্ট টেমপ্লেট ডাউনলোড করতে পারেন বা স্ক্র্যাচ থেকে একটি তৈরি করতে পারেন৷ আমরা একটি আপলোড করব, তবে একটি পূর্ণ-স্ক্রীন হিরো বিভাগ তৈরি করার প্রক্রিয়া একই।

আরো দেখুন: ডিভি: হিরো বিভাগের জন্য মুখোশ এবং পটভূমির প্যাটার্নগুলি কীভাবে ব্যবহার করবেন

পদ্ধতি 1: ফুলস্ক্রিন পোস্ট শিরোনাম মডিউল

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

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

নির্বাচন করা সম্পূর্ণ প্রস্থ পোস্ট শিরোনাম পূর্ণ-প্রস্থ মডিউলের তালিকায়।

সমস্ত আইটেম ডিফল্টরূপে নির্বাচিত হয়. তাদের সক্রিয় ছেড়ে দিন। স্ক্রোল করুন বৈশিষ্ট্যযুক্ত ইমেজ বসানো এবং নির্বাচন করুন শিরোনাম উপরে.

• বৈশিষ্ট্যযুক্ত ছবি বসানো: শিরোনাম উপরে

এ স্ক্রোল করুন পেছনের রং এবং রঙ সেট করুন #fff9f2

• পটভূমি: #fff9f2

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

ট্যাব নির্বাচন করুন ডিজাইন। শিরোনাম পাঠ্যের জন্য, H1 রাখুন এবং Playfair প্রদর্শন নির্বাচন করুন। এটিকে লেফট জাস্টিফাইয়ে সেট করুন এবং রঙের জন্য #34332e বেছে নিন।

• খেতাব :
  • শিরোনাম স্তর: H1
  • ফন্ট: প্লেফেয়ার ডিসপ্লে
  • পাঠ্য প্রান্তিককরণ: বাম ন্যায়সঙ্গত
  • পাঠ্যের রঙ: #34332e

জন্য অক্ষরের আকার , ডেস্কটপ সংস্করণ 65px, মোবাইল সংস্করণ 42px এবং সারির উচ্চতা 1,2em-এ সেট করুন৷

• শিরোনাম পাঠ্যের আকার (ডেস্কটপ): 65px (ডেস্কটপ), 42px (ফোন)
• শিরোনাম লাইন উচ্চতা: 1,2 এম

মেটা পাঠ্য

এ স্ক্রোল করুন মেটা টেক্সট. ফন্টের জন্য মন্টসেরাট নির্বাচন করুন এবং এটিকে মিডিয়াম, বড় হাতের, ডেস্কটপ সংস্করণের জন্য ডান প্রান্তিককরণ এবং মোবাইল সংস্করণের জন্য বাম প্রান্তিককরণে সেট করুন। রঙের জন্য #7b7975 চয়ন করুন।

• মেটাফন্ট:
  • হরফ: মন্টসেরাট
  • ওজন: মাঝারি
  • শৈলী: টিটি
• মেটা টেক্সট:
  • প্রান্তিককরণ: ডান (ডেস্কটপ), বাম (ফোন)
  • রঙ: #7b7975

স্থির কর অক্ষরের আকার ডেস্কটপ সংস্করণের জন্য 14 px, মোবাইল সংস্করণের জন্য 10 px, অক্ষরের ব্যবধান 1 px এবং লাইনের উচ্চতা 1,6 em। আপনার সেটিংস বন্ধ করুন এবং আপনার টেমপ্লেট সংরক্ষণ করুন.

• মেটা টেক্সট:
  • আকার (ডেস্কটপ): 14px
  • সাইজ (ফোন): 10px
• অক্ষর ব্যবধান: 1px
• লাইনের উচ্চতা: 1,6 এম

পটভূমি ছবিতে শিরোনাম

আপনি যদি সিদ্ধান্ত নেন যে আপনি নির্বাচিত ছবিতে শিরোনামটি প্রদর্শিত হতে চান, তবে একই নকশা সেটিংস ব্যবহার করুন এবং ট্যাবে ফিরে যান সন্তুষ্ট. 

নির্বাচন করা শিরোনাম/মেটা পটভূমি চিত্র ঢালা বৈশিষ্ট্যযুক্ত ইমেজ বসানো.

• ফিচারড ইমেজ প্লেসমেন্ট: টাইটেল/মেটা ব্যাকগ্রাউন্ড ইমেজ

এ স্ক্রোল করুন পটভূমি এবং নির্বাচন করুন ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট. বাম রঙটি #fff9f2 এ সেট করুন, ডান রঙ rgba(255,255,255,0), দিক 90 ডিগ্রীতে, স্টার্ট পজিশন 30% এ সেট করুন এবং ব্যাকগ্রাউন্ডের ইমেজের উপরে গ্রেডিয়েন্ট স্থাপন করতে হ্যাঁ বেছে নিন। বন্ধ করুন এবং আপনার সেটিংস সংরক্ষণ করুন.

• গ্রেডিয়েন্ট স্টপস:
  • 30%: #fff9f2
  • 100%: rgba(255,255,255,0)
• গ্রেডিয়েন্ট দিক: 90 ডিগ্রী
• ব্যাকগ্রাউন্ড ইমেজের উপরে স্কয়ার গ্রেডিয়েন্ট: হ্যাঁ

পদ্ধতি 2: মেটাডেটা সহ পূর্ণ স্ক্রীন হিরো বিভাগ

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

প্রথমে, টেমপ্লেটটি ডাউনলোড করুন এবং প্রথম বিভাগটি মুছুন। আমরা বাম কলামে মডিউল এবং তাদের সেটিংস পুনরায় তৈরি করব, কিন্তু আমরা সেগুলির মধ্য দিয়ে যাব যাতে আপনি সেগুলি কনফিগার করতে পারেন৷

মেটাডেটা সহ ফুলস্ক্রিন হিরো বিভাগের সেটিংস

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

• গ্রেডিয়েন্ট স্টপস:
  • 30%: #fff9f2
  • 100%: rgba(255,255,255,0)
• গ্রেডিয়েন্ট দিক: 90 ডিগ্রী
• ব্যাকগ্রাউন্ড ইমেজের উপরে স্কয়ার গ্রেডিয়েন্ট: হ্যাঁ

নির্বাচন করা পটভূমি চিত্র এবং বিকল্পটি নির্বাচন করুন ডায়নামিক কন্টেন্ট ব্যবহার করুন.

চয়ন করুন বৈশিষ্ট্যযুক্ত ইমেজ অপশনে

ট্যাব নির্বাচন করুন নকশাএবং স্ক্রোল করুন মাপবদল. ন্যূনতম উচ্চতায় 100vh যোগ করুন। বিভাগ সেটিংস বন্ধ করুন।

• ন্যূনতম উচ্চতা: 100vh

মেটাডেটা সহ ফুলস্ক্রিন হিরো বিভাগের সেটিংস

এরপরে, বিভাগে একটি ডবল কলাম সারি যোগ করুন।

যুক্ত কর একটি পাঠ্য মডিউল ডান কলামে।

এর বিষয়বস্তুর জন্য, নির্বাচন করুন ডায়নামিক কন্টেন্ট ব্যবহার করুন.

চয়ন করুন পোস্ট/আর্কাইভ শিরোনাম বিকল্পের তালিকায়।

• গতিশীল বিষয়বস্তু: পোস্ট/আর্কাইভ শিরোনাম

ট্যাবে যান নকশা।

• শিরোনাম:
  • পাঠ্য: H1
  • ফন্ট: প্লেফেয়ার ডিসপ্লে
  • পাঠ্য প্রান্তিককরণ: বাম ন্যায়সঙ্গত
  • পাঠ্যের রঙ: #34332e

এর আকারের জন্য texte , ডেস্কটপ সংস্করণের জন্য 65px, মোবাইল সংস্করণের জন্য 42px এবং সারির উচ্চতা 1,2em এ সেট করা হয়েছে।

• শিরোনাম:
  • পাঠ্যের আকার: 65px (ডেস্কটপ), 42px (ফোন)
  • লাইনের উচ্চতা: 1,2 এম

এ স্ক্রোল করুন ব্যবধান এবং শীর্ষ প্যাডিংয়ের জন্য 50% লিখুন। সেটিংস বন্ধ করুন।

• প্যাডিং: 50% (শীর্ষ)

এছাড়াও আপনি এই নিবন্ধটি পড়তে পারেন: কিভাবে Divi এর ফুল প্রস্থ হেডার মডিউল দিয়ে একটি হিরো সেকশন তৈরি করবেন

মেটাডেটা বিভাগ সহ হিরো বিভাগ

একটি নতুন বিভাগ যোগ করুন হিরো বিভাগের অধীনে নিয়মিত।

এর সেটিংস খুলুন এবং সেট করুন রঙ #fff9f2 এর পটভূমি। সেটিংস বন্ধ করুন।

• পটভূমির রঙ: #fff9f2

তারপর একটি যোগ করুন Ligne নতুন বিভাগে 4টি কলাম।

মেটাডেটা বিভাগের পাঠ্য সহ পূর্ণ পর্দার নায়ক

যুক্ত কর একটি পাঠ্য মডিউল বাম কলামে।

মডিউল সেটিংস খুলুন এবং নির্বাচন করুন ডায়নামিক কন্টেন্ট ব্যবহার করুন পাঠ্যের মূল অংশের জন্য।

নির্বাচন করা অতীত বিভাগ তালিকাতে

• গতিশীল বিষয়বস্তু: পোস্ট বিভাগ

ট্যাব নির্বাচন করুন নকশা এবং হেডিং টেক্সটে নিচে স্ক্রোল করুন। H4 নির্বাচন করুন। ফন্টের জন্য প্লেফেয়ার ডিসপ্লে নির্বাচন করুন এবং এটিকে মিডিয়াম, বড় হাতের অক্ষরে, ডেস্কটপ সংস্করণের জন্য ডান প্রান্তিককরণ এবং ফোন সংস্করণের জন্য বাম প্রান্তিককরণে সেট করুন। রঙের জন্য #7b7975 চয়ন করুন।

• শিরোনাম:
  • পাঠ্য প্রদর্শন
  • ফন্ট: প্লেফেয়ার ডিসপ্লে
  • হরফের ওজন: মাঝারি
  • শৈলী: টিটি
  • পাঠ্য প্রান্তিককরণ: কেন্দ্র
  • পাঠ্যের রঙ: #7b7975

ডেস্কটপ সংস্করণের জন্য ফন্টের আকার 14 পিক্সেল, মোবাইল সংস্করণের জন্য 10 পিক্সেল, অক্ষরের ব্যবধান 1 পিক্সে এবং লাইনের উচ্চতা 1,6 এম সেট করুন। আপনার সেটিংস বন্ধ করুন এবং আপনার টেমপ্লেট সংরক্ষণ করুন.

• শিরোনাম 4:
  • আকার (ডেস্কটপ): 14px
  • সাইজ (ফোন): 10px
  • অক্ষর ব্যবধান: 1px
  • লাইনের উচ্চতা: 1,6 এম

এ স্ক্রোল করুন ব্যবধান এবং নীচের মার্জিনে 0px যোগ করুন। সেটিংস বন্ধ করুন।

• মার্জিন (নীচে): 0px

মেটা টেক্সট মেটাডেটা সহ ফুলস্ক্রিন হিরো বিভাগ

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

লেখক

সেটিংস খুলুন এবং গতিশীল সামগ্রী মুছুন।

দেখার জন্য ক্লিক করুন ডায়নামিক কন্টেন্ট ব্যবহার করুন এবং নির্বাচন করুন পোস্ট লেখক.

• গতিশীল বিষয়বস্তু: পোস্ট লেখক

ট্যাবে নকশা, নিম্নলিখিত সেটিংস পরিবর্তন করুন. 

• শিরোনাম 4:
• হরফ: মন্টসেরাট
• হরফের ওজন: মাঝারি
• শৈলী: টিটি
• পাঠ্য প্রান্তিককরণ (ডেস্কটপ): কেন্দ্র
• পাঠ্য প্রান্তিককরণ (ফোন): বাম
• রঙ: #7b7975

এর পরামিতি অক্ষরের আকার অন্তর্ভুক্ত:

• পাঠ্যের আকার: 14px (ডেস্কটপ), 10px (ফোন)
• অক্ষর ব্যবধান: 1px
• লাইনের উচ্চতা: 1,6 এম

La নিচের মার্জিন 0px থাকতে হবে।

• মার্জিন (নীচে): 0px

তারিখ

কপি লেখক মডিউলটি এবং পরবর্তী কলামে টেনে আনুন।

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

• গতিশীল বিষয়বস্তু: পোস্ট প্রকাশের তারিখ

commentaires

অবশেষে, কপি পোস্ট প্রকাশের তারিখ মডিউলটি শেষ কলামে টেনে আনুন।

অন্যান্য মডিউলগুলির মতো, গতিশীল সামগ্রী সরান এবং নির্বাচন করুন ডায়নামিক কন্টেন্ট ব্যবহার করুন .

চয়ন করুন পোস্ট মন্তব্য গণনা আপনার পছন্দ থেকে।

• ডায়নামিক কন্টেন্ট: পোস্ট কমেন্ট কাউন্ট

এইবার ক্ষেত্রে একটি স্পেস এবং মন্তব্য শব্দ যোগ করুন পর . ছোট মডেলটি বন্ধ করুন তারপর সেটিংস বন্ধ করুন। আপনার কাজ সংরক্ষণ করুন.

• পরে: মন্তব্য

আরও পড়ুন: Divi: ফুল স্ক্রিনে ফুল উইথ হেডার মডিউল কীভাবে প্রদর্শন করবেন

Résultats

পোস্ট শিরোনাম ডেস্কটপ সংস্করণ মডিউল সহ হিরো বিভাগ

পোস্ট শিরোনাম মোবাইল সংস্করণ মডিউল সহ হিরো বিভাগ

পোস্ট শিরোনাম ডেস্কটপ সংস্করণ মডিউল সহ বিকল্প হিরো বিভাগের বিন্যাস

মোবাইল পোস্ট শিরোনাম মডিউল সহ বিকল্প হিরো বিভাগের লেআউট

মেটাডেটা ডেস্কটপ সংস্করণ সহ হিরো বিভাগ

মোবাইল সংস্করণ মেটাডেটা সহ হিরো বিভাগ

এখন DIVI ডাউনলোড করুন!!!

উপসংহার

ব্যস! আপনার Divi ব্লগ পোস্ট টেমপ্লেটে একটি পূর্ণস্ক্রিন হিরো বিভাগ কীভাবে যুক্ত করবেন তা এখানে আমাদের পর্যালোচনা। 

ডিভি এবং থিম বিল্ডার মডিউলগুলি পূর্ণ-স্ক্রীন হিরো বিভাগগুলি তৈরি করার জন্য বিভিন্ন বিকল্প অফার করে। সমস্ত পদ্ধতি খুব ভাল কাজ করে এবং সব তাদের সুবিধা আছে. 

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

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

আপনিও পরামর্শ করতে পারেন আমাদের সংস্থান, আপনার যদি ইন্টারনেট সাইট তৈরির প্রকল্পগুলি চালিত করার জন্য আরও উপাদানের প্রয়োজন হয়।

এছাড়াও আমাদের গাইড সঙ্গে পরামর্শ করতে দ্বিধা করবেন না ওয়ার্ডপ্রেস ব্লগ তৈরি বা এক ডিভি: সর্বকালের সেরা ওয়ার্ডপ্রেস থিম.

কিন্তু ইতিমধ্যে, আপনার বিভিন্ন সামাজিক নেটওয়ার্কে এই নিবন্ধটি ভাগ করুন.

...