هر وب سایتی به بخش تماس نیاز دارد، اما این بدان معنا نیست که شما باید به دنبال طراحی استاندارد باشید. با افکت‌های اسکرول Divi، می‌توانید یک بخش تماس شناور ایجاد کنید که برجسته باشد. تعامل کاربر خود را با طرح بندی بخش تماس پیمایش عمودی که بازدیدکنندگان را به تعامل با شما دعوت می کند، تقویت کنید. فرم تماس. در این مقاله، نحوه ایجاد یک بخش تماس شناور با عرض کامل را به شما نشان خواهیم داد که می توانید آن را به هر صفحه اضافه کنید. حتی می‌توانید آن را به بالای یک فوتر در سراسر سایت با Divi Theme Builder اضافه کنید.
در زیر یک فایل بارگیری رایگان با طرح JSON برای بارگذاری در کتابخانه Divi خود پیدا خواهید کرد. ما همچنین یک الگوی PSD برای کمک به شما در بازسازی پس زمینه نقشه و همچنین یک پین نقشه SVG برای شما فراهم کرده ایم تا بتوانید آن را با رنگ های خود شخصی سازی کنید.
یک ساختار عنصر ایجاد کنید
در این طراحی، ما از یک تصویر پس‌زمینه استفاده می‌کنیم که نشان‌دهنده مکانی است که می‌خواهید در نقشه گوگل نمایش دهید. می توانید این کار را با فتوشاپ یا هر ویرایشگر تصویر دیگری انجام دهید.
یک بخش جدید اضافه کنید
اکنون زمان شروع ایجاد بخش تماس شناور با Divi Builder است! اولین کاری که ما انجام خواهیم داد باز کردن یک صفحه جدید یا موجود و اضافه کردن یک بخش جدید است.
در برگه محتوا ، پس زمینه نقشه ای را که در فتوشاپ ایجاد کرده اید اضافه کنید.
- تصویر پس زمینه: نقشه اصلاح شده شما
فاصله
بعد ، تنظیمات فاصله بخش را در برگه طراحی سفارشی کنید.
- حاشیه بالا و پایین: 50vh
- بالشتک پایین: 0vw
دید
سپس سرریزها را روی قابل مشاهده تنظیم کنید.
- سرریز افقی و عمودی: قابل مشاهده است
موقعیت
در آخر ، شاخص Z بخش را روی 10 قرار دهید.
- فهرست Z: 10
یک خط جدید اضافه کنید
ساختار ستون
اکنون زمان افزودن چند مورد است. ابتدا یک ردیف با 2 ستون اضافه کنید.
اندازه
پارامترهای خط را باز کرده و اندازه را به شرح زیر تنظیم کنید.
- عرض
- دفتر: 90٪
- تبلت و تلفن: 80٪
- حداکثر عرض: 90٪
دید
روی زبانه Advanced کلیک کنید و سپس سرریزها را تنظیم کنید.
- سرریز افقی و عمودی: قابل مشاهده است
موقعیت
تنظیمات ردیف را با تغییر تنظیمات موقعیت انجام دهید.
- موقعیت: نسبی
- مبدا افست: بالا سمت چپ
- افست عمودی
- دسک تاپ: -8vw
ستون 1 تنظیمات
زمینه
قبل از اضافه کردن ماژول ها ، باید ستون های فردی را سبک کنیم. یک رنگ پس زمینه را به ستون 1 اضافه کنید.
- رنگ جامد: # 25274d
فاصله
تنظیمات فاصله بعدی را تنظیم کنید.
- بالشتک بالا و پایین
- دسک تاپ و تبلت: 7vw
- بالشتک چپ و راست
- دسک تاپ: 3vw
- تبلت و تلفن: 6vw
مرز
سپس ، برخی از گوشه های گرد را به تنظیمات مرز اضافه کنید.
- گوشه های گرد: 10px هر چهار گوشه
جلوه های پیمایش کنید
نکته آخر: در تنظیمات جلوه های پیمایش از برخی حرکت عمودی استفاده کنید. این به ما کمک می کند تا یک اثر شناور ایجاد کنیم.
- اثرات تبدیل پیمایش: حرکت عمودی
- مجموعه حرکت عمودی / رومیزی
- شروع افست: 4
- افست میانی: 0 (با 50٪)
- خاتمه افست: -4
- حرکت عمودی / رایانه لوحی و تلفن
- شروع افست: 4
- افست میانی: 0 (با 40٪ و 60٪)
- پایان افست: -3
- اثر حرکت ماشه: وسط عنصر
تنظیمات ستون 2
موقعیت
حالا بیایید به پارامترهای ستون دوم برویم. تنظیمات موقعیت را بر این اساس انجام دهید.
- موقعیت: نسبی
- منشاء افست: بالا سمت چپ
- جبران عمودی
- دفتر: 25vw
جلوه های پیمایش کنید
ما همچنین یک حرکت عمودی به این ستون اضافه می کنیم.
- جلوه های تغییر شکل پیمایش: حرکت عمودی
- حرکت عمودی / دسک تاپ را تعریف کنید
- شروع افست: 2
- متوسط افست: 0 (با 50٪)
- پایان افست: -2
- حرکت / تبلت و تلفن عمودی را تعریف کنید
- شروع افست: 0
- متوسط افست: 0 (با 50٪)
- پایان افست: -2
- راه انداز اثر حرکت: عنصر بالا
ماژول متن را به ستون 1 اضافه کنید
محتویات
وقت آن است که ماژول ها را اضافه کنید ، با شروع یک ماژول متن در ستون 1. هر محتوای H2 که می خواهید اضافه کنید.
متن عنوان
به زبانه طراحی بروید و متن H2 را به صورت زیر سبک دهید.
- سطح عنوان: H2
- قلم: Palanquin Dark
- وزن قلم: جسورانه
- سبک فونت: TT
- رنگ: زرد # ffd868
- اندازه
- دفتر: 5vw
- قرص: 10vw
- تلفن: 12vw
- فاصله نامه: 4px
ماژول فرم تماس را به ستون شماره 1 اضافه کنید
محتویات
زیر ماژول متن، یک را اضافه کنید فرم تماس. اینها فیلدهایی هستند که ما استفاده می کنیم:
- نام
- پست الکترونیک (ایمیل)
- ماده
- پیام
حفاظت از هرزنامه
قبل از استایل دادن به ماژول فرم تماس. محافظت از هرزنامه را فعال کنید و حساب ReCaptcha خود را متصل کنید.
- از یک سرویس محافظت در برابر هرزنامه استفاده کنید: بله
- ارائه دهنده خدمات: ReCaptcha
- یک حساب کاربری انتخاب کنید
زمینه ها
به زبانه طراحی بروید و زمینه ها را به صورت زیر استایل دهید.
- رنگ زمینه: آبی تیره # 25274d
- رنگ متن: خاکستری روشن # d1d1d1
- تمرکز رنگ زمینه: آبی تیره # 25274d
- رنگ متن تمرکز: خاکستری روشن # d1d1d1
- قلم: پالانوین
- سبک: TT
- اندازه متن
- دفتر: 0.9vw
- قرص: 2vw
- تلفن: 3vw
- فاصله نامه: 1px
دکمه
سپس دکمه را سبک کنید.
- سبک های سفارشی: بله
- اندازه متن: 20px
- رنگ متن: آبی تیره # 25274d
- رنگ زمینه: زرد # ffd868
- شعاع مرزی: 7px
- رنگ نماد: آبی تیره # 25274d
- حاشیه بالایی: 5px
اندازه
سپس پارامترهای اندازه را اصلاح می کنیم.
- عرض: 100٪
- حداکثر عرض: 100٪
فاصله
ما همچنین بالشتک بالایی را اضافه خواهیم کرد.
- بالشتک بالایی: 4vw
مرز
با شخصی سازی پارامترهای مرزی ، پارامترهای ماژول را تکمیل کنید.
- ورودی با گوشه های گرد: 6 پیکسل در چهار گوشه
- مدخل سبک های مرزی: هر چهار طرف
- عرض مرز ورودی: 2px
- رنگ مرز: زرد # ffd868
ماژول ردیابی رسانه های اجتماعی را به ستون 2 اضافه کنید
محتویات
به ستون 2 بروید و یک ماژول رسانه اجتماعی اضافه کنید. از تمام شبکه های اجتماعی مورد نیاز خود استفاده کنید.
- فیس بوک
- توییتر
- لینکدین
پیوند
قبل از یک ظاهر طراحی ، پیوندهایی را به شبکه های مربوطه اضافه کنید.
متن مقاله
اکنون اولین شبکه اجتماعی را باز کرده و رنگ پس زمینه را تغییر دهید.
- رنگ: آبی تیره # 25274d
نماد عنصر
در برگه طراحی همان عنصر ، تنظیمات نماد را به صورت زیر تغییر دهید.
- رنگ: زرد # ffd868
- اندازه قلم نماد
- میز و تبلت: 31 px
- تلفن: 26 px
فاصله مورد
سپس یک حاشیه کوچک اضافه کنید تا آیکون ها از یکدیگر جدا شوند.
- حاشیه سمت راست: 1vw
سبک های مورد را کپی و جای گذاری کنید
برای سبک دهی به شبکه های اجتماعی باقی مانده ، به پنجره محتوای اصلی برگردید و سبک های عنصر را از نماد اول کپی کنید. سپس سبک های عنصر را در شبکه های اجتماعی باقی مانده جایگذاری کنید.
هم ترازی
به برگه اصلی طراحی بروید و مطمئن شوید که ماژول در تراز قرار گرفته است.
- ترازبندی ماژول: سمت چپ
اندازه
سپس اندازه ماژول را تنظیم کنید.
- عرض: 100٪
فاصله
همچنین همه پر کردن پیش فرض را پاک کنید.
- بالشتک بالایی ، پایین ، چپ و راست: 0vw
مرز
در آخر ، گوشه های گرد شده را در تنظیمات حاشیه اضافه کنید. با این کار مرزهای همه آیکون ها به یکباره تنظیم می شوند.
- گوشه های گرد
- بالا و چپ: 7 پیکسل
- پایین سمت چپ و راست: 0px
ماژول متن را به ستون 2 اضافه کنید
محتویات
در زیر ماژول رسانه های اجتماعی ، یک ماژول متن دیگر اضافه کنید. محتوای دلخواه خود را اضافه کنید. ما دو آدرس ، یک شماره تلفن و یک ایمیل اضافه کردیم. روی عنوان هر مورد در کل حروف بزرگ از حروف بزرگ استفاده کنید.
- دفتر مرکزی: 1587 سوخومویت سو 21 ، بانکوک ، تایلند.
- نقطه فروش : Emporium Mall ، طبقه 2
- تلفن: (321) 564 2398
- پست الکترونیک : [ایمیل محافظت شده]
زمینه
رنگ پس زمینه ماژول را تغییر دهید.
- رنگ: آبی تیره # 25274d
متن
به برگه طراحی بروید و متن را سبک کنید.
- قلم: پالانوین
- رنگ: زرد # ffd868
- اندازه: 18 عدد
فاصله
مقادیر فاصله سفارشی را نیز اضافه کنید.
- حاشیه بالا
- دفتر: -60px
- تبلت و تلفن: -50 پیکسل
- بالشتک بالایی ، پایین ، چپ و راست
- دفتر: 3vw
- قرص: 6vw
- تلفن: 8vw
مرز
و ماژول را با اضافه کردن گوشه های گرد در تنظیمات حاشیه کامل کنید. خودشه!
- گوشه های گرد: 10 پیکسل در بالا سمت راست ، پایین سمت راست و پایین سمت راست.
بررسی
اکنون که بازآفرینی قسمت مخاطبین شناور به پایان رسید ، در اندازه های مختلف صفحه نمایش نتیجه نهایی را بررسی کنید.
منابع اضافی
این است ressources ممکن است مکمل مطالبی باشد که اخیراً خوانده اید. آنها می توانند علاوه بر این یا توسط کسانی که ندارند استفاده شوند تم دیوی.
- چگونه برای اضافه کردن یک فرم تماس پنجره بر روی وردپرس
- نحوه افزودن فرم کشویی بر روی سرصفحه جهانی در Divi
- 5 افزونه برای ایجاد فرم های تماس
برای پایان دادن به
استفاده از جلوه های جدید پیمایش Divi ، هر طرح استاندارد را به یک طراحی زیبا تبدیل می کند. با ایجاد پس زمینه خود ، کنترل بیشتری بر ظاهر طراحی به پایان رسیده دارید. اگر س anyال یا پیشنهادی دارید ، در بخش نظرات زیر نظر دهید!
