Springe zum Hauptinhalt

Divi Tutorial: Wie man das Suchmodul benutzt

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 600.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]

Mit dem Suchmodul können Sie ein Suchformular an einer beliebigen Stelle auf Ihrer Website platzieren. Mit diesem Suchformular können Ihre Besucher den gesamten Inhalt Ihrer Website durchsuchen, einschließlich aller Seiten und Blogeinträge. Dies gibt Ihnen die Funktionalität des WordPress-Such-Widgets mit der Flexibilität, die Divi Builder bietet. Sie können nicht nur die Position der Suchformulare auf der Seite steuern, sondern auch das Design anpassen.

So fügen Sie Ihrer Seite ein Suchmodul hinzu

Bevor Sie Ihrer Seite ein Suchmodul hinzufügen können, müssen Sie zunächst zu Divi Builder wechseln. Sobald das Divi-Design auf Ihrer Website installiert ist, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builder jedes Mal, wenn Sie eine neue Seite erstellen, über dem Publisher. Klicken Sie auf diese Schaltfläche, um Divi Builder zu aktivieren und auf alle Divi Builder-Module zuzugreifen. Klicken Sie dann auf die Schaltfläche Verwenden Sie Visual Builder um den Generator im visuellen Modus zu starten. Sie können auch auf die Schaltfläche klicken Verwenden Sie Visual Builder Wenn Sie Ihre Website im Vordergrund durchsuchen, wenn Sie mit Ihrem WordPress-Dashboard verbunden sind.

Divi Builder

Nachdem Sie Visual Builder aufgerufen haben, können Sie auf das graue Plus-Symbol klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module können nur innerhalb der Zeilen hinzugefügt werden. Wenn Sie eine neue Seite beginnen, vergessen Sie nicht, Ihrer Seite zuerst eine Zeile hinzuzufügen.

divi.png Forschungsmodul

Suchen Sie das Suchmodul in der Liste der Module und klicken Sie darauf, um es Ihrer Seite hinzuzufügen. Die Liste der Module ist durchsuchbar, dh Sie können auch das Wort "Suche" eingeben und dann auf "Enter" klicken, um zu suchen und das Suchmodul automatisch hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie von der Liste der Optionen des Moduls begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Konzeption et fortgeschritten .

Anwendungsbeispiel: Hinzufügen eines benutzerdefinierten Suchmoduls zu einer Blog-Seite in voller Breite

In diesem Beispiel zeige ich Ihnen, wie Sie ein Suchmodul hinzufügen, um ein Hauptaktionsaufruf oben auf einer Blogseite zu sein. Auf diese Weise können Benutzer problemlos und übersichtlich nach Blog-Inhalten suchen.

Diese Seite hat oben eine Kopfzeile in voller Breite mit dem Suchmodul direkt darunter. Unter dem Suchmodul befindet sich ein Blog-Modul, das das Layout des Rasters verwendet.

Beispiel-Blog mit Suchformular divi.jpg

Fügen Sie mithilfe von Visual Builder der Blogseite einen neuen Standardabschnitt mit einer Zeile mit voller Breite (1-Spalte) hinzu. Fügen Sie dann das Suchmodul in die Zeile ein.

Aktualisieren Sie die Einstellungen des Suchmoduls wie folgt:

Inhaltsoptionen

Reservierter Text: Suchen Sie in unserem Blog ...
Verstecken Sie die Schaltfläche: JA

Design-Optionen

Hintergrundfarbe des Eingabefeldes: # f8f8f8
Farbe des Platzhalters: # 888888
Schriftgröße eingeben: 16px
Eingabetextfarbe: # 888888
Höhe der Eingabezeile: 1em
Benutzerdefinierte Polsterung: 20px Oben, 20px Unten

Divi-Suchkonfiguration content.png

Einstellungen speichern

Gehen Sie jetzt zurück, um die Breite der Zeile zu ändern, die Ihr Suchmodul enthält. Legen Sie auf der Registerkarte Linienparameter-Design die Linie auf eine benutzerdefinierte Breite von 300 px fest. Dadurch bleibt das Suchmodul kompakt und auf der Seite zentriert.

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]

Konfiguration divi.png Breite

Das ist alles!

Inhaltsoptionen suchen

In der Registerkarte Inhalt finden Sie alle Inhaltselemente des Moduls, wie z. B. Text, Bilder und Symbole. All das kontrolliert was erscheint in Ihrem Modul immer auf dieser Registerkarte.

Modulsuche divi contenu.png

Platzhaltertext

Geben Sie den Text ein, den Sie als Platzhalter für das Suchfeld verwenden möchten.

Schaltfläche ausblenden

Wenn Sie diese Option aktivieren, wird die Schaltfläche Suchen ausgeblendet.

Seiten ausschließen

Wenn Sie diese Option aktivieren, werden die Seiten aus den Suchergebnissen ausgeschlossen.

Ausschließen von Objekten

Durch Aktivieren dieser Option werden Nachrichten aus den Suchergebnissen ausgeschlossen.

Kategorien ausschließen

Wählen Sie die Kategorien aus, die Sie aus den Suchergebnissen ausschließen möchten.

Administratorkennzeichnung

Dadurch wird die Modulbezeichnung im Konstruktor zur einfachen Identifizierung geändert. Wenn Sie die WireFrame-Ansicht in Visual Builder verwenden, werden diese Bezeichnungen im Modulblock der Divi Builder-Benutzeroberfläche angezeigt.

Suche Design-Optionen

Auf der Registerkarte Design finden Sie alle Stiloptionen des Moduls, z. B. Schriftarten, Farben, Größen und Abstände. Auf dieser Registerkarte können Sie das Erscheinungsbild Ihres Moduls ändern. Jedes Divi-Modul verfügt über eine lange Liste von Konstruktionsparametern, mit denen Sie alles ändern können.

divisuchendesign.png

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]

Hintergrundfarbe des Eingabefeldes

Hier können Sie die Hintergrundfarbe der Suchleiste ändern.

Platzhalterfarbe

Bevor das Suchfeld verwendet wird, befindet sich der Text des Platzhalters im Feld. Wenn Sie die Hintergrundfarbe des Felds angepasst haben, können Sie auch die Farbe des Platzhaltertexts anpassen, um sicherzustellen, dass dieser lesbar ist.

Textfarbe

Hier können Sie den Wert Ihres Textes auswählen. Wenn Sie auf einem dunklen Hintergrund arbeiten, sollte Ihr Text aktiviert sein. Wenn Sie mit einem klaren Hintergrund arbeiten, sollte Ihr Text dunkel sein.

Textausrichtung

Hiermit wird gesteuert, wie Ihr Text im Modul ausgerichtet wird.

Einreisepolizei

Sie können die Schriftart Ihres Eingabetexts ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden großer Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Open Sans-Schriftart für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch anpassen, indem Sie die Optionen Fett, Kursiv, Großbuchstaben und Unterstrichen verwenden.

Größe der Eingabeschrift

Hier können Sie die Größe Ihres Eingabetextes anpassen. Sie können den Bereichsschieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder den Wert der gewünschten Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Textfarbe eingeben

Standardmäßig werden alle Divi-Textfarben in Weiß oder Dunkelgrau angezeigt. Wenn Sie die Farbe Ihres Eingabetexts ändern möchten, wählen Sie die gewünschte Farbe im Farbwähler mit dieser Option.

Buchstabenabstand

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Eingabetext vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Regler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Höhe der Linie

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen Ihres Eingabetexts aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Feld ein. rechts vom Cursor eingegeben. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Knopf- und Rahmenfarbe

Dadurch werden der Hintergrund und die Farbe des Suchschaltflächenrahmens geändert.

Schaltflächenschriftart

Sie können die Schriftart Ihres Schaltflächentexts ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden großer Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Open Sans-Schriftart für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch anpassen, indem Sie die Optionen Fett, Kursiv, Großbuchstaben und Unterstrichen verwenden.

Schaltflächenschriftgröße

Hier können Sie die Textgröße Ihrer Schaltfläche anpassen. Sie können den Bereichsschieberegler ziehen, um den Text zu vergrößern oder zu verkleinern, oder den Wert der gewünschten Textgröße direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Schaltfläche Textfarbe

Standardmäßig werden alle Divi-Textfarben in Weiß oder Dunkelgrau angezeigt. Wenn Sie die Farbe Ihres Schaltflächentexts ändern möchten, wählen Sie mit dieser Option die gewünschte Farbe in der Farbauswahl aus.

Abstand der Buchstaben des Knopfes

Der Abstand der Buchstaben wirkt sich auf den Abstand zwischen den Buchstaben aus. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Schaltflächentext vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Regler ein. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Höhe der Linie der Schaltfläche

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen Ihres Schaltflächentexts aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, verwenden Sie den Bereichsregler, um den Abstand anzupassen, oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld ein befindet sich rechts vom Cursor. Die Eingabefelder unterstützen verschiedene Maßeinheiten. Das bedeutet, dass Sie je nach Wert Ihrer Größe "px" oder "em" eingeben können, um den Einheitentyp zu ändern.

Maximale Breite

Standardmäßig ist die maximale Breite der Suchleiste auf 100% festgelegt. Dies bedeutet, dass die Suchleiste in ihrer natürlichen Breite angezeigt wird, sofern die Breite der Suchleiste nicht die Breite der übergeordneten Spalte überschreitet. In diesem Fall ist die Suchleiste auf 100% der Spaltenbreite beschränkt. Wenn Sie die maximale Breite der Suchleiste weiter einschränken möchten, geben Sie hier den gewünschten Wert für die maximale Breite ein. Zum Beispiel würde ein Wert von 50% die Breite der Suchleiste auf 50% der Breite der übergeordneten Spalte begrenzen.

Benutzerdefinierter Rand

Der Rand ist der Abstand, der an der Außenseite Ihres Moduls zwischen dem Modul und dem nächsten Element darüber, darunter oder links und rechts davon eingefügt wird. Sie können einer der vier Seiten des Moduls benutzerdefinierte Randwerte hinzufügen. Entfernen Sie den hinzugefügten Wert aus dem Eingabefeld, um den benutzerdefinierten Rand zu entfernen. Standardmäßig werden diese Werte in Pixel gemessen. Sie können jedoch benutzerdefinierte Maßeinheiten in die Eingabefelder eingeben.

Benutzerdefinierte Polsterung

Füllung ist der in Ihrem Modul hinzugefügte Raum zwischen der Kante des Moduls und seinen internen Elementen. Sie können einer der vier Seiten des Moduls benutzerdefinierte Füllwerte hinzufügen. Entfernen Sie den hinzugefügten Wert aus dem Eingabefeld, um den benutzerdefinierten Rand zu entfernen. Standardmäßig werden diese Werte in Pixel gemessen. Sie können jedoch benutzerdefinierte Maßeinheiten in die Eingabefelder eingeben.

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]

Erweiterte Optionen des Forschungsmoduls

Auf der Registerkarte Erweitert finden Sie Optionen, die für erfahrene Webdesigner hilfreich sein könnten, z. B. benutzerdefinierte CSS- und HTML-Attribute. Hier können Sie benutzerdefiniertes CSS auf eines der vielen Elemente des Moduls anwenden. Sie können dem Modul auch benutzerdefinierte Klassen und CSS-IDs zuweisen, mit denen Sie das Modul in der Datei style.css Ihres untergeordneten Themas anpassen können.

divi advanced option module search.png

CSS-ID

Geben Sie eine optionale CSS-ID ein, die für dieses Modul verwendet werden soll. Eine ID kann zum Erstellen eines benutzerdefinierten CSS-Stils oder zum Erstellen von Links zu bestimmten Abschnitten Ihrer Seite verwendet werden.

CSS-Klasse

Geben Sie die optionalen CSS-Klassen ein, die für dieses Modul verwendet werden sollen. Mit einer CSS-Klasse kann ein benutzerdefinierter CSS-Stil erstellt werden. Sie können mehrere Klassen hinzufügen, die durch ein Leerzeichen getrennt sind. Diese Klassen können in Ihrem untergeordneten Divi-Design oder in dem benutzerdefinierten CSS-Stylesheet verwendet werden, das Sie Ihrer Seite oder Website mithilfe von Divi-Designoptionen oder Divi Builder-Seiteneinstellungen hinzufügen.

Benutzerdefiniertes CSS

Benutzerdefiniertes CSS kann auch auf das Modul und eines der internen Elemente des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element direkt benutzerdefinierte CSS-Stylesheets hinzufügen können. Die CSS-Einträge in diesen Parametern sind bereits in die Style-Tags eingeschlossen. Geben Sie einfach die durch Semikolon getrennten CSS-Regeln ein.

Sichtbarkeit

Mit dieser Option können Sie die Geräte steuern, auf denen Ihr Modul angezeigt wird. Sie können Ihr Modul auf Tablets, Smartphones oder Desktops einzeln deaktivieren. Dies ist nützlich, wenn Sie verschiedene Module auf verschiedenen Geräten verwenden oder das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente der Seite entfernen.

Andere Divi Tutorials

Dieser Artikel enthält Kommentare 3
  1. Hallo, danke für den Artikel. Ich habe eine Frage, kann das Suchformular nur für einen Abschnitt einer Seite verwendet werden? Zum Beispiel möchte ich für den FAQ-Bereich ein Suchformular einrichten, das nur auf die Fragen der FAQ beschränkt ist (+ 20 Fragen). Auf diese Weise muss der Benutzer nicht alle lesen, sondern findet nur dank des Suchformulars diejenigen mit den Schlüsselwörtern, die ihn interessieren. Danke im Voraus für deine Antwort.

  2. Vielen Dank für diesen Artikel, schön, die Seiten des Suchmoduls zu löschen, aber können Sie auch Seiten ausschließen, wenn Sie eine Suche mit der Lupe der Kopfzeile durchführen? danke

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
20 Aktien
Aktie12
tweet2
Registrieren6