Wie füge ich ein ReviewForest Widget in WordPress ein

Hier zeigen wir Dir, wie Du ein Widget in WordPress einfügen kannst.

Um ein ReviewForest Widget in WordPress einzufügen, besuche zuerst die ReviewForest Website https://app.reviewforest.org/ und logge Dich ein.

Klicke links im Menü auf "Widgets" und dann auf "Baumzähler" oder "Wald Widget". Wähle ein Widget aus und klicke auf "Installieren".

Wähle zwischen "Schwebendes Widget" und "Badge Widget" sowie die Position (oben links, unten rechts...) und kopiere den HTML-Code in die Zwischenablage (Achtung: Beim "Wald Widget" gibt es zwei HTML-Codes).

Das Einfügen von HTML-Codes in WordPress über ein Plugin ist die einfachste Variante. Installiere und aktiviere dazu die WordPress-Erweiterung "Insert Headers and Footers" und öffne sie, indem Du im Menü auf „Einstellungen” und dann auf den Namen des Plugins klickst. Es öffnet sich ein Fenster mit zwei Feldern.



Füge nun den vorhin kopierten HTML-Code unseres Widgets im Header oder Footer ein und klicke auf "Speichern".

Tipp:
Anstatt das Widget auf jeder Unterseite zu zeigen, kannst du auch eine spezifische Seiteneinbindung wählen.
Statt den Code im Header oder Footer einzufügen, kannst du ihn direkt in die gewünschte Unterseite einbetten. Bearbeite dafür die spezifische Seite in WordPress und füge den Widget-Code in einen "Custom HTML" Block ein.

Mit CSS Veränderungen am Widgetdesign durchführen

Unsere Web App lässt dich das Widget zwar bereits individualisieren. Trotzdem gibt es Situationen, in denen das Widget trotzdem nicht so veränderbar ist, wie man es möchte. Manchmal möchte man das schwebende Widget ein paar Pixel höher, mehr nach rechts,... bewegen. Oder du möchtest den Link zum Bewertungswald entfernen. All das kannst du mit Hilfe von CSS selber individualiseren.

Wie du CSS erstellst um es zu individualisieren schauen wir uns gleich an. Erst einmal, zeigen wir dir, du individuellen CSS in deinem Wordpress einfügst.

Gehe in dem linken Menü bei deiner Wordpress Seite auf Design und auf Customizer


Gehe ganz unten auf Zusätzliches CSS
Dort kannst du nun individuelles CSS einfügen und durch klicken auf Veröffentlichen abspeichern und anwenden.


Doch wie erstellst du CSS? Das kommt darauf an, was du verändern möchtest. Mit künstlicher Intelligenz kann selbst jemand ohne HTML & CSS Fähigkeiten soetwas selbst machen.
Hier ist der Prompt, den wir dafür mit ChatGPT verwendet haben:

Beispiel für ein ChatGPT Prompt, um CSS zu individualisieren

Problemstellung
In einem Widget auf meiner Website befindet sich ein Link, der auf die Seite |HIER URL EINFÜGEN| verweist. Der Linktext lautet "Bewertungswald". Mein Ziel ist es, den Link unanklickbar zu machen, dabei soll jedoch der Text "Bewertungswald" sichtbar bleiben.

Ziel
Der Link sollte optisch und funktionell als normaler Text dargestellt werden. Es sollte keine Umleitung stattfinden, wenn auf den Text geklickt wird. Der Text "Bewertungswald" soll nicht mehr wie ein Hyperlink erscheinen, also ohne Unterstreichung und in der Standardtextfarbe.

Lösungsansatz mit CSS
Ich benötige eine CSS-Lösung, um die Klickfunktionalität des Links zu deaktivieren, ohne dabei den Text zu entfernen oder die visuelle Darstellung des Textes zu verändern. Der Text soll im Fließtext erscheinen, als wäre er nie ein Link gewesen.

Beispiel um den Link zum Bewertungswald zu entfernen

a[href="URL DES BEWRTUNGSWALDES EINFÜGEN"] {
    pointer-events: none; /* Disables click events on the link */
    cursor: default; /* Resets cursor to default instead of pointer */
    text-decoration: none; /* Removes underline from link */
    color: black; /* Or any color the text should be */
}

a[href="URL DES BEWRTUNGSWALDES EINFÜGEN"]:after {
    content: ''; /* Ensures no pseudo-elements are added */
}

Beispiel um das schwebende Widget 100 Pixel nach rechts zu bewegen

HIER die Widget Klasse eingeben {
  margin-left: 100px; /* Adjust the value as needed */
}

Aktualisiert am: 16/08/2024