Divi: چگونه یک فرم تماس چسبنده ایجاد کنیم

آیا می خواهید یک ایجاد کنید فرم تماس چسبنده در DIVI؟

گزینه های چسبنده داخلی Divi به شما این امکان را می دهد که تنها با چند کلیک جلوه های بصری خیره کننده ای را در صفحه خود ایجاد کنید. 

شما می توانید جلوه های چسبنده را روی هر عنصری در صفحه خود اعمال کنید، اما در این آموزش ما بر روی نحوه ایجاد a تمرکز خواهیم کرد فرم تماس در هر صفحه Divi که ایجاد می کنید، چسبناک است.

راهنمای ما را نیز در ادامه بخوانید چگونه یک هدر سراسری چسبناک در DIVI ایجاد کنیم

برای این مثال، تصاویر و اطلاعات تماس را اضافه می کنیم که به عنوان اسکرول می شوند فرم تماس در جای خود باقی خواهد ماند.

بررسی

در اینجا پیش نمایشی از آنچه ما طراحی خواهیم کرد است. در تلفن همراه، ما جلوه چسبنده اعمال نمی کنیم.

چگونه یک فرم تماس چسبنده را به صفحه Divi خود اضافه کنید

یک صفحه جدید با یک طرح از پیش تعریف شده ایجاد کنید

بیایید با استفاده از یک طرح از پیش تعریف شده از کتابخانه Divi شروع کنیم. برای این مثال، ما از صفحه تماس با بسته چیدمان محصولات زیبایی .

یک صفحه جدید به صفحه خود اضافه کنید وب سایت و به آن عنوان بدهید، سپس گزینه "Use Divi Builder" را انتخاب کنید.

ما از یک طرح از پیش ساخته شده از کتابخانه Divi برای این مثال استفاده خواهیم کرد، بنابراین ' را انتخاب کنیدطرح بندی را انتخاب کنید".

را پیدا کرده و انتخاب کنید صفحه تماس از طرح "محصول زیبایی".

انتخاب کنید 'طرح بندی را انتخاب کنیدبرای اضافه کردن طرح به صفحه خود.

ما اکنون آماده هستیم تا آموزش خود را ادامه دهیم.

تغییر طرح فرم تماس چسبنده

برای این آموزش، می‌خواهیم فرم تماس در ستون سمت چپ (ستون 1) ثابت بماند در حالی که کاربر از طریق سایر ماژول‌های محتوا در ستون سمت راست (ستون 2) حرکت می‌کند. این به ما یک افکت اسکرول پویا می دهد که فرم تماس شما را متمایز می کند. بیایید با اصلاح الگوی از پیش تعریف شده خود شروع کنیم.

همچنین مشاهده کنید: نحوه ایجاد یک منوی کشویی و فشاری در DIVI

یک بخش جدید ایجاد کنید

یک بخش جدید به صفحه خود اضافه کنید. 

سپس یک ردیف جدید با دو ستون وارد کنید. شما می توانید این بخش را در هر نقطه از صفحه اضافه کنید، با پیشرفت ما در این آموزش، بخش های دیگر در نهایت حذف خواهند شد.

تنظیمات بخش را باز کنید و رنگ پس زمینه را برای مطابقت با طرح طرح تغییر دهید:

• پس زمینه: #EEE8E2

اضافه کردن ماژول های چسبنده خود به ستون 1

یک ماژول فرم تماس را در ستون 1 اضافه کنید. اگر این آموزش را دنبال می کنید یا از قبل یک فرم تماس در صفحه خود دارید، می توانید به سادگی ماژول را بکشید.فرم ارتباط با ماموجود در ستون 1.

ماژول Text را حرکت دهید Contactez-عقل در بالای این بخش همچنین چسبناک خواهد بود. یک حاشیه سفید در تنظیمات متن اضافه کنید تا با سبک چیدمان مطابقت داشته باشد:

1. عرض حاشیه: 20 پیکسل
2. رنگ حاشیه: #FFFFFF

چیدمان اصلی شامل padding بین متن و حاشیه بود، اما ما از آن صرف نظر می کنیم زیرا پایین فرم تماس را در صفحه های کوچکتر قطع می کند.

ماژول های اسکرول خود را در ستون 2 اضافه کنید

در ستون 2، تمام ماژول های اسکرول خود را اضافه کنید. برای مورد ما، دو ماژول تصویر، اطلاعات تماس و اطلاعات موقعیت مکانی را به ستون 2 منتقل کنید. پس از انتقال ماژول های خود به بخش جدید، می توانید هر بخش خالی باقی مانده را حذف کنید.

نکته: اگر نیاز دارید چندین ماژول را همزمان جابجا کنید، کلید ' را نگه داریدمهروی صفحه کلید و ماژول هایی را که می خواهید جابجا کنید انتخاب کنید. از تابع حرکت ماژول برای جابجایی همه ماژول ها به طور همزمان استفاده کنید.

تصویر افست بزرگ طرح‌بندی که انتخاب کرده‌ایم می‌تواند باعث مشکلات اسکرول افقی شود. پس بیایید برخی تنظیمات را برای حل این مشکل تغییر دهیم.

دفعات بازدید: نحوه ایجاد هدر سراسری با فرم ورود در DIVI

تنظیمات بخش را باز کنید. زیر پیشرفته، به Visibility بروید، سپس تنظیمات سرریز افقی و عمودی را به روز کنید:

• سرریز افقی: پنهان
• سرریز عمودی: پنهان

اکنون صفحه شما باید به این شکل باشد، با محتوای چسبنده شما در ستون 1 و محتوای پیمایشی شما در ستون 2.

ما آماده ایم تا مرحله نهایی را برداریم: چسباندن فرم تماس.

فرم تماس را چسبناک کنید

با طرح‌بندی خود، می‌توانیم تنظیمات چسبنده را برای فرم تماس خود فعال کنیم. انتخاب کنید 'تنظیمات ردیف'، سپس تنظیمات ستون 1 را انتخاب کنید.

در زیر تب Advanced، به «Scroll Effects» بروید. اینجاست که ما پارامترهای چسبنده را تنظیم می کنیم.

• موقعیت چسبنده: به بالا بچسبید
• Stick Top Offset: 15px
• حد چسبنده پایین: خط

و بس! اکنون تنظیمات چسبنده را به ستون 1 اضافه کرده‌اید، و با اسکرول کردن صفحه به پایین، فرم تماس و عنوان خود را چسبناک می‌کند. شما باید محتویات ستون 2 را در کنار فرم تماس ببینید.

نتیجه نهایی

حالا بیایید نگاهی به فرم تماس چسبنده خود در عمل بیاندازیم.

دانلود DIVI در حال حاضر!!!

نتیجه

بنابراین ! برای این مقاله تمام شد. تنظیمات چسبنده Divi یک راه آسان برای بهبود ظاهر فرم تماس شما - یا هر عنصر دیگری از صفحه شما است. شما می توانید تنظیمات چسبنده را برای هر بخش، ردیف یا ماژول اعمال کنید و تقریباً هر چیزی را در خود رندر کنید وب سایت چسبناک 

اگر می‌خواهید درباره کارهایی که می‌توانید با ویژگی‌های چسبنده Divi انجام دهید بیشتر بدانید، آموزش‌های ما را بررسی کنید. به عنوان مثال می توانید با آموزش ما در این زمینه مشورت کنید نحوه افزودن فرم تماس به سربرگ جهانی.

همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.

...