Искате ли да създадете a Формуляр за връзка лепкав в DIVI?
Вградените лепкави опции на Divi ви позволяват да създавате зашеметяващи визуални ефекти на вашата страница само с няколко кликвания.
Можете да приложите залепващи ефекти към всеки елемент на вашата страница, но в този урок ще се съсредоточим върху това как да създадете Формуляр за връзка залепва върху всяка Divi страница, която създавате.
Прочетете и нашето ръководство за Как да създадете лепкава глобална заглавка в DIVI
За този пример ще добавим изображения и информация за контакт, които ще се превъртат като Формуляр за връзка ще остане на място.
изследване
Ето предварителен преглед на това, което ще проектираме. На мобилни устройства не прилагаме залепващ ефект.
Как да добавите лепкава форма за контакт към вашата Divi страница
Създайте нова страница с предварително дефинирано оформление
Нека започнем с използване на предварително дефинирано оформление от библиотеката Divi. За този пример ще използваме страницата за контакт на Пакет за оформление на продукти за красота .
Ajoutez une nouvelle page à votre site Web et donnez-lui un titre, puis sélectionnez l’option ‘Utiliser Divi Builder’.
Ще използваме предварително направено оформление от библиотеката Divi за този пример, така че изберете „Изберете оформление'.
Намерете и изберете страница за контакти на оформлението "Продукт за красота'.
Изберете 'Изберете оформление“, за да добавите оформлението към вашата страница.
Вече сме готови да продължим нашия урок.
Промяна на оформлението на лепкава форма за контакт
За този урок искаме формулярът за контакт в лявата колона (колона 1) да остане неподвижен, докато потребителят превърта през другите модули със съдържание в дясната колона (колона 2). Това ще ни даде динамичен ефект на превъртане, който ще направи вашата форма за контакт да се откроява. Нека започнем, като променим нашия предварително дефиниран шаблон.
Вижте също: Как да създадете плъзгащо се и натискащо меню в DIVI
Създайте нов раздел
Добавете нова секция към вашата страница.
След това вмъкнете нов ред с две колони. Можете да добавите този раздел навсякъде на страницата, други раздели в крайна сметка ще бъдат премахнати, докато напредваме в този урок.
Отворете настройките на раздела и променете цвета на фона, за да съответства на дизайна на оформлението:
- Фон: #EEE8E2
Добавяне на вашите лепкави модули към колона 1
Добавете модул за формуляр за контакт в колона 1. Ако следвате този урок или вече имате формуляр за контакт на страницата си, можете просто да плъзнете модула 'Формуляр за контактсъществува в колона 1.
Преместете текстовия модул Свържете се с нас в горната част на този раздел. Освен това ще бъде лепкава. Добавете бяла граница в настройките на текста, за да съответства на стила на оформлението:
- Ширина на рамката: 20px
- Цвят на рамката: #FFFFFF
Оригиналното оформление включваше подложка между текста и рамката, но ще пропуснем това, защото отрязва долната част на формуляра за контакт на по-малки екрани.
Добавете своите модули за превъртане в колона 2
В колона 2 добавете всичките си модули за превъртане. За нашия случай преместете двата модула на изображението, информацията за контакт и информацията за местоположението в колона 2. След като преместите модулите си в новия раздел, можете да изтриете всички останали празни секции.
Съвет: ако трябва да преместите няколко модула едновременно, задръжте клавиша 'Май' на клавиатурата и изберете модулите, които искате да преместите. Използвайте функцията за преместване на модули, за да преместите всичките си модули едновременно.
Голямото изместено изображение на оформлението, което сме избрали, може да причини проблеми с хоризонталното превъртане. Така че нека променим някои настройки, за да разрешим този проблем.
Прочетете още: Как да създадете глобална заглавка с формуляр за влизане в DIVI
Отворете настройките на секцията. Под напреднал, отидете на видимост, puis mettez à jour les paramètres de débordement horizontal et vertical :
- Хоризонтално преливане: скрито
- Вертикално преливане: скрито
Сега страницата ви трябва да изглежда така, с лепкаво съдържание в колона 1 и превъртащо се съдържание в колона 2.
Готови сме да предприемем последната стъпка: да направим формата за контакт лепкава.
Направете формата за контакт лепкава
С нашето оформление на място можем да активираме лепкави настройки за нашата форма за контакт. Изберете 'Настройки на реда', след което изберете настройките на колона 1.
В раздела Разширени навигирайте до „Ефекти на превъртане“. Това е мястото, където ще зададем лепкавите параметри.
- Залепваща позиция: Придържайте се към върха
- Горно отместване на стик: 15px
- Долна лепкава граница: линия
И това е всичко! Вече добавихте лепкави настройки към колона 1, правейки формуляра за контакт и заглавието лепкави, докато превъртате надолу по страницата. Трябва да видите съдържанието на превъртане на колона 2 до формата за контакт.
Краен резултат
Сега нека да разгледаме нашата лепкава форма за контакт в действие.
Изтеглете DIVI сега!!!
Заключение
Voila ! C’est tout pour cet article. Les paramètres sticky de Divi sont un moyen simple d’améliorer l’apparence de votre formulaire de contact – ou de tout autre élément de votre page. Vous pouvez appliquer les paramètres sticky pour n’importe quelle section, ligne ou module, rendant à peu près tout sur votre site Web sticky.
Ако искате да научите повече за това какво можете да правите със залепващите функции на Divi, вижте нашите уроци. Можете например да се консултирате с нашия урок за Как да добавите формуляр за контакт към глобална заглавка.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...