Springe zum Hauptinhalt

So erstellen Sie eine Suchergebnisseite mit Elementor

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Möchten Sie erfahren, wie Sie mit Elementor eine Suchergebnisseite erstellen?

Egal, ob Sie einen persönlichen Blog, eine E-Commerce-Website oder eine große Website mit mehreren Benutzern haben, das Hinzufügen einer Suchfunktion ist entscheidend genug. Es erleichtert Ihren Besuchern, die gesuchten Inhalte zu finden, anstatt hier und da in das Navigationsmenü zu klicken.

In WordPress wird das Aussehen (Layout) der Suchergebnisseite durch eine Vorlage für das von Ihnen verwendete Theme (die Datei search.php in den meisten Fällen). Wenn das Standardlayout nicht zu Ihnen passt, können Sie eine benutzerdefinierte Vorlage erstellen, um es zu ersetzen.

Wenn Sie keine PHP-Kenntnisse haben, können Sie Elementor (oder andere Page Builder-Plugins mit Theme Builder-Funktionalität wie Divi Builder et WPBakery), um eine benutzerdefinierte Suchergebnisseitenvorlage in WordPress zu erstellen.

Um eine Suchergebnisseite-Vorlage mit Elementor erstellen zu können, müssen Sie die Pro-Version von Elementor verwenden, da die Theme Builder-Funktion nur in Elementor Pro verfügbar ist.

So erstellen Sie eine Suchergebnisseite mit Elementor

Wenn Sie mit Elementor eine benutzerdefinierte Suchergebnisseite erstellen, können Sie beim Erstellen einer Seite jedes beliebige Element hinzufügen. Es gibt über 90 Elemente (so genannte Widgets), die Sie hinzufügen können.

Lesen Sie auch: So verwalten Sie Formulareinsendungen in Elementor

Elementor selbst bietet vorgefertigte Vorlagen für Suchergebnisseiten, um Ihren Workflow zu optimieren. Wenn Sie ein eigenes Gestaltungskonzept haben, können Sie die Suchergebnisseite auch selbst erstellen.

In diesem Artikel zeigen wir Ihnen, wie Sie eine Vorlage für Suchergebnisseiten von Grund auf neu erstellen. Hier ist der Screenshot der Suchergebnisseite, die wir erstellen möchten.

Wir verwenden zwei Abschnitte, um die obige Suchergebnisseite zu erstellen:

  • Abschnitt 1: Um die Kopfzeile (die Beschreibung der Suchergebnisse) zu platzieren
  • Abschnitt 2 : So platzieren Sie das Suchformular und die Suchergebnisse

Bevor Sie beginnen, stellen Sie sicher, dass Sie Ihre Version von Elementor auf die Pro-Version aktualisiert haben, falls dies nicht der Fall ist. Wenn Sie fertig sind, gehen Sie zu Vorlagen -> Themes Builder auf Ihrem WordPress-Dashboard.

Siehe auch: So verwenden Sie Elementor: Die vollständige Anleitung

Klicken Sie auf die Schaltfläche hinzufügen um eine neue Vorlage zu erstellen (oder klicken Sie auf die Schaltfläche Probieren Sie es jetzt um den Themes Builder von Elementor auszuprobieren).

Stellen Sie den Modelltyp auf Suchergebnisse, gib deinem Modell einen Namen und klicke auf den Button EIN MODELL ERSTELLEN um mit der Erstellung des letzteren zu beginnen.

Da wir die Suchergebnisseite von Grund auf neu erstellen möchten, können Sie einfach das angezeigte Vorlagenbibliotheksfenster schließen.

Lesen Sie auch: So fügen Sie einer Spalte in Elementor einen Punkteffekt hinzu

Bevor Sie mit dem Hinzufügen eines Widgets beginnen, können Sie zunächst das Seitenlayout festlegen. Klicken Sie dazu auf das Zahnradsymbol unten im Einstellungsbereich (Bereich auf der linken Seite). Sie können das Layout einstellen in die Option Seitenlayout Von dem Block allgemeine Einstellungen unter der Registerkarte Die Einstellungen.

Abschnitt 1

Wie oben gezeigt, verwenden wir diesen Abschnitt, um die Kopfzeile zu platzieren, um die Beschreibung der Suchergebnisseite anzuzeigen. Klicken Sie einfach auf die Plus-Schaltfläche im Bearbeitungsfeld von Elementor, um einen neuen Abschnitt hinzuzufügen. Sie können die einspaltige Struktur auswählen. Nachdem der Abschnitt hinzugefügt wurde, ziehen Sie das Titel-Widget dorthin.

Gehen Sie zum linken Bereich. Im Block Titel unter der Registerkarte Inhalt, Klicken Sie auf das Datenbanksymbol im Feld Titel und wählen Sie Archivtitel.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

Erstellen Sie eine Suchergebnisseite

Sie können dann auf die Registerkarte zugreifen Stil um die Kopfzeile anzupassen. Sie können Dinge wie Textfarbe, Typografie (Schriftfamilie, Schriftgröße, Schriftstil usw.) einstellen. Sie können auch Mischmodus und Textschatten anwenden, wenn Sie möchten.

So erstellen Sie eine Suchergebnisseite mit Elementor

Wenn Sie den Hintergrund des Abschnitts festlegen, ein Trennzeichen hinzufügen oder den Rand festlegen möchten, können Sie auf den Abschnittsgriff klicken, um ihn in den Bearbeitungsmodus zu schalten.

Erstellen Sie eine Suchergebnisseite

Abschnitt 2

Klicken Sie auf die Schaltfläche Mehr um einen neuen Abschnitt hinzuzufügen, wie Sie es in Abschnitt 1 oben getan haben. Sie können auch die einspaltige Struktur auswählen. Nachdem der Abschnitt hinzugefügt wurde, ziehen Sie das Suchformular-Widget.

Sie können dann auf das Einstellungsfeld zugreifen, um die Einstellungen vorzunehmen. Im Block Formulaire de recherche sous die Registerkarte Inhalt, Sie können die Skin, den Platzhalter, das Symbol, die Größe des Symbols usw. definieren.

Um das Formular anzupassen, können Sie die Registerkarte öffnen Stil. Sie können zwei Parameterblöcke öffnen: Eingang et Taste. Von dem Block Eingang, Sie können Typografie, Textfarbe, Hintergrundfarbe, Randfarbe, Randgröße und Randradius einstellen.

Von dem Block Taste, Sie können die Textfarbe der Schaltfläche, die Hintergrundfarbe, die Typografie, die Symbolgröße und die Schaltflächenbreite einstellen.

Sobald das Design des Suchformular-Widgets eingerichtet ist, können Sie das Archiv-Beiträge-Widget hinzufügen. Sie können es direkt unter dem Suchformular-Widget platzieren.

Sobald dieses Widget installiert ist, navigieren Sie zum linken Bereich. Unter dem Block Layout, Tab Inhalt, Sie können die Skin, die Anzahl der Spalten, die Position des Bildes, die Länge des Extrakts, die Metadaten usw. definieren.

Auf den Block Paging, Sie können den Paginierungstyp, die Seitenbegrenzung und die Ausrichtung einstellen.

Auf den Block Fortgeschrittene, Sie können festlegen, dass die Meldung angezeigt wird, wenn WordPress die bereitgestellte Suchanfrage nicht finden kann.

Sobald die Grundeinstellungen der Registerkarte Inhalt abgeschlossen, können Sie zum Tab wechseln Stil um das Erscheinungsbild des Widgets "Beiträge archivieren" anzupassen. Auf dieser Registerkarte können Sie 6 Blöcke öffnen.

  • Layout

Sie können diesen Block öffnen, um die Ausrichtung des textlichen Inhalts der Beiträge (Beitragstitel und Meta) festzulegen. Sie können auch den Abstand zwischen Spalten und Zeilen definieren.

  • Bild

Sie können diesen Block öffnen, um den Randradius der Beitrags-Miniaturansichten festzulegen. Sie können auch den Abstand festlegen und CSS-Filter anwenden.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

  • Inhalt

Sie können diesen Block öffnen, um die Typografie, die Textfarbe und den Abstand des Textinhalts für Beiträge festzulegen.

  • Paginierung

Wenn Sie die Paginierung aktivieren, können Sie diesen Block öffnen, um die Paginierung anzupassen. Sie können Dinge wie Typografie, Textfarbe und Abstand zwischen Zahlen festlegen.

  • Nichts gefunden Nachricht

Sie können diesen Block öffnen, um die Fehlermeldung anzupassen, wenn WordPress den Inhalt basierend auf der bereitgestellten Suchanfrage nicht finden kann. Sie können die Typografie und die Farbe des Textes auf diesem Block definieren.

Sie können bei Bedarf weitere Widgets hinzufügen. Wenn Sie mit der Bearbeitung der Seite fertig sind, können Sie auf die Schaltfläche . klicken VERÖFFENTLICHEN ODER AKTUALISIEREN unten im Einstellungsfenster.

Wenn Sie aufgefordert werden, eine Anzeigebedingung hinzuzufügen, fügen Sie einfach eine hinzu, indem Sie auf die Schaltfläche klicken EINE BEDINGUNG HINZUFÜGEN. Da Sie eine Suchergebnisseite erstellen, setzen Sie die Anzeigebedingung auf Suchergebnisse. Klicken Sie auf die Schaltfläche SPEICHERN & SCHLIESSEN um die Änderung anzuwenden.

Erstellen Sie eine Suchergebnisseite

Und los gehts!

Jede WordPress-basierte Website hat eine einzigartige Suchergebnisseite, abhängig vom von der Website verwendeten Thema. Wenn Ihnen das Layout der Suchergebnisseite des von Ihnen verwendeten Designs nicht gefällt, können Sie es anpassen.

Sofern Sie keine PHP-Kenntnisse haben, können Sie Elementor verwenden, um eine benutzerdefinierte Suchergebnisseite auf Ihrer WordPress-Website zu erstellen. Alles ist Drag & Drop. Keine Notwendigkeit, PHP-Code zu manipulieren.

Außerdem können Sie Elementor auch verwenden, um eine benutzerdefinierte Kopfzeile, eine benutzerdefinierte Fußzeile, eine benutzerdefinierte 404-Seite und andere Teile Ihres WordPress-Themes zu erstellen.

Holen Sie sich jetzt Elementor Pro!

Entdecken Sie auch einige Premium-WordPress-Plugins  

Sie können andere WordPress-Plugins verwenden, um ein modernes Erscheinungsbild zu erhalten und den Grip Ihres Blogs oder Ihrer Website zu optimieren.

Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.

1. WooCommerce Autoresponder

WooCommerce Autoresponder ist ein WordPress-Plugin, mit dem Sie Ihren Kunden Ihren Auto-Responder abonnieren können. Dieses WordPress-Plugin zeigt auch eine Newsletter-Abonnement-Box an, die einfach integriert werden kann WooCommerce an den Auto-Responder.

Woocommerce Autoresponder

Als Funktionen finden Sie unter anderem: vollständige Integration in WooCommerce, Unterstützung für 9 Auto-Responder, keine Programmierkenntnisse erforderlich, einfach zu installieren und vieles mehr.

Lesen Sie auch: MailChimp Tutorial in Französisch: die komplette Anleitung, einen Newsletter zu erstellen

Download | DemoWeb-Hosting

2. WordPress Kommentar Bewertung Plugin

Es geht um ein System zur Bewertung von Kommentaren. Sie können Benutzer unterschiedliche Kommentare bewerten lassen. Sie müssen nur auf die Vorschau-Schaltfläche klicken und zum Kommentarbereich scrollen, um das Premium-WordPress-Plugin in Aktion zu sehen.Wie Wordpress Plugin Bewertung

In seinen Funktionen finden wir hauptsächlich: Benutzerfreundlichkeit, Unterstützung für cbenutzerdefinierte Symbolwerkzeuge, Ranking Kommentare nach den Anmerkungen ist die Personalisierung des tgehen Ikonen, benutzerdefinierte CSS-Unterstützung, die cIP-Verschlüsselung (für europäische Benutzer), die Möglichkeit, dieses Plugin zu übersetzen und mehr.

Download | Demo | Web-Hosting

3. Fortschritts-Karte

Progress Map ist ein WordPress-Plugin für die Geolokalisierung. Ziel ist es, Nutzern mit Websites zu Hotellisten zu helfen, Immobilienanzeigen, Listen von Restaurants, Jobangebote, Ankündigungen speichern und mehr ... um ihre Standorte auf zu organisieren Google Map und navigieren Sie einfach mit einem Karussell durch die Karte.

Progress Map WordPress Plugin WordPress

Mit anderen Worten, mit diesem Plugin werden Ihre Standorte auf beiden veröffentlicht Google Map (Marker) und auf einem Karussell. Das Karussell ist mit der Karte verbunden. Dies bedeutet, dass das im Karussell ausgewählte Objekt auf seine Position auf der Karte abzielt und umgekehrt.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Schauen Sie sich an So zeigen Sie den Standort eines Mitglieds Ihrer WP-Community auf einer Google Map an

Um Ihre Standorte hinzuzufügen, bietet Progress Map auf der Seite "Neues Element hinzufügen" einen Formularbereich, in dem Sie Ihre Standortkoordinaten einfach hinzufügen können.

DownloadDemo | Web-Hosting

Andere empfohlene Ressourcen

Wir laden Sie außerdem ein, die unten aufgeführten Ressourcen zu konsultieren, um die Kontrolle und Kontrolle Ihrer Website und Ihres Blogs zu verbessern.

Fazit

Hier ist ! Das war's für dieses Tutorial. Wir hoffen, dass es Ihnen zeigt, wie Sie mit Elementor eine Suchergebnisseite erstellen. Wir würden gerne Ihre Meinung zum Thema hören in der Kommentarbereich.

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken

... 

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
0 Aktien
Aktie
tweet
Registrieren