Mit dem Suchmodul können Sie a Formular Suchen Sie irgendwo auf Ihrer Website. Diese Formular search ermöglicht es Ihren Besuchern, den gesamten Inhalt Ihrer Website zu durchsuchen, einschließlich aller Seiten und Blog-Beiträge. Dadurch erhalten Sie die Funktionalität des WordPress-Such-Widgets mit der Flexibilität, die Divi Builder bietet. Sie können nicht nur den Standort steuern Formen Suchen Sie auf der Seite, aber passen Sie auch das Design an.

So fügen Sie Ihrer Seite ein Suchmodul hinzu

Bevor Sie Ihrer Seite ein Suchmodul hinzufügen können, müssen Sie zuerst zu Divi Builder wechseln. Einmal die Divi-Thema auf Ihrer Website installiert ist, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builder über dem Post-Editor, wenn Sie eine neue Seite erstellen. 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 eingegeben haben, können Sie auf das graue Pluszeichen klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module können nur innerhalb von Zeilen hinzugefügt werden. Wenn Sie eine neue Seite starten, denken Sie daran, 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. Sie können also auch das Wort "Suche" eingeben und dann auf die Eingabetaste klicken, um das Suchmodul zu suchen und automatisch hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie von der Moduloptionsliste begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Technologie et fortgeschritten .

Anwendungsfallbeispiel: Hinzufügen eines benutzerdefinierten Suchmoduls zu einer Blogseite mit voller Breite

In diesem Beispiel zeige ich Ihnen, wie Sie ein Suchmodul als primären Aufruf zum Handeln oben auf einer Blog-Seite hinzufügen. Auf diese Weise können Benutzer Ihren Blog-Inhalt problemlos und ohne Unordnung durchsuchen.

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

Beispiel-Blog mit Suchformular divi.jpg

Fügen Sie mit Visual Builder der Blog-Seite 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 Eingabefelds: # f8f8f8
Platzhalterfarbe: # 888888
Eingabeschriftgröße: 16px
Textfarbe eingeben: # 888888
Höhe der Eingangszeile: 1em
Benutzerdefinierte Polsterung: 20px Oben, 20px Unten

Divi-Suchkonfiguration content.png

Einstellungen speichern

Kommen Sie nun zurück, um die Breite der Zeile zu ändern, die Ihr Suchmodul enthält. Geben Sie der Linie auf der Registerkarte Design der Linieneinstellungen eine benutzerdefinierte Breite von 300 Pixel. Dadurch bleibt das Suchmodul kompakt und konzentriert sich auf die Seite.

Konfiguration divi.png Breite

Das ist es!

Inhaltsoptionen suchen

Auf der Registerkarte Inhalt finden Sie den gesamten Inhalt des Moduls, z. B. Text, Bilder und Symbole. All das steuert 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 Beschriftungen im Modulblock der Divi Builder-Oberfläche angezeigt.

Suche Design-Optionen

Auf der Registerkarte Design finden Sie alle Optionen für das Modul-Styling, 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 Designeinstellungen, mit denen Sie alles optimieren können.

divisuchendesign.png

Hintergrundfarbe des Eingabefeldes

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

Platzhalterfarbe

Bevor das Suchfeld verwendet wird, ist der Platzhaltertext im Feld vorhanden. Wenn Sie die Hintergrundfarbe des Felds angepasst haben, können Sie auch die Farbe des Platzhaltertextes anpassen, um sicherzustellen, dass er 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 hellem 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 Eingabetextes ändern, indem Sie die gewünschte Schriftart aus dem Dropdown-Menü auswählen. Divi wird mit Dutzenden großartiger Schriftarten geliefert, die von Google Fonts unterstützt werden. Standardmäßig verwendet Divi die Schriftart Open Sans für den gesamten Text auf Ihrer Seite. Sie können den Stil Ihres Textes auch mit Fett, Kursiv, Großbuchstaben und Unterstreichungsoptionen anpassen.

Geben Sie die Schriftgröße ein

Hier können Sie die Größe Ihres Eingabetextes anpassen. Sie können den Bereichsregler ziehen, um die Größe Ihres Texts zu erhöhen oder zu verringern, oder den gewünschten Textgrößenwert direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Sie können also je nach Größenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Textfarbe eingeben

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

Buchstabenabstand

Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. Wenn Sie den Abstand zwischen den einzelnen Buchstaben in Ihrem Eingabetext vergrößern möchten, passen Sie den Abstand mit dem Bereichsregler an oder geben Sie die gewünschte Abstandsgröße in das Eingabefeld rechts neben dem Schieberegler ein. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Sie können also je nach Größenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Höhe der Linie

Die Zeilenhöhe wirkt sich auf den Abstand zwischen den einzelnen Zeilen Ihres Eingabetextes aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, passen Sie den Abstand mit dem Bereichsregler an oder geben Sie die gewünschte Abstandsgröße in das Feld ein. Eintrag rechts vom Cursor. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Sie können also je nach Größenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Knopf- und Rahmenfarbe

Dadurch werden der Hintergrund und die Rahmenfarbe der Suchschaltfläche geändert.

Schaltflächenschriftart

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

Schaltflächenschriftgröße

Hier können Sie die Größe Ihres Schaltflächentextes anpassen. Sie können den Bereichsregler ziehen, um die Größe Ihres Texts zu erhöhen oder zu verringern, oder den gewünschten Textgrößenwert direkt in das Eingabefeld rechts neben dem Schieberegler eingeben. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Sie können also je nach Größenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Schaltfläche Textfarbe

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

Abstand der Buchstaben des Knopfes

Der Buchstabenabstand beeinflusst den Abstand zwischen den einzelnen Buchstaben. 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 Schieberegler ein. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Dies bedeutet, dass Sie je nach Größenwert "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ächentextes aus. Wenn Sie den Abstand zwischen den einzelnen Zeilen vergrößern möchten, können Sie den Abstand mit dem Bereichsregler anpassen oder die gewünschte Abstandsgröße in das Eingabefeld eingeben befindet sich rechts vom Cursor. Die Eingabefelder unterstützen unterschiedliche Maßeinheiten. Sie können also je nach Größenwert "px" oder "em" eingeben, um den Einheitentyp zu ändern.

Maximale Breite

Standardmäßig ist die maximale Breite der Suchleiste auf 100% eingestellt. Dies bedeutet, dass die Suchleiste in ihrer natürlichen Breite angezeigt wird, es sei denn, die Breite der Suchleiste überschreitet die Breite der übergeordneten Spalte. In diesem Fall wird die Suchleiste auf 100% der Spaltenbreite begrenzt. Wenn Sie die maximale Breite der Suchleiste weiter einschränken möchten, können Sie dies tun, indem Sie hier den gewünschten Wert für die maximale Breite eingeben. Ein Wert von 50% würde beispielsweise 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 hinzugefügt wird. Sie können jeder der vier Seiten des Moduls benutzerdefinierte Randwerte hinzufügen. Entfernen Sie den Mehrwert 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 Raum, der innerhalb Ihres Moduls zwischen der Kante des Moduls und seinen internen Elementen hinzugefügt wird. Sie können jeder der vier Seiten des Moduls benutzerdefinierte Füllwerte hinzufügen. Entfernen Sie den Mehrwert 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.

Erweiterte Optionen des Forschungsmoduls

Auf der Registerkarte "Erweitert" finden Sie Optionen, die erfahrene Webdesigner möglicherweise als nützlich erachten, z. B. benutzerdefinierte CSS- und HTML-Attribute. Hier können Sie benutzerdefiniertes CSS auf jedes der vielen Elemente des Moduls anwenden. Sie können dem Modul auch benutzerdefinierte CSS-Klassen und -IDs zuweisen, mit denen Sie das Modul in der style.css-Datei 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 verwendet werden, um einen benutzerdefinierten CSS-Stil zu erstellen oder um auf bestimmte Abschnitte Ihrer Seite zu verlinken.

CSS-Klasse

Geben Sie die optionalen CSS-Klassen ein, die für dieses Modul verwendet werden sollen. Eine CSS-Klasse kann zum Erstellen eines benutzerdefinierten CSS-Stils verwendet werden. Sie können mehrere Klassen hinzufügen, die durch ein Leerzeichen getrennt sind. Diese Klassen können in Ihrem untergeordneten Divi-Design oder im benutzerdefinierten CSS-Stylesheet verwendet werden, das Sie Ihrer Seite oder Ihrer Website mithilfe der Divi-Designoptionen oder der Einstellungen auf der Divi Builder-Seite hinzufügen.

Benutzerdefiniertes CSS

Benutzerdefiniertes CSS kann auch auf das Modul und alle Interna des Moduls angewendet werden. Im Abschnitt Benutzerdefiniertes CSS finden Sie ein Textfeld, in dem Sie jedem Element benutzerdefinierte CSS-Stylesheets direkt hinzufügen können. CSS-Einträge in diesen Einstellungen sind bereits in Stil-Tags eingeschlossen. Geben Sie einfach die durch Semikolons 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 Mods auf verschiedenen Geräten verwenden möchten oder wenn Sie das mobile Design vereinfachen möchten, indem Sie bestimmte Elemente von der Seite entfernen.

[vc_row center_row = "yes"] [vc_column width = "1/2"] [vcex_button target = "blank" layout = "erweitert" align = "center" font_family = "Raleway" font_weight = "700" style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] DIVI-THEMA HERUNTERLADEN [/ vcex_button] [/ width_column] [»vc_col] vc_column] 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center "font_family =" Raleway "font_weight =" 700 "style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] DOWNLOAD TEMPLATES DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Andere Divi Tutorials