আপনি কি Divi এর Contact Form মডিউল ব্যবহার করে আপনার ওয়েবসাইটের জন্য একটি Contact Form তৈরি করতে চান? এখানে তিনটি কাস্টমাইজেশন ধারণা দেওয়া হল...
যোগাযোগ ফর্মগুলি অনেক ওয়েবসাইটের একটি অপরিহার্য অংশ। এর মূল উদ্দেশ্য হল স্বজ্ঞাত হওয়া এবং দর্শকদের সহজেই যোগাযোগ করতে সাহায্য করা।
কিন্তু এর অর্থ এই নয় যে প্রতিটি যোগাযোগ ফর্মের একটি নির্দিষ্ট, পূর্বনির্ধারিত চেহারা থাকা প্রয়োজন। আপনি সহজেই একটি স্বজ্ঞাত অভিজ্ঞতাকে একটি সুন্দর ডিজাইনের সাথে একত্রিত করতে পারেন। এই টিউটোরিয়ালে আমরা ঠিক এটিই করব।
আমরা কন্টাক্ট ফর্ম মডিউলের 3টি অনন্য ডিজাইন শেয়ার করতে যাচ্ছি Divi আপনি শুধুমাত্র Divi এর অন্তর্নির্মিত বিকল্পগুলি ব্যবহার করে তৈরি করতে পারেন।
চল যাই!
ডিভি কন্টাক্ট ফর্ম মডিউলের ডিজাইনের ওভারভিউ
ডেস্কটপ সংস্করণ
আসুন আমরা এই টিউটোরিয়ালে যে কন্টাক্ট ফর্ম মডিউলটির ডিজাইন করব তার বিভিন্ন ডিজাইনের ডেস্কটপ সংস্করণ দেখে শুরু করা যাক।
মোবাইল সংস্করণ
এবং ছোট পর্দার আকারে তারা দেখতে কেমন তা এখানে:
এখন DIVI ডাউনলোড করুন!!!
ডিভি যোগাযোগ ফর্ম মডিউলটি কীভাবে কাস্টমাইজ করবেন: 3টি উদাহরণ
আরও পড়ুন: ডিভি: ক্যারোজেল হিসাবে কীভাবে একটি দলের সদস্যদের বিভাগ তৈরি করবেন
যোগাযোগ ফর্ম # 1 তৈরি করা
একটি নতুন অধ্যায় যোগ করুন
গ্রেডিয়েন্ট পটভূমি
প্রথম উদাহরণ দিয়ে শুরু করা যাক! একটি নতুন বিভাগ যোগ করুন, পটভূমি সেটিংসে যান এবং একটি গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড যোগ করুন।
- গ্রেডিয়েন্ট স্টপ
- 34%: #4c00ff
- 34%: #ffd400
- প্রকার: গোলাকার
- গ্রেডিয়েন্ট দিক: নীচে বাম
ব্যবধান
এরপরে, ডিজাইন ট্যাবে Spacing অপশনে যান এবং নিচের মত সেটিংস পরিবর্তন করুন।
- প্যাডিং (শীর্ষ এবং নীচে): 200px
একটি নতুন লাইন যোগ করুন
কলাম গঠন
নিম্নলিখিত কলাম গঠন ব্যবহার করে একটি নতুন সারি যোগ করুন:
কলাম 1: পটভূমির রঙ
এখনও কোনো মডিউল যোগ না করে, সারি সেটিংস খুলুন, তারপর কলাম 1 সেটিংস এবং নীচে পটভূমির রঙ যোগ করুন
- পটভূমি: rgba(255,255,255,0.55)
কলাম 1: পটভূমি চিত্র
এছাড়াও প্রথম কলামে একটি ব্যাকগ্রাউন্ড ইমেজ যোগ করুন।
- ব্যাকগ্রাউন্ড ইমেজ রিপিট: না-রিপিট
- ব্যাকগ্রাউন্ড ইমেজ ব্লেন্ড: স্ক্রিন
কলাম 2: পটভূমি চিত্র
এবং দ্বিতীয় কলামে একটি সাদা পটভূমির রঙ।
- পটভূমি: #ffffff
আয়তন-অনুযায়ী বাছাই
তারপর মাপ পরামিতি সংশোধন করুন.
- কলামের উচ্চতা সমান করুন: হ্যাঁ
ব্যবধান
এছাড়াও সমস্ত ডিফল্ট কাস্টম প্যাডিংগুলি সরান৷
- প্যাডিং (শীর্ষ এবং নীচে): 0px
কলাম সীমানা ব্যাসার্ধ
উন্নত ট্যাবে উভয় কলামে একটি সীমানা ব্যাসার্ধ যোগ করুন।
border-radius: 10px;
কলাম 1 এ একটি পাঠ্য মডিউল যোগ করুন
কন্টেন্ট যোগ করুন
এটি বিভিন্ন মডিউল যোগ করা শুরু করার সময়! আপনার পছন্দের বিষয়বস্তু সহ প্রথম কলামে একটি পাঠ্য মডিউল যোগ করুন।
পাঠ্য সেটিংস
এরপরে, টেক্সট মডিউলের ডিজাইন ট্যাবে যান এবং কিছু পরিবর্তন করুন।
- পাঠ্য:
- হরফ: সন্তুষ্ট
- পাঠ্যের রঙ: #333333
- আকার: 100px
- লাইনের উচ্চতা: 1 এম
- প্রান্তিককরণ: কেন্দ্র
ব্যবধান
কাস্টম ফিল মানগুলি যুক্ত করুন।
- প্যাডিং (শীর্ষ): 600px
- প্যাডিং (নীচে): 100px
ছায়া বাক্স
ডিজাইনে গভীরতা যোগ করতে, একটি সূক্ষ্ম বাক্সের ছায়া ব্যবহার করুন।
- বক্স শ্যাডো ব্লার শক্তি: 80px
- বক্স শ্যাডো স্প্রেড স্ট্রেন্থ: -16px
- ছায়ার রঙ: rgba(0,0,0,0.3)
কলাম 2 এ একটি চিত্র মডিউল যোগ করুন
একটি ছবি আপলোড করুন
দ্বিতীয় কলামে একটি ইমেজ মডিউল যোগ করে চালিয়ে যান। আপনার পছন্দের একটি ছবি আপলোড করুন।
আয়তন-অনুযায়ী বাছাই
এই মডিউলের জন্য সাইজিং সেটিংস পরিবর্তন করুন।
- প্রস্থ: 25% (ডেস্কটপ), 50% (ট্যাবলেট), 60% (ফোন)
- মডিউল প্রান্তিককরণ: কেন্দ্র
ব্যবধান
নেতিবাচক শীর্ষ মার্জিন ব্যবহার করে একটি ওভারল্যাপ তৈরি করুন।
- মার্জিন (শীর্ষ): -60%
সীমান্ত
চিত্রের সীমানা নিম্নরূপ পরিবর্তন করুন:
- গোলাকার কোণ: 100px (সমস্ত কোণ)
কলাম 1 এ পাঠ #2 মডিউল যোগ করুন
কন্টেন্ট যোগ করুন
চিত্র মডিউলের ঠিক নীচে, বিষয়বস্তু সহ একটি পাঠ্য মডিউল যোগ করুন।
পাঠ্য সেটিংস
এই মডিউলটির জন্য পাঠ্য সেটিংস সম্পাদনা করুন।
- পাঠ্য:
- হরফ: সন্তুষ্ট
- পাঠ্যের রঙ: #333333
- পাঠ্যের আকার: 44px
- অভিযোজন: কেন্দ্র
কলাম 2 এ পাঠ #2 মডিউল যোগ করুন
কন্টেন্ট যোগ করুন
তারপর আরেকটি টেক্সট মডিউল যোগ করুন।
পাঠ্য সেটিংস
এছাড়াও এই মডিউলটির জন্য পাঠ্য সেটিংস পরিবর্তন করুন।
- পাঠ্য:
- হরফ: Arial
- পাঠ্যের রঙ: #ffd400
- পাঠ্যের রঙ: 18px
- অক্ষর ব্যবধান: 2px
- অভিযোজন: কেন্দ্র
ব্যবধান
তারপরে একটি নীচের মার্জিন যুক্ত করুন।
- মার্জিন (নীচে): 100px
কলাম 2 এ যোগাযোগ ফর্ম মডিউল যোগ করুন
নাম এবং ইমেল ক্ষেত্রে "পূর্ণ প্রস্থ তৈরি করুন" বিকল্পটি সক্রিয় করুন
সর্বশেষ মডিউলটি প্রয়োজন যোগাযোগ ফর্ম মডিউল। অন্য কিছু করার আগে, নাম এবং ইমেল ক্ষেত্র খুলুন এবং লেআউট পরিবর্তন করুন।
- সম্পূর্ণ প্রস্থ তৈরি করুন: হ্যাঁ
একটি বিষয় ক্ষেত্র যোগ করুন
এই নকশাটি তৈরি করতে, আমরা বিষয়টির জন্য আরেকটি ক্ষেত্র যুক্ত করেছি।
স্প্যাম সুরক্ষা
তারপর ক্যাপচা অপশনটি নিষ্ক্রিয় করুন।
- বেসিক ক্যাপচা ব্যবহার করুন: না
ফর্ম ফিল্ড টেক্সট সেটিংস
এই কন্টাক্ট ফর্ম মডিউলের ফর্ম ফিল্ড টেক্সট সেটিংসে কিছু পরিবর্তন করুন
- ক্ষেত্র:
- পটভূমির রঙ: rgba(255,255,255,0)
- হরফ: Arial
- হরফের ওজন: হালকা
- পাঠ্যের আকার: 16px
- অক্ষর ব্যবধান: 2px
বোতাম সেটিংস
আমরা বোতামগুলির চেহারাও পরিবর্তন করছি।
- বোতামের জন্য কাস্টম আকার ব্যবহার করুন: হ্যাঁ
- বোতাম:
- পাঠ্যের রঙ: #ffd400
- সীমানা প্রস্থ: 0 পিক্সেল
- অক্ষরের ব্যবধান: 2px
- হরফ: Arial
- ফন্ট শৈলী: U
- আন্ডারলাইন রঙ: #4c00ff
ব্যবধান
তারপর কিছু কাস্টম প্যাডিং মান যোগ করুন।
- প্যাডিং (নীচে): 100px
- প্যাডিং (বাম এবং ডান): 50px
সীমান্ত
এবং প্রতিটি ক্ষেত্রে একটি সূক্ষ্ম নীচের সীমানা যোগ করুন।
- ইনপুট নীচের সীমানা প্রস্থ: 2px
- ইনপুট নীচের সীমানা রঙ: #efefef
পৃথক ক্ষেত্রের ব্যবধান
অবশেষে, বার্তা ক্ষেত্র ব্যতীত প্রতিটি পৃথক ক্ষেত্রে একটি নীচের মার্জিন যোগ করুন।
- মার্জিন (নীচে): 20px
যোগাযোগ ফর্ম # 2 তৈরি করা
একটি নতুন অধ্যায় যোগ করুন
গ্রেডিয়েন্ট পটভূমি
এর পরবর্তী উদাহরণে যাওয়া যাক! গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড সহ একটি নতুন বিভাগ যোগ করুন।
- গ্রেডিয়েন্ট স্টপস:
- 50%: #562fef
- 50%: #ffffff
- গ্রেডিয়েন্ট টাইপ: লিনিয়ার
ব্যবধান
এই বিভাগে ব্যবধান সেটিংসে কাস্টম প্যাডিং মান যোগ করুন।
- প্যাডিং (শীর্ষ এবং নীচে): 200px
একটি নতুন লাইন যোগ করুন
কলাম গঠন
নিম্নলিখিত কলাম গঠন ব্যবহার করে একটি নতুন সারি যোগ করুন:
পেছনের রঙ
এখনও কোনো মডিউল যোগ না করে, সারি সেটিংস খুলুন এবং সারিতে একটি পটভূমির রঙ যোগ করুন।
- পটভূমির রঙ: #ffffff
2 কলাম গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড
সারির দ্বিতীয় কলামে একটি গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড যোগ করুন।
- গ্রেডিয়েন্ট স্টপস:
- 0%: #9932ff
- 100%: #562fef
- প্রকার: লিনিয়ার
- স্টিয়ারিং: 160 ডিগ্রী
আয়তন-অনুযায়ী বাছাই
এছাড়াও লাইন সাইজিং পরামিতি সংশোধন করুন.
- কাস্টম গাটার প্রস্থ ব্যবহার করুন: হ্যাঁ
- নর্দমার প্রস্থ: 1
- কলামের উচ্চতা সমান করুন: হ্যাঁ
ব্যবধান
পরবর্তী, কাস্টম ব্যবধান মান যোগ করুন।
- লাইন:
- প্যাডিং (শীর্ষ এবং নীচে): 0px
- কলাম 1:
- প্যাডিং: 100px (শীর্ষ), 50px (নীচ)
- প্যাডিং (বাম এবং ডান): 50px
- কলাম 2:
- প্যাডিং (শীর্ষ এবং নীচে): 100px
- প্যাডিং (বাম এবং ডান): 50px
সীমান্ত
প্রতিটি লাইন বর্ডারে '20px' যোগ করুন।
ছায়া বাক্স
অবশেষে, লাইনে একটি সূক্ষ্ম বাক্স ছায়া যোগ করুন।
- বক্স শ্যাডো ব্লার শক্তি: 45px
- বক্স শ্যাডো স্প্রেড স্ট্রেন্থ: -11px
- স্যাডো রঙ: rgba(0,0,0,0.3)
কলাম 1 এ একটি পাঠ্য মডিউল যোগ করুন
কন্টেন্ট যোগ করুন
এটি মডিউল যোগ করা শুরু করার সময়! প্রথম কলামে একটি টেক্সট মডিউল দিয়ে শুরু করুন।
পাঠ্য সেটিংস
এই মডিউলটির জন্য পাঠ্য সেটিংস সম্পাদনা করুন।
- পাঠ্য:
- হরফের ওজন: আল্ট্রা বোল্ড
- ফন্ট শৈলী: TT
- রঙ: #562fef
- আকার: 100px (ডেস্কটপ), 80px (ট্যাবলেট), 60px (ফোন)
- অক্ষর ব্যবধান: -10px
- লাইনের উচ্চতা: 1 এম
ব্যবধান
এছাড়াও একটি নীচে মার্জিন যোগ করুন.
- মার্জিন (নীচে): 50px
কলাম 1 এ যোগাযোগ ফর্ম মডিউল যোগ করুন
উপাদান
প্রথম কলামে আমাদের যে দ্বিতীয় মডিউলটির প্রয়োজন হবে তা হল একটি যোগাযোগ ফর্ম মডিউল। একবার আপনি মডিউল যোগ করলে, 'বেসিক ক্যাপচা ব্যবহার করুন' বিকল্পটি বন্ধ করুন।
- বেসিক ক্যাপচা ব্যবহার করুন: না
ফর্ম ফিল্ড টেক্সট সেটিংস
তারপর ফর্ম ক্ষেত্রগুলির পটভূমির রঙ পরিবর্তন করুন।
- ক্ষেত্রগুলির পটভূমির রঙ: #ffffff
বোতাম সেটিংস
এছাড়াও একটি পাঠ্য বোতামের পরিবর্তে একটি আইকন বোতাম তৈরি করতে বোতাম সেটিংসের সাথে খেলুন।
- বোতামের জন্য কাস্টম শৈলী ব্যবহার করুন: হ্যাঁ
- বোতাম:
- পাঠ্যের আকার: 73px
- পাঠ্যের রঙ: rgba(0,0,0,0) (ডিফল্ট),
- পটভূমির রঙ: rgba(255,255,255,0) (হোভার)
- সীমানা প্রস্থ: 0px
- আইকনের রঙ: #9932ff
- বোতামের জন্য হোভারে শুধুমাত্র আইকন দেখান: না
ছায়া বাক্স
অবশেষে, প্রতিটি ক্ষেত্রে একটি সূক্ষ্ম বাক্স ছায়া যোগ করুন।
- বক্স শ্যাডো ব্লার শক্তি: 36px
- বক্স শ্যাডো স্প্রেড স্ট্রেন্থ: -14px
- ছায়ার রঙ: rgba(0,0,0,0.3)
কলাম 2 এ একটি পাঠ্য মডিউল যোগ করুন
কন্টেন্ট যোগ করুন
দ্বিতীয় কলামে আমাদের যে প্রথম মডিউলটি প্রয়োজন তা হল আরেকটি টেক্সট মডিউল।
পাঠ্য সেটিংস
একবার আপনি বিষয়বস্তু যোগ করার পরে, এই মডিউলটির জন্য পাঠ্য সেটিংস সম্পাদনা করুন৷
- পাঠ্য:
- হরফের ওজন: আল্ট্রা বোল্ড
- ফন্ট শৈলী: TT
- রঙ: #ffffff
- আকার: 23px
- অক্ষর ব্যবধান: -1px
কলাম 1 এ Blurb মডিউল #2 যোগ করুন
কন্টেন্ট যোগ করুন
দ্বিতীয় মডিউলটি আমাদের প্রয়োজন হবে একটি Blurb মডিউল। এগিয়ে যান এবং কিছু যোগাযোগ তথ্য লিখুন.
আইকনটি নির্বাচন করুন
তারপর একটি সংশ্লিষ্ট আইকন নির্বাচন করুন.
আইকন সেটিংস
এই আইকনের জন্য সেটিংস পরিবর্তন করুন.
- আইকনের রঙ: #ffffff
- ছবি/আইকন বসানো: ডান
শিরোনাম পাঠ্য সেটিংস
পরবর্তী শিরোনাম পাঠ্য সেটিংসে কিছু পরিবর্তন করে চালিয়ে যান।
- শিরোনাম পাঠ্যের আকার: 15px
- টাইটেল লেটার স্পেসিং: -0,5 পিক্সেল
ব্যবধান
এবং একটি শীর্ষ মার্জিন যোগ করুন.
- মার্জিন (শীর্ষ): 120px
ক্লোন ব্লার্ব মডিউল দুবার
একবার আপনি প্রথম ব্লার্ব মডিউলটি সম্পাদনা করার পরে, আপনি এগিয়ে যেতে পারেন এবং মডিউলটিকে দুবার ক্লোন করতে পারেন।
দুটি সদৃশ বিষয়বস্তু এবং আইকন পরিবর্তন করুন
দর্শকদের সাথে বিভিন্ন ধরণের যোগাযোগের তথ্য ভাগ করতে দুটি সদৃশের বিষয়বস্তু এবং আইকন সম্পাদনা করুন৷
দুটি সদৃশ ব্যবধান পরিবর্তন করুন
দুটি ডুপ্লিকেটের শীর্ষ মার্জিনও পরিবর্তন করা উচিত।
- মার্জিন (শীর্ষ): 30px
যোগাযোগ ফর্ম # 3 তৈরি করা
একটি নতুন অধ্যায় যোগ করুন
পেছনের রঙ
তৃতীয় উদাহরণে যাওয়া যাক! নিম্নলিখিত পটভূমির রঙ সহ একটি নতুন বিভাগ যুক্ত করুন:
- পটভূমির রঙ: #3491CE
ব্যবধান
স্পেসিং সেটিংসে কাস্টম প্যাডিং মান যোগ করে চালিয়ে যান।
- প্যাডিং (শীর্ষ এবং নীচে): 200px
লাইন # 1 যোগ করুন
কলাম গঠন
পরবর্তী, নিম্নলিখিত কলাম কাঠামো ব্যবহার করে একটি নতুন সারি যোগ করুন:
একটি পাঠ্য মডিউল যোগ করুন
কন্টেন্ট যোগ করুন
এটি মডিউল যোগ করা শুরু করার সময়! প্রথম কলামে আমাদের যে প্রথম মডিউলটি যোগ করতে হবে তা হল একটি পাঠ্য মডিউল। পছন্দের একটি বিষয়বস্তু লিখুন।
পাঠ্য সেটিংস
এর পরে, পাঠ্য সেটিংস পরিবর্তন করুন।
- পাঠ্য:
- হরফের ওজন: আল্ট্রা বোল্ড
- পাঠ্যের রঙ: rgba(255,255,255,0.24)
- পাঠ্যের আকার: 100px (ডেস্কটপ), 70px (ট্যাবলেট), 36px (ফোন)
- লাইনের উচ্চতা: 1 এম
- অভিযোজন: কেন্দ্র
ব্যবধান
এছাড়াও একটি নেতিবাচক নীচে মার্জিন যোগ করুন.
- মার্জিন (নীচে): -100px
লাইন 2 যোগ করুন
কলাম গঠন
দ্বিতীয় সারিটি আমাদের এই উদাহরণটি সম্পূর্ণ করতে হবে এতে নিম্নলিখিত কলামের কাঠামো রয়েছে:
গ্রেডিয়েন্ট পটভূমি
এখনও কোন মডিউল যোগ না করে, লাইন সেটিংস খুলুন এবং একটি গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড যোগ করুন।
- গ্রেডিয়েন্ট স্টপস:
- 50%: #11CE84
- 50%: #10C77F
- গ্রেডিয়েন্ট টাইপ: লিনিয়ার
- স্টিয়ারিং: 160 ডিগ্রী
আয়তন-অনুযায়ী বাছাই
সাইজিং পরামিতি পরিবর্তন করুন।
- কাস্টম গাটার প্রস্থ ব্যবহার করুন: হ্যাঁ
- নর্দমার প্রস্থ: 1
- কলামের উচ্চতা সমান করুন: হ্যাঁ
ব্যবধান
তারপর কিছু প্যাডিং মান যোগ করুন।
- প্যাডিং: 150px (শীর্ষ), 100px (নীচে)
- প্যাডিং: 50px (বাম এবং ডান)
সীমান্ত
তারপর বর্ডার সেটিংসে যান এবং প্রতিটি কোণে '20px' যোগ করুন। এছাড়াও একটি নীচের সীমানা ব্যবহার করুন।
- গোলাকার কোণ: 20px
- নীচের সীমানা প্রস্থ: 10px
- নীচের সীমানার রঙ: #1ba35a
ছায়া বাক্স
একটি সূক্ষ্ম বাক্স ছায়া যোগ করে লাইন সেটিংস সম্পূর্ণ করুন।
- বক্স শ্যাডো ব্লার শক্তি: 80px
- বক্স শ্যাডো স্প্রেড স্ট্রেন্থ: -24px
- ছায়ার রঙ: rgba(0,0,0,0.3)
কলাম 1 এ যোগাযোগ ফর্ম মডিউল যোগ করুন
নাম এবং ইমেল ক্ষেত্রে "পূর্ণ প্রস্থ তৈরি করুন" বিকল্পটি সক্রিয় করুন
সারির প্রথম কলামে আমাদের যে প্রথম মডিউলটি প্রয়োজন তা হল একটি যোগাযোগ ফর্ম মডিউল। নাম এবং ইমেল ক্ষেত্র খুলুন এবং লেআউট সেটিংস পরিবর্তন করুন।
- সম্পূর্ণ প্রস্থ করুন: হ্যাঁ
উপাদান
তারপর ক্যাপচা নিষ্ক্রিয় করুন।
- বেসিক ক্যাপচা ব্যবহার করুন: না
বোতাম সেটিংস
এবং বোতাম সেটিংস পরিবর্তন করুন।
- বোতামের জন্য কাস্টম শৈলী ব্যবহার করুন: হ্যাঁ
- বোতাম পাঠ্য রঙ: #ffffff
- গ্রেডিয়েন্ট স্টপস:
- 50%: #3AA0E3
- 50%: #3491CE
- গ্রেডিয়েন্ট টাইপ: লিনিয়ার
- গ্রেডিয়েন্ট দিক: 155 ডিগ্রি -
- বোতাম সীমানা প্রস্থ: 0 পিক্সেল
- বোতাম সীমানা ব্যাসার্ধ: 10px
- বক্স শ্যাডো স্প্রেড স্ট্রেন্থ: -2px
- ছায়া রঙ: #0a60af
আরো দেখুন: ডিভি: "ফুল প্রস্থ মেনু" মডিউলের ঝুড়ি এবং অনুসন্ধান আইকনগুলি কীভাবে কাস্টমাইজ করবেন
সীমান্ত
এছাড়াও আমরা প্রতিটি ক্ষেত্রে বৃত্তাকার কোণগুলির '5px' যোগ করি।
কলাম 2 এ একটি পাঠ্য মডিউল যোগ করুন
কন্টেন্ট যোগ করুন
দ্বিতীয় কলামে, প্রথম মডিউলটি আমাদের প্রয়োজন হবে একটি পাঠ্য মডিউল। এগিয়ে যান এবং কিছু বিষয়বস্তু লিখুন.
পেছনের রঙ
তারপর পটভূমির রঙ পরিবর্তন করুন।
- পটভূমি: rgba(255,255,255,0.13)
পাঠ্য সেটিংস
এছাড়াও পাঠ্য সেটিংস সহ সম্পাদনা করুন।
- পাঠ্য:
- হরফের ওজন: হালকা
- পাঠ্যের রঙ: #ffffff
- পাঠ্যের আকার: 15px
- অক্ষর ব্যবধান: -0,5px
ব্যবধান
এবং শ্বাস নিতে মডিউল রুম দিতে কাস্টম প্যাডিং যোগ করুন।
- প্যাডিং (শীর্ষ এবং নীচে): 12px
- প্যাডিং (বাম এবং ডান): 10px
সীমান্ত
আমরা উপরের বাম এবং নীচের বাম কোণে '20px' যোগ করি। এর উপরে, আমরা একটি বাম সীমানা যোগ করব।
- গোলাকার কোণ: 20px (উপরে বাম এবং নীচে বাম)
- বাম সীমানা প্রস্থ: 34px
- বাম সীমানার রঙ: #edf000
দৃষ্টিপাত
এই ডিজাইনটিকে বিভিন্ন স্ক্রীনের আকারের সাথে মেলানোর জন্য, আমরা ফোন এবং ট্যাবলেটে পাঠ্য মডিউলটি নিষ্ক্রিয় করব৷
ক্লোন টেক্সট মডিউল দুবার
একবার আপনি প্রথম টেক্সট মডিউলটি সম্পাদনা করার পরে, এগিয়ে যান এবং মডিউলটিকে দুবার ক্লোন করুন।
দুটি সদৃশ বিষয়বস্তু পরিবর্তন
দুটি নকলের বিষয়বস্তু অন্য কিছুতে পরিবর্তন করুন।
দুটি সদৃশ ব্যবধান পরিবর্তন করুন
এবং প্রতিটি মডিউলের মধ্যে স্থান তৈরি করতে একটি শীর্ষ মার্জিন যোগ করুন।
- মার্জিন (শীর্ষ): 20px
দুটি সদৃশের সীমানা পরিবর্তন করুন
অবশেষে, প্রতিটি ডুপ্লিকেটের বাম সীমানার রঙ পৃথকভাবে পরিবর্তন করুন।
- রঙ 1: #00faff
- রঙ 2: #00f76f
আমাদের নিবন্ধটি দেখুন কিভাবে একটি প্রতিক্রিয়াশীল অ্যাকর্ডিয়ন স্লাইডার তৈরি করবেন
জরিপ
ডেস্কটপ সংস্করণ
এখন যেহেতু আমরা সমস্ত ধাপ অতিক্রম করেছি, চলুন ডেস্কটপে ডিভি কনট্যাক্ট ফর্ম মডিউল ডিজাইনগুলিকে চূড়ান্তভাবে দেখে নেওয়া যাক।
মোবাইল
এবং ছোট পর্দার আকারে ডিভির যোগাযোগ ফর্ম মডিউল ডিজাইন থেকে আপনি যা আশা করতে পারেন তা এখানে:
এখন DIVI ডাউনলোড করুন!!!
উপসংহার
এই পোস্টে, আমরা 3টি দুর্দান্ত ডিভি কন্টাক্ট ফর্ম মডিউল ডিজাইন শেয়ার করেছি যা আপনি সহজেই আপনার তৈরি করা যেকোনো ওয়েবসাইটের জন্য ব্যবহার এবং পরিবর্তন করতে পারবেন।
যোগাযোগের ফর্মগুলি অনেক ওয়েবসাইটের একটি অপরিহার্য অংশ, তাই এটি নিশ্চিত করা গুরুত্বপূর্ণ যে আপনার ডিজাইন আপনার দর্শকদের সাথে যোগাযোগ করতে রাজি করছে।
আমরা আশা করি এই টিউটোরিয়ালটি আপনাকে আপনার পরবর্তী ডিভি প্রকল্পগুলির জন্য অনুপ্রাণিত করবে। আপনার যদি কোন উদ্বেগ বা পরামর্শ থাকে, তাহলে আমাদের খুঁজুন মন্তব্য বিভাগ এটি আলোচনা করার জন্য।
আপনিও পরামর্শ করতে পারেন আমাদের সংস্থান, আপনার যদি ইন্টারনেট সাইট তৈরির প্রকল্পগুলি চালিত করার জন্য আরও উপাদানের প্রয়োজন হয়।
এছাড়াও আমাদের গাইড সঙ্গে পরামর্শ করতে দ্বিধা করবেন না ওয়ার্ডপ্রেস ব্লগ তৈরি বা এক ডিভি: সর্বকালের সেরা ওয়ার্ডপ্রেস থিম.
কিন্তু ইতিমধ্যে, আপনার বিভিন্ন সামাজিক নেটওয়ার্কে এই নিবন্ধটি ভাগ করুন.
...