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

Как да добавите модул за търсене към страницата си

Преди да можете да добавите модул за търсене към вашата страница, първо трябва да влезете в Divi Builder. Веднъж Тема на Divi инсталиран на уебсайта ви, ще забележите бутон Използвайте Divi Builder над редактора на публикации, когато създавате нова страница. Щракнете върху този бутон, за да активирате Divi Builder и да получите достъп до всички модули Divi Builder. След това кликнете върху бутона Използвайте Visual Builder за да стартирате генератора във визуален режим. Можете също да щракнете върху бутона Използвайте Visual Builder когато разглеждате уебсайта си на преден план, ако сте свързани с таблото за управление на WordPress.

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

Намерете модула за търсене в списъка с модули и кликнете върху него, за да го добавите към вашата страница. Списъкът с модули може да се търси, което означава, че можете също да въведете думата „търсене“ и след това да натиснете Enter за търсене и автоматично да добавите модула за търсене! След като модулът бъде добавен, ще бъдете посрещнати от списъка с опции на модула. Тези опции са разделени на три основни групи: Съдържание , Концепция et напреднал .

Пример за употреба: Добавяне на модул за персонализирано търсене към страница с блогове с пълна ширина

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

Тази страница има заглавка с пълна ширина отгоре с модула за търсене директно отдолу. Под модула за търсене се намира блог модул, използващ мрежата.

Използвайки Visual Builder, добавете нов стандартен раздел към страницата на блога с ред с пълна ширина (1 колона). След това вмъкнете модула за търсене в реда.

Актуализирайте настройките на модула за търсене, както следва:

Опции за съдържанието

Запазен текст: Потърсете в нашия блог ...
Скриване на бутона: YES

Опции за дизайн

Цвят на фона на полето за въвеждане: # f8f8f8
Цвят на заместител: # 888888
Размер на входящия шрифт: 16px
Цвят на въведения текст: # 888888
Височина на входната линия: 1em
Персонализирани подплънки: 20px отгоре, 20px отдолу

Запазване на настройките

Сега се върнете, за да промените ширината на реда, съдържащ модула за търсене. В раздела Проектиране на настройките на линията дайте на линията персонализирана ширина от 300 пиксела. Това ще запази модула за търсене компактен и фокусиран върху страницата.

Това е!

Търсете опции за съдържанието

В раздела Съдържание ще намерите всички елементи на съдържанието на модула, като текст, изображения и икони. Всичко, което контролира какво се появява във вашия модул, винаги ще се намира в този раздел.

Текст на заместител

Въведете текста, който искате да използвате като заместител за полето за търсене.

Скрий бутона

Ако активирате тази опция, бутонът за търсене ще бъде скрит.

Изключете страниците

Ако активирате тази опция, страниците ще бъдат изключени от резултатите от търсенето.

Изключете елементи

Активирането на тази опция ще изключи съобщенията от резултатите от търсенето.

Изключете категориите

Изберете категориите, които искате да изключите от резултатите от търсенето.

Администраторски етикет

Това ще промени етикета на модула в конструктора за лесно идентифициране. Когато използвате изгледа WireFrame в Visual Builder, тези етикети се появяват в модулния блок на интерфейса Divi Builder.

Опции за дизайн за търсене

В раздела Дизайн ще намерите всички опции за оформяне на модула, като например шрифтове, цветове, оразмеряване и разстояние. Това е разделът, който ще използвате, за да промените външния вид на вашия модул. Всеки модул Divi има дълъг списък с дизайнерски настройки, които можете да използвате, за да промените каквото и да било.

Цвят на фона на полето за въвеждане

Тук можете да промените цвета на фона на лентата за търсене.

Заместник цвят

Преди да се използва полето за търсене, текстът на заместител съществува вътре в полето. Ако сте коригирали цвета на фона на полето, можете също така да коригирате цвета на заместващия текст, за да сте сигурни, че е четим.

Цвят на текста

Тук можете да изберете стойността на вашия текст. Ако работите на тъмен фон, текстът ви трябва да е включен. Ако работите със светъл фон, текстът ви трябва да е тъмен.

Ориентация на текста

Това контролира как текстът ви е подравнен в модула.

Входна полиция

Можете да промените шрифта на въведения текст, като изберете желания шрифт от падащото меню. Divi се предлага с десетки страхотни шрифтове, задвижвани от Google Fonts. По подразбиране Divi използва шрифта Open Sans за целия текст на вашата страница. Можете също така да персонализирате стила на вашия текст, като използвате удебелен шрифт, курсив, главни букви и опции за подчертаване.

Въведете размер на шрифта

Тук можете да регулирате размера на въведения текст. Можете да плъзнете плъзгача за диапазон, за да увеличите или намалите размера на текста си или директно да въведете желаната стойност на размера на текста в полето за въвеждане вдясно от плъзгача. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от стойността на вашия размер, за да промените типа му.

Цвят на въведения текст

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

Разстояние между буквите

Разстоянието между буквите засяга пространството между всяка буква. Ако искате да увеличите интервала между всяка буква в текста за въвеждане, използвайте плъзгача за диапазон, за да регулирате интервала или въведете желания размер на разстоянието в полето за въвеждане вдясно от плъзгача. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от стойността на вашия размер, за да промените типа му.

Височина на линията

Височината на реда влияе върху пространството между всеки ред на въведения текст. Ако искате да увеличите интервала между всеки ред, използвайте плъзгача за диапазон, за да регулирате интервала или да въведете желания размер на разстоянието в полето. запис вдясно от курсора. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от стойността на вашия размер, за да промените типа му.

Бутон и цвят на рамката

Това ще промени цвета на фона и контурите на бутона за търсене.

Бутон на шрифта

Можете да промените шрифта на текста на вашия бутон, като изберете желания шрифт от падащото меню. Divi се предлага с десетки страхотни шрифтове, задвижвани от Google Fonts. По подразбиране Divi използва шрифта Open Sans за целия текст на вашата страница. Можете също да персонализирате стила на вашия текст, като използвате удебелен шрифт, курсив, главни букви и опции за подчертаване.

Размер на шрифта на бутоните

Тук можете да регулирате размера на текста на вашия бутон. Можете да плъзнете плъзгача за диапазон, за да увеличите или намалите размера на текста си, или директно да въведете стойността на желания размер на текста в полето за въвеждане вдясно от плъзгача. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от стойността на вашия размер, за да промените типа му.

Цвят на текста на бутоните

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

Разстояние между буквите на бутона

Разстоянието между буквите засяга пространството между всяка буква. Ако искате да увеличите интервала между всяка буква в текста на вашия бутон, използвайте плъзгача за диапазон, за да регулирате интервала или въведете желания размер на разстоянието в полето за въвеждане вдясно от плъзгача. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете „px“ или „em“ в зависимост от стойността на вашия размер, за да промените типа му.

Височина на линията на бутона

Височината на реда влияе на интервала между всеки ред на текста на вашия бутон. Ако искате да увеличите интервала между всеки ред, използвайте плъзгача за диапазон, за да коригирате интервала или въведете желания размер на разстоянието в полето за въвеждане разположен вдясно от курсора. Полетата за въвеждане поддържат различни мерни единици, което означава, че можете да въведете "px" или "em" в зависимост от стойността на вашия размер, за да промените типа му.

Максимална ширина

По подразбиране максималната ширина на лентата за търсене е зададена на 100%. Това означава, че лентата за търсене ще се показва в естествената си ширина, освен ако ширината на лентата за търсене не надвишава ширината на родителската колона, като в този случай лентата за търсене ще бъде ограничена до 100% от ширината на колоната. Ако искате допълнително да ограничите максималната ширина на лентата за търсене, можете да го направите, като въведете желаната стойност за максимална ширина тук. Например, стойност от 50% ще ограничи ширината на лентата за търсене до 50% от ширината на родителската колона.

Персонализиран марж

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

Персонализирани подплънки

Попълването е пространството, добавено във вашия модул, между ръба на модула и неговите вътрешни елементи. Можете да добавите персонализирани стойности за подплата към която и да е от четирите страни на модула. За да премахнете персонализирания марж, премахнете добавената стойност от полето за въвеждане. По подразбиране тези стойности се измерват в пиксели, но можете да въведете персонализирани мерни единици във входните полета.

Разширени опции на изследователския модул

В раздела за напреднали ще намерите опции, които по-опитните уеб дизайнери биха могли да намерят за полезни, като персонализирани CSS и HTML атрибути. Тук можете да приложите персонализиран CSS към всеки от многото елементи на модула. Можете също да приложите персонализирани CSS класове и идентификатори към модула, които могат да се използват за персонализиране на модула във файла style.css на вашата детска тема.

CSS ID

Въведете незадължителен CSS ID, който да използвате за този модул. Идентификаторът може да се използва за създаване на персонализиран CSS стил или за връзка към определени раздели на вашата страница.

CSS клас

Въведете незадължителните CSS класове, които да използвате за този модул. CSS клас може да се използва за създаване на персонализиран CSS стил. Можете да добавите няколко класа, разделени с интервал. Тези класове могат да се използват във вашата дъщерна тема Divi или в персонализиран CSS лист със стилове, който добавяте към вашата страница или към вашия уеб сайт, като използвате опциите за тема Divi или настройките на страницата Divi Builder.

Персонализиран CSS

Персонализиран CSS може също да се приложи към модула и всеки от вътрешните елементи на модула. В раздела Персонализиран CSS ще намерите текстово поле, където можете да добавяте персонализирани CSS таблици със стилове директно към всеки елемент. CSS записите в тези настройки вече са обвити в стилови тагове. Така че просто въведете правилата на CSS, разделени с точка и запетая.

видимост

Тази опция ви позволява да контролирате устройствата, на които се показва вашият модул. Можете да изберете да деактивирате модула си поотделно на таблети, смартфони или настолни компютри. Това е полезно, ако искате да използвате различни модове на различни устройства или ако искате да опростите мобилния дизайн, като премахнете определени елементи от страницата.

[vc_row center_row= »yes »][vc_column width= »1/2″][vcex_button target= »blank » layout= »expanded » align= »center » font_family= »Raleway » font_weight= »700″ style= »flat » custom_background= »#18b69d » custom_hover_background= »#118d7a » custom_color= »#ffffff » custom_hover_color= »#ffffff » icon_right= »fa fa-download »]ИЗТЕГЛЕТЕ ГО ТЕМА DIVI [/vcex_button][/vc_column][vc_column width= »1/2″][vcex_button url= »https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=уроци » target= » празно » layout= »разширено » align= »center » font_family= »Raleway » font_weight= »700″ style= »flat » custom_background= »#c4226e » custom_hover_background= »#8d184f » custom_color= »#ffffff » custom_hover_color= »#ffffff » icon_right= »fa fa-download »]ИЗТЕГЛЯНЕ НА ШАБЛОНИ DIVI[/vcex_button][/vc_column][/vc_row]

Други уроци по Диви

• Ресторант 5, който използва темата на Divi
• Как да добавяте текст към продукт Divi WooCommerce
• Как да промените цвета на менюто между страниците на Divi
• Как да персонализирате решетките на блог с Divi
• Как да използвате редактора на роли Divi в WordPress
• Как да създадете плъзгач Divi на цял екран
• Как да промените цвета на менютата между страниците на Divi
• Функции, които вероятно не знаете за Divi
• Как да използвате Divi Builder на WordPress
• Как да използвате модула за превъртане на видео Divi
• Как да използвате модула за обръщане на Divi Builder
• Как да добавите препоръчителен модул на Divi Builder
• Как да използвате текстовия модул Divi
• Как да създадете плъзгач на Divi
• Как да редактирате потребителска роля на Divi
• Как да използвате модула Divi Social Media
• Как да използвате магазинния модул по темата WordPress Divi
• Как да използвате модула Sidebar на Divi
• Как да използвате модула на таблицата с цени за Divi
• Как да използвате заглавния модул на публикациите на Divi
• Как да добавите видео модул на Divi
• Как да използвате навигационния модул на статията
• Как да използвате модула за търсене Divi
• Как да използвате модула на портфейла Divi
• Как да използвате модула за лице на Divi Builder
• Как да използвате портфейла с филтър на Divi
• Как да използвате модула на плъзгача с пълна ширина
• Как да използвате модула за изображения на Builder на Divi
• Как да използвате навигационния модул с пълна ширина на Divi Builder
• Как да използвате модула за галерия на изображения
• Как да използвате модула на карта с пълна ширина Divi Builder
• Как да използвате модула за портфейли с пълна ширина Divi
• Как да използвате заглавния модул Divi с пълна ширина
• Как да използваме Counter модула Divi
• Как да използвате плъзгача за статии в Divi Builder
• Как да използвате модула Divi Email Optin

Блеър Jersyer

Разработчик на WordPress и запален по всичко, свързано с новите технологични тенденции. Автори на добавки, Теми на WordPress и други уеб приложения. Автор в BlogPasCher.com.

Вижте пълната биография