Без поле за търсене навигацията на вашия сайт ще пострада. Можете да имате най-стабилното изживяване при сърфиране в Интернет, но ако вашите потребители не могат да търсят точно това, което търсят, рискувате (и вероятно ще загубите) бизнес. Този урок ще ви преведе през добавянето на поле за търсене към вторичното меню на Divi, така че независимо от всичко вашите потребители винаги ще бъдат само на няколко кликвания от това, от което се нуждаят.

Преглед на полето за търсене на Divi

бюро

подвижен

Изтеглете и / или променете глобалната заглавка

За тази статия ще използваме безплатния горен/долен колонтитул, който идва с нашия пакет за оформление за доставка на хранителни стоки. Можете просто да изтеглите .Zip *: френски архивирайте и извлечете необходимото .json файл на вашия компютър.

След това отидете на таблото за управление на WordPress и отидете до Divi - Генератор на теми. От там трябва да кликнете върху икона със стрелки нагоре и надолу за да отворите опциите за преносимост.

В новия модал кликнете върху внос раздел и намерете .json файл, който сте изтеглили. Когато сте готови, изберете Импортиране на строителни модели от Тема на Divi за да стартирате изтеглянето.

В този момент сте готови да влезете в Глобална заглавка част от Шаблон за уебсайт по подразбиране. Импортиране на .json файлът трябваше автоматично да приложи безплатната програма като обща заглавка на сайта.

Добавете поле за търсене към вторичната лента с менюта

Използвайки Divi Visual Builder, трябва да видите нещо подобно на това като Global Header.

Първото нещо, което искаме да направим, е да създадем място за полето за търсене. Искаме да сме сигурни, че полето за търсене е лесно достъпно за всички посетители, затова ще го добавим към второстепенното меню (над Начало / Контакт линия).

Като начало ще добавим полето за търсене с помощта на Модул за търсене Divi в третата колона на първия ред.

Заместителният текст е важен за полетата за търсене, така че когато модулът ви е на място, отидете на Параметри и задайте своя Резервирана площ текст към нещо, което напомня на потребителя какво може да търси. поставяме Намерете предмети! като заместител, така че потребителят да знае, че това е, което може да търси, тъй като използваме пакета с оформление за доставка на хранителни стоки.

Полето за търсене в третата колона не е добре. Така че искаме да влезем в Изследователски модул настройки и отидете на Дизайн език. Намерете го Трансформатор опции, след това отидете на превеждам раздел (вторият). След това можете да плъзнете модула за търсене на място и Divi ще се справи с всички CSS и интервали за него.

Ние също използваме % за тази стойност, така че да остане относителна независимо от прозореца за изглед на работния плот. Използване пиксела може да изкриви някои различни резолюции.

Divi Transformer Translate опциите също трябва да се коригират за мобилни устройства. Ако не го направите, това е същото. Така че не забравяйте да отидете на Реактивност настройки и задайте местоположението на модула за търсене във вторичните опции на менюто. Току-що коригирахме вертикалното местоположение на мобилното устройство, защото поставянето му в третата колона на реда автоматично го показва в долната част на елементите на реда.

Стилизиране на модула за търсене Divi

Въпреки че нямате много опции за стилизиране на поле за търсене, имате няколко. А именно цвета на текста и самото поле, както когато е неактивно, така и когато потребителят е кликнал върху него. (И разстояние и оразмеряване и други стандартни опции за дизайн на Divi, разбира се.)

За да намерите цветовите опции, отидете на Шампион меню в Дизайн език. Веднъж разгънати, имате възможност да промените цвета на текста на контейнера, цвета на фона на полето и цвета на текста на полето (въведен от потребителя текст, т.е. да речем). В допълнение на да се концентрирам вариации са, когато потребителят конкретно взаимодейства с полето за търсене.

Когато това е оформено по ваш вкус, щракнете върху бутона Запазване.

Проверете настройките за видимост

Някои от нашите безплатни пакети за оформление и заглавки се предлагат с различни опции за показване за настолни и мобилни устройства. Ако видите затъмнени/сиви модули във визуалния конструктор, това означава, че модулът е деактивиран на някои устройства.

За заглавката „Доставка на хранителни стоки“ последните две колони са деактивирани на мобилно устройство. Искаме да влезем в Настройки на линията и щракнете върху настройките за колоните, които искате да показвате на мобилно устройство. В случая е третото.

След това отидете на прогрес език и навигирайте до видимост опция. Тук се уверете, че всички опции под деактивирате sommes непроверен за колоната, съдържаща вашето поле за търсене. Щракнете върху бутона Запазване (зелен кърлеж), а модулите трябва да се появяват в цвят и повече да не се обезцветяват.

След като се уверите, че всичко е видимо, сте готови да поставите това нещо онлайн!

Запазете работата си

Не забравяйте да кликнете върху зелен бутон за запазване в долния десен ъгъл на екрана.

Вече сте готови да затворите визуалния конструктор, като използвате X в горния десен ъгъл. На следващия екран ще искате да се уверите, че Divi Theme Builder е запазил всичките ви опции. Ако той каже Запазване на промените, щракнете върху бутона. Ако той каже Всички промени са запазени, тогава вашето поле за търсене вече е активно във второто ви меню Divi.

Крайни резултати

Остава само да се възхищавате на работата си на вашия сайт!

бюро

подвижен

Заключение с полето за търсене Divi

Полетата за търсене са основна част от доброто потребителско изживяване на вашия сайт. Ако искате да предоставите възможно най-доброто обслужване на своите посетители, гарантирането, че съдържанието ви може да се търси, трябва да бъде един от основните ви приоритети. Надявам се, че можете да използвате този бърз и лесен метод и скоро да го приложите към вашия Divi сайт!