এলিমেন্টরে কীভাবে একটি তির্যক পটভূমি তৈরি করবেন (2026 গাইড)

একটি তির্যক পটভূমি পৃষ্ঠা জুড়ে একটি অংশের প্রান্তটিকে সমতল রাখার পরিবর্তে একটি কোণে কেটে দেয়। এটি অনুভূমিক ব্যান্ডগুলির স্বাভাবিক স্ট্যাককে ভেঙে দেয় এবং চোখটি পরবর্তী বিভাগে তির্যকটিকে অনুসরণ করে। ল্যান্ডিং পৃষ্ঠা এবং SaaS হোমপেজগুলি এটি ক্রমাগত ব্যবহার করে।

Elementor এখনও কোন “w এই বিভাগটিকে "টগল" নেই, তাই আপনি এটি CSS এর কয়েকটি লাইন দিয়ে করেন। সমস্যা হল, Elementor এর নিজস্ব কাস্টম CSS ফিল্ড প্রো এর পিছনে লক করা আছে। তাই এই টিউটোরিয়াল বিনামূল্যে ব্যবহার করে মাস্টার অ্যাডঅনগুলিতে কাস্টম CSS এক্সটেনশন, যা বিনামূল্যে এলিমেন্টরের প্রতিটি উপাদানে একটি CSS বক্স যোগ করে।

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

আপনি শুরু করার আগে আপনার যা প্রয়োজন

• এলিমেন্টর ফ্রি (3.6 বা নতুন, তাই কন্টেইনার চালু আছে)
• মাস্টার অ্যাডনস: wordpress।org থেকে বিনামূল্যে এটি ইনস্টল করুন, তারপর কাস্টম CSS এক্সটেনশন চালু করুন
• একটি পটভূমি রঙ বা চিত্র সেট সহ একটি ধারক। এটা এড়িয়ে যাবেন না। Skew বাক্সটিকে রূপান্তরিত করে, তাই যদি বাক্সটিতে দৃশ্যমান কিছু না থাকে তবে আপনি কোন পরিবর্তন দেখতে পাবেন না। একটি স্বচ্ছ ধারক হল এক নম্বর কারণ লোকেরা মনে করে এই কৌশলটি ভেঙে গেছে।

আপনার কোনো সময়ে Elementor Pro এর প্রয়োজন হবে না। যদি আপনার কাছে এটি ইতিমধ্যেই থাকে তবে এর নেটিভ কাস্টম CSS ফিল্ড একইভাবে আচরণ করে, তাই পরিবর্তে সেখানে কোডটি পেস্ট করুন।

আপনি কিছু পেস্ট করার আগে তির্যক বোঝা

Skewing একটি CSS রূপান্তর। transform: skew(0deg, -10deg) y অক্ষ বরাবর উপাদানটিকে দশ ডিগ্রি কাত করে, এর উপরের এবং নীচের প্রান্তগুলিকে তির্যকগুলিতে পরিণত করে।

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

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

দুটি পাত্র, দুটি নিয়ম, বিপরীত মান। এটাই পুরো ব্যাপার।

ধাপ 1: ধারক কাঠামো তৈরি করুন

Elementor এ আপনার পৃষ্ঠা খুলুন এবং একটি ড্রপ করুন ধারক। এর প্রস্থ সম্পূর্ণ প্রস্থে সেট করুন। এটি বাইরেরটি, যেটি কোণ বহন করে।

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

সুতরাং গঠন হল:

• বাইরের পাত্র: পটভূমির রঙ বা চিত্র, তির্যক পায়
• ভিতরের পাত্র: আপনার সমস্ত বিষয়বস্তু, পাল্টা তির্যক পায়

বিভাগ এবং অভ্যন্তরীণ বিভাগে এখনও নির্মিত একটি পুরানো পৃষ্ঠা বজায় রাখা? যুক্তি অভিন্ন। বাইরের উপাদান skews, ভিতরের উপাদান un-skews। যদিও নতুন কিছুর জন্য, কন্টেইনার ব্যবহার করুন। তারা অনেক কম DOM পাঠায়, যা আপনি যদি যত্ন নেন তাহলে যোগ করে এলিমেন্টর পৃষ্ঠার গতি.

ধাপ 2: বাইরের পাত্রে তির্যক CSS যোগ করুন

বাইরের ধারক নির্বাচন করুন, যান উন্নত ট্যাব, এবং খুঁজুন এমএ কাস্টম সিএসএস মাস্টার অ্যাডনস যোগ করে যে বাক্স। এটি পেস্ট করুন:

selector {
  padding: 400px 0;
  margin-top: -200px;
  transform: skew(0deg, -10deg);
  overflow: hidden;
}

এখানে প্রতিটি লাইন কি করছে, তাই আপনি শুধু আশা না করে এটি সামঞ্জস্য করতে পারেন:

• selector "এই নির্দিষ্ট উপাদানের জন্য এলিমেন্টরের সংক্ষিপ্ত বিবরণ।" মাস্টার অ্যাডনস এটি আপনার জন্য স্কোপ করে, তাই নিয়মটি অন্য পাত্রে ফুটো হতে পারে না।
• padding: 400px 0 কোণীয় প্রান্তগুলি কোথাও যাওয়ার জন্য ধারকটিকে যথেষ্ট উল্লম্ব ঘর দেয়। একটি ছোট পাত্রে তির্যক করুন এবং আপনি কেবল কোণগুলি ক্লিপ করুন।
• margin-top: -200px ধারকটিকে উপরের একটিতে টেনে নিয়ে যায় যাতে একটি সাদা ত্রিভুজ পিছনে না রেখে তির্যকটি ওভারল্যাপ হয়। অর্ধেক প্যাডিং মান একটি শালীন শুরু অনুপাত।
• transform: skew(0deg, -10deg) কোণ নিজেই। নেতিবাচক একদিকে কাত, অন্যটি ধনাত্মক।
• overflow: hidden তির্যক কোণগুলিকে পাশের দিকে ছড়িয়ে পড়া থেকে রক্ষা করে। এটি ছেড়ে দিন এবং আপনি একটি অনুভূমিক স্ক্রলবার পাবেন, যেটিতে আমি ফিরে আসব।

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

এই টিউটোরিয়ালের 2020 সংস্করণে চারটি বিক্রেতা-প্রিফিক্সড লাইন তালিকাভুক্ত করা হয়েছে (-webkit-, -moz-, -ms-, -o-)। তাদের মুছে ফেলুন। উপসর্গহীন transform এখন প্রায় এক দশক ধরে প্রতিটি ব্রাউজারে কাজ করেছে, এবং সেই অতিরিক্ত লাইনগুলি CSS বক্সটিকে পড়া কঠিন করে তোলে।

ধাপ 3: ভিতরের পাত্রে পাল্টা তির্যক

এই মুহুর্তে আপনার বিষয়বস্তু ব্যাকগ্রাউন্ড সহ কাত হয়। নির্বাচন কর ভিতরের ধারক, এর উন্নত ট্যাব খুলুন এবং এটিকে MA কাস্টম CSS-এ পেস্ট করুন:

selector {
  transform: skew(0deg, 10deg);
}

একই সংখ্যা, বিপরীত চিহ্ন। বাইরের পাত্রে -10deg এর ভিতরের ধারক মানে 10deg। অন্যটি পরিবর্তন না করে একটি পরিবর্তন করুন এবং আপনার পাঠ্যটি একটি সামান্য কোণে বসে যা পাঠকরা লক্ষ্য করেন যদিও তারা কেন বলতে পারেন না।

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

ধাপ 4: মোবাইল ওভারফ্লো ঠিক করুন (এটি এড়িয়ে যাবেন না)

বেশিরভাগ টিউটোরিয়াল ধাপ 3 এ থামে এবং এই কারণেই তির্যক বিভাগগুলি এক সপ্তাহ পরে লাইভ সাইটগুলি থেকে ফিরে আসে।

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

দুটি জিনিস এটি প্রতিরোধ করে:

1. রাখা overflow: hidden তির্যক পাত্রে, উপরের কোডের মতো।
2. ছোট পর্দায় কোণ হ্রাস করুন। একটি 10-ডিগ্রি তির্যক যা একটি 1440px মনিটরে তীক্ষ্ণ দেখায় একটি 375px ফোনে একটি কঠোর তির্যক হয়ে যায় এবং এটি আপনার শিরোনামে খায়।

বাইরের পাত্রের CSS বক্সে কোডের নীচে এটি যোগ করুন:

@media (max-width: 767px) {
  selector {
    padding: 200px 0;
    margin-top: -100px;
    transform: skew(0deg, -4deg);
  }
}

এবং ভিতরের পাত্রে ম্যাচিং রিভার্সাল:

@media (max-width: 767px) {
  selector {
    transform: skew(0deg, 4deg);
  }
}

এখন লেআউট নষ্ট করার পরিবর্তে প্রভাব স্কেল নিচে। এটি একটি বাস্তব ফোনে পরীক্ষা করুন, শুধুমাত্র সম্পাদকের প্রতিক্রিয়াশীল পূর্বরূপ নয়, যেহেতু পূর্বরূপ ফলক সর্বদা ওভারফ্লো পুনরুত্পাদন করে না। আপনি যদি Elementor এর ডিফল্টের পরিবর্তে কাস্টম ব্রেকপয়েন্ট চালান, তাহলে কাস্টম ব্রেকপয়েন্ট এক্সটেনশন আপনাকে এই মিডিয়া প্রশ্নগুলিকে আপনার প্রকৃত ডিভাইসের প্রস্থের সাথে মেলাতে দেয়৷।

আধুনিক বিকল্প: ক্লিপ-পাথ, কোনো পাল্টা-তির্যক ছাড়াই

স্কু-এন্ড-কাউন্টার-স্কু কাজ করে, এবং এটি মূল টিউটোরিয়ালটি শিখিয়েছে। যদিও এখন একটি পরিষ্কার উপায় আছে, এবং একটি নতুন নির্মাণের জন্য এটি সাধারণত আমি পৌঁছাতে চাই।

clip-path উপাদানটিকে রূপান্তরিত করার পরিবর্তে একটি আকৃতি কেটে দেয়। যেহেতু এটি ঘোরানোর পরিবর্তে ক্লিপ করে, তাই ভিতরের বিষয়বস্তু কখনই নড়াচড়া করে না, তাই সিঙ্ক রাখার জন্য কোনও নেস্টেড কন্টেইনার এবং দ্বিতীয় মান নেই।

একটি ধারক, একটি নিয়ম:

selector {
  padding: 160px 0;
  clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%);
}

এই চারটি স্থানাঙ্ক হল কোণ, উপরে-বাম থেকে ঘড়ির কাঁটার দিকে। কোণ পরিবর্তন করতে শতাংশ নাজ করুন: বাড়ান 6% একটি খাড়া কাটা জন্য, এটি দিকে ড্রপ 0 সূক্ষ্ম কিছু জন্য। আপনি শুধুমাত্র নীচের প্রান্তটি কোণ করতে পারেন এবং উপরের সমতলটি ছেড়ে যেতে পারেন, যা একজন নায়কের জন্য সাধারণ প্যাটার্ন।

আপনি কোন পদ্ধতি ব্যবহার করা উচিত?

প্রতিটি বর্তমান ব্রাউজার উভয়ই পরিচালনা করে। চেক করুন MDN-এ ক্লিপ-পাথ সাপোর্ট টেবিল আপনি যদি অস্বাভাবিক কিছু সমর্থন করে আটকে থাকেন।

সম্পূর্ণভাবে CSS এড়িয়ে যান: তৈরি টেমপ্লেট আমদানি করুন

কোড স্পর্শ করতে চান না? তির্যক ব্যাকগ্রাউন্ড লেআউট একটি টেমপ্লেট হিসাবে জাহাজ। Elementor দিয়ে যেকোনো পৃষ্ঠা সম্পাদনা করুন, ক্লিক করুন মাস্টার অ্যাডঅন টেমপ্লেট লাইব্রেরি অ্যাড-এলিমেন্ট বোতামের পাশে আইকন, এবং তির্যক ব্যাকগ্রাউন্ড টেমপ্লেটটি সন্ধান করুন। এটি আমদানি করুন, তারপর আপনার নিজস্ব পাঠ্য এবং রঙে অদলবদল করুন।

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

যেখানে তির্যক ব্যাকগ্রাউন্ড আসলে কাজ করে

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

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

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

সমস্যা সমাধান

• কিছুই বদলায়নি। ধারকটির কোন পটভূমি নেই। একটি রঙ বা চিত্র সেট করুন এবং আবার দেখুন।
• পুরো পাতা পাশে স্ক্রোল। যোগ করুন overflow: hidden তির্যক পাত্রে, তারপর পরীক্ষা করুন যে এর পিতামাতাও উপচে পড়ছে না।
• লেখাটি এখনও কাত। কাউন্টার-স্কু ভুল উপাদানের উপর, বা চিহ্নটি ভুল। বাইরের পাত্রটি নেতিবাচক হলে, ভিতরেরটি ইতিবাচক হতে হবে।
• বিভাগের উপরে সাদা ফাঁক। নেতিবাচক বাড়ান margin-top তাই কোণটি উপরের বিভাগে আরও টানে।
• কোণটি অপ্রত্যাশিতভাবে চারপাশে লাফ দেয়। Elementor এর অন্তর্নির্মিত ট্রান্সফর্ম নিয়ন্ত্রণ একই উপাদানে সেট করা আছে এবং আপনার CSS ওভাররাইড করছে। তাদের সাফ করুন।
• অ্যাডভান্সড ট্যাবে কোনো MA কাস্টম CSS বক্স নেই। এক্সটেনশন বন্ধ করা হয়। মাস্টার অ্যাডঅন, তারপর সেটিংস, তারপর এক্সটেনশন, এবং এটি সক্ষম করুন।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী

মোড়ানো

Elementor-এ একটি তির্যক ব্যাকগ্রাউন্ড তৈরি করা দুটি CSS বাক্সে দুটি নিয়মে নেমে আসে: বাইরের পাত্রটিকে তির্যক করুন, ভিতরেরটিকে পাল্টা তির্যক করুন। যোগ করুন overflow: hidden, মোবাইলে কোণটি সহজ করুন এবং এটি শুধুমাত্র সম্পাদকের পরিবর্তে বাস্তব ডিভাইসগুলিতে ধরে রাখবে৷ একটি নতুন বিল্ডে, clip-path অর্ধেক সেটআপের সাথে আপনাকে একই চেহারা দেয়।

এটি সব বিনামূল্যে Elementor উপর সঞ্চালিত হয়, যেহেতু মাস্টার অ্যাডনস কাস্টম সিএসএস বক্সটি শুরু করার জন্য সেখানে রাখে। আপনি যদি পরে বাকি টুলকিট (থিম বিল্ডার, পপআপ বিল্ডার, সম্পূর্ণ এক্সটেনশন সেট) চান, তাহলে সেটাই হবে প্রো কভার, কিন্তু এই টিউটোরিয়ালের কিছুই এর প্রয়োজন নেই।

সম্পর্কিত পড়া: এলিমেন্টর অ্যানিমেশন প্রভাব, এলিমেন্টরে ভাসমান প্রভাব কীভাবে যুক্ত করবেন, এবং এলিমেন্টরে কীভাবে একটি স্টিকি হেডার তৈরি করবেন.