কীভাবে এলিমেন্টরে একটি সম্পূর্ণ পৃষ্ঠা স্ক্রলিং ওয়েবসাইট তৈরি করবেন

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

এলিমেন্টরে ফুল-স্ক্রিন স্ক্রলিং ওয়েবসাইট তৈরি করা

এখন আমরা এলিমেন্টরে একটি পূর্ণ-পৃষ্ঠা স্ক্রলিং ওয়েবসাইট তৈরির প্রক্রিয়া প্রদর্শন করতে যাচ্ছি।

ধাপ 1: fullPage.js লোড হচ্ছে

fullPage.js প্লাগইন ফাংশন ব্যবহার করার জন্য, আমাদের প্রথমে এটি লোড করতে হবে।

নিম্নলিখিত কোডটি সঠিকভাবে লোড করার জন্য আমাদের ওয়েবসাইটের শিরোনামে যোগ করতে হবে:

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.extensions.min.js"></script>

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

প্লাগইন ইন্সটল করার পর ওয়ার্ডপ্রেস ড্যাশবোর্ডে কাস্টম CSS এবং JS এর ​​অধীনে Add Custom HTML নির্বাচন করুন। এখন, উপরে উল্লিখিত কোডটি পেস্ট করুন, নিশ্চিত করুন যে এটি শিরোনাম এবং সামনের উভয় প্রান্তে স্থাপন করুন।

পরবর্তী ধাপ হল কিছু অনন্য JS অন্তর্ভুক্ত করা। fullPage.js আরম্ভ করতে এবং এর বিকল্প এবং পদ্ধতি সেট করতে, আমাদের অবশ্যই jQuery ব্যবহার করতে হবে। এখানে কিছু মৌলিক পছন্দ রয়েছে যা উল্লম্ব স্ক্রোলিং সহ সমস্ত সাইটে প্রযোজ্য।

jQuery(document).ready(function($) {
    $('#fullpage').fullpage({
        //options here
        scrollingSpeed: 1000,
        navigation: true,
        slidesNavigation: true
    });
    //methods
    $.fn.fullpage.setAllowScrolling(true);
});

সামনের প্রান্তের ফুটারে এই কোডটি অন্তর্ভুক্ত করা নিশ্চিত করুন।

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

ধাপ 2: এলিমেন্টর পৃষ্ঠা সেট আপ করুন

আমাদের স্ক্রলিং পৃষ্ঠার জন্য fullPage.js- এর দ্বারা নিম্নলিখিত মার্কআপটি প্রয়োজন৷

<div id="fullpage">
    <div class="section">Section 1</div>
    <div class="section">
        <div class="slide">Slide 2.1</div>
        <div class="slide">Slide 2.2</div>
        <div class="slide">Slide 2.3</div>
    </div>
    <div class="section">Section 3</div>
</div>

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

আসুন প্রথমে আমাদের আসল পৃষ্ঠাটি কনফিগার করি। পৃষ্ঠাগুলিতে একটি নতুন পৃষ্ঠা তৈরি করুন, এটিকে একটি উপযুক্ত শিরোনাম এবং URL দিন এবং তারপরে Elementor ব্যবহার করে এটি সম্পাদনা করুন৷

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

<div id="fullpage">
    <div class="section"></div>
    <div class="section"></div>
    <div class="section"></div>
</div>

যাচাই করুন যে বিভাগটি সম্পূর্ণ-প্রস্থ। অতিরিক্তভাবে, যেহেতু আমরা প্যাডিং চাই না যেটি এলিমেন্টর ডিফল্টভাবে কলামে যোগ করে, বিভাগ এবং কলামের প্যাডিং 0 এ সেট করুন।

পরবর্তী ধাপে প্রকৃত স্লাইডগুলি তৈরি করার পর, আমরা এলিমেন্টর টেমপ্লেট আইডিকে এর সঠিক মান পরিবর্তন করব।

ধাপ 3: বিভাগ সেট আপ করুন

শেষ ধাপ হল প্রতিটি বিভাগকে একটি টেমপ্লেট হিসাবে আলাদাভাবে তৈরি করা এবং সংরক্ষণ করা।

শর্টকোড ব্যবহার করার জন্য আপনাকে Elementor Pro প্রয়োজন হবে। আপনি যদি ইতিমধ্যে এটি করার বিষয়ে চিন্তা না করে থাকেন তবে এটি কেনার সময় এসেছে। Elementor ব্যবহার করে একটি ওয়েবসাইট তৈরি করতে আপনার প্রয়োজনীয় সমস্ত সরঞ্জাম রয়েছে৷ সবসময় একটি নতুন থিম কেনার প্রয়োজন নেই!

টেমপ্লেট-এ গিয়ে একটি নতুন বিভাগ তৈরি করুন - নতুন যোগ করুন।

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

আপনি শেষ হয়ে গেলে আপনার স্লাইড সংরক্ষণ করুন, তারপর আপনার এলিমেন্টর টেমপ্লেটগুলিতে ফিরে যান। আপনি সম্প্রতি যে টেমপ্লেটটি তৈরি করেছেন তা এখন তালিকায় উপস্থিত হওয়া উচিত। এই টেমপ্লেটটির আইডি নিন এবং এটিকে কপি করে আমরা ধাপ 2-এ তৈরি করা পৃষ্ঠায় পেস্ট করেছি।

এখন আপনার কাছে থাকা প্রতিটি স্লাইডের জন্য এই পদ্ধতিটি পুনরাবৃত্তি করুন। প্রতিটি টেমপ্লেটের অবশ্যই একটি উচ্চতা সহ একটি এলাকা থাকতে হবে যা পর্দার সাথে সামঞ্জস্যপূর্ণ।

মোড়ক উম্মচন

তাহলে এতটুকুই! Elementor- এ fullPage.js সহ পূর্ণ-স্ক্রীন স্ক্রলিং পৃষ্ঠাগুলি তৈরি করার এটি সবচেয়ে সহজ উপায়। আমি আশা করি এটি আপনাকে আপনার ভবিষ্যতের উদ্যোগের জন্য একটি সহজ এবং সংক্ষিপ্ত ওয়েবসাইট ডিজাইন করতে সাহায্য করবে।