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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

উপসংহার

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

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