So erstellen Sie eine Suchergebnisseite mit Elementor

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.

Sie können dann auf die Registerkarte zugreifen Design 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.

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.

Abschnitt 2

Klicken Sie auf die Schaltfläche VORTEILE 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: zufuhr 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 Design 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.

• 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.

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 benutzerdefinierte Kopfzeilen, benutzerdefinierte Fußzeilen, benutzerdefinierte 404-Seiten und andere Teile Ihrer Seite zu erstellen Wordpress-Theme.

Holen Sie sich jetzt Elementor Pro!

1. WooCommerce Autoresponder

WooCommerce Autoresponder ist ein WordPress Plugin mit dem Sie Ihren Kunden Ihren Autoresponder abonnieren können. Dies WordPress Plugin zeigt auch ein Newsletter-Abonnementfeld zur einfachen Integration an WooCommerce an den Auto-Responder.

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

Herunterladen | Demo | Web-Hosting

• 9 WordPress-Plugins zum Versenden von E-Mails über SMTP
• 7 WordPress-Plugins zum Einbinden von Google Maps in Ihre Website
• So richten Sie ein Multisite-Netzwerk in WordPress ein
• So fügen Sie Meta-Abschnitte zu Posts und Seiten hinzu

Zusammenfassung