কিভাবে Elementor দিয়ে আপনার ওয়েবসাইট লেআউট অপটিমাইজ করবেন

এলিমেন্টর দিয়ে আপনার ওয়েবসাইট লেআউট কীভাবে অপ্টিমাইজ করবেন তা জানতে চান?

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

ওয়েবসাইটের কর্মক্ষমতা অনেক কারণের দ্বারা প্রভাবিত হতে পারে, উদাহরণস্বরূপ: বড় ছবির আকার, সার্ভার কনফিগারেশন, অনেকগুলি প্লাগইন, অন্যান্য কারণের মধ্যে।

ওয়েব নির্মাতা হিসেবে ওয়েবসাইটের পারফরম্যান্স আমাদের অন্যতম শক্তিশালী মূল্যবোধ। এজন্য আমরা এই কোর্সটি ৫ টি অংশে তৈরি করেছি।

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

এই টিউটোরিয়ালের শেষে, আপনি আপনার তৈরি প্রতিটি এলিমেন্টর ওয়েবসাইটের কর্মক্ষমতা অপ্টিমাইজ করার জন্য সম্পূর্ণরূপে প্রস্তুত থাকবেন এবং অবিলম্বে পুরষ্কার পাবেন।

পাঠ 1: লেআউট অপ্টিমাইজেশন সেরা অনুশীলন

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

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

আমরা নিম্নলিখিত বিষয়গুলি কভার করব:

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

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

টিউটোরিয়ালের শেষে, আমাদের অপ্টিমাইজ করা পৃষ্ঠাটি ছয়টি বিভাগ, সাতটি কলাম এবং 16 টি উইজেটে কমিয়ে আনা হবে।

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

খারাপ অভ্যাসের জন্য পরীক্ষা

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

ধাপ 1: একটি ছদ্মবেশী উইন্ডোতে আপনার ওয়েবসাইট যাচাই করুন

• "ছদ্মবেশী মোডে" একটি নতুন উইন্ডো খুলুন এবং আপনি যে ওয়েব পেজটি পরীক্ষা করছেন তার URL লিখুন।

পদক্ষেপ 2: যাচাই করুন যে আপনি সরাসরি ইউআরএল পাথ ব্যবহার করছেন

আপনি যদি আপনার পৃষ্ঠার লিঙ্ক সম্পর্কে অনিশ্চিত থাকেন, তাহলে আপনি সহজেই আপনার WP ড্যাশবোর্ডে গিয়ে এটি খুঁজে পেতে পারেন:

• আপনার ওয়েবসাইটে সমস্ত পৃষ্ঠা দেখতে "পৃষ্ঠাগুলি" ক্লিক করুন।
• আপনার পৃষ্ঠার উপরে আপনার কার্সারটি ঘুরান এবং "দেখুন" বিকল্পে ক্লিক করুন। এটি আপনাকে সরাসরি আপনার পৃষ্ঠায় নিয়ে যাবে।
• এই ইউআরএলটি ছদ্মবেশী উইন্ডোতে কপি এবং পেস্ট করুন এবং ওয়েবসাইটটি লোড হয়ে গেলে আপনি এটি পরীক্ষা করতে প্রস্তুত!

পরীক্ষা এবং পারফরম্যান্স ফলাফল দেখা

ধাপ 1: কর্মক্ষমতা ফলাফল পরীক্ষা করুন

আপনি অতীতে ক্রোম ডেভেলপার টুল ব্যবহার করেছেন।

যদি না হয়, আপনার পৃষ্ঠার HTML এবং CSS বিষয়বস্তু পরিদর্শন এবং প্রদর্শন করতে:

• আপনার পৃষ্ঠার যে কোন জায়গায় ডান ক্লিক করুন এবং "পরিদর্শন করুন" নির্বাচন করুন ক্লিক করুন আপনি বেশ কয়েকটি ট্যাব দেখতে পাবেন যেখানে আপনি আপনার এইচটিএমএল এবং সিএসএস পড়তে পারেন, ত্রুটি খুঁজে পেতে পারেন, এসইও ফলাফল পেতে পারেন এবং বিভিন্ন পরীক্ষা চালাতে পারেন।
• নেটওয়ার্ক ট্যাব নির্বাচন করুন এবং ফলাফল লোড করতে cmd বা ctrl + R বোতাম টিপুন।

আপনি দেখতে পাচ্ছেন, আমাদের বর্তমান লেআউটটি লোড হতে 2,88 সেকেন্ড সময় নেয় এবং 81 টি অনুরোধ সম্পাদন করে।

ধাপ 2: কর্মক্ষমতা ফলাফল দেখুন

• বাতিঘর ট্যাবে যান, যেখানে আমরা আমাদের পৃষ্ঠায় একটি নিরীক্ষা প্রতিবেদন চালাতে পারি।

এটি আমাদের পৃষ্ঠার বর্তমান কর্মক্ষমতা সম্পর্কে আরো তথ্য দেবে।

• "রিপোর্ট তৈরি করুন" নির্বাচন করুন। কিছুক্ষণ পর, আপনার রিপোর্ট উপস্থিত হবে।

আমরা বর্তমানে 73/100 এর পারফরম্যান্স রেটিং পাচ্ছি, যার উপর আমরা অবশ্যই কাজ করতে পারি।

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

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

পৃষ্ঠার উপাদানগুলি অপ্টিমাইজ করা

ধাপ 1: হেডার অপ্টিমাইজ করুন

এর দিয়ে শুরু করা যাক শিরোলেখ.

আপনি এই নকশা দেখতে পারেন, হেডার তিনটি কলাম দিয়ে তৈরি করা হয়েছিল।

প্রথম কলামে, আমাদের লোগো দুটি উইজেট নিয়ে গঠিত:

1. Un ইমেজ উইজেট যা আমাদের লোগোর একটি .png ইমেজ ফাইল প্রদর্শন করে
2. একটি শিরোনাম উইজেট।

দ্বিতীয় কলামে, হেডার মেনু আমাদের ন্যাভিগেশন মেনু উইজেট নিয়ে গঠিত।

তৃতীয় কলামে রয়েছে:

1. একটি অভ্যন্তরীণ বিভাগ উইজেট (যা আইকন উইজেটের অবস্থান নিয়ন্ত্রণ করে)।
2. হেডারের জন্য আমাদের যোগাযোগের বিবরণ

আসুন দেখি কিভাবে আমরা এখানে বিভাগ, উইজেট এবং বিভাগগুলির সংখ্যা কমানো যায়।

ধাপ 2: নতুন হেডার তৈরি করুন

কলাম 1:

• শুধুমাত্র 1 টি কলাম সহ 1 টি বিভাগ তৈরি করুন।
• যুক্ত করুন ওয়েবসাইট লোগো উইজেট এবং বিভাগে টেনে আনুন।

ছবির জন্য সর্বোত্তম অনুশীলন:

• আপনার ওয়েবসাইটের প্রতিটি ইমেজ ফাইল মিডিয়া লাইব্রেরিতে একটি প্রাসঙ্গিক শিরোনাম এবং Alt টেক্সট দিন।

এটি আপনার পৃষ্ঠার অ্যাক্সেসযোগ্যতা এবং আপনার সার্চ ইঞ্জিন র ranking্যাঙ্কিং উন্নত করবে। আমরা যে লোগোটি প্রাথমিকভাবে ব্যবহার করেছি তাতে শিরোনামটি প্রকৃত চিত্রের সাথে অপ্রাসঙ্গিক, এবং কোন alt টেক্সট নেই।

• উইজেটের ভিতরে ছবির মাত্রা নির্ধারণ করুন।

ইমেজ লোড হওয়ার পূর্বে পৃষ্ঠাটি সঠিক স্থান দিয়ে সাজানো যায়, লেআউট ল্যাগ (ব্রাউজার দ্বারা পরিমাপ করা একটি ফ্যাক্টর) এড়িয়ে যায়।

উদাহরণে আমরা একসাথে কাজ করছি, স্টাইল ট্যাবে গিয়ে এবং ছবির প্রস্থ 200px এ সেট করে এই সমস্যার সমাধান করুন।

স্তম্ভ 2

উইজেট প্যানেলে ফিরে যান:

• লোগোর নিচে নেভিগেশন মেনু উইজেটটি টেনে আনুন
• পয়েন্টার সেট করুন "কেউ না"
• "স্টাইল" ট্যাবে যান এবং আপনার পছন্দের ফন্ট যোগ করুন (যাতে এটি আমাদের আগের নকশার সাথে মেলে)

সামগ্রিক স্টাইলিংয়ের জন্য সর্বোত্তম অনুশীলন:

• 2 টির বেশি ফন্ট ব্যবহার করা এড়িয়ে চলুন যার মধ্যে একাধিক ওজন রয়েছে (গ্লোবাল ফন্ট).
• রঙ বাছাইকারীর সাথে প্রতিটি আইটেমের জন্য বিভিন্ন রং নির্বাচন করা এড়িয়ে চলুন (গ্লোবাল রঙ).
• কম প্রশ্ন (সামগ্রিক ফন্ট) তৈরি করে আপনার ওয়েবসাইট লোডিং গতি উন্নত করুন।
• অপ্রয়োজনীয় কোড দুবার পুনরাবৃত্তি করুন (বৈশ্বিক রং)।
• আপনার মডেলের ধারাবাহিকতা এবং নিয়ন্ত্রণ বজায় রাখুন (সামগ্রিক স্টাইল)।

গ্লোবাল ফন্ট:

এটি গ্লোবাল ফন্ট ফাংশন ব্যবহার করে করা যেতে পারে:

• "স্টাইল" ট্যাবে যান এবং আপনার পছন্দের ফন্টটি যোগ করুন (যাতে এটি আমাদের পূর্ববর্তী ডিজাইনের সাথে মিলে যায়) একটি নির্বাচন করে, একটি ছোট পরিবর্তন করুন এবং প্লাস আইকনের উপরে ঘুরুন।
• প্লাস আইকনে ক্লিক করুন এবং আপনার প্রয়োজনীয় ফন্ট পরিবার নির্বাচন করুন
• টেমপ্লেটে আপনি যে স্টাইলগুলি ব্যবহার করবেন তা গ্লোবাল ফন্ট হিসাবে সংরক্ষণ করুন

তারপরে আপনি আপনার তৈরি করা প্রতিটি উইজেটে এই স্টাইলটি ব্যবহার করতে পারেন।

বৈশ্বিক রং:

আপনার সামগ্রিক রঙের জন্য একই পদ্ধতি ব্যবহার করা যেতে পারে:

• "গ্লোবাল" এ ক্লিক করুন
• কালার পিকারের উপর দিয়ে ঘুরুন এবং এটিতে ক্লিক করুন
• একটি রং নির্বাচন করুন এবং প্লাস আইকনের দিকে নির্দেশ করুন
• "গ্লোবাল" এ ক্লিক করুন >> "অধ্যক্ষ" নির্বাচন করুন

একবার আপনি এটি করার পরে, রঙটি আপনার টেমপ্লেটের রঙ প্যালেটে সংরক্ষণ করা হবে, যাতে আপনি যখনই কোনও আইটেম বা উইজেটের জন্য এটি প্রয়োজন তখন আপনার গ্লোবাল কালার তালিকা থেকে এটি নির্বাচন করতে পারেন।

আমরা আমাদের শিরোনামটি চালিয়ে যাওয়ার আগে, আসুন উল্লম্ব প্যাডিংটি শূন্যে সেট করি।

ধাপ 3: হেডার সম্পাদনা করুন

কলাম ঘ

• "উইজেটস" প্যানেলে যান
• মেনুর নীচে আইকন তালিকা উইজেটটি টেনে আনুন।
• অতিরিক্ত তালিকা আইটেমগুলি সরান
• আপনার পাঠ্য যোগ করুন
• আপনার পছন্দের আইকনটি বেছে নিন
• "স্টাইল" ট্যাবে যান
• আপনার পছন্দের সামগ্রিক রং এবং ফন্ট সংজ্ঞায়িত করুন

এখন আমাদের আরও একটি জিনিস ঠিক করতে হবে - তিনটি হেডার উপাদানগুলি বর্তমানে স্ট্যাক করা আছে এবং একে অপরের সাথে সংযুক্ত নয়। আমরা প্রতিটি উপাদানের প্রস্থকে তার প্রকৃত আকারে পরিবর্তন করে এই সমস্যার সমাধান করতে পারি, যাতে এটি কলামের সমস্ত স্থান না নেয়।

এই সমস্যা সমাধানের জন্য:

• সাইট লোগো উইজেট >> 'উন্নত' ট্যাব নির্বাচন করুন
• "পজিশনিং" নির্বাচন করুন এবং এর প্রস্থকে "ইনলাইন" এ সেট করুন

নেভিগেশন মেনু উইজেটের জন্য এবং আইকন তালিকা উইজেটের জন্য এই সঠিক পদক্ষেপটি পুনরাবৃত্তি করুন।

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

ইনলাইন উপাদান দিয়ে কলামের অবস্থান নির্ধারণ করা

• আপনার কলাম নির্বাচন করুন >> "লেআউট" ট্যাবে যান
• "উল্লম্ব সারিবদ্ধকরণ" এ, "নীচে" নির্বাচন করুন
• "অনুভূমিক সারিবদ্ধতায়" "এর মধ্যে স্থান" নির্বাচন করুন

"স্পেস বিটুইন" প্রান্তিককরণ নির্বাচন করা উভয় প্রান্তে প্রথম এবং শেষ উইজেট অবস্থান করে, অন্য সব উইজেটের মধ্যে সমান ব্যবধান প্রদান করে।

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

আমরা মার্জিন সমন্বয় করে এই সমস্যার সমাধান করতে পারি:

• নেভিগেশন মেনু উইজেট >> "উন্নত" ট্যাব নির্বাচন করুন
• মার্জিনকে অসংগঠিত করুন এবং একটি নেতিবাচক মান দিয়ে ব্যবধানটি সরান

ধাপ 4: হেডারকে প্রতিক্রিয়াশীল করুন

এখন দেখা যাক আমাদের ওয়েবসাইটের বর্তমান সংস্করণ মোবাইল ডিভাইসে কেমন দেখাচ্ছে।

মোবাইল প্রতিক্রিয়াশীলতার জন্য সর্বোত্তম অনুশীলন:

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

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

পরিবর্তে, যখন আপনার নকশা এবং কোড প্রতিক্রিয়াশীল হয়, আপনার পৃষ্ঠার গতি উন্নত হয় কারণ এটি কম কোড ব্যবহার করবে।

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

ট্যাবলেটের জন্য একটি কাস্টম প্রস্থ সেট করা

• 'Nav মেনু' >> 'উন্নত' ট্যাবে ক্লিক করুন
• "পজিশনিং" নির্বাচন করুন >> প্রস্থকে "কাস্টম" এ সেট করুন।
• "%" নির্বাচন করুন >> উইজেটটিকে চারপাশের খালি জায়গার সমান প্রস্থ (শতাংশে) দিন।
• "সামগ্রী" ট্যাবে ক্লিক করুন >> "টগল অ্যালাইন" >> "ডান" নির্বাচন করুন।

এটি আপনাকে উইজেটের প্রস্থের মধ্যে যে কোনও জায়গায় টগল মেনু সারিবদ্ধ করতে দেয়।

এখন টগল মেনু কাস্টমাইজ করা শেষ করা যাক।

• "সামগ্রী" >> "সম্পূর্ণ প্রস্থ" টগলে ক্লিক করুন এবং "হ্যাঁ" তে সেট করুন।
• "স্টাইল" >> বাম দিকে "কালার পিকার" বারটি টেনে নিয়ে ব্যাকগ্রাউন্ড সরান।

এখন দেখি মোবাইল স্ক্রিনে জিনিসগুলো কেমন দেখাচ্ছে।

মোবাইলের জন্য একটি কাস্টম প্রস্থ নির্ধারণ

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

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

এই সমস্যা সমাধানের জন্য:

নেভ মেনুর অবস্থান

• "Nav মেনু" >> ট্যাব "উন্নত" এ ক্লিক করুন
• "পজিশনিং" নির্বাচন করুন >> প্রস্থকে "কাস্টম" এ সেট করুন
• "%" নির্বাচন করুন >> উইজেটটিকে 30%প্রস্থ দিন, যাতে এটি আমাদের লোগোর পাশে থাকে

আইকন তালিকার অবস্থান

• "আইকন তালিকা" >> "উন্নত" ট্যাবে ক্লিক করুন
• নির্বাচন করুন "পূরণ করুন" >> মানগুলিকে আনগ্রুপ করুন
• "TOP" এ 12px প্যাডিং যোগ করুন

আপনি এটা বিশ্বাস করতে পারেন?

আমাদের শিরোলেখটি মূলত ব্যবহৃত হয়েছিল 2 টি বিভাগ, 12 টি উইজেট এবং 10 টি কলাম। এখন আমাদের হেডার ব্যবহার করে 1 টি বিভাগ, 3 টি উইজেট এবং 1 টি কলাম.

এবং ফলাফল একই!

ধাপ 5: হিরো বিভাগটি অপ্টিমাইজ করুন

আসুন আমাদের ওয়েবসাইটের পরবর্তী বিভাগে এগিয়ে যাই: নায়ক বিভাগ

হিরো বিভাগের জন্য সেরা অভ্যাস:

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

একটি কলামে উইজেটের অবস্থান নিয়ন্ত্রণ করা

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

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

আসুন দেখি কিভাবে আমরা একটি মাত্র নকশা দিয়ে একই নকশা তৈরি করতে পারি:

• পাঠ্যের ডানদিকে অতিরিক্ত কলাম মুছুন।
• স্পেসারটি সরান।

পরিবর্তে, যেখানে আমরা চাই আমাদের নায়ক পাঠ্য স্থাপন, আমরা কলাম সারিবদ্ধকরণ বিকল্প ব্যবহার করব:

• কলাম নির্বাচন করুন।
• "উল্লম্ব সারিবদ্ধকরণ" কে "মধ্যম" এ সেট করুন।
• "উন্নত" ট্যাবে যান।
• নির্বাচন করুন "পূরণ করুন" >> মানগুলিকে আনগ্রুপ করুন
• ডান প্যাডিং 50%সেট করুন।

• বিভাগটি নির্বাচন করুন।
• "ন্যূনতম উচ্চতা" নির্বাচন করুন >> এটি 80 এ সেট করুন।

পাঠ্য এবং পটভূমির মধ্যে স্থির বৈসাদৃশ্য

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

একটি বিভাগের স্বচ্ছতা উন্নত করার বিভিন্ন উপায় রয়েছে যার পটভূমি একটি রঙিন চিত্র (যেমন আমরা এই টেমপ্লেটে দেখতে পাচ্ছি):

• আপনার হেডারে ক্লিক করুন।
• "স্টাইল" ট্যাবে যান >> "টেক্সট শ্যাডো" নির্বাচন করুন।

এটি পাঠ্যের পটভূমি চিত্র থেকে আলাদা করে পাঠযোগ্যতা উন্নত করবে।

আপনার পাঠ্য পরিষ্কার করার আরেকটি উপায় হল ওভারলে ব্যবহার করা।

• বিভাগ নির্বাচন করুন >> 'স্টাইল' ট্যাব >> 'ব্যাকগ্রাউন্ড ওভারলে'
• আপনার সামগ্রিক রঙগুলির মধ্যে একটি নির্বাচন করুন এবং যতক্ষণ না আপনি আপনার পছন্দসই ফলাফল পান ততক্ষণ অস্বচ্ছতার সাথে খেলুন

ধাপ 6: আইকন বক্স সহ বিভাগটি অপ্টিমাইজ করুন

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

আসুন দেখি কিভাবে আমরা এই বিভাগটিকে তার কর্মক্ষমতা উন্নত করতে সহজ করতে পারি।

আইকন এলাকার বিষয়বস্তু

• উইজেট মেনুতে »আইকন বক্স উইজেট« বাটন নির্বাচন করুন এবং কলামে টেনে আনুন
• "আইকন বক্স" নির্বাচন করুন
• আইকন ছবির দিকে নির্দেশ করুন
• "SVG ডাউনলোড করুন" নির্বাচন করুন **
• আপনার কাস্টম আইকন োকান

** দ্রষ্টব্য: ব্যাজগুলি SVG ফাইল। যদি আপনার না থাকে, তাহলে ওয়ার্ডপ্রেস ড্যাশবোর্ডে যান এবং তারপর এলিমেন্টর >> সেটিংসে যান। আপনাকে ফিল্টার করা ফাইল ডাউনলোড করতে সক্ষম করতে হবে।

• আপনার "শিরোনাম" লিখুন
• আপনার "বর্ণনা" টাইপ করুন
• "স্টাইল" নির্বাচন করুন >> একটি সামগ্রিক রঙ চয়ন করুন
• "সাইজ" সিলেক্ট করুন এবং বারটি আপনার পছন্দের সাইজে টেনে আনুন
• "প্যাডিং" নির্বাচন করুন এবং বারটি আপনার পছন্দের নম্বরে টেনে আনুন

ধাপ 8: "পরিষেবা" বিভাগটি অপ্টিমাইজ করুন

আমরা এখন "পরিষেবা" বিভাগটি পুনর্নির্মাণ করতে যাচ্ছি, যা বর্তমানে দুটি কলাম, দুটি ছবি, শিরোনাম উইজেট এবং পাঠ্য সম্পাদক উইজেট ব্যবহার করে।

আসুন একটি নতুন বিভাগে একই নকশা তৈরি করি, কিন্তু শুধুমাত্র একটি কলাম দিয়ে।

• একটি কলাম সহ একটি নতুন বিভাগ তৈরি করুন
• "লেআউট" -এ >> "সামগ্রী প্রস্থ" -কে "সম্পূর্ণ প্রস্থ" -এ সেট করুন
• উইজেট প্যানেলে "উইজেট ইমেজ বক্স" নির্বাচন করুন এবং কলামে টেনে আনুন

(আমরা এই উইজেটের মধ্যে বিভাগের সমস্ত সম্পদ সংহত করতে সক্ষম হব)

• শিরোনাম টাইপ করুন
• বর্ণনা টাইপ করুন

চিত্রের জন্য, আমরা আমাদের চিত্রের জন্য যে বর্তমান নকশাটি ব্যবহার করেছি তা রাখব।

• মিডিয়া লাইব্রেরি থেকে একই ছবি োকান
• "বিষয়বস্তু" ট্যাবে যান >> "চিত্র অবস্থান" "ডান" সেট করুন

• "স্টাইল" ট্যাবে যান
• উপাদানগুলির মধ্যে ব্যবধান বাড়ান
• ছবির "প্রস্থ" বাড়ান
• "সামগ্রী" বিভাগটি প্রসারিত করুন
• "কেন্দ্র" সারিবদ্ধকরণ চয়ন করুন
• "উল্লম্ব সারিবদ্ধকরণ" কে "মধ্যম" এ সেট করুন
• আপনার পছন্দের সামগ্রিক রং এবং ফন্ট সংজ্ঞায়িত করুন
• "উন্নত" ট্যাবে যান
• উইজেটে 10% ইনফিল যোগ করুন

এখন পরিষেবা বিভাগে একই নকশা আছে, কিন্তু কম সম্পদের সাথে।

ধাপ 9: কল টু অ্যাকশন বিভাগটি অপ্টিমাইজ করুন

সিটিএ লিঙ্কগুলির জন্য সর্বোত্তম অনুশীলন:

• নিশ্চিত করুন যে আপনার সমস্ত সোশ্যাল মিডিয়া লিঙ্কগুলি সঠিকভাবে কাজ করছে এবং বোতামে লিঙ্কটি রয়েছে।
• যখন আপনি অন্য ওয়েবসাইটে একটি লিঙ্ক যোগ করেন, তখন এই বৈশিষ্ট্যটি অন্তর্ভুক্ত করুন: "rel | noopener"

(আপনি গিয়ার আইকনে ক্লিক করে এবং "কাস্টম অ্যাট্রিবিউটস" এ অ্যাট্রিবিউট টাইপ করে এটি করতে পারেন)। এটি একটি নতুন ব্রাউজার ট্যাবে লিঙ্কটি খুলবে এবং আপনার পারফরম্যান্স স্কোর বাড়াবে।

নিম্নলিখিত বিভাগটি আমাদের পরিষেবার জন্য কল টু অ্যাকশন উপস্থাপন করে।

বিভাগে বর্তমানে দুটি কলাম রয়েছে, যার মধ্যে রয়েছে:

1. একটি স্পেসার সহ একটি ব্যাকগ্রাউন্ড ইমেজ
2. দুটি হেডার, একটি অভ্যন্তরীণ বিভাগ, একটি পাঠ্য সম্পাদক এবং একটি বোতাম

আসুন একটি নতুন বিভাগে একই নকশা তৈরি করি, কিন্তু শুধুমাত্র একটি কলাম দিয়ে।

• "লেআউট" ট্যাবে যান >> বিষয়বস্তুর প্রস্থ "সম্পূর্ণ প্রস্থ" এ সেট করুন
• "অ্যাডভান্সড" ট্যাবে যান >> যেকোন অতিরিক্ত ফিলিং সরান

• উইজেট প্যানেলে "কল টু অ্যাকশন উইজেট" নির্বাচন করুন এবং কলামে টেনে আনুন
• "চিত্র অবস্থান" "বাম" সেট করুন
• মিডিয়া লাইব্রেরি থেকে আপনার ছবি নির্বাচন করুন
• "সামগ্রী" বিভাগটি প্রসারিত করুন
• হেডার টাইপ করুন
• বর্ণনা টাইপ করুন
• বোতাম পাঠ্য টাইপ করুন

• "স্টাইল" ট্যাবে যান
• উপাদানগুলির মধ্যে "প্যাডিং" যোগ করুন
• ছবির প্রস্থ সামঞ্জস্য করুন
• "সামগ্রী" বিভাগটি প্রসারিত করুন
• আপনার শিরোনামের জন্য গ্লোবাল ফন্ট নির্বাচন করুন
• বিবরণ এবং বোতামের মধ্যে স্থান বাড়ান
• প্রতিটি সংস্থার জন্য উপযুক্ত বৈশ্বিক রং চয়ন করুন
• "বোতাম" বিভাগটি প্রসারিত করুন
• এর আকার "বড়" সেট করুন
• আপনার প্রয়োজন অনুযায়ী এটি কাস্টমাইজ করুন, যেমন ব্যাকগ্রাউন্ড কালার এবং বর্ডার ব্যাসার্ধ

এখন পর্যন্ত এটি 2 টি উইজেট সহ একটি 6 কলাম বিভাগ হয়েছে। এখন এটি শুধুমাত্র 1 টি উইজেটের সাথে 1 টি কলাম বিভাগ!

ধাপ 10: ইমেজ ক্যারোজেল অপটিমাইজ করুন

আমাদের ইমেজ ক্যারাউজেল বিভাগের বর্তমান নকশায় একটি সাধারণ ভুল আছে যেভাবে এটি একাধিক ছবি প্রদর্শন করে।

এই নকশাটি 5 টি কলাম নিয়ে গঠিত, এমন একটি অভ্যাস যা অনেক ব্যবহারকারী তাদের চিত্রের আকার নিয়ন্ত্রণ করতে থাকে।

আসুন একটি সহজ উপায় অন্বেষণ করি যা আপনার ওয়েবসাইটের কর্মক্ষমতাকেও অনুকূল করবে।

• 1 টি কলাম সহ একটি নতুন বিভাগ তৈরি করুন
• "লেআউট" ট্যাবে যান >> বিষয়বস্তুর প্রস্থ "সম্পূর্ণ প্রস্থ" এ সেট করুন
• উইজেট প্যানেল থেকে »ইমেজ ক্যারোসেল উইজেট« বাটন নির্বাচন করুন এবং কলামে টেনে আনুন
• মিডিয়া লাইব্রেরি থেকে পছন্দসই ছবি যোগ করুন

• "সামগ্রী" ট্যাবে যান
• "ছবির আকার" "মাঝারি - 300 x 300" এ সেট করুন
• আপনার পছন্দ অনুযায়ী "প্রদর্শনের জন্য স্লাইড", "স্লাইড থেকে স্ক্রল" এবং "নেভিগেশন" সামঞ্জস্য করুন

• "স্টাইল" ট্যাবে যান
• "উল্লম্ব সারিবদ্ধকরণ" কে "কেন্দ্র" এ সেট করুন
• "স্পেসিং" কাস্টমাইজ করুন

• "উন্নত" ট্যাবে যান
• প্রয়োজনীয় ভরাট যোগ করুন

যা আগে ৫ টি কলামের সেকশন ছিল এখন শুধু ১ টি কলাম।

আসুন পরবর্তী বিভাগে চলে যাই, যেখানে আমরা আমাদের ওয়েবসাইটে ভিডিওগুলি অপ্টিমাইজ করতে পারি।

ধাপ 11: ভিডিও বিভাগটি অপ্টিমাইজ করুন

ভিডিও বিষয়বস্তুর জন্য সর্বোত্তম অনুশীলন:

• আপনার ওয়েবসাইটের লোডিং সময় উন্নত করার জন্য যখনই সম্ভব অলস লোড ব্যবহার করুন।

যখন আমরা "অলস লোড" বিকল্পটি প্রয়োগ করি তখন কী হবে?

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

আমরা এখন যা করতে যাচ্ছি তা হল ভিডিও উইজেট ব্যবহার করার পদ্ধতি পরিবর্তন করা, যাতে এটি আমাদের পৃষ্ঠার গতি বা ওয়েবসাইটের কার্যকারিতা বিলম্বিত না করে।

• "ভিডিও উইজেট" নির্বাচন করুন
• "স্টাইল" ট্যাবে যান
• "অলস লোড" নির্বাচন করুন

ধাপ 12: পাদলেখটি অপ্টিমাইজ করুন এবং এটি আপডেট রাখুন

অনেক ওয়েবসাইটে দেখা একটি সাধারণ ভুল হল যে তাদের পাদলেখ তারিখ এবং বিবরণের জন্য একাধিক শিরোনাম ব্যবহার করে, সেইসাথে কপিরাইট প্রতীকের জন্য একটি আইকন।

আসুন দেখি কিভাবে পাদলেখকে অপ্টিমাইজ করা যায় এবং নিশ্চিত করা যায় যে এটি সর্বদা আপ টু ডেট থাকে।

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

এটি করার জন্য, আমরা নিম্নরূপ এগিয়ে যাব:

• শুধুমাত্র টাইটেল উইজেট রেখে অতিরিক্ত উইজেটগুলি সরান
• শিরোনাম উইজেট নির্বাচন করুন
• "শিরোনাম" ক্ষেত্রের ডানদিকে "ডায়নামিক ট্যাগস" চিহ্নটিতে ক্লিক করুন ("প্যারেন্ট বোতাম" নামেও পরিচিত

• ড্রপ-ডাউন মেনু থেকে, মেনু আইটেম "বর্তমান তারিখ এবং সময়" নির্বাচন করুন
• কী এর প্যারেন্ট আইকনে ক্লিক করুন
• "তারিখ বিন্যাস" ট্যাবে ক্লিক করুন এবং "কাস্টম" মেনু আইটেমটি নির্বাচন করুন
• "Y" বাদে বর্তমানে "কাস্টম ফরম্যাট" ক্ষেত্রে যা আছে তা মুছুন
• "উন্নত" ট্যাব নির্বাচন করুন
• "ফরওয়ার্ড" ক্ষেত্রটি হাইলাইট করুন এবং "©" চিহ্নটি টাইপ করতে "বিকল্প" এবং "জি" কীগুলি একই সাথে ধরে রাখুন (বা "নিয়ন্ত্রণ", অল্ট "এবং" সি "একই সাথে)।
• "©" এর পরে একটি স্থান যোগ করুন

• "পরে" ক্ষেত্রটি নির্বাচন করুন
• একটি স্পেসে টাইপ করুন এবং বছরের পর আপনি যে লেখাটি দেখতে চান তা লিখুন, যেমন "সর্বস্বত্ব সংরক্ষিত"

আপনি লক্ষ্য করতে পারেন যে এই টিউটোরিয়ালের নমুনা ওয়েবসাইটে, প্রতিটি উইজেটের নিজস্ব বিভাগ রয়েছে। টিউটোরিয়ালটি পরিষ্কার এবং অনুসরণ করা সহজ করার জন্য আমরা এটি করেছি।

আদর্শভাবে, আপনার যত কম বিভাগ থাকবে, তত কম HTML কোড আপনার থাকবে।

আপনি একই বিভাগে কিছু উইজেটগুলিকে উপরের বিভাগে টেনে এনে ফেলে দিতে পারেন এবং তারপর খালি বিভাগটি মুছে ফেলতে পারেন।

এবং এটাই, আপনার বিন্যাসটি অপ্টিমাইজ করা হয়েছে!

নতুন ওয়েবসাইটের পারফরম্যান্স মূল্যায়ন

আমরা DevTools (ইন্সপেক্টর) উইন্ডোতে ফলাফল পরীক্ষা করব:

• "নেটওয়ার্ক" ট্যাব নির্বাচন করুন:

এখানে কিছু সুন্দর এবং ইতিবাচক পরিবর্তন আছে:

• ওয়েবসাইটটি এখন লোড হতে 568 মিলিসেকেন্ড সময় নেয়
• আমরা 81 টি অনুরোধ থেকে 46 তে গিয়েছিলাম
• "বাতিঘর" ট্যাবটি নির্বাচন করুন, যেখানে আপনি দেখতে পাবেন যে আমাদের কর্মক্ষমতা স্কোর 73 থেকে 98 তে বৃদ্ধি পেয়েছে

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

ধাপ 13: গতি প্রভাব সঙ্গে ফলাফল পরীক্ষা

আমরা আমাদের সাইটকে আরও ইন্টারেক্টিভ এবং মজাদার করতে চাই, কিন্তু এটি কীভাবে আমাদের পারফরম্যান্স স্কোরগুলিকে প্রভাবিত করবে? দেখা যাক আমরা কি করতে পারি।

শিরোলেখকে একটি "স্থির" উপাদান করুন:

• হেডার নির্বাচন করুন
• "উন্নত" ট্যাবে যান
• "মোশন এফেক্টস" ট্যাবটি প্রসারিত করুন
• "স্টিকি" বিকল্পটি "শীর্ষ" এ সেট করুন

নায়ক বিভাগকে একটি "স্থির" উপাদান করুন:

• নায়ক বিভাগ নির্বাচন করুন
• "স্টাইল" ট্যাবে যান
• "সংযুক্তি" ড্রপ-ডাউন তালিকা নির্বাচন করুন এবং "স্থির" নির্বাচন করুন

একটি ব্যবহার করুন প্রবেশের অ্যানিমেশন নায়কের পাঠ্যের জন্য (হেডার):

• হেডার উইজেট নির্বাচন করুন
• "উন্নত" ট্যাবে যান
• "মোশন এফেক্টস" ট্যাবটি প্রসারিত করুন
• ইনপুট অ্যানিমেশন নির্বাচন করুন এবং "ফেইড ইন" এ সেট করুন

নায়কের পাঠ্য বিবরণের জন্য একটি ইনপুট অ্যানিমেশন ব্যবহার করুন (পাঠ্য সম্পাদক উইজেট):

• টেক্সট এডিটর উইজেট নির্বাচন করুন
• "উন্নত" ট্যাবে যান
• "মোশন এফেক্টস" ট্যাবটি প্রসারিত করুন
• "ইনপুট অ্যানিমেশন" নির্বাচন করুন এবং "ফেইড ইন" এ সেট করুন

পৃষ্ঠাগুলি লোড হওয়ার সময় সূক্ষ্ম প্রভাবের জন্য, পরবর্তী উইজেটগুলির জন্য একই কাজ করুন।

এখন চলুন আবার পারফরম্যান্স পরীক্ষা চালানো যাক, গতির প্রভাব আমাদের স্কোরকে কিভাবে প্রভাবিত করেছে তা দেখতে:

• "ইন্সপেক্টর" উইন্ডোতে ফিরে যান
• "বাতিঘর" ট্যাব নির্বাচন করুন
• "একটি প্রতিবেদন তৈরি করুন" এ ক্লিক করুন

এখন আমরা দেখছি যে আমাদের পারফরম্যান্স স্কোর 97 তে নেমে এসেছে - এটি অবশ্যই একটি বড় পার্থক্য নয় এবং এটি ওয়েবসাইটটিকে আরও আকর্ষণীয় এবং মজাদার করে তোলে।

আপনি কি আমাদের নতুন পারফরম্যান্স স্কোর বিশ্বাস করতে পারেন?

আপনার তৈরি করা প্রতিটি এলিমেন্টর ওয়েবসাইট থেকে আপনার পারফরম্যান্স স্কোর বাড়ানোর জন্য এখন আপনি সম্পূর্ণভাবে সজ্জিত হওয়ায় আমরা আনন্দিত। এটি আপনার ওয়েবসাইট তৈরির লক্ষ্য এবং আপনার ব্যবসার সাফল্যের জন্য একটি বড় পার্থক্য তৈরি করবে।

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

এবং এটি কেবল শুরু - এই কোর্সের পরবর্তী অংশ জুড়েইমেজ অপটিমাইজেশন.

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

এলিমেন্টর প্রো এখনই পান!

উপসংহার

তাই! এটি এই নিবন্ধটির জন্য যা আপনাকে দেখায় কিভাবে Elementor এর সাথে আপনার ওয়েবসাইট লেআউট অপ্টিমাইজ করতে হয়। কিভাবে সেখানে যেতে হবে সে সম্পর্কে আপনার কোন উদ্বেগ থাকলে আমাদের জানান commentaires.

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

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

...