আপনার Elementor ওয়েবসাইট আরও মোবাইল-বান্ধব প্রতিক্রিয়াশীল করুন

একটি মোবাইল প্রতিক্রিয়াশীল ওয়েবসাইট যেকোনো অনলাইন ব্যবসার একটি গুরুত্বপূর্ণ অংশ।

গুগল যেকোন ওয়েবসাইটের সার্চ র‌্যাঙ্কিংয়ের মূল নির্ধারক হিসেবে মোবাইল পেজ লোড স্পিড ব্যবহার করছে। এটি প্রধানত কারণ বিশ্বব্যাপী ওয়েব ট্রাফিকের অর্ধেকেরও বেশি মোবাইল ট্রাফিক থেকে আসে।

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

• Elementor এর প্রতিক্রিয়াশীল ওয়েবসাইট ডিজাইন কি?
• কীভাবে মোবাইল, ডেস্কটপ এবং ট্যাব সেটিংস সামঞ্জস্য করবেন
• আপনার মোবাইল ডিসপ্লেতে শিরোনাম সামঞ্জস্য করুন
• মোবাইলের জন্য প্যাডিং বা মার্জিন সামঞ্জস্য করুন
• প্রতিটি কলাম অনুভূমিকভাবে তৈরি করুন এবং এটি সমস্ত ডিভাইস জুড়ে বিস্ময়করভাবে সামঞ্জস্য করবে
• মোবাইল/ডেস্কটপ ভিউ অনুযায়ী ব্যাকগ্রাউন্ড ইমেজ পরিবর্তন করুন
• ডেস্কটপ/মোবাইল ভিউতে যেকোনো বিভাগের দৃশ্যমানতা পরিবর্তন করুন
• কলামের ক্রম পরিবর্তন করুন
• একটি বিকল্প বিভাগ তৈরি করুন
• কলামের প্রস্থ সামঞ্জস্য করুন
• উপসংহার

Elementor এর প্রতিক্রিয়াশীল ওয়েবসাইট ডিজাইন কি?

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

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

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

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

1. মোবাইল স্ক্রিনে কোনো শিরোনাম খুব বড় দেখায় কিনা তা পরীক্ষা করুন।
2. বিষয়বস্তুর প্যাডিং বা বিষয়বস্তুর পাশে স্থান পরীক্ষা করুন
3. পৃষ্ঠা কলাম প্রান্তিককরণ পরীক্ষা করুন, এটি কিভাবে নিখুঁত দেখায়; কেন্দ্রিক, ডান বা বাম
4. কলামের ক্রমটি পরীক্ষা করুন, যদি সেগুলি সঠিক ক্রমে প্রদর্শিত হয় বা আপনাকে এটি পরিবর্তন করতে হবে।

এখন, আসুন আরও গভীরে খনন করি এবং এলিমেন্টর পৃষ্ঠা নির্মাতার সাথে কীভাবে জিনিসগুলি কাজ করতে চলেছে তা খুঁজে বের করা যাক।

কীভাবে মোবাইল, ডেস্কটপ এবং ট্যাব সেটিংস সামঞ্জস্য করবেন

প্রায় সব সম্পাদনাযোগ্য বৈশিষ্ট্যে মোবাইল, ডেস্কটপ এবং ট্যাব সেটিংস সামঞ্জস্য করার বিকল্প রয়েছে। যদি আপনি মেনুর নীচে প্রতিক্রিয়াশীল মোডে ক্লিক করেন

আপনার মোবাইল ডিসপ্লেতে শিরোনাম সামঞ্জস্য করুন

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

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

যদি আমি শিরোনাম কলামের সম্পাদনা বিকল্পে ক্লিক করি, আমি টাইপোগ্রাফি বিভাগে যেতে পারি যেখানে আমি শিরোনামের আকার সামঞ্জস্য করতে পারি যা ডেস্কটপে এবং মোবাইল স্ক্রিনেও সুন্দর দেখায়। আমি পৃথকভাবে উভয় নিয়ন্ত্রণ করতে পারেন. আমার ডেস্কটপ সাইট ভিউয়ের জন্য, শিরোনামের আকার 49px, কিন্তু মোবাইল ভিউতে, এটি ফিট নয়

পুনরায় সামঞ্জস্য করতে, আমি মোবাইল প্রতিক্রিয়াশীল মোড > শৈলী > টাইপোগ্রাফি > অ্যাডজাস্ট px আকার 30 এ ক্লিক করব যা সহজেই মোবাইল স্ক্রিনে ফিট করে।

মোবাইলের জন্য প্যাডিং বা মার্জিন সামঞ্জস্য করুন

প্যাডিংগুলি সামঞ্জস্য করার সময়, EM বা শতাংশে সেট মানগুলির পরিবর্তে পিক্সেলে মানগুলি ব্যবহার না করার পরামর্শ দেওয়া হয় কারণ এটি সামগ্রিক স্ক্রীনের আকারের সাথে তুলনা করবে।

আপনি দেখতে পাচ্ছেন যে আমরা 70px ডান এবং বামে প্যাডিং ব্যবহার করেছি, যা ডেস্কটপ সাইটে ভাল দেখায়; যাইহোক এই সেটিং এর জন্য মোবাইল ভিউ একটি সম্পূর্ণ জগাখিচুড়ি.

আমরা প্রতিটি পাশে 17 পিক্সে প্যাডিং পুনরায় সামঞ্জস্য করতে পারি তাহলে এটি সম্পূর্ণরূপে সূক্ষ্ম হয়ে উঠবে।

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

প্রতিটি কলাম অনুভূমিকভাবে তৈরি করুন এবং এটি সমস্ত ডিভাইস জুড়ে বিস্ময়করভাবে সামঞ্জস্য করবে

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

মোবাইল/ডেস্কটপ ভিউ অনুযায়ী ব্যাকগ্রাউন্ড ইমেজ পরিবর্তন করুন

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

ডেস্কটপ/মোবাইল ভিউতে যেকোনো বিভাগের দৃশ্যমানতা পরিবর্তন করুন

আপনি ডিভাইস অনুযায়ী যেকোনো বিভাগ বা কলামের দৃশ্যমানতা নিয়ন্ত্রণ করতে পারেন।

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

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

কলামের ক্রম পরিবর্তন করুন

আপনি সেটিংস বিভাগ থেকে কলামের ক্রম পরিবর্তন করতে পারেন। যাও; বিভাগ সেটিংস> উন্নত> প্রতিক্রিয়াশীল> বিপরীত কলাম এবং হ্যাঁ ক্লিক করুন।

একটি বিকল্প বিভাগ তৈরি করুন

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

কলামের প্রস্থ সামঞ্জস্য করুন

আপনি যখন মোবাইল ভিউতে দেখেন তখন কলামের সমস্ত বিভাগ 100% প্রস্থ পায়। যাইহোক, মোবাইলে কলামের প্রস্থ অনুযায়ী প্রস্থ পরিবর্তন করা যেতে পারে। আপনার দুটি কলাম থাকলে, আপনি প্রতিটি বিভাগের সর্বোচ্চ-প্রস্থ 50% সেট করতে পারেন।

উপসংহার

এলিমেন্টর সমস্ত স্ক্রীন আকারের প্রতিক্রিয়াশীল কলাম বিন্যাস নিয়ন্ত্রণ করতে সমস্ত শক্তিশালী বৈশিষ্ট্য সহ আসে। এটি আপনাকে ভিউ মোড নির্বাচন অনুযায়ী প্রতিটি বিভাগ পুনরায় সামঞ্জস্য করতে দেয়। একটি মোবাইল-বন্ধুত্বপূর্ণ ওয়েবসাইট রাখা অনিবার্য কারণ Google অ্যালগরিদম মোবাইল-বান্ধব ওয়েবসাইটগুলির র‌্যাঙ্কিংকে সবচেয়ে বেশি বিবেচনা করে৷ প্রতিক্রিয়াশীল ওয়েবসাইটগুলি শুধুমাত্র ভাল এসইও পাওয়ার জন্য অপরিহার্য নয়, তবে আপনাকে আরও ট্র্যাফিক পেতে হবে, কারণ 80% এর বেশি ট্র্যাফিক মোবাইল ভিউ থেকে আসে।

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