কেমনপোস্টারer আপনার Divi ব্লগটি একটি ক্যারোজেল আকারে যেখানে আপনি সহজেই নিবন্ধগুলি স্ক্রোল করতে পারেন?
অনেক ওয়েবসাইটের জন্য, ব্লগিং তাদের এসইও কৌশলের একটি গুরুত্বপূর্ণ অংশ হয়ে উঠেছে।
কিন্তু উচ্চ-মানের সামগ্রী তৈরি করার পাশাপাশি, আপনার দর্শকদের জন্য পোস্ট নেভিগেশন প্রক্রিয়া সহজ করাও গুরুত্বপূর্ণ। এইভাবে, তারা এক নিবন্ধ থেকে অন্য নিবন্ধে যেতে পারে এবং আপনার ওয়েবসাইটে আপনার প্রকাশিত সামগ্রী পড়তে আরও সময় ব্যয় করতে পারে।
ডিভিতে, একটি ব্লগ মডিউল রয়েছে যা আপনি আপনার নিবন্ধগুলিকে গতিশীলভাবে প্রদর্শন করতে এবং সেগুলিকে কাস্টমাইজ করতে ব্যবহার করতে পারেন। আপনি যদি পোস্ট অনুসন্ধানের অভিজ্ঞতাকে পরবর্তী স্তরে নিয়ে যাওয়ার উপায় খুঁজছেন তবে আপনি এই নিবন্ধটি পছন্দ করবেন৷
আমরা আপনাকে দেখাব কিভাবে Divi-এর ইন্টিগ্রেটেড ব্লগ মডিউলকে Divi-এর ইন্টিগ্রেটেড এলিমেন্ট ব্যবহার করে ক্যারোজেলে রূপান্তর করা যায় এবং একটি বিনামূল্যে জেএস লাইব্রেরি .
চলো যাওয়া যাক।
জরিপ
টিউটোরিয়ালে ডাইভিং করার আগে, আসুন ফলাফলটি দ্রুত দেখে নেওয়া যাক।
Divi থিম বিল্ডারের সাথে একটি ব্লগ পৃষ্ঠা তৈরি করুন
আপনি যে ওয়েবসাইটে কাজ করছেন সেখানে একটি নতুন পৃষ্ঠা যোগ করে শুরু করুন।
আপনার পৃষ্ঠাটিকে একটি শিরোনাম দিন, পৃষ্ঠাটি প্রকাশ করুন এবং 'এ ক্লিক করুনদিভি বিল্ডার ব্যবহার করুন'.
'ইন্টেরিয়র ডিজাইন কোম্পানি' প্রি-ডিজাইন করা লেআউট ব্লগ পেজ ডাউনলোড করুন
এই টিউটোরিয়ালে, আমরা 'ইন্টেরিয়র ডিজাইন কোম্পানি' লেআউট থেকে ব্লগ পেজ ব্যবহার করব, কিন্তু আপনি আপনার পছন্দ মতো অন্য লেআউট ব্যবহার করতে পারবেন।
Divi এর সারাংশ মডিউল ব্যবহার করে 'পূর্ববর্তী' এবং 'পরবর্তী' তীর টেমপ্লেট তৈরি করুন
একবার ব্লগ পৃষ্ঠার ভিতরে, আমরা ক্যারোজেল তৈরি করা শুরু করতে পারি।
প্রথম অংশটি দর্শকদের নিবন্ধগুলির মধ্যে নেভিগেট করার অনুমতি দেওয়ার জন্য তীরগুলি তৈরি করার জন্য নিবেদিত৷
আরও পড়ুন: ডিভিআইতে কীভাবে একটি স্টিকি গ্লোবাল হেডার তৈরি করবেন
তীরগুলি ডিজাইন করতে, আমরা ডিভির সারাংশ মডিউল ব্যবহার করব, তবে আপনি আপনার পছন্দের অন্য কোনও মডিউল ব্যবহার করতে পারবেন।
নিম্নলিখিত কলাম কাঠামো ব্যবহার করে আপনার ব্লগ বিভাগের শীর্ষে একটি নতুন লাইন যোগ করুন:
আয়তন-অনুযায়ী বাছাই
এখনও কোনো মডিউল যোগ না করে, লাইন সেটিংস খুলুন এবং নিম্নোক্ত আকারের সেটিংস পরিবর্তন করে লাইনটিকে বিভাগের বাম এবং ডান দিকে স্পর্শ করতে দিন:
- সর্বোচ্চ প্রস্থ: 100%
- সর্বোচ্চ প্রস্থ: 100%
একটি সারাংশ মডিউল যোগ করুন
একটি সারাংশ মডিউল যোগ করুন এবং একটি শিরোনাম সন্নিবেশ করুন।
তারপর একটি আইকন নির্বাচন করুন.
- আইকন ব্যবহার করুন: হ্যাঁ
আইকন সেটিংস
স্টাইল ট্যাবে স্যুইচ করুন এবং নিম্নরূপ আইকন সেটিংস পরিবর্তন করুন:
- আইকনের রঙ: #000000
- ছবি/আইকন বসানো: ভার্টেক্স
- ছবি/আইকন প্রান্তিককরণ: কেন্দ্র
শিরোনাম পাঠ্য সেটিংস
এর পরে, শিরোনাম পাঠ্য সেটিংস পরিবর্তন করুন।
- শিরোনাম ফন্ট: মুলিশ
- সফট লাইট শিরোনাম: সেমি বোল্ড
- পাঠ্য প্রান্তিককরণ: কেন্দ্র
- শিরোনাম পাঠ্যের রঙ: #000000
আয়তন-অনুযায়ী বাছাই
তারপরে আমরা বিভিন্ন স্ক্রিনের আকারে মডিউল সাইজিং সেটিংস পরিবর্তন করি।
- সর্বাধিক প্রস্থ: 10% (ডেস্কটপ), 20% (ট্যাবলেট), 30% (ফোন)
- পাঠ্য সারিবদ্ধকরণ: ডান
এর একটি CSS ক্লাস যোগ করা যাক। এই CSS ক্লাস আমাদের ক্লিকে ক্যারোজেল অ্যাকশন ট্রিগার করতে সাহায্য করবে।
- CSS ক্লাস: ব্যাক বোতাম
অবশেষে, আমরা কার্সারকে একটি পয়েন্টারে পরিণত করতে মডিউলের প্রধান উপাদানটিতে CSS কোডের একটি লাইনও যোগ করব।
cursor: pointer;
লাইনটি ক্লোন করুন এবং এটি বিভাগের নীচে রাখুন
একবার আপনি প্রথম তীরটি সম্পূর্ণ করলে, আপনি সম্পূর্ণ সারি কন্টেইনারটি ক্লোন করতে পারেন এবং ব্লগ বিভাগের শেষে ডুপ্লিকেট সারিটি স্থাপন করতে পারেন।
ডুপ্লিকেট সারিতে সারাংশ মডিউল খুলুন এবং শিরোনাম সম্পাদনা করুন।
আইকন ব্যবহার করুন: হ্যাঁ।
এছাড়াও CSS ক্লাস পরিবর্তন করুন।
- CSS ক্লাস: পরবর্তী বোতাম
ব্লগ মডিউল প্রস্তুত করুন
আয়তন-অনুযায়ী বাছাই
তীরগুলি জায়গায় রেখে, এটি যে সারিটিতে স্থাপন করা হয়েছে তা দিয়ে শুরু করে ব্লগ মডিউলটি টুইক করা শুরু করার সময়। লাইন সেটিংস খুলুন এবং সেই অনুযায়ী সাইজিং সেটিংস পরিবর্তন করুন:
- সর্বাধিক প্রস্থ: 100%
- সর্বোচ্চ প্রস্থ: 100%
তারপর লাইন ওভারফ্লো 'লুকানো' সেট করুন। এটি নিশ্চিত করতে সাহায্য করবে যে ক্যারোজেল আমাদের পৃষ্ঠায় একটি অনুভূমিক স্ক্রোল বার দেখাবে না।
- অনুভূমিক ওভারফ্লো: লুকানো
- উল্লম্ব ওভারফ্লো: লুকানো
পৃষ্ঠা সংখ্যা লুকান
লাইন সেটিংস ঠিক হয়ে গেলে, ব্লগ মডিউল সেটিংস খুলুন। নিশ্চিত করুন যে আইটেম সেটিংসে পেজিং অক্ষম করা আছে।
- পৃষ্ঠা সংখ্যা দেখান: না
এরপরে, স্টাইল ট্যাবে স্যুইচ করুন এবং লেআউটটিকে 'ফুল স্ক্রীন'-এ পরিবর্তন করুন।
- মডেল: ফুলস্ক্রিন
আমরা একটি ওভারলে যোগ করব।
- ওভারলে চিত্র দেখানো হয়েছে: সক্রিয়৷
- ওভারলে আইকনের রঙ: #ffffff
- ওভারলে পটভূমির রঙ: rgba (1,0,66,0.33)
এর পরে, আমরা আমাদের ব্লগে একটি CSS ক্লাস যোগ করব, যা টিউটোরিয়ালের পরে ক্যারোজেল সক্ষম করতে আমাদের সাহায্য করবে।
- CSS ক্লাস: ব্লগ-মডিউল
এবং আমরা উন্নত ট্যাবে পোস্ট মেটাডেটা CSS এলিমেন্টে নীচের মার্জিন যোগ করে পোস্ট মেটা এবং উদ্ধৃতির মধ্যে কিছু জায়গা তৈরি করব।
আবিষ্কার করুন: ডিভিআইতে কীভাবে স্লাইডিং এবং পুশ মেনু তৈরি করবেন
margin-bottom: 50px;
স্লিক জেএস কার্যকারিতা যোগ করুন
একবার সমস্ত ডিভি সেটিংস ঠিক হয়ে গেলে, এটি স্লিক জেএস কার্যকারিতা যুক্ত করার সময়! ব্লগ মডিউলের ঠিক নীচে একটি কোড মডিউল যোগ করুন (অথবা পৃষ্ঠার অন্য কোথাও)।
তারপর স্লিক জেএস লাইব্রেরি যোগ করুন স্ক্রিপ্ট ট্যাগে (যেমন আপনি নীচের প্রিন্ট স্ক্রিনে দেখতে পাচ্ছেন)। আপনি Divi থিম সেটিংসে আপনার ওয়েবসাইটের হেডারে এগুলি যোগ করতেও স্বাধীন।
src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"
আমরা CSS কোড ব্যবহার করে একটি পৃথক স্তরে প্রতিটি ব্লগ পোস্টকে সামান্য পরিবর্তন করব।
আরও পড়ুন: কিভাবে DIVI-তে ব্লগ মডিউল দিয়ে ব্লগ পেজ তৈরি করবেন
কোড স্থাপন করতে ভুলবেন না শৈলী ট্যাগের মধ্যে নিচের স্ক্রিনশটে দেখানো হয়েছে।
.slick-slide {
float: left;
margin: 2vw;
}
এবং অবশেষে, আমরা কিছু JQuery কোড যোগ করব যাতে ক্যারোজেল আকার নিতে পারে। নীচের কোডে, আমরা ক্যারোজেল কার্যকারিতার জন্য ডিজাইন করা বোতামগুলিও যোগ করি।
কোড স্থাপন করতে ভুলবেন না স্ক্রিপ্ট ট্যাগে আপনি নীচে দেখতে পারেন হিসাবে.
jQuery(function($){
var backButton = $('.back-button');
var nextButton = $('.next-button');
var postContainer = $('.blog-module .et_pb_ajax_pagination_container');
postContainer.addClass('slider');
postContainer.addClass('blog-carousel');
$('.blog-carousel').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
centerMode: true,
centerPadding: '10%',
swipe: true,
prevArrow: backButton,
nextArrow: nextButton,
responsive: [{
breakpoint: 1079, settings: {
slidesToShow: 1
}
}]
});
});
পৃষ্ঠাটি সংরক্ষণ করুন এবং ফলাফল প্রদর্শন করতে Divi এর ভিজ্যুয়াল বিল্ডার থেকে প্রস্থান করুন
ভিজ্যুয়াল বিল্ডারে আপনি ফলাফল দেখতে পাবেন না।
সুতরাং, আপনার কাজ শেষ হওয়ার সাথে সাথে, আপনার পৃষ্ঠাটি সংরক্ষণ করুন, ভিজ্যুয়াল বিল্ডার থেকে প্রস্থান করুন এবং আপনার ওয়েবসাইটে ফলাফল দেখুন!
জরিপ
এখন যেহেতু আমরা সমস্ত পদক্ষেপের মধ্য দিয়ে চলেছি, আসুন এটি বিভিন্ন পর্দার আকারে কীভাবে প্রদর্শিত হয় তার একটি চূড়ান্ত নজর দেওয়া যাক।
এখনই ডিভিআই ডাউনলোড করুন!!!
উপসংহার
তাই! এই নিবন্ধের জন্য যে সব. আমরা আপনাকে দেখিয়েছি কিভাবে আপনার ব্লগ মডিউল ডিজাইনকে পরবর্তী স্তরে নিয়ে যেতে হয়। বিশেষত, আমরা আপনাকে দেখিয়েছি কিভাবে ডিভির অন্তর্নির্মিত ব্লগ মডিউলটিকে একটি বিনামূল্যের জেএস লাইব্রেরি ব্যবহার করে ক্যারোজেলে পরিণত করতে হয়।
আপনি Divi সম্পর্কে আরও জানতে চান, আমাদের ক্যাটালগ পরিদর্শন করতে দ্বিধা করবেন না Divi টিউটোরিয়াল। আপনিও পরামর্শ করতে পারেন কিভাবে Divi ব্লগ মডিউল দিয়ে ব্লগ পেজ তৈরি করবেন
এছাড়াও দেখুন আমাদের সংস্থান, আপনার যদি ইন্টারনেট সাইট তৈরির প্রকল্পগুলি পরিচালনা করতে আরও উপাদানগুলির প্রয়োজন হয়, তবে আমাদের গাইডের সাথে পরামর্শ করে ওয়ার্ডপ্রেস ব্লগ তৈরি বা এক ডিভি: সর্বকালের সেরা ওয়ার্ডপ্রেস থিম.
কিন্তু ইতিমধ্যে, আপনার বিভিন্ন সামাজিক নেটওয়ার্কে এই নিবন্ধটি ভাগ করুন.
...