Elementor এর সাথে হেডার এবং ফুটার কিভাবে ব্যবহার করবেন

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

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

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

কেন আপনি আপনার পৃষ্ঠা নির্মাতা হিসাবে Elementor নির্বাচন করা উচিত?

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

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

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

নিম্নে এলিমেন্টরের কিছু গুরুত্বপূর্ণ দিক রয়েছে যা এটিকে সার্থক করে তোলে:

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

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

আপনি বিভিন্ন হেডার বিভাগ থেকে চয়ন করতে পারেন; সবচেয়ে সাধারণ এবং আধুনিক চেহারার হেডারে বাঁদিকের কোণায় একটি সাইটের লোগো, মাঝখানে একটি নেভিগেশন বার এবং ডানদিকে একটি অনুসন্ধান বার বিভাগ রয়েছে৷

অফুরন্ত সম্ভাবনা রয়েছে এবং আপনি যে কোনও লেআউট তৈরি করতে পারেন।

আমি 7 নং প্রি-মেড হেডার টেমপ্লেট বেছে নিয়েছি; এটি একটি ওয়ার্ডপ্রেস ওয়েবসাইটে একটি শিরোনাম ব্যবহার করার জন্য সবচেয়ে সাধারণ এবং সহজ পদ্ধতি। টেমপ্লেট > হেডার > সার্চ টেমপ্লেট > কপি করা হেডারের নাম পেস্ট করুন ।

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

এই পার্টি শুরু করা যাক.

একটি হেডার কি এবং এটি কি করে?

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

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

শিরোনামটি আপনার কোম্পানির ব্র্যান্ড পরিচয়ের প্রচারেও সহায়তা করতে পারে।

আমি কোম্পানির লোগো, ফন্ট, রং এবং সামগ্রিক ব্র্যান্ড ভাষার মতো বৈশিষ্ট্য ব্যবহার করছি।

সাইট নেভিগেশন, সাইট অনুসন্ধান, একটি শপিং কার্ট (বিক্রয় সাইটের জন্য), কল টু অ্যাকশন (CTA) বোতাম এবং অন্যান্য বৈশিষ্ট্য যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এবং রূপান্তর হার বাড়ায় সবই হেডারে পাওয়া যায়।

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

পাদচরণগুলিকে প্রায়শই উপেক্ষা করা হয়, যা সম্ভাবনার অপচয়, কারণ সেগুলি সাইটের প্রতিটি পৃষ্ঠায় প্রদর্শিত হয়৷ তারা হেডারের জন্য সমানভাবে গুরুত্বপূর্ণ।

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

কিভাবে একটি শিরোনাম করা

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

একটি হেডার টেমপ্লেট ডেভেলপ করা হচ্ছে

ওয়ার্ডপ্রেস অ্যাডমিন প্যানেলে, টেমপ্লেটের এবং আমাদের হেডার তৈরি করতে নতুন যোগ করুন

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

এটি এলিমেন্টর সম্পাদক চালু করবে। এর পরে, আপনাকে টেমপ্লেটগুলির একটি তালিকা উপস্থাপন করা হবে যা থেকে চয়ন করতে হবে৷ তাই আপনার কাছে আবেদন করে এমন একটি বেছে নিন:

একবার আপনি একটি টেমপ্লেট বাছাই করার পরে এটি এলিমেন্টর সম্পাদনা বিভাগের উপরে প্রদর্শিত হবে:

একটি লোগো তৈরি করা: প্রথম ধাপ হল একটি লোগো তৈরি করা। সাইটের লাইভ এডিটরে লোগো সেট করুন এটি হেডারে রাখতে। সাইট আইডেন্টিটিতে ক্লিক করে একটি লোগো বেছে নিন।

একবার আপনি একটি লোগোর বিষয়ে সিদ্ধান্ত নিলে, প্রকাশ করুন এ

আপনি যদি Elementor ইন্টারফেস রিফ্রেশ করেন তাহলে আপনার সাইটের লোগো এখন হেডারে থাকা উচিত:

এর পরে, আপনি যে কোনও পরিবর্তন করতে পারেন।

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

আমাদের যা করা উচিত তা হল মেনু পরিবর্তন করা। আপনি যদি একটি মেনু তৈরি করে থাকেন, তাহলে টেমপ্লেট স্বয়ংক্রিয়ভাবে এটিকে অন্তর্ভুক্ত করবে:

এখানে আমাদের মেনু গঠন, যা আপনি হেডার টেমপ্লেটে প্রতিফলিত দেখতে পারেন:

আপনার যদি একাধিক মেনু থাকে তবে আপনি প্রয়োজনে বিষয়বস্তু আপডেট করতে পারেন।

আপনি অন্য যেকোনো উইজেটের মতোই এর বৈশিষ্ট্য সম্পাদনা করতে পারেন।

যদি আমাদের আরও আইটেম যোগ করার প্রয়োজন হয়, আমরা আমাদের হেডারে আরও বিভাগ যোগ করতে পারি:

একটি হেডার এবং কিছু সোশ্যাল মিডিয়া আইকন যোগ করে শুরু করা যাক:

এর পরে, আপনি আপনার পছন্দ মতো পরিবর্তন করতে পারেন। এখানে আমাদের সম্পাদনা কিভাবে পরিণত হয়েছে:

হেডার পাবলিকেশন

একবার আপনি এটি পরিবর্তন করা শেষ করলে আপনি এখন শিরোনামটি প্রকাশ করতে পারেন৷ amp আমাদের সম্পূর্ণ সাইটে শিরোনামটি ব্যবহার করব শর্ত যোগ করার পরে আমরা সেই পছন্দটি নির্বাচন করব

এবং এখানে আমাদের লাইভ সাইট থেকে একটি পৃষ্ঠার একটি amp রয়েছে:

একটি পাদচরণ তৈরির প্রক্রিয়াটি একটি শিরোনাম নির্মাণের মতোই মোটামুটি অনুরূপ। একটি তৈরি করতে, এই মত একটি নতুন ফুটার টেমপ্লেট তৈরি করুন:

তারপর একটি টেমপ্লেট সিদ্ধান্ত. ফুটার বিভিন্ন আকার এবং আকারে আসে। কিছু দৃঢ় তথ্য অন্তর্ভুক্ত, অন্যদের যোগাযোগ ফর্ম আছে. আপনার প্রয়োজনীয়তার জন্য উপযুক্ত একটি টেমপ্লেট নির্বাচন করুন।

আমাদের ওয়েবসাইটের জন্য আমরা যে টেমপ্লেটটি বেছে নিয়েছি তা নিম্নরূপ:

আপনি সম্পাদনা শুরু করার সাথে সাথে আপনি শিরোনামটি দেখতে পাবেন (যদি আপনি শর্ত সেট করেন যে এটি সমস্ত পৃষ্ঠায় প্রদর্শিত হবে)।

প্রয়োজন অনুযায়ী ফুটার পরিবর্তন করুন; এইভাবে আমাদের রিভিশন দেখায়:

ফুটারটি শেষ হওয়ার পরে প্রকাশ করুন:

সমাপ্ত পণ্য

এখানে সমাপ্ত ফলাফল দেখায় কিভাবে. হেডার এবং ফুটার উভয়ই এখন আমাদের ওয়েবসাইটে ব্যবহার করা হয়:

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

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

একটি বন্ধ জিনিস আনা

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

হ্যানসন এফ।

সাম্প্রতিক পোস্ট

ওয়ার্ডপ্রেস থিম তুলনা: Astra বনাম OceanWP

বাজারে সবচেয়ে জনপ্রিয় দুটি ওয়ার্ডপ্রেস থিম হল Astra এবং OceanWP। পেশাদার…

জানুয়ারী 2, 2022

ওয়ার্ডপ্রেস সংবাদ থিম তুলনা: সংবাদপত্র বনাম Astra

একটি চমৎকার নিউজ ওয়েবসাইট তৈরি করার জন্য আপনাকে ওয়েব ডিজাইনার হতে হবে না। আমরা…

25 অক্টোবর, 2021

নিউজপেপার থিম সহ একটি সংবাদ-সম্পর্কিত ওয়েবসাইট তৈরি করুন

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

18 অক্টোবর, 2021

Avada WooCommerce নির্মাতার সাথে কীভাবে একটি ইকমার্স তৈরি করবেন

যখন একটি অনলাইন স্টোর সেট আপ করার কথা আসে, তখন WooCommerce হল গো-টু plugin ৷ এটা…

4 অক্টোবর, 2021

এলিমেন্টরের সাথে কীভাবে স্টিকি হেডার এবং স্ক্রলিং প্রভাবগুলি ব্যবহার করবেন

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

21 সেপ্টেম্বর, 2021

কিভাবে Avada হেডার, ফুটার এবং কলাম লেআউট বিল্ডার ব্যবহার করবেন

আমাদের নিজস্ব পৃষ্ঠা নির্মাতা, Avada বিল্ডার, এখন দুটি ইন্টারফেসে উপলব্ধ: Avada…

16 সেপ্টেম্বর, 2021