Möchten Sie wissen, wie Sie Artikelauszüge beim Hover in Divi anzeigen können?
Die Vorschau von Blogpost-Snippets beim Hovern kann eine effektive Möglichkeit sein, ein kompaktes Rasterlayout für Ihre Blogposts beizubehalten, ohne diese Snippets ganz aufzugeben.
Die Idee ist also, Snippets zunächst auszublenden und sie dann anzuzeigen, wenn Sie mit der Maus über einen Beitrag im Raster fahren. Daher können Leser mehr Posts sehen und gleichzeitig Ausschnitte der Posts sehen, die sie interessieren.
In diesem Tutorial zeigen wir Ihnen also, wie Sie diese Blog-Post-Snippets für den Hover-Toggle-Effekt in Divi erstellen.
Lassen Sie uns beginnen!
Übersicht
Hier ist zunächst ein Überblick darüber, was wir in diesem Tutorial erstellen werden.
Erstellen des Blog-Modul-Layouts
Zuerst müssen wir ein grundlegendes Layout für unsere Blogbeiträge erstellen. Für dieses Tutorial fügen wir einer Spalte eine Zeile hinzu und fügen ein Blog-Modul darin ein.
Erstellen Sie eine Linie
Fügen Sie zunächst eine Zeile mit einer Spalte in den Abschnitt ein
Linienbreite
Gehen Sie dann zu den Leitungseinstellungen. Ändern Sie dann auf der Registerkarte „Stil“ unter „Größe“ die Breiten wie folgt:
Maximale Breite: 90 %
Maximale Breite: 1200px
Fügen Sie ein Blog-Modul hinzu
Fügen Sie dann ein Blog-Modul in die Spalte der zuvor erstellten Zeile ein.
Blog-Modul-Einstellungen
Gehen Sie dann zu den Einstellungen des Blog-Moduls, setzen Sie auf der Registerkarte Inhalt unter Elemente die Option „Weiterlesen-Schaltfläche anzeigen“ auf „Ja“.
Gehen Sie nun auf die Registerkarte Stil, wählen Sie unter Vorlage die Vorlage „Raster“ als Layout für den Blog aus.
Gehen Sie schließlich zur Registerkarte Erweitert und fügen Sie die folgende CSS-Klasse hinzu:
CSS-Klasse: Toggle-Blog-Auszug
Anschließend verwenden wir diese Klasse im nächsten Schritt als Selektor für unseren benutzerdefinierten CSS-Code.
Fügen Sie benutzerdefiniertes CSS mit dem Code-Modul hinzu.
Zu diesem Zeitpunkt sind unsere Blog-Beiträge in einem Raster angeordnet und dem Blog-Menü wurde eine benutzerdefinierte CSS-Klasse hinzugefügt. Wir werden also diesen CSS-Klassenselektor verwenden, um dieses Blog-Modul gezielt anzusprechen und einen Umschalteffekt hinzuzufügen, wenn wir mit der Maus über einen Artikel fahren.
Um CSS hinzuzufügen, verwenden wir das Code-Modul. Fügen Sie dazu ein Code-Modul unter dem Blog-Modul hinzu.
Fügen Sie als Nächstes das benutzerdefinierte CSS unten ein, das zum Erstellen des Artikel-Snippet-Umschalteffekts beim Hover benötigt wird. Stellen Sie vor allem sicher, dass Sie den CSS-Code zwischen den erforderlichen Style-Tags einfügen.
Fügen wir dem Blog-Modul mit dem Divi-Builder ein zusätzliches Styling hinzu
Jetzt, da das CSS vorhanden ist, um uns den Umschalteffekt für unsere Blog-Post-Snippets zu geben, können wir dem Blog-Modul mit dem Divi-Builder beliebige zusätzliche Stile hinzufügen.
Für dieses Beispiel nehmen wir minimale Anpassungen am Stil vor, aber Sie können auch Ihren eigenen Stil ausprobieren.
Stil des Artikeltitels
Titel bei schwachem Licht: Fetter Text
Titeltextfarbe: #6D6A7E
Titeltextgröße: 20px
Höhe der Titelzeile: 1.3 em
Textstil "Weiterlesen"
Lesen Sie mehr Schwaches Licht: Fetter Text
Lesen Sie mehr Kopierstil: TT
Textfarbe Lesen Sie mehr: #6D6A7E
Buchstabenabstand Weiterlesen: 1px
Zeilenhöhe Weiterlesen: 3.5 m
Ändern Sie die Anzeige der Textpaginierung
Paginierung anzeigen Schwaches Licht: Fetter Text
Textfarbe Paginierung anzeigen: #6D6A7E
Buchstabenabstand Paginierung anzeigen: 1px
Paginierung anzeigen Kopierstil: TT
Rand entfernen
Rahmenbreite des Rasterlayouts: 0px
Hover-Schattenbox-Stil
Schattenbox: Siehe Screenshot
Ausgangsposition: 0px
Box-Schattenunschärfe-Stärke: 38px
Schriftfarbe Untertitel: rgba (109,106,126,0.25)
Endergebnis
Fazit
Zusammenfassend lässt sich sagen, dass Ihnen das Hinzufügen einiger CSS-Snippets, wie in diesem Tutorial gezeigt, die Funktionalität bietet, die Sie benötigen, um Blog-Post-Snippets mit einem schönen Hover-Effekt zu rocken.
Das Wichtigste bei dieser Methode ist, dass wir dem Blog-Modul mit den integrierten Optionen von Divi nach Belieben zusätzliches Styling hinzufügen können. Darüber hinaus können Sie Post-Elemente anpassen, einschließlich des Hinzufügens weiterer Hover-Effekte.
Hoffentlich wird dies dazu beitragen, Ihrem Divi-Website-Blog einen zusätzlichen Schub in Design und Funktionalität zu verleihen. Erzähl uns von deinen Erfahrungen in den Kommentaren.
Müssen Sie mit Divi einen globalen Header für Ihre Website erstellen?
Eine globale Kopfzeile erscheint überall auf Ihrer Website, es sei denn, Sie haben einer Seite oder einem Beitrag eine andere Kopfzeile zugewiesen.
Fangen wir an!
Übersicht
Hier ist eine Vorschau des globalen Headers, den wir entwerfen werden.
Konfigurieren Sie Ihr Hauptmenü
Erstellen Sie zunächst Ihr Menü in den Darstellungseinstellungen Ihrer WordPress-Site.
Greifen Sie unter Divi auf die Option Theme Builder zu
Klicken Sie in den Divi-Theme-Optionen auf Theme Builder. Dort sehen Sie eine Standard-Website-Vorlage.
Fügen Sie einen globalen Header hinzu und erstellen Sie ihn
In der Standard-Website-Vorlage können Sie mit der Erstellung Ihrer benutzerdefinierten globalen Kopfzeile, des globalen Textkörpers und der globalen Fußzeile beginnen. Klicken Sie auf „Globalen Header hinzufügen“ und fahren Sie fort, indem Sie auf „Globalen Header erstellen“ klicken, um den Vorgang zu starten.
Abschnittseinstellungen
Sizing
Öffnen Sie die Abschnittseinstellungen, die Sie auf der Seite finden, ändern Sie auf der Registerkarte Stil die Abmessungen für verschiedene Bildschirmgrößen.
Maximale Breite: 100 %
Maximale Breite: 1280 Pixel (für PC und Tablet), 100 % (für Mobilgeräte)
Abstand
Entfernen Sie alle oberen und unteren inneren Ränder
Innerer Randscheitel: 0px
Unterer interner Rand: 0px
Grenze
Fügen Sie nun einen Randradius an der unteren linken und rechten Ecke des Abschnitts hinzu.
Unten links: 50px
Unten rechts: 50px
Schattenkiste
Lassen Sie uns auch einen subtilen Kastenschatten hinzufügen.
Box-Schattenunschärfe-Stärke: 60px
Schriftfarbe Untertitel: rgba(0,0,0,0.13)
Sichtbarkeit
Horizontaler Überlauf: Sichtbar
Vertikaler Überlauf: Sichtbar
Weisen Sie der Kopfzeile eine neue Zeile zu
Nachdem wir die allgemeinen Abschnittseinstellungen abgeschlossen haben, können wir mit dem Hinzufügen von Zeilen beginnen. Insgesamt benötigen wir zwei Zeilen; eine, die der Kopfzeile gewidmet ist, und eine, die die Anzeige von Menüelementen ermöglicht. Wir beginnen mit der Kopfzeile, indem wir eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:
Leitungseinstellungen
Hintergrundeinstellungen
Ohne der Linie Module hinzuzufügen, öffnen Sie die Linieneinstellungen und ändern Sie die Hintergrundfarbe.
Hintergrund: #38383F
Sizing
Ändern Sie dann die Liniengrößenparameter.
Benutzerdefinierte Bundstegbreite verwenden: JA
Spaltenabstand: 1
Maximale Breite: 100 %
Maximale Breite: 100 %
Anzeigen
Stellen wir nun sicher, dass die Spalten auf kleineren Bildschirmen nebeneinander angezeigt werden, indem wir diese CSS-Codezeile zum Hauptzeilenelement hinzufügen.
01 display: flex;
Bildmodul in Spalte 1 hinzufügen
Logo herunterladen
Nachdem Sie die Zeileneinstellungen vorgenommen haben, können Sie mit dem Hinzufügen von Modulen beginnen. Fügen Sie in Spalte 1 ein Bildmodul hinzu und laden Sie Ihr Logo hoch.
Ausrichtung
Gehen Sie zur Registerkarte Stil und richten Sie das Bild links aus.
Sizing
Ändern Sie auch die Breite des Moduls.
Abstand
Fügen Sie auch benutzerdefinierte Randwerte hinzu.
Fügen Sie das Social-Media-Tracking-Modul in Spalte 2 hinzu
Fügen Sie soziale Netzwerke hinzu
Kommen wir zur zweiten Spalte. Dort benötigen wir ein Social-Media-Tracking-Modul. Fügen Sie die sozialen Netzwerke Ihrer Wahl hinzu. Sie können so viele soziale Medien hinzufügen, wie Sie möchten.
Hintergrundfarbe des sozialen Netzwerks
Öffnen Sie als Nächstes jedes soziale Netzwerk einzeln und ändern Sie die Hintergrundfarbe in eine vollständig transparente Farbe.
Hintergrundfarbe: rgba (0,0,0,0)
Ausrichtung
Gehen Sie zurück zu den normalen Moduleinstellungen und ändern Sie dann die vollständige Ausrichtung des Moduls.
Symbol
Ändern Sie auch die Symboleinstellungen.
Symbolfarbe: #FFFFFF
Benutzerdefinierte Symbolgröße verwenden: Ja
Symbolschriftgröße: 16px (PC und Tablet), 12px (Telefon)
Abstand
Fügen Sie einen oberen Rand hinzu.
Fügen Sie das Button-Modul in Spalte 3 hinzu
Wechseln Sie in die dritte Spalte und fügen Sie ein Button-Modul mit einem Text Ihrer Wahl hinzu.
Ausrichtung
Ändern Sie die Ausrichtung der Schaltfläche auf der Registerkarte Stil.
Tasteneinstellungen
Passen Sie die Schaltflächeneinstellungen wie folgt an:
Benutzerdefinierte Stile für die Schaltfläche verwenden: Ja
Buchstabenabstand der Schaltflächen: 5 px (Desktop), 3 px (Tablet und Telefon)
Schriftart-Schaltfläche: Keine öffnen
Schaltfläche „Weiches Licht“: Fettgedruckter Text
Schaltflächenstil kopieren: TT
Abstand
Marginwerte anpassen.
Weisen Sie der Menüleiste eine neue Zeile zu
Nachdem Sie die Zeile für den globalen Header ausgefüllt haben, können Sie direkt darunter eine weitere Zeile hinzufügen.
Leitungseinstellungen
Sizing
Öffnen Sie, ohne noch Module hinzuzufügen, die Linieneinstellungen und ändern Sie die Größeneinstellungen auf der Registerkarte Stil.
Abstand
Entfernen Sie dann alle unteren und oberen Ränder.
Fügen Sie der Spalte ein Menümodul hinzu
Wählen Sie Menü
Fügen Sie als Nächstes ein Menümodul zur Spalte hinzu und wählen Sie das Menü aus, das Sie im ersten Teil dieses Tutorials erstellt haben.
Bereitstellung
Wechseln Sie auf die Registerkarte Stil und ändern Sie die Layouteinstellungen wie folgt:
Connections
Ändern Sie auch die Farbe des aktiven Links auf der Registerkarte Stil.
Farbe des aktiven Links: #ffae25
Menüführung
Machen Sie dasselbe für die Linienfarbe des Dropdown-Menüs in den Dropdown-Menüeinstellungen.
Farbe der Dropdown-Zeilen: #ffae25
Symbol
Farbe des Hamburger-Menüsymbols: #ffae25
Menütext
Mit Menütexteinstellungen.
Menüschriftart: Prata
Menütextfarbe: #000000
Header und Menüleiste bleiben oben
Bereichseinstellungen öffnen
Sobald Sie die zweite Zeile ausgefüllt haben, müssen Sie nur noch sicherstellen, dass der Abschnitt oben auf unseren Seiten und Beiträgen bleibt. Dazu öffnen wir erneut die Abschnittseinstellungen.
Fügen Sie dem Hauptelement benutzerdefiniertes CSS hinzu
Als nächstes gehen wir zur Registerkarte „Erweitert“ und fügen dem Hauptelement des Abschnitts einige Zeilen CSS-Code hinzu.
01 position: fixed;
02 top: 0;
03 left: 0;
04 right: 0;
Speichern Sie globale Header- und Design-Builder-Optionen
Nachdem Sie das gesamte globale Header-Design fertiggestellt haben, speichern Sie das Design, bevor Sie das Vorlagenlayout verlassen. Sobald Sie das Vorlagenlayout verlassen haben, speichern Sie Ihre gesamten Theme Builder-Änderungen und Sie sind fertig!
Übersicht
Nachdem wir nun alle Schritte durchlaufen haben, werfen wir einen letzten Blick auf das Ergebnis.
Fazit
In diesem Artikel haben wir Ihnen gezeigt, wie Sie mit dem neuen Theme Builder von Divi einen benutzerdefinierten globalen Header erstellen. Dieses Tutorial zeigt, wie einfach es ist, schöne Überschriften zu erstellen und sie auf Ihre gesamte Website oder auf bestimmte benutzerdefinierte Beitragstypen anzuwenden.
Wir hoffen, dass es Ihnen beim Anpassen Ihrer Website mit Theme Builder hilft.
Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie uns bitte einen Kommentar in der Kommentarbereich unten.
Um dieses Tutorial abzuschließen, benötigen Sie die Pro-Version von Elementor, da wir benutzerdefinierten CSS-Code verwenden, der nur von dieser Version von Elementor unterstützt wird.
Lassen Sie uns einen Abschnitt mit 2 Spalten erstellen und dann im Seitenbereich die definieren Hauteur von Mindesthöheund dann Mindesthöhe lass uns auf klicken VH und stellen Sie den Schieberegler auf ein 100.
Lassen Sie uns das Bild-Widget in die linke Spalte ziehen und ein Bild aus unserer Bibliothek einfügen.
Fügen wir in der rechten Spalte a ein Titel-Widget mit dem Titel Wählen Sie das Beste. Auf der Registerkarte Style lass uns auf klicken Typographie und ändern Sie die Zeilenhöhe bei 1.
Lassen Sie uns unterhalb des Titel-Widgets Folgendes hinzufügen: a Texteditor-Widget.
Lassen Sie uns über dem Titel-Widget ein Separator-Widget ablegen. Geben Sie in dessen Inhalts-Tab ein 270 für Breite. Klicken wir auf Text für Element hinzufügen und geben Sie dann ein Trend als Texte. Auf der Registerkarte Style, ändern Sie das Fett und die Lücke von 2.
Klicken Sie im Bereich Text auf Typographie, ändern wir die Schriftart, die Größe von 18, die Fett von 600.
Lassen Sie uns unter dem Inhaltseditor-Widget ein ablegen Interner Abschnitt, löschen Sie eine der Spalten des internen Abschnitts und fügen Sie letztere ein a Button-Widget
Ändern wir die Schaltfläche, indem wir zum Seitenbereich gehen und auf der Registerkarte „Inhalt“ auf klicken Icon-Bibliothek von Ikon und fügen Sie das Symbol ein Warenkorb, löschen wir auch den Inhalt der Schaltfläche on Text
Gehen wir zur Registerkarte Style der Taste und hinein Grenzradius, klicke auf % und ergreifen 50 für alle Bordsteinradien und innen Interne Ränder, greifen wir zu 20.
Lassen Sie uns die Farbe der Schaltfläche anpassen, indem Sie die Farbe der Schaltfläche ändern, indem Sie auf klicken klassisch für Hintergrundtyp und Lassen Sie uns die Farbe entsprechend der Hervorhebungsfarbe auf dem Bild ändern.
Klicken Sie dann auf die Registerkarte fortgeschritten unserer Taste, dann weiter Positionierung und Breite wählen Inline (automatisch). Im Abschnitt Erweitert vonRegisterkarte Erweitert, greifen wir zu 10 für eine rechter Rand.
Lassen Sie uns diese Schaltfläche viermal duplizieren und die Farben dieser Schaltflächen ändern.
Als Nächstes duplizieren wir unser Bild-Widget viermal und ändern dann die Bilder.
In L 'Registerkarte „Erweitert“, greifen wir zu alle Bilder auf dem Gebiet CSS-Klassen von jedem unserer Bilder.
Dann auf dem Feld CSS-ID Geben Sie red-image für das Bild mit roter Hervorhebung, green-image für das Bild mit grüner Hervorhebung und brown-image für das Bild mit brauner Hervorhebung usw. ein.
Wählen wir unsere aus Abschnitt und in derRegisterkarte Erweitert, im Feld Maßgeschneidert CSS kopieren Sie das folgende Code-Snippet und fügen Sie es ein:
Lassen Sie uns die erste Schaltfläche im Feld auswählen Benutzerdefinierte Attribute von Abschnitt Attribute, kopieren Sie das folgende Code-Snippet und fügen Sie es ein:
data-showme|IMAGE-ID-NAME
Lassen Sie uns den IMAGE-ID-NAME-Teil durch die IDs Ihrer Schaltflächen ändern, dies sind die IDs für das rote Bild, das grüne Bild und das blaue Bild und so weiter.
Ändern wir also für jede Schaltfläche den IMAGE-ID-NAME-Code in die Farbe der entsprechenden Schaltfläche
Aktualisieren Sie Ihre Arbeit und zeigen Sie sie im Desktop-, Tablet- und Smartphone-Modus an, während Sie Ihre Schaltflächen testen.
Im Smartphone-Modus können Sie beispielsweise die Schaltflächen mittig ausrichten, die Ränder reduzieren und vieles mehr.
Los geht's, Sie haben diese Aufgabe gerade einfach erledigt.
Da ist es ! Das war es für diesen Artikel, der Ihnen zeigt, wie Sie ein Bild ändern, wenn Sie mit der Maus über einen Text fahren. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, lassen Sie es uns innerhalb wissen commentaires.
Suchen Sie die besten WordPress-Kontaktformular-Plugins?
Es ist egal, ob es ist ein Kontaktformular, Abonnement, bestellen oder ein Quiz, solange dieses Formular schön ist, wird es Ihrer Website oder Ihrem Blog immer ein professionelles Aussehen verleihen. Ein Kontaktformular ist eine großartige Möglichkeit, Ihren Lesern die Möglichkeit zu geben, mit Ihnen in Kontakt zu treten, ohne Ihre E-Mail-Adresse anzugeben.
Während die meisten WordPress-Themes sind Bei integrierten Kontaktformularen ist es häufig vorzuziehen, ein eigenes Formular mit einem speziellen Plugin zu erstellen. Dieser Ansatz ermöglicht es Ihnen Passen Sie den Look an, den Sie Ihrer Website verleihen möchten. zusätzliche Felder hinzufügen; Kurz gesagt, Sie haben die volle Kontrolle über Ihre Formulare.
Es gibt viele erstklassige WordPress-Plugins auf dem Gebiet, die eine Reihe verschiedener Funktionen bieten. Die Auswahl muss nach Ihren Bedürfnissen erfolgen. Aber damit Sie Ihre seltene Perle schnell finden, sind Sie hier richtig die besten Premium-WordPress-Plugins, ideal zum Erstellen eines professionellen Kontaktformulars auf Ihrer Website oder Ihrem Blog.
WPForms ist das anfängerfreundlichste WordPress-Kontaktformular-Plugin. Es wurde mit einem Ziel erstellt: jeweils ein WordPress-Formular-Plugin zu erstellen. einfach und kraftvoll. Sein visueller Formularersteller macht es zum benutzerfreundlichsten Formular-Plugin für WordPress.
Es ist kostenlos im offiziellen WordPress-Plugin-Verzeichnis verfügbar, was bedeutet, dass Sie es kostenlos auf so vielen Websites installieren können, wie Sie möchten. Diese Version enthält alle grundlegenden Kontaktformularfunktionen, einschließlich grundlegender Formularfelder, Captcha zum Schutz vor Spam, E-Mail-Benachrichtigungen und einer Dankesseite für die Formularbestätigung.
Mit der Premium-Version können Sie die Funktionalität erweitern, sodass Sie jede Art von Formularen erstellen können, z. B. mehrseitige Formulare, E-Mail-Abonnementformulare, Zahlungsformulare, Bestellformulare usw.
Sie können alle Ihre Formularübermittlungen direkt in Ihrem WordPress-Dashboard sehen und personalisierte E-Mail-Benachrichtigungen erhalten. Sie können sogar bedingte Benachrichtigungen einrichten, damit die richtige Person in Ihrem Team benachrichtigt wird.
Ninja Kick ist ein Premium-Plugin für WordPress-Kontaktformulare, mit dem Ihre Besucher das Kontaktformular sofort anzeigen können, ohne auf das Laden der vollständigen Kontaktseite warten zu müssen.
Dieses WordPress-Plugin enthält 3 großartige Themen, eine Leiste, die sich dem Teilen in sozialen Netzwerken und der Integration von widmet Mailchimp und umfangreiche Anpassung seines Aussehens. Er benutzt moderne CSS-Übergängeauf ein Layout, das auf Änderungen der Bildschirmgröße reagiert, auf Mobilgeräten gut funktioniert und perfekt auf Berührungen reagiert.
Slick Popup Pro ist ein ziemlich einfaches und leichtes Premium-WordPress-Plugin, das jede vom Plugin erstellte Form konvertiert Kontaktformular 7 in einem Popup. Sie verwendet das Formular und konvertiert es in ein schönes und perfekt ansprechendes Popup.
Das Formular-Popup kann verschiedene Verwendungszwecke haben, einschließlich: ein Informationssammlungsformular, ein Kontaktformular, ein Anmeldeformular, ein Angebotsformular, ein Vorschlags- / Beschwerdeformular und andere.
W8 Contact Form ist eines der beliebtesten Premium-Kontaktformular-Plugins in WordPress.
Es bietet viele Funktionen wie die Übermittlung an mehrere Empfänger, Animationsunterstützung, unbegrenzte Erstellung von Formularen, verschiedene Stile und eine Vielzahl zusätzlicher Anpassungsoptionen.
Darüber hinaus bietet es Ihrer Website oder Ihrem Blog ein professionelles System, mit dem Sie leichter mit Ihren Kunden in Kontakt treten können. Sie können alle Ihre Formulare an Ihre Bedürfnisse und Ihren Geschmack anpassen.
Formidable Forms ist das fortschrittlichste WordPress-Formular-Plugin auf dem Markt. Sie sind darauf spezialisiert, Entwicklern dabei zu helfen, komplexe formularzentrierte Lösungen schnell zu erstellen. Formidable Forms ist ein All-in-One-WordPress-Formularersteller, der mit leistungsstarken Erweiterungen ausgestattet ist, die Ihnen dabei helfen, über einfache Kontaktformulare hinauszugehen.
Sie können die Drag-and-Drop-Oberfläche verwenden, um erweiterte Formulare wie Quiz, Umfragen, Zahlungsformulare, Registrierungsformulare, Profilformulare usw. zu erstellen. Fortgeschrittene Benutzer werden die Formidable Views-Funktion wirklich lieben, da sie es Ihnen ermöglicht, von Benutzern übermittelte Daten auf dem Front-End Ihrer Website zu formatieren, zu filtern und anzuzeigen.
Sie können damit formularbasierte Lösungen erstellen, z. B. Verzeichnisse, Job-Website-Listen, Veranstaltungskalender, Verwaltungssysteme, Bewertungssysteme usw. Sie können auch erweiterte Berechnungsfelder von Formidable Forms verwenden, um leistungsstarke Bestellformulare sowie intelligente Rechner wie Hypothekenrechner, Kfz-Zahlungsrechner, Angebotsanforderungsrechner und mehr zu erstellen.
Ohne Zweifel ist das Premium Gravity Forms WordPress Plugin eines der Plugins die am beliebtesten auf dieser Liste. Letzte Woche haben Daten von Datanyze gezeigt, dass dies der Fall istWird auf 53 verwendet% der besten Websites, die von Alexa als gehostete Formulare klassifiziert wurden.
Mit GravityForms können Sie mithilfe eines intuitiven visuellen Editors Ihre eigenen Formulare entwerfen und erstellen. Seine Hauptmerkmale umfassen: einfache und intuitive Erstellung von Kontaktformen, dieQuizvorstellung, die Erstellung von Umfragen, die Erstellung vonZitate, die Anfallskontrolle, die Unterstützung vonStandard- und Advanced-Hamps und vieles mehr.
Die Preise beginnen bei 39 USD pro Jahr für eine persönliche Lizenz und Kundensupport. Es hat auch viele Add-Ons (Extensions) verfügbar, mit dem Sie Gravity Forms integrieren können MailChimp, PayPal und andere Dienste.
Wenn das GravityForms-Plugin das beliebteste Premium-WordPress-Plugin ist, ist ContactForm 7 mit über 5 Millionen Downloads wahrscheinlich das beliebteste kostenlose Plugin
ContactForm 7 ist einfach zu bedienen. Es kann mehrere Kontaktformulare verarbeiten und Sie können Formulare mit HTML anpassen. Dieses Plugin unterstützt auch AJAX-Validierung, das CAPTCHA et Spam-Filter mit Akismet.
Wenn Sie nach einer kostenlosen und leistungsstarken Lösung suchen, um ein Kontaktformular auf Ihrer WordPress-Website zu erstellen, ist dieses Plugin genau das Richtige für Sie.
Ein weiteres beliebtes Plugin ist das WordPress Premium Ninja Forms Plugin. Es verfügt über eine benutzerfreundliche Drag & Drop-Oberfläche und ermöglicht das Erstellen von Kontaktformularen, E-Mail-Erfassungsformularen oder anderen benötigten Formularen.
Einige Funktionen dieses Plugins sind: ein Vorschaumodus zur Verfügung, Optionen zum Anpassen von Stilen und Layout, l'' Import- und Exportoptionen, Unterstützung für Anti-Spam-Felder, dWiederverwendbare benutzerdefinierte Felder und andere.
FormCraft ist ein einfaches und intuitives Premium-WordPress-Plugin, das dank seiner Drag-and-Drop-Oberfläche das Erstellen komplexer und ansprechender Formulare ermöglicht, ohne dass Code geschrieben werden muss.
Dieses Plugin bietet: p Unterstützung20-Spezialfelder lesen, tDrei Arten der Formularanzeige (Popup, mobil und fest)un Analyseformular, mehrere Styling-Optionen, Unterstützung für mathematische Formeln, Unterstützung für bedingte Logik, nahtlose Integration mit anderen WordPress-Plugins, Vorhandensein vieler Vorlagen und vieles mehr.
Mit 36 US-Dollar ist dieses WordPress-Plugin nicht teuer, aber es lohnt sich auf jeden Fall, wenn Sie nach einem leistungsstarken, flexiblen und anpassbaren Plugin suchen, um ein schönes Kontaktformular zu erstellen.
Das Kontaktformular ist ein erstklassiges WordPress-Plugin und ein einfaches Tool mit zahlreichen Anpassungsoptionen, mit denen Sie ein klares und ermutigendes Formular anzeigen können, auf dem Ihre Besucher Sie kontaktieren können, indem sie ihre Nachricht hinterlassen.
Richten Sie einfach die E-Mail-Adresse ein, unter der Sie die Nachrichten erhalten möchten, und verwenden Sie sie, um Ihr Unternehmen in die profitabelste Richtung zu führen.
Voila! Das war's für diese Liste der besten Premium-WordPress-Plugins Erstellung des Kontaktformulars. Wenn Sie Bedenken oder Vorschläge in diesem Bereich haben, lesen Sie den Abschnitt commentaires um darüber zu diskutieren.
Möchten Sie erfahren, wie Sie Gutenberg deaktivieren und den klassischen Editor in WordPress beibehalten können. Oder sogar von einem Verlag zu einem anderen wechseln?
Gutenberg ist der Standard-Blockeditor in WordPress, der den klassischen WordPress-Editor ersetzt hat. Vielen Anwendern fällt die Anpassung schwer und sie behalten lieber den klassischen Editor bei.
In diesem Artikel zeigen wir dir, wie du Gutenberg ganz einfach deaktivieren und den klassischen Editor in WordPress behalten kannst.
Was ist Gutenberg?
Gutenberg ist der Entwicklungsname für den Blockeditor in WordPress. Der Block-Editor wurde mit dem Ziel erstellt, das WordPress-Schreiberlebnis zu modernisieren.
Es versucht, als zu fungieren WordPress Page Builder-Plugin und ermöglicht das Ziehen und Ablegen von Elementen in einen Beitrag oder eine Seite. Das Ziel ist es, mehr Flexibilität zu bieten und es WordPress-Benutzern zu ermöglichen, einzigartige Layouts für ihre Inhalte mit Rich-Media-Inhalten zu erstellen.
Seit der Veröffentlichung von WordPress 5.0 ist der Block-Editor nun der standardmäßige WordPress-Editor.
Warum den Gutenberg-Editor in WordPress deaktivieren?
Viele WordPress-Nutzer fühlen sich seit Jahren wohler mit dem klassischen Editor.
Da der Blockeditor relativ neu ist, sind einige Plugins noch nicht damit kompatibel.
Glücklicherweise gibt es ein WordPress-Core-Team-Plugin, mit dem Sie den klassischen Editor auch auf WordPress 5.0 oder höher verwenden können.
Sehen wir uns an, wie Sie Gutenberg einfach deaktivieren und den klassischen WordPress-Editor weiterhin verwenden können.
Methode 1. Deaktivieren Sie Gutenberg mit dem Classic Editor Plugin
Für diese Methode verwenden wir das Classic Editor-Plugin, das von Top-WordPress-Mitwirkenden entwickelt und gepflegt wird.
Das Plugin funktioniert nach der Installation und deaktiviert den Gutenberg-Editor nach der Aktivierung.
Dieses Plugin gibt Ihnen auch die Möglichkeit, Gutenberg und den Classic-Editor gleichzeitig zu behalten. Sie können es in den Plugin-Einstellungen konfigurieren.
Gehen Sie einfach auf die Seite Einstellungen -> Schreiben in Ihrem WordPress-Adminbereich. Sie sehen die Option dazu unter „Einstellungen des klassischen Editors“.
Vergessen Sie nicht, auf die Schaltfläche zu klicken Änderungen speichern um Ihre Einstellungen zu speichern.
Wenn Sie sich im Gutenberg-Editor befinden, können Sie jetzt auf eine neue Metabox zugreifen, die Sie zum Wechsel zum klassischen Editor führt.
Sie können auch ältere Artikel mit dem klassischen Editor bearbeiten. Gehen Sie einfach auf die Seite Beiträge -> Alle Beiträge und unter den Beiträgen wird ein Link „Bearbeiten (klassisch)“ angezeigt.
Methode 2. Verwenden Sie den klassischen Editor mit deaktiviertem Gutenberg-Plugin
Wenn Sie Gutenberg für einige deaktivieren möchten Benutzerregeln und Beitragstypen, diese Methode hilft Ihnen dabei.
Nach der Aktivierung müssen Sie die Seite besuchen Einstellungen -> Gutenberg deaktivieren um die Plugin-Einstellungen zu konfigurieren.
Standardmäßig deaktiviert das Plugin Gutenberg überall für alle Benutzer auf Ihrer Website. Wenn Sie es jedoch auf bestimmte Benutzerrollen und Beitragstypen beschränken möchten, müssen Sie das Kontrollkästchen „ Komplett deaktivieren ".
Wenn Sie dieses Kontrollkästchen deaktivieren, werden weitere Optionen zum selektiven Deaktivieren von Gutenberg für bestimmte Benutzerrollen, Beitragstypen, Themenvorlagen oder Beiträge angezeigt.
Diese Option ist nützlich, wenn Sie ein WordPress-Plugin verwenden, das nicht mit Gutenberg kompatibel ist, aber Gutenberg für andere Bereiche Ihrer Website verwenden möchten.
WordPress ist der beliebteste Website-Builder der Welt und betreibt über 43 % aller Websites im Internet.
Es verfügt über Tausende von Plugins und Themen und unterstützt alle Arten von Websites, von E-Commerce-Shops bis hin zu Mitgliedergemeinschaften.
Viele Tools von Drittanbietern verlassen sich jedoch immer noch stark auf den klassischen WordPress-Editor und sind möglicherweise nicht vollständig mit dem Blockeditor kompatibel.
Wenn ja, könnten diese Einstellungen für Sie sehr nützlich sein.
Vergessen Sie nicht, auf die Schaltfläche zu klicken Änderungen speichern um Ihre Einstellungen zu speichern.
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.
So ! Das war es für diesen Artikel. Wir hoffen, dass dieser Artikel Ihnen geholfen hat, Gutenberg zu deaktivieren und den klassischen Editor in WordPress beizubehalten.
Müssen Sie Ihre WordPress-Permalinks neu generieren?Finden Sie es in diesem WordPress-Tutorial heraus
Wenn Sie den Inhalt Ihrer Website nicht sehen können, können Ihre Besucher dies auch nicht. Kaputte Links und 404-Fehler können weh tun die Benutzererfahrung und Ihre Position in SEO-Rankings.
In diesem Artikel zeigen wir Ihnen, wie Sie diese defekten URLs beheben können, indem Sie Ihre Permalinks in WordPress neu generieren. Wir werden auch darüber sprechen, was diesen Fehler verursacht und wie Sie defekte Links erkennen, bevor Ihre Besucher sie bemerken.
Warum muss ich Permalinks in WordPress neu generieren?
Meistens sind die URLs Ihrer WordPress-Site dauerhaft und verursachen keine Probleme. Sie funktionieren einfach.
Manchmal können Sie jedoch auf einen Link klicken und erhalten eine erreur 404. Möglicherweise erhalten Sie sogar einen 404-Fehler, wenn Sie versuchen, auf Ihre gesamte WordPress-Website zuzugreifen.
Das passiert manchmal danach Migration Ihrer WordPress-Site auf einen neuen Host oder Server. Dies kann auch nach der Installation eines neuen WordPress-Plugins passieren. In der Tat modifizieren einige WordPress-Plugins die f.htaccess-Datei Ihrer Website ohne Ihr Wissen. Dies kann sich auf verschiedene Weise auf Ihre Website auswirken, einschließlich der Beschädigung Ihrer URLs.
Remarque: Für dieses Tutorial müssen Sie sich beim WordPress-Dashboard anmelden können.
Häufig kann die Regenerierung Ihrer Permalinks eine schnelle und einfache Lösung für diese Probleme sein. Mal sehen, wie das geht.
So regenerieren Sie Ihre Permalinks in WordPress
Wenn Sie Ihre Links regenerieren, bauen Sie die WordPress-Permalink-Struktur neu auf und reparieren sie. Das mag kompliziert klingen, aber keine Sorge. Alles, was Sie tun müssen, ist auf eine Schaltfläche zu klicken, und WordPress kümmert sich um den Rest.
Um zu beginnen, gehen Sie zu Einstellungen -> Permalinks aus Ihrem WordPress-Admin-Menü.
Dadurch gelangen Sie zur Seite mit den häufigsten Einstellungen. Hier sehen Sie die Permalink-Struktur, die Sie derzeit verwenden.
Um Ihre Permalinks neu zu generieren, scrollen Sie einfach zum Ende der Seite und klicken Sie auf " Änderungen speichern ".
Nach ein paar Augenblicken solltest du eine Meldung sehen, die bestätigt, dass WordPress deine Permalink-Struktur aktualisiert hat.
Dort ! WordPress hat Ihre Permalinks neu generiert.
Um sicherzustellen, dass es funktioniert, gehen Sie zu Ihrer Website und versuchen Sie, auf ein paar verschiedene Links zu klicken.
Sehen Sie nach der Regenerierung immer noch Permalink-Fehler?
Wenn Sie immer noch 404-Fehler erhalten, müssen Sie möglicherweise Ihren Browser-Cache leeren. Weitere Einzelheiten finden Sie in unserem Leitfaden zu So löschen Sie Ihren Website-Cache.
Wenn das Problem dadurch nicht behoben wird, denken Sie darüber nach, was passiert ist, bevor Sie diese 404-Meldungen gesehen haben. Wenn Sie gerade ein Plug-in installiert oder aktualisiert haben, könnte dies Auswirkungen auf Ihre Links haben. Sie können versuchen, dieses Plugin zu deaktivieren, um zu sehen, ob der 404-Fehler dadurch behoben wird.
Wenn das nicht funktioniert, können Sie versuchen, alle Plugins zu deaktivieren, um zu sehen, ob das Ihre defekten Links behebt.
Dies ist ein etwas drastischer Schritt, also ist es eine gute Idee, dies zu tun Versetzen Sie Ihre Website zunächst in den Wartungsmodus. Dadurch bleiben Besucher auf dem Laufenden, während Sie Ihre Plugins testen, und geben einen besseren Eindruck, als wenn Sie eine kaputte Website sehen.
Wenn das Deaktivieren aller Plug-ins das Problem behebt, wissen Sie, dass mindestens ein Plug-in Ihre URLs betrifft. Aktivieren Sie in diesem Fall jedes Plugin einzeln erneut und testen Sie dann die Auswirkungen, die dies auf Ihre Links hat.
Wenn der 404-Fehler erneut auftritt, haben Sie das Plugin gefunden, das das Problem verursacht. Sie können dieses Plugin dann von Ihrer Website entfernen oder den Entwickler um Hilfe bitten.
So verfolgen und vermeiden Sie defekte Permalinks in WordPress
Kaputte Links sind schlechte Nachrichten für Besucher, Konversionen und Ihre Suchmaschinen-Rankings. Im Laufe der Zeit können tote URLs Auswirkungen darauf haben, wo Sie in Suchmaschinen-Rankings erscheinen. Das bedeutet weniger Traffic auf Ihrer Website.
Da so viel auf dem Spiel steht, müssen Sie sich schnell mit defekten Links auseinandersetzen.
Der einfachste Weg, defekte Links auf Ihrer WordPress-Website zu verfolgen und zu reparieren, ist die Verwendung des WordPress-Plugins All-in-One-SEO (AIOSEO). Über 3 Millionen Websitebesitzer verwenden AIOSEO, einschließlich uns hier bei BlogPasCher.
AIOSEO macht es Ihnen leicht, defekte Links zu finden und sie mit nur wenigen Klicks zu reparieren, indem Sie den leistungsstarken Weiterleitungsmanager verwenden.
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.
Dort ! Das war es für dieses Tutorial. Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie Ihre Permalinks in WordPress regenerieren können.
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.
Aber vergessen Sie in der Zwischenzeit nicht, uns Ihre zu hinterlassen commentaires und Vorschläge im entsprechenden Abschnitt.
Vertraulichkeit und Cookies: Diese Website verwendet Cookies. Wenn Sie diese Website weiterhin durchsuchen, stimmen Sie unserer Nutzung zu.
Weitere Informationen, einschließlich der Steuerung von Cookies, finden Sie im Folgenden:
Cookie-Richtlinien