A kereső modul segítségével elhelyezhet a forma keressen bárhol a webhelyén. Ez forma A keresés lehetővé teszi látogatói számára, hogy a webhely összes tartalmában kereshessenek, beleértve az összes oldalt és blogbejegyzéseket is. Ez biztosítja a WordPress kereső widget funkcióit a Divi Builder által kínált rugalmassággal. Nem csak a helyét szabályozhatja formák kereshet az oldalon, de testreszabhatja annak kialakítását is.

Hogyan adhatunk hozzá keresési modult az oldalhoz

Mielőtt keresési modult adna az oldalához, először be kell ugrania a Divi Builderbe. Egyszer a Divi téma telepítve van a webhelyére, észrevesz egy gombot Használja a Divi Buildert a bejegyzésszerkesztő felett, amikor új oldalt hoz létre. Kattintson erre a gombra a Divi Builder aktiválásához és az összes Divi Builder modul eléréséhez. Ezután kattintson a gombra Használja a Visual Builder alkalmazást hogy a generátort vizuális módban indítsa el. Kattintson a gombra is Használja a Visual Builder alkalmazást amikor az előtérben böngészi a webhelyet, ha csatlakozik a WordPress irányítópultjához.

Miután belépett a Visual Builder programba, a szürke plusz gombra kattintva új modult adhat hozzá az oldalához. Új modulok csak sorok belsejében adhatók hozzá. Ha új oldalt indít, ne felejtse el először hozzáadni egy sort az oldalához.

Keresse meg a kereső modult a modulok listájában, és kattintson rá, hogy hozzáadja az oldalához. A modulok listája kereshető, ami azt jelenti, hogy beírhatja a "keresés" szót is, majd az Enter gombra kattintva kereshet és automatikusan hozzáadhatja a kereső modult! A modul hozzáadása után a modul opcióinak listája fogadja. Ezek az opciók három fő csoportra vannak felosztva: Tartalom , Fogamzás et fejlett .

Példa: Egyéni keresési modul hozzáadása teljes szélességű blogoldalhoz

Ebben a példában megmutatom, hogyan adhat hozzá egy keresési modult elsődleges cselekvési felhívássá a blogoldal tetején. Ez lehetővé teszi a felhasználók számára, hogy zűrzavar nélkül, könnyen keressenek a blog tartalmában.

Ennek az oldalnak a tetején egy teljes szélességű fejléc található, közvetlenül a kereső modullal. A kereső modul alatt található egy blog modul, amely a rács elrendezését használja.

A Visual Builder használatával adjon hozzá egy új szabványos szakaszt a blogoldalhoz teljes szélességű (1 oszlopos) sorral. Ezután helyezze be a kereső modult a sorba.

Frissítse a keresőmodul beállításait az alábbiak szerint:

Tartalom opciók

Fenntartott szöveg: Keresés a blogunkban ...
A gomb elrejtése: IGEN

Tervezési lehetőségek

Beviteli mező háttérszíne: # f8f8f8
Helyőrző színe: # 888888
Bevitt betűméret: 16 képpont
Beviteli szöveg színe: # 888888
A belépési vonal magassága: 1em
Egyéni párnázat: 20px felső, 20px alsó

A beállítások mentése

Most térjen vissza, hogy megváltoztassa a kereső modult tartalmazó sor szélességét. A sorbeállítások Tervezés lapján adja meg a vonal egyéni 300px szélességét. Ezáltal a kereső modul kompakt marad és az oldalra összpontosul.

Ez az!

Tartalmi beállítások keresése

A Tartalom fülön megtalálja a modul összes tartalmi elemét, például szöveget, képeket és ikonokat. Minden, ami irányít mi jelenik meg a modulban, mindig megtalálható ezen a lapon.

Helyőrző szöveg

Írja be a szöveget, amelyet helyőrzőként használni szeretne a keresési mezőhöz.

Elrejtés gomb

Ha engedélyezi ezt a lehetőséget, a Keresés gomb elrejtésre kerül.

Oldalak kizárása

Ha engedélyezi ezt a lehetőséget, az oldalak kizárásra kerülnek a keresési eredményekből.

Elemek kizárása

Az opció engedélyezése kizárja az üzeneteket a keresési eredményekből.

Kizárja a kategóriákat

Válassza ki azokat a kategóriákat, amelyeket ki szeretne zárni a keresési eredményekből.

Admin címke

Ez megváltoztatja a konstruktor modul címkéjét az egyszerű azonosítás érdekében. Amikor a WireFrame nézetet használja a Visual Builder alkalmazásban, ezek a címkék a Divi Builder felület modulblokkjában jelennek meg.

Keresési lehetőségek keresése

A Tervezés lapon megtalálja a modul összes stíluslehetőségét, például a betűtípusokat, a színeket, a méretezést és a térközt. Ezen a lapon módosíthatja a modul megjelenését. Minden Divi modul hosszú listát tartalmaz a tervezési beállításokról, amelyekkel bármit módosíthat.

A beviteli mező háttérszíne

Itt megváltoztathatja a keresősáv háttérszínét.

Helyőrző szín

A keresőmező használata előtt a helyőrző szöveg létezik a mezőben. Ha módosította a mező háttérszínét, a helyőrző szöveg színét is módosíthatja, hogy az olvasható legyen.

Szöveg színe

Itt választhatja ki a szövege értékét. Ha sötét háttérrel dolgozik, a szövegnek be kell kapcsolnia. Ha világos háttérrel dolgozik, akkor a szövegének sötétnek kell lennie.

Szövegorientáció

Ez irányítja, hogy a szöveg hogyan igazodjon a modulhoz.

Beléptető rendőrség

A legördülő menüből kiválaszthatja a kívánt betűtípust a bevitt szöveg betűtípusának megváltoztatásához. A Divi több tucat nagyszerű betűtípussal rendelkezik, amelyeket a Google Fonts szolgáltat. Alapértelmezés szerint Divi az Open Sans betűtípust használja az oldal összes szövegéhez. A szöveg stílusát testreszabhatja félkövér, dőlt, nagybetűs és aláhúzási lehetőségek használatával is.

Írja be a betűméretet

Itt állíthatja be a bevitt szöveg méretét. A tartomány csúszkáját húzva növelheti vagy csökkentheti a szöveg méretét, vagy közvetlenül beírhatja a kívánt szövegméret értékét a csúszka jobb oldalán található beviteli mezőbe. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértékétől függően "px" vagy "em" karaktereket adhat meg az egység típusának megváltoztatásához.

Beviteli szöveg színe

Alapértelmezés szerint a Divi összes szövegszíne fehér vagy sötétszürke. Ha meg akarja változtatni a bevitt szöveg színét, válassza ki a kívánt színt a színválasztóból ezzel az opcióval.

Letter spacing

A betűköz befolyásolja az egyes betűk közötti helyet. Ha meg szeretné növelni a beviteli szöveg minden betűje közötti teret, használja a tartomány csúszkáját a szóköz beállításához, vagy írja be a kívánt távolságméretet a csúszka jobb oldalán található beviteli mezőbe. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértékétől függően "px" vagy "em" karaktereket adhat meg az egység típusának megváltoztatásához.

A vonal magassága

A vonalvastagság befolyásolja a bevitt szöveg egyes sorai közötti teret. Ha növelni szeretné az egyes sorok közötti teret, a tartomány csúszkájával állítsa be a teret, vagy írja be a kívánt térköz méretet a mezőbe. bejegyzés a kurzor jobb oldalán. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértékétől függően "px" vagy "em" értéket adhat meg az egység típusának megváltoztatásához.

Gomb és határszín

Ez megváltoztatja a kereső gomb hátterét és szegélyének színét.

Gomb betűtípus

A legördülő menüből kiválaszthatja a kívánt betűtípust. A Divi több tucat nagyszerű betűtípussal rendelkezik, amelyeket a Google Fonts szolgáltat. Alapértelmezés szerint Divi az Open Sans betűtípust használja az oldal összes szövegéhez. A szöveg stílusát testreszabhatja félkövér, dőlt, nagybetűk és aláhúzási lehetőségek használatával is.

Gomb betűméret

Itt állíthatja be a gomb szövegének méretét. A tartomány csúszkáját húzva növelheti vagy csökkentheti a szöveg méretét, vagy közvetlenül beírhatja a kívánt szövegméret értékét a csúszka jobb oldalán található beviteli mezőbe. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértékétől függően "px" vagy "em" karaktereket adhat meg az egység típusának megváltoztatásához.

A gomb szövegének színe

Alapértelmezés szerint a Divi összes szövegszíne fehér vagy sötétszürke. Ha meg akarja változtatni a gomb szövegének színét, válassza ki a kívánt színt a színválasztóból ezzel az opcióval.

A gomb betűinek távolsága

A betűköz befolyásolja az egyes betűk közötti helyet. Ha meg akarja növelni a gomb szövegében az egyes betűk közötti teret, használja a tartomány csúszkáját a szóköz beállításához, vagy írja be a kívánt távolságméretet a csúszka jobb oldalán található beviteli mezőbe. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértékétől függően "px" vagy "em" értéket adhat meg az egység típusának módosításához.

A gomb vonalának magassága

A vonalmagasság befolyásolja a gomb szövegének egyes sorai közötti távolságot. Ha növelni szeretné az egyes sorok közötti teret, használja a tartomány csúszkáját a szóköz beállításához, vagy írja be a kívánt térköz méretet a beviteli mezőbe a kurzortól jobbra található. A beviteli mezők különböző mértékegységeket támogatnak, ami azt jelenti, hogy a méretértékétől függően "px" vagy "em" értéket adhat meg az egység típusának megváltoztatásához.

Maximális szélesség

Alapértelmezés szerint a keresősáv maximális szélessége 100%. Ez azt jelenti, hogy a keresősáv természetes szélességében jelenik meg, hacsak a keresősáv szélessége nem haladja meg a szülőoszlop szélességét, ebben az esetben a keresősáv az oszlopszélesség 100% -ára korlátozódik. Ha tovább akarja korlátozni a keresősáv maximális szélességét, akkor ezt megteheti a kívánt maximális szélesség érték ide beírásával. Például egy 50% -os érték korlátozná a keresősáv szélességét a szülőoszlop szélességének 50% -ára.

Egyéni margó

A margó a modul külső részén, a modul és a következő elem felett, alatt, illetve annak bal és jobb oldalán hozzáadott hely. Hozzáadhat egyedi margóértékeket a modul négy oldalához. Az egyéni margó eltávolításához távolítsa el a hozzáadott értéket a beviteli mezőből. Alapértelmezés szerint ezek az értékek pixelben vannak megadva, de a beviteli mezőkbe egyéni mértékegységeket adhat meg.

Egyéni párnázás

A kitöltés a modul belsejében, a modul éle és a belső elemei között hozzáadott hely. Hozzáadhat egyedi kitöltési értékeket a modul négy oldalához. Az egyéni margó eltávolításához távolítsa el a hozzáadott értéket a beviteli mezőből. Alapértelmezés szerint ezek az értékek pixelben vannak megadva, de a beviteli mezőkbe egyéni mértékegységeket adhat meg.

A kutatási modul speciális opciói

A Haladó lapon olyan lehetőségeket talál, amelyeket a tapasztaltabb webtervezők hasznosnak találhatnak, például egyéni CSS és HTML attribútumokat. Itt alkalmazhat egyedi CSS-t a modul számos elemére. Alkalmazhat egyedi CSS osztályokat és azonosítókat is a modulra, amelyek felhasználásával testreszabhatja a modult a gyermek téma style.css fájljában.

CSS azonosító

Adjon meg egy opcionális CSS azonosítót, amelyet ehhez a modulhoz használ. Az azonosító felhasználható egyedi CSS-stílus létrehozására vagy az oldal egyes szakaszaira történő hivatkozásokra.

CSS osztály

Adja meg az ehhez a modulhoz használandó opcionális CSS osztályokat. Egy CSS osztály felhasználható egyedi CSS stílus készítéséhez. Több osztályt is felvehet, szóközzel elválasztva. Ezeket az osztályokat fel lehet használni a Divi gyermek témában, vagy az egyéni CSS stíluslapban, amelyet hozzáad az oldalához vagy a webhelyéhez a Divi téma beállításai vagy a Divi Builder oldal beállításai segítségével.

Egyéni CSS

Az egyedi CSS alkalmazható a modulra és a modul bármely belső elemére is. Az Egyéni CSS részben talál egy szövegmezőt, ahol egyedi CSS stíluslapokat adhat hozzá minden elemhez. Az ezekben a beállításokban található CSS ​​bejegyzések már stíluscímkékbe vannak csomagolva. Tehát csak pontosvesszővel elválasztva adja meg a CSS-szabályokat.

láthatóság

Ez az opció lehetővé teszi azoknak az eszközöknek a vezérlését, amelyeken a modul megjelenik. Választhatja a modul deaktiválását táblagépeken, okostelefonokon vagy asztali számítógépeken egyenként. Ez akkor hasznos, ha különböző modokat szeretne használni különböző eszközökön, vagy ha le akarja egyszerűsíteni a mobil tervezését bizonyos elemek eltávolításával az oldalról.

[vc_row center_row = "igen"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" kibontva "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"] A DIVI TÉMA LETÖLTÉSE [/ vcex_button] [/ width [»v_c_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "üres" layout = "kibontva" igazítás = "középre" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" TE fa-downLOAD "] DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Egyéb Divi oktatóanyagok

• 5 weboldalak éttermi felhasználásra Divi téma
• Hogyan lehet szöveget hozzáadni a Divi WooCommerce termékhez?
• Hogyan változtathatja meg a menü színét a Divi oldalak között
• Hogyan lehet személyre szabni egy blog rácsát a Divi-vel
• Hogyan kell használni a szerepe Divi szerkesztő WordPress
• Hogyan készítsünk teljes képernyős Divi csúszkát?
• Hogyan változtathatja meg a menük színét a Divi oldalak között
• Funkciók, amelyeket valószínűleg nem ismer a Divi-ről
• A Divi Builder használata a WordPress-en
• Hogyan használjuk a Divi video scrolling modult
• A Divi Builder Flip modul használatának módja
• Hogyan adhatunk hozzá egy beszámolót a Divi Builderhez
• A Divi szövegmodul használata
• Hogyan lehet létrehozni egy csúszkát a Divi-n
• A Divi felhasználói szerepkör szerkesztése
• A Divi Social Media használata
• Hogyan lehet használni az üzlet modult a WordPress Divi témában?
• A Divi oldalsáv moduljának használata
• A Divi áratábla modul használatának módja
• A Divi kiadványok címmoduljának használata
• Hogyan adhatunk hozzá egy Divi video modult
• A cikk navigációs moduljának használata
• A Divi keresőmodul használata
• A Divi pénztárca moduljának használata
• A személyi modul használata a Divi Builder-en
• A pénztárca moduljának használata a Divi szűrővel
• A teljes szélességű csúszka modul használata
• A Divi Builder képmodul használata
• A Divi Builder teljes szélességű navigációs moduljának használata
• A képgaléria modul használata
• A Divi Builder teljes szélességű kártya moduljának használata
• A Divi teljes szélességű portfólió moduljának használata
• A Divi teljes szélességű fejléc moduljának használata
• A Divi számláló modul használata
• Hogyan lehet használni a Divi Builder cikkcsúszkáját?
• A Divi Email Optin modul használata