Search

Elementor sender ikke en søgewidget i sin gratis version, så de fleste websteder ender med at sidde fast med det søgefelt, temaet giver. Den Search widget i Master Addons til Elementor udfylder det hul. Slip det hvor som helst på en side eller i en overskrift, og vælg derefter en klassisk søgeformular eller en ikon popup, der udvides ved klik. Indgangen og knappen styles fra Elementor-panelet, ingen CSS involveret.

Sådan er begge layouts af Elementor søgewidget arbejde, indstilling ved indstilling, plus hvad besøgende rent faktisk ser på live-siden.

Hvad gør Search-widgetten #

Widgetten udsender en WordPress-søgeformular som et Elementor-element. Besøgende skriver en forespørgsel, trykker på Enter eller klikker på indsend kontrol, og lander på dit websteds standard søgeresultatside, så resultaterne kommer fra WordPress selv og gengives gennem dit tema. Du vælger, hvordan formularen ser ud: et fuldt inputfelt med et ikon eller en tekstknap eller et ensomt søgeikon, der udvides til en popup-søgeskærm.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor installeret og aktiv. Brug for hjælp? Se den installationsvejledning.
• Elementet Søg aktiveret i Master Addons-dashboardet, hvis du tidligere har slået widgets fra.

Sådan tilføjes Elementor Search-widgetten #

Åbn Elementor-editoren, og søg efter Search i panelet Elementer, eller rul til afsnittet Mastertilføjelser (se efter MA-mærket). Træk widgetten over på din side. En fungerende søgeformular vises med det samme med et forstørrelsesglasikon som indsend-kontrol.

Opsæt fanen Indhold #

The Content tab holder én hovedbeslutning plus et par felter, der følger af den. Den Type dropdown skifter mellem de to layouts: Formular og Icon Popup.

Type: Formular #

Form er det klassiske layout, et inputfelt med en indsend kontrol til højre. Den Indsend Knap Type dropdown bestemmer, hvad den kontrol er:

• Ikon: viser en ikonknap. Vælg ikonet fra biblioteket nedenfor; standardforstørrelsesglasset fungerer til næsten alle design.
• Knap: viser i stedet en tekstknap. A Knaptekst felt vises, hvor du skriver etiketten, som f.eks. Søg eller Hit Enter.

Type: Ikon Popup #

Ikon Popup gengiver kun et søgeikon. Når en besøgende klikker på det, åbnes en søgeskærm over siden med et stort inputfelt og en lukkeknap. Dette er layoutet, der skal bruges i overskrifter og navigationslinjer, hvor et fuldt søgefelt ville crowd menuen.

At vælge Icon Popup afslører Popup-indstillinger afsnit med to felter:

• Input tekst: pladsholderen inde i popup'ens søgefelt, “Søg ...” som standard.
• Beskrivelse: en hjælpelinje under feltet, som f.eks. “Hit enter to search or click X to close.”

Style widgetten i fanen Style #

The Style tab har to sektioner: Formular for inputområdet og Button for indsend kontrollen.

Formular #

Afsnittet Formular angiver ombryderen og indtastningsfeltet:

• Baggrund: en farve eller et farveforløb bag formularen.
• Bredde: formularens bredde i pixels. Praktisk, når widgetten sidder i en bred kolonne, og du vil have et strammere søgefelt.
• Formularmargen og Formularudfyldning: afstand uden for og inde i omslaget.
• Border Type og Border Radius: rammen omkring formen og hvor afrundede dens hjørner er.
• Typografi og Farve: skrifttypen og tekstfarven på inputtet.
• Formular Input Farve: baggrundsfarven for selve inputfeltet.

Button #

Knapsektionen styler indsend kontrolelementet, uanset om det er et ikon eller en tekstknap:

• Baggrundsfarve: fyldet bag knappen.
• Farve: ikonet eller tekstfarven.
• Polstring og Margin: knappens indre og ydre afstand.
• Typografi: skrifttypefamilie, størrelse og vægt for knapteksten.

En størrelsesnote: Knaphøjden følger formularen, så hvis knapteksten ser trang ud efter en ændring af skriftstørrelsen, skal du tilføje lidt lodret udfyldning på formularsiden i stedet for at bekæmpe knapudfyldningen alene.

Se live resultatet #

Udgiv siden, og prøv formularen. Klik ind i feltet, skriv en forespørgsel, og tryk på Enter, eller tryk på knappen Send.

WordPress tager over derfra og viser de matchende indlæg og sider på dit temas søgeresultatskabelon:

Almindelige brugstilfælde #

• Header søgning: brug Icon Popup ved siden af navigationsmenuen, så søgningen er et klik væk uden at spise menuplads.
• Blog sidebjælke eller arkivsider: et søgefelt af typen Formular hjælper læserne med at grave gennem ældre indlæg.
• 404 sider: en søgeformular er den mest nyttige ting, du kan sætte på en side, der siger “ikke fundet.”
• Dokumentations- og vidensbaser: sæt en bred søgeformular foran og i midten, så brugerne søger, før de ruller.

Tips til en bedre søgelinje #

• Match knapfarven til dit temas accentfarve. En søgeknap, der ligner hver anden knap på webstedet, bliver brugt mere.
• Hold pladsholderen kort. “Søg ...” slår en hel sætning, der bliver afskåret på mobil.
• Brug Icon Popup i stramme layouts. En fuld søgeformular, der er klemt ind i en overskriftskolonne, har en tendens til at ombrydes akavet ved tabletbredder.
• Test resultatsiden. Widgetten overdrager forespørgslen til WordPress, så tjek, at dit temas søgeresultatskabelon ser præsentabel ud, før du promoverer søgefeltet.

Video Tutorial #

Hvis du gerne vil se søge-widgetten i aktion, går denne video gennem den fulde opsætning, fra det første træk til søgeresultaterne på live-siden:

Ofte stillede spørgsmål #

Indpakning #

Master Addons Search widget giver Elementor søgelinjen, den mangler: en formular eller ikon popup, du kan placere hvor som helst og stil, der matcher designet, med resultater, der betjenes af WordPress selv. Det passer godt sammen med Off-Canvas indhold widget, når du bygger en brugerdefineret overskrift. Gennemse hele samlingen af Master Addons widgets og udvidelser for mere.