ডিভি: “যোগাযোগ ফর্ম” মডিউলে ইনলাইন এবং ফুল-উইডথ ফিল্ড কীভাবে একত্রিত করবেন

কন্টাক্ট ফর্ম মডিউলের ইনলাইন ফিল্ড এবং পূর্ণ প্রস্থ ফিল্ড একত্রিত করতে হবে Divi ?

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

এর যোগাযোগ ফর্ম মডিউল Divi এটি সহজেই কাস্টমাইজ করে সকল ধরণের ওয়েবসাইটের জন্য আকর্ষণীয় এবং আকর্ষণীয় যোগাযোগ ফর্ম তৈরি করা যেতে পারে। এই মডিউলটিতে দুটি প্রদর্শন বিকল্প রয়েছে যা প্রতিটি ফর্ম ক্ষেত্রে প্রয়োগ করা যেতে পারে: অনলাইন ou পুরো প্রস্থ. 

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

এর শুরু করা যাক!

জরিপ

এখানে আমরা কি ডিজাইন করব তার একটি পূর্বরূপ।

প্রথম লেআউট

দ্বিতীয় লেআউট

তৃতীয় লেআউট

চতুর্থ বিন্যাস

আপনি কি শুরু করতে হবে

আমরা শুরু করার আগে, ডিভি থিমটি ইনস্টল এবং সক্রিয় করুন এবং নিশ্চিত করুন যে আপনার ওয়েবসাইটে Divi-এর সর্বশেষ সংস্করণ আছে।

এখন আপনি শুরু করতে প্রস্তুত!

ইনলাইন এবং পূর্ণ-প্রস্থ ক্ষেত্র ব্যবহার করে Divi কন্টাক্ট ফর্ম মডিউলের জন্য 4টি লেআউট উদাহরণ

পূর্বনির্ধারিত বিন্যাস নির্বাচন করুন

4 টি টেমপ্লেটের প্রতিটি জুতা মেরামত যোগাযোগ পৃষ্ঠার বিন্যাস থেকে পরিবর্তন করা হয়েছে জুতা মেরামতের লেআউট প্যাক, যা আপনি Divi লাইব্রেরিতে খুঁজে পেতে পারেন।

আপনার ওয়েবসাইটে একটি নতুন পৃষ্ঠা যুক্ত করুন এবং এটির একটি শিরোনাম দিন, তারপর বিকল্পটি নির্বাচন করুন Divi বিল্ডার ব্যবহার করুন.

আমরা এই উদাহরণের জন্য Divi লাইব্রেরি থেকে একটি পূর্ব-তৈরি লেআউট ব্যবহার করব, তাই নির্বাচন করুন লেআউট ব্রাউজ করুন.

জুতা মেরামত যোগাযোগ পৃষ্ঠা লেআউট খুঁজুন এবং নির্বাচন করুন।

নির্বাচন করা এই লেআউট ব্যবহার করুন আপনার পৃষ্ঠায় লেআউট যোগ করতে.

আমরা এখন আমাদের উদাহরণ ডিজাইন করতে প্রস্তুত.

প্রথম লেআউট

প্রথমে, কন্টাক্ট ফর্ম মডিউল সম্বলিত সারিটি উপরের অংশে, ব্লার্ব মডিউল সম্বলিত সারির ঠিক নীচে সরান। তারপর, আপনি বাকি খালি অংশটি মুছে ফেলতে পারেন।

লাইন সেটিংস খুলুন এবং বাম এবং ডান প্যাডিং যোগ করুন,

• প্যাডিং (বাম এবং ডান): 15%

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

• প্যাডিং (বাম এবং ডান): 5%

ইনলাইন এবং পূর্ণ-প্রস্থ ক্ষেত্র সহ পরিচিতি ফর্ম লেআউট পরিবর্তন করা হয়েছে৷

এই লেআউটের জন্য, আমরা প্রথম নাম এবং শেষ নামের জন্য দুটি পৃথক ক্ষেত্র তৈরি করব। 

পরিচিতি ফর্ম মডিউল সেটিংস খুলুন এবং শেষ নাম ক্ষেত্রের জন্য আইডি এবং শিরোনাম ক্ষেত্রটি প্রথম নামে পরিবর্তন করুন।

প্রথম নাম ক্ষেত্রের নীচে একটি নতুন ক্ষেত্র যোগ করুন। আইডি এবং শিরোনাম ক্ষেত্রটি নামে সেট করুন।

নামের ক্ষেত্রের সেটিংসে, লেআউট সেটিংস খুলুন এবং Make Fullwidth কে No এ সেট করুন।

• সম্পূর্ণ প্রস্থ তৈরি করুন: না

এরপর, যোগাযোগ ফর্ম সেটিংসের অধীনে, বিষয় এবং ফোন নম্বরের ক্রম পরিবর্তন করুন যাতে ফোন নম্বরটি বিষয়ের আগে তালিকাভুক্ত হয়।

বিষয় ক্ষেত্র লেআউট সেটিংস খুলুন এবং ক্ষেত্রটি সম্পূর্ণ প্রস্থে সেট করুন।

• সম্পূর্ণ প্রস্থ করুন: হ্যাঁ

যোগাযোগ ফর্ম নকশা কাস্টমাইজেশন

এবার ডিজাইনটি চূড়ান্ত করার জন্য কয়েকটি সেটিংস পরিবর্তন করা যাক। কন্টাক্ট ফর্ম মডিউল সেটিংসের ডিজাইন ট্যাবে যান।

প্রথমে, বোতামের পটভূমির রঙ পরিবর্তন করুন।

• বোতাম পটভূমি: #DBC2B3

বোতামে একটি শীর্ষ মার্জিন যোগ করুন।

• বোতাম মার্জিন (শীর্ষ): 10px

অবশেষে, বর্ডার সেটিংসে যান এবং ক্ষেত্রগুলিতে বৃত্তাকার কোণগুলি যোগ করুন।

• ইনপুট গোলাকার কোণ: 30px

আরো দেখুন: Divi: কিভাবে "Fullwidth Menu" মডিউলে একটি প্রতিক্রিয়াশীল লোগো যোগ করবেন

উদাহরণ ৩ এর চূড়ান্ত ফলাফল

এখানে ডেস্কটপ এবং মোবাইলের চূড়ান্ত ফলাফল।

দ্বিতীয় উদাহরণ

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

সারি বিন্যাস পরিবর্তন করুন.

লাইন ডিজাইন সেটিংস খুলুন এবং বন্ধ করুন কাস্টম গাটার প্রস্থ ব্যবহার করুন.

• কাস্টম গাটার প্রস্থ ব্যবহার করুন: NO

ব্লার্ব এবং কন্টাক্ট ফর্ম মডিউলগুলিকে উল্লম্বভাবে সারিবদ্ধ করতে মূল উপাদানের কাস্টম CSS-এ কোড যোগ করুন।

align-items:center;

এখন আমাদের কলামের মধ্যবর্তী পাতলা সীমানাটি সরিয়ে ফেলতে হবে। সারি সেটিংস খুলুন, তারপর কলাম ১ এর জন্য সেটিংস খুলুন। ডিজাইন ট্যাবের অধীনে, সীমানা সেটিংসে যান এবং সীমানাটি সরিয়ে ফেলুন।

• ডান সীমানা প্রস্থ: 0px

এর পরে, কলাম 2 সেটিংস খুলুন এবং সীমানা সরানোর পদক্ষেপগুলি পুনরাবৃত্তি করুন৷

• ডান সীমানা প্রস্থ: 0px

"আমাদের সাথে যোগাযোগ করুন" লেখাটি কেন্দ্রীভূত করুন।

যোগাযোগের ফর্মটি ডান কলামে নিয়ে যান। অবশিষ্ট খালি অংশ মুছুন.

ইনলাইন এবং পূর্ণ-প্রস্থ ক্ষেত্র সহ পরিচিতি ফর্ম লেআউট পরিবর্তন করা হয়েছে৷

এই লেআউটে প্রথম নাম এবং শেষ নামের জন্য দুটি পৃথক ক্ষেত্রও থাকবে। পরিচিতি ফর্ম মডিউল সেটিংস খুলুন এবং শেষ নাম ক্ষেত্রের জন্য আইডি এবং শিরোনাম ক্ষেত্রটি প্রথম নামে পরিবর্তন করুন।

প্রথম নাম ক্ষেত্রের নীচে একটি নতুন ক্ষেত্র যোগ করুন। আইডি এবং শিরোনাম ক্ষেত্রটি নামে সেট করুন।

নামের ক্ষেত্রের সেটিংসে, লেআউট সেটিংস খুলুন এবং Make Fullwidth কে No এ সেট করুন।

• সম্পূর্ণ প্রস্থ তৈরি করুন: না

ফোন এবং অবজেক্ট ফিল্ডের ক্রম পরিবর্তন করুন যাতে ফোন নম্বরটি অবজেক্টের আগে আসে।

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

• সম্পূর্ণ প্রস্থ করুন: হ্যাঁ

যোগাযোগ ফর্ম নকশা কাস্টমাইজেশন

সারি সেটিংস খুলুন, তারপর কলাম ২ সেটিংস খুলুন। পটভূমির রঙ সেট করুন।

• পটভূমি: #DBC2B3

কলাম ২ এর সেটিংসে, ডিজাইন ট্যাবে যান এবং প্যাডিং যোগ করুন।

• প্যাডিং (শীর্ষ, নীচে, বাম এবং ডান: 50px

রেসপন্সিভ সেটিংস পরিবর্তন করতে মোবাইল আইকনটি নির্বাচন করুন। মোবাইলের জন্য প্যাডিং সেট করুন।

• প্যাডিং (শীর্ষ, নীচে, বাম এবং ডান): 30px

তারপর কলামে একটি বাক্সের ছায়া যোগ করুন।

অবশেষে, যোগাযোগ ফর্ম মডিউল সেটিংস খুলুন এবং ক্ষেত্রের পাঠ্য রঙ পরিবর্তন করুন।

• ক্ষেত্র পাঠ্যের রঙ: #000000

উদাহরণ ৩ এর চূড়ান্ত ফলাফল

এখানে দ্বিতীয় লেআউটের চূড়ান্ত ফলাফল।

তৃতীয় উদাহরণ

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

ঠিকানা মডিউলটি ডানদিকের কলামে সরান।

এরপর, "আমাদের সাথে যোগাযোগ করুন" টেক্সট মডিউলটি বাম কলামে সরান, তারপর বাকি খালি সারিটি মুছে ফেলুন।

"আমাদের সাথে যোগাযোগ করুন" টেক্সট মডিউলের নীচে, বাম কলামে যোগাযোগ ফর্ম মডিউলটি সরান। বাকি খালি অংশটি মুছে ফেলুন।

ডিজাইন ট্যাবের অধীনে লাইন সেটিংস খুলুন এবং অক্ষম করুন কাস্টম গাটার প্রস্থ ব্যবহার করুন

• কাস্টম গাটার প্রস্থ ব্যবহার করুন: NO

ব্লার্ব এবং কন্টাক্ট ফর্ম মডিউলগুলিকে উল্লম্বভাবে সারিবদ্ধ করতে মূল উপাদানের কাস্টম CSS-এ কোড যোগ করুন।

align-items:center;

সারি সেটিংস খুলুন, তারপর কলাম ১ এর জন্য সেটিংস খুলুন। ডিজাইন ট্যাবে, বর্ডার সেটিংসে যান এবং বর্ডারটি সরিয়ে ফেলুন। কলাম ২ থেকে বর্ডারটি সরাতে এই পদক্ষেপগুলি পুনরাবৃত্তি করুন।

• ডান সীমানা প্রস্থ: 0px

যোগাযোগ ফর্মের বিন্যাস পরিবর্তন করা হচ্ছে

তৃতীয় ডিজাইনের জন্য আমরা ক্ষেত্রের প্রস্থ যেমন আছে তেমনই রেখে দেব; তবে, যোগাযোগ ফর্ম সেটিংস খুলুন এবং ফোন নম্বর এবং বিষয় ক্ষেত্রের ক্রম পরিবর্তন করুন যাতে ফোন নম্বরটি প্রথমে আসে।

উদাহরণ ৩ এর চূড়ান্ত ফলাফল

এখানে তৃতীয় লেআউটের চূড়ান্ত ফলাফল।

আরও পড়ুন: Divi: ফুল স্ক্রিনে ফুল উইথ হেডার মডিউল কীভাবে প্রদর্শন করবেন

চতুর্থ উদাহরণ

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

ঠিকানা মডিউলটি ডানদিকের কলামে সরান।

এরপরে, যোগাযোগ ফর্ম মডিউলটি বাম কলামে নিয়ে যান। অবশিষ্ট ফাঁকা বিভাগ মুছুন।

লাইন সেটিংস খুলুন, ডিজাইন ট্যাবে যান এবং অক্ষম করুন কাস্টম গাটার প্রস্থ ব্যবহার করুন.

• কাস্টম গাটার প্রস্থ ব্যবহার করুন: NO

ব্লার্ব এবং কন্টাক্ট ফর্ম মডিউলগুলিকে উল্লম্বভাবে সারিবদ্ধ করতে মূল উপাদানের কাস্টম CSS-এ কোড যোগ করুন।

align-items:center;

সারি সেটিংস খুলুন, তারপর কলাম ১ এর সেটিংস খুলুন। ডিজাইন ট্যাবের অধীনে, বর্ডার সেটিংসে যান এবং বর্ডারটি সরিয়ে দিন।

• ডান সীমানা প্রস্থ: 0px

এর পরে, কলাম 2 সেটিংস খুলুন এবং সীমানা সরানোর পদক্ষেপগুলি পুনরাবৃত্তি করুন৷

• ডান সীমানা প্রস্থ: 0px

"আমাদের সাথে যোগাযোগ করুন" লেখার জন্য টেক্সট মডিউল সেটিংস খুলুন এবং লেখাটি কেন্দ্রে রাখুন।

• পাঠ্য প্রান্তিককরণ: কেন্দ্রীভূত

ইনলাইন এবং পূর্ণ-প্রস্থ ক্ষেত্র সহ পরিচিতি ফর্ম লেআউট পরিবর্তন করা হয়েছে৷

এই ডিজাইনের জন্য, আমাদের সকল ফিল্ড পূর্ণ-প্রস্থের হবে। কন্টাক্ট ফর্ম মডিউল সেটিংস খুলুন, তারপর প্রতিটি ফিল্ডের জন্য সেটিংস খুলুন। ডিজাইন ট্যাবের অধীনে, নির্বাচন করুন বিন্যাস এবং সংজ্ঞায়িত করুন ফুল প্রস্থ তৈরি করুন sur হ্যাঁ.

একবার আপনি প্রতিটি পূর্ণ-প্রস্থ ক্ষেত্র তৈরি করার পরে, ফর্মটি এইরকম হওয়া উচিত।

এখন Last Name ক্ষেত্রের ID এবং Title ক্ষেত্রটিকে First Name এ পরিবর্তন করুন।

প্রথম নাম ক্ষেত্রের নীচে একটি নতুন ক্ষেত্র যোগ করুন। আইডি এবং শিরোনাম ক্ষেত্রটি নামে সেট করুন।

ফোন এবং অবজেক্ট ফিল্ডের ক্রম পরিবর্তন করুন যাতে ফোন নম্বরটি অবজেক্টের আগে আসে।

যোগাযোগ ফর্ম মডিউল নকশা কাস্টমাইজ করা

মডিউল সেটিংসে, ডিজাইন ট্যাবে, ক্ষেত্রগুলির টেক্সট রঙ কালোতে সেট করুন।

• ক্ষেত্র পাঠ্যের রঙ: #000000

বিভাগ সেটিংস খুলুন এবং একটি পটভূমি রঙ যোগ করুন।

• পটভূমি: #DBC2B3

অবশেষে, একটি ব্যাকগ্রাউন্ড মাস্ক যোগ করুন।

• পটভূমির মুখোশ: খিলান
• মাস্ক ট্রান্সফর্ম: অনুভূমিক

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

• মাস্ক ট্রান্সফর্ম (ফোন): অনুভূমিক এবং ঘূর্ণন

চূড়ান্ত ফলাফল

এখানে চতুর্থ লেআউটের চূড়ান্ত ফলাফল।

চূড়ান্ত ফলাফল

আসুন আমাদের সমস্ত উদাহরণ আবার দেখে নেওয়া যাক।

প্রথম উদাহরণ

দ্বিতীয় উদাহরণ

তৃতীয় উদাহরণ

চতুর্থ উদাহরণ

এখন DIVI ডাউনলোড করুন!!!

উপসংহার

একটি আকর্ষণীয় যোগাযোগ ফর্ম থাকা আপনার রূপান্তর বাড়াতে পারে এবং আপনার দর্শকদের সরাসরি আপনার সাথে সংযোগ করতে দেয়। 

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

আশা করি এই কৌশলটি ভবিষ্যতের প্রকল্পগুলির জন্য আরেকটি দরকারী নকশা দক্ষতা যোগ করবে।

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

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

এছাড়াও আমাদের গাইড সঙ্গে পরামর্শ করতে দ্বিধা করবেন না ওয়ার্ডপ্রেস ব্লগ তৈরি বা এক ডিভি: সর্বকালের সেরা ওয়ার্ডপ্রেস থিম.

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

...