Een pagina met zoekresultaten maken met Elementor

Wil je leren hoe je een pagina met zoekresultaten bouwt met Elementor?

Of je nu een persoonlijke blog, een eCommerce-website of een grote website met meerdere gebruikers hebt, het toevoegen van een zoekfunctie is cruciaal genoeg. Het maakt het voor uw bezoekers gemakkelijker om de inhoud te vinden waarnaar ze op zoek zijn, in plaats van hier en daar in het navigatiemenu te klikken.

In WordPress wordt het uiterlijk (lay-out) van de pagina met zoekresultaten bepaald door een sjabloon op het thema dat u gebruikt (het bestand search.php in de meeste gevallen). Als de standaardlay-out niet bij u past, kunt u een aangepaste sjabloon maken om deze te vervangen.

Als je geen PHP-vaardigheden hebt, kun je Elementor (of andere plug-ins voor het bouwen van pagina's met functionaliteit voor het maken van thema's zoals divi Builder et WPBakery) om een ​​aangepaste paginasjabloon voor zoekresultaten te maken in WordPress.

Om een ​​paginasjabloon met zoekresultaten te kunnen maken met Elementor, moet u de pro-versie van Elementor gebruiken, aangezien de functie Theme Builder alleen beschikbaar is in Elementor Pro.

Een pagina met zoekresultaten maken met Elementor

Wanneer u een pagina met aangepaste zoekresultaten maakt met Elementor, kunt u elk gewenst element toevoegen wanneer u een pagina maakt. Er zijn meer dan 90 items (widgets genaamd) die u kunt toevoegen.

Lees ook: Formulierinzendingen beheren in Elementor

Elementor zelf biedt kant-en-klare sjablonen voor pagina's met zoekresultaten om uw workflow te stroomlijnen. Of, als u een eigen ontwerpconcept heeft, kunt u de pagina met zoekresultaten ook zelf maken.

In dit artikel laten we u zien hoe u vanaf het begin een sjabloon voor een pagina met zoekresultaten kunt maken. Hier is de schermafbeelding van de pagina met zoekresultaten die we willen maken.

We gaan twee secties gebruiken om de bovenstaande pagina met zoekresultaten te maken:

• sectie 1: Om de koptekst te plaatsen (de beschrijving van de zoekresultaten)
• Sectie 2 : Het zoekformulier en de zoekresultaten plaatsen

Voordat je begint, moet je ervoor zorgen dat je je versie van Elementor hebt geüpgraded naar de pro-versie voor het geval je dat nog niet hebt gedaan. Als je klaar bent, ga dan naar Sjablonen -> Themabouwer op uw WordPress-dashboard.

Zie ook: Elementor gebruiken: de complete gids

Klik op de knop toevoegen om een ​​nieuw model te maken (of u kunt op de knop klikken) Probeer het nu om Elementor's Themes Builder te proberen).

Stel het modeltype in op Zoekresultaten, geef je model een naam en klik op de knop MAAK EEN MODEL om te beginnen met het maken van de laatste.

Omdat we de pagina met zoekresultaten helemaal opnieuw willen maken, kunt u gewoon het sjabloonbibliotheekvenster dat verschijnt sluiten.

Lees ook: Punteffect toevoegen aan een kolom in Elementor

Voordat je begint met het toevoegen van een widget, kun je eerst de pagina-indeling instellen. Klik hiervoor op het tandwielpictogram aan de onderkant van het instellingenpaneel (paneel aan de linkerkant). U kunt de lay-out instellen in de optie Pagina-indeling van het blok algemene instellingen onder het tabblad Instellingen.

sectie 1

Zoals hierboven weergegeven, zullen we deze sectie gebruiken om de koptekst te plaatsen om de beschrijving van de pagina met zoekresultaten weer te geven. Klik gewoon op de plusknop in het invoervak ​​van Elementor om een ​​nieuwe sectie toe te voegen. U kunt de structuur met één kolom selecteren. Zodra de sectie is toegevoegd, sleept u de titelwidget ernaartoe.

Ga naar het linkerpaneel. In het blok Titel onder het tabblad Inhoud, klik op het databasepictogram in het veld Titel en selecteer Titel archief.

U kunt dan toegang krijgen tot het tabblad Style om de koptekst aan te passen. U kunt elementen definiëren zoals tekstkleur, typografie (lettertypefamilie, lettergrootte, letterstijl, enz.). U kunt desgewenst ook de overvloeimodus en tekstschaduw toepassen.

Als u de achtergrond van de sectie wilt instellen, een scheidingsteken wilt toevoegen of de marge wilt instellen, kunt u op de sectiegreep klikken om deze naar de bewerkingsmodus te schakelen.

sectie 2

Klik op de knop Plus om een ​​nieuwe sectie toe te voegen zoals je deed in sectie 1 hierboven. U kunt ook de structuur met één kolom selecteren. Zodra de sectie is toegevoegd, sleept u de widget Zoekformulier.

U kunt dan toegang krijgen tot het instellingenpaneel om de instellingen te maken. In het blok Formulaire de recherche sous het tabblad Inhoud, u kunt de huid, de tijdelijke aanduiding, het pictogram, de grootte van het pictogram, enz. definiëren ...

Om het formulier aan te passen, kunt u het tabblad openen Stijl. Er zijn twee parameterblokken die u kunt openen: Invoer et Knop. Van het blok Invoer, u kunt typografie, tekstkleur, achtergrondkleur, randkleur, randgrootte en randradius instellen.

Van het blok Knop, u kunt de kleur van de knoptekst, achtergrondkleur, typografie, pictogramgrootte en knopbreedte instellen.

Zodra de stijl van de widget Zoekformulier op zijn plaats is, kunt u de widget Archiefberichten toevoegen. U kunt deze direct onder de widget Zoekformulier plaatsen.

Zodra deze widget op zijn plaats is, navigeert u naar het linkerdeelvenster. Onder het blok layout, tabblad Inhoud, je kunt de skin, het aantal kolommen, de positie van de afbeelding, de lengte van het uittreksel, de metadata, enz...

Op het blok Oproepen, u kunt het pagineringstype, de paginalimiet en de uitlijning instellen.

Op het blok Geavanceerd, u kunt instellen dat het bericht wordt weergegeven wanneer WordPress de opgegeven zoekopdracht niet kan vinden.

Zodra de basisinstellingen van het tabblad Inhoud voltooid, kunt u overschakelen naar het tabblad Style om het uiterlijk van de widget Archiefberichten aan te passen. Er zijn 6 blokken die u op dit tabblad kunt openen.

• Layout

U kunt dit blok openen om de uitlijning van de tekstuele inhoud van de berichten (posttitel en meta) te definiëren. U kunt ook de afstand tussen kolommen en rijen definiëren.

• Beeld

U kunt dit blok openen om de randradius van de postminiaturen in te stellen. U kunt ook de afstand instellen en CSS-filters toepassen.

• Content

Je kunt dit blok openen om de typografie, tekstkleur en spatiëring van tekstinhoud voor berichten in te stellen.

• Opdelen

Als u paginering inschakelt, kunt u dit blok openen om paginering aan te passen. U kunt zaken als typografie, tekstkleur en ruimte tussen getallen instellen.

• Niets gevonden bericht

U kunt dit blok openen om de foutmelding aan te passen wanneer WordPress de inhoud niet kan vinden op basis van de opgegeven zoekopdracht. U kunt de typografie en de kleur van de tekst op dit blok definiëren.

Je kunt meer widgets toevoegen als je ze nodig hebt. Als u klaar bent met het bewerken van de pagina, kunt u op de knop klikken PUBLICEREN OF BIJWERKEN onderaan het instellingenpaneel.

Als u wordt gevraagd om een ​​weergavevoorwaarde toe te voegen, voegt u er een toe door op de knop te klikken EEN VOORWAARDE TOEVOEGEN. Aangezien u een pagina met zoekresultaten aan het maken bent, stelt u de weergavevoorwaarde in op Zoekresultaten. Klik op de knop OPSLAAN & SLUITEN om de wijziging toe te passen.

En daar ga je!

Elke op WordPress gebaseerde website heeft een unieke pagina met zoekresultaten, afhankelijk van het thema dat door de website wordt gebruikt. Als de lay-out van de pagina met zoekresultaten die wordt aangeboden door het thema dat u gebruikt u niet aantrekkelijk lijkt, kunt u deze aanpassen.

Tenzij je PHP-vaardigheden hebt, kun je Elementor gebruiken om een ​​aangepaste zoekresultatenpagina op je WordPress-website te maken. Alles is slepen en neerzetten. Het is niet nodig om PHP-code te manipuleren.

Bovendien kunt u Elementor ook gebruiken om een ​​aangepaste koptekst, aangepaste voettekst, aangepaste 404-pagina en andere delen van uw WordPress theme.

Download Elementor Pro nu!

1. WooCommerce Autoresponder

WooCommerce Autoresponder is een WordPress Plugin waarmee u uw klanten kunt abonneren op uw autoresponder. Deze WordPress Plugin geeft ook een nieuwsbriefabonnement weer om eenvoudig te integreren WooCommerce naar de auto-responder.

Als functies vindt u onder andere: volledige integratie met WooCommerce, ondersteuning voor 9 auto-responders, geen kennis van codering vereist, eenvoudig te installeren en nog veel meer.

Lees ook: MailChimp tutorial in het Frans: de complete gids voor een nieuwsbrief maken

Downloaden | demonstratie | web hosting

• 9 WordPress plug-ins om e-mails te verzenden via SMTP
• 7 WordPress plug-ins om een ​​Google Maps op uw website in te sluiten
• Hoe u een multisite-netwerk opzet op WordPress
• Meta-secties toevoegen aan berichten en pagina's

Conclusie