Ebben a cikkben mutatok egy lehetőséget, arra, ha Elementor vagy Gutenberg keretrendszert használ a WordPress weboldalad, akkor hogyan turbózd fel a keresőmezőt, ezzel is segítve, irányítva a weboldaladra érkező felhasználókat.

Miért érdemes „felturbózni” a keresőmezőt?

A keresőmező az egyik legfontosabb interaktív pont egy weboldalon – itt indul a felfedezés.
Ha kreatívan kihasználod az általa nyújtott lehetőségeket, nem csak egy egyszerű funkció lesz, hanem egy iránytű, ami segíti a látogatóidat abban, hogy gyorsabban és akár vezetve megtalálják, amit keresnek.

Előnyök:

• Azonnal megszólítja a látogatót
  A gépelős, váltakozó üzenetek egyből figyelemfelkeltők. Egy dinamikus placeholder olyan, mintha azt mondanád:
  „Gyere, segítek megtalálni, amit keresel!”
• Irányítja a felhasználót
  Példákat adhatsz annak megfelelően, ami a weboldalad / webshopod témája: „Pl.: kertépítő, öntözőrendszer, gyepmester vagy utazás, utazási tippek, norvégiai körutazás stb.”. Ez konkrét keresési ötleteket ad, így azok is keresnek, akik amúgy nem tudták volna, mit írjanak be.
• Növeli a bevonódást és csökkenti a kilépést
  Ha a látogató már az első másodpercben kap tőled iránymutatást, hogy merre vagy hogyan tovább, kevesebb az esélye annak, hogy tanácstalanul kilép az oldaladról.
• Webshopoknál extra erős fegyver
  Gondolj bele: „Pl.: farmer, nyári ruha, akciós cipő”. Azonnal terelheted a gondolkodást a termékeid felé.
• Trendkövető, modern benyomást kelt
  Az animált keresőmező élővé teszi az oldalt – apró részlet, ami sokat hozzáad az összképhez.

Hátrányok

• Némi plusz munka
  Egy egyszerű keresőhöz képest kell hozzá pár sor kód, de ez jelen esetben könnyen megoldható, mert átadom Neked a kódsort, amivel működésre bírod, és egy videón keresztül azt is bemutatom lépésről lépésre, hogy mit kell vele tenned, hogy működjön.
• Túl sok szöveg zavaró lehet
  Fontos, hogy ne legyen túl gyors és túl sok váltás. A cél a segítség, nem a fárasztás.
• Régebbi eszközökön minimális teljesítményterhelést okozhat
  De a modern böngészők ezt már szinte észrevétlenül kezelik.

Hol érdemes használni a „felturbózott” keresőmezőt?

• Webshopok főoldalán és kategóriaoldalain – hogy vásárlásra inspiráljon.
• Szolgáltatói oldalakon – pl. „Pl.: kertépítő, villanyszerelő, grafikus”.
• Blogokban – témakörökre irányíthatod az olvasó figyelmét.
• Közösségi platformokon – érdeklődési körök megadására ösztönöz.

Összegezve: egy jól beállított gépelős keresőmező olyan, mint egy halk segítő hang a felhasználó mellett. Nem tolakodó, de segít elindítani az első lépést, amiből könnyen lehet kattintás, olvasás vagy vásárlás.

document.addEventListener("DOMContentLoaded", function () {
  //const input = document.getElementById("select"); // vagy: document.querySelector(".js-typeahead-input");
  const input = document.querySelector(".search-field");

  const messages = [
    "macaron", 
    "francia divat",
    "utazási tippek",
    "francia konyha különlegességei",
	"bagette, bagel"
  ];

  let messageIndex = 0;
  let charIndex = 0;
  let typing = true;

  function typeEffect() {
    if (!input) return;

    if (typing) {
      if (charIndex <= messages[messageIndex].length) {
        input.setAttribute("placeholder", messages[messageIndex].substring(0, charIndex));
        charIndex++;
        setTimeout(typeEffect, 100);
      } else {
        typing = false;
        setTimeout(typeEffect, 2000);
      }
    } else {
      if (charIndex > 0) {
        charIndex--;
        input.setAttribute("placeholder", messages[messageIndex].substring(0, charIndex));
        setTimeout(typeEffect, 50);
      } else {
        typing = true;
        messageIndex = (messageIndex + 1) % messages.length;
        setTimeout(typeEffect, 500);
      }
    }
  }

  typeEffect();
});

document.addEventListener("DOMContentLoaded", function () {
  //const input = document.getElementById("select"); // vagy: document.querySelector(".js-typeahead-input");
  const input = document.querySelector(".search-input");

  const messages = [
    "weboldalkészítés", 
    "honlap tanácsadás",
    "sitebuild",
    "honlap karbantartás"
  ];

  let messageIndex = 0;
  let charIndex = 0;
  let typing = true;

  function typeEffect() {
    if (!input) return;

    if (typing) {
      if (charIndex <= messages[messageIndex].length) {
        input.setAttribute("placeholder", messages[messageIndex].substring(0, charIndex));
        charIndex++;
        setTimeout(typeEffect, 100);
      } else {
        typing = false;
        setTimeout(typeEffect, 2000);
      }
    } else {
      if (charIndex > 0) {
        charIndex--;
        input.setAttribute("placeholder", messages[messageIndex].substring(0, charIndex));
        setTimeout(typeEffect, 50);
      } else {
        typing = true;
        messageIndex = (messageIndex + 1) % messages.length;
        setTimeout(typeEffect, 500);
      }
    }
  }

  typeEffect();
});

Jó munkát kívánok hozzá!

Kérdésed van, elakadtál, nem működik? Írj nekem, és segítek.

Honlapot szeretnél, ami nemcsak szép, de a személyes igényeidet is teljes mértékben lefedi?

A meglévő honlapod karbantartására keresel segítő szakembert?

Online tanácsadásra lenne szükséged, mert elakadtál valahol menetközben?

Keress meg bátran email-ben vagy a kapcsolati űrlapon keresztül.

Email: info@cserhajni.hu