loader image

Radiboxes Server machen WordPress Websites bis zu 4x schneller - ohne zusätzliche Optimierung. Raidboxes migriert deine Website und du kannst selbst vergleichen. Wenn du zufrieden bist, wähle einfach das passende Paket in deren Preistabelle.

4.97

Sehr gut

trustedshops.de

Autor

duckducknews

Hinzufügen eines glatten Effekts zum Ändern der Hintergrundfarbe in WordPress

Möchten Sie auf Ihrer WordPress-Website einen sanften Effekt für den Wechsel der Hintergrundfarbe hinzufügen? Vielleicht haben Sie auf einigen beliebten Websites gesehen, wie die Hintergrundfarbe eines bestimmten Bereichs oder der gesamten Webseite automatisch von einer Farbe zur anderen übergeht. Dieser schöne Effekt kann Ihnen helfen, die Aufmerksamkeit der Benutzer zu gewinnen und das Engagement auf Ihrer Website zu verbessern. In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach einen sanften Effekt für den Wechsel der Hintergrundfarbe in WordPress hinzufügen können.

Adding smooth background color change effect in WordPress

Was ist der Effekt „Weicher Farbwechsel im Hintergrund“?

Der Effekt des sanften Hintergrundfarbwechsels ermöglicht Ihnen einen automatischen Übergang zwischen verschiedenen Hintergrundfarben. Der Wechsel geschieht langsam und durchläuft verschiedene Farben, bis er die endgültige Farbe erreicht. Es sieht wie folgt aus:

Color change effect animation

Diese Technik wird verwendet, um die Aufmerksamkeit des Benutzers mit sanften Effekten zu erregen, die das Auge erfreuen.

Schauen wir uns also an, wie man diesen Effekt des sanften Hintergrundfarbwechsels in jedem WordPress-Theme hinzufügen kann.

Hinzufügen des Effekts „Weicher Hintergrundfarbenwechsel“ in WordPress

Für dieses Tutorial müssen Sie Code in Ihren WordPress-Dateien hinzufügen. Wenn Sie dies noch nicht getan haben, werfen Sie bitte einen Blick auf unsere Anleitung zum Kopieren und Einfügen von Code in WordPress.

Zunächst müssen Sie die CSS-Klasse des Bereichs herausfinden, den Sie ändern möchten. Dies können Sie mit dem Inspektionswerkzeug in Ihrem Browser tun. Gehen Sie einfach mit der Maus auf den Bereich, den Sie ändern möchten, und klicken Sie mit der rechten Maustaste, um das Inspektionstool auszuwählen.

Find CSS class

Als nächstes müssen Sie die CSS-Klasse notieren, auf die Sie abzielen möchten. Im obigen Screenshot wollen wir zum Beispiel den Widget-Bereich im unteren Bereich anvisieren, der die CSS-Klasse „page-header“ hat.

Im nächsten Schritt müssen Sie einen einfachen Texteditor auf Ihrem Computer öffnen und eine neue Datei erstellen. Sie müssen diese Datei als wpm-background-tutorial.js auf Ihrem Desktop speichern.

Als nächstes müssen Sie den folgenden Code in Ihre JS-Datei einfügen:

jQuery(function($){
        $('.page-header').each(function(){
            var $this = $(this),
                        colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331'];

            setInterval(function(){
                var color = colors.shift();
                colors.push(color);
                $this.animate({backgroundColor: color}, 2000);
            },4000);
        });
        }) 

Wenn Sie diesen Code studieren, werden Sie feststellen, dass wir die CSS-Klasse, auf die wir abzielen wollen, im Code verwendet haben. Außerdem haben wir vier Farben hinzugefügt. Unser weicher Hintergrundeffekt beginnt mit der ersten Farbe, geht dann zur nächsten Farbe über und fährt mit diesen Farben fort.

Vergessen Sie nicht, Ihre Änderungen in der Datei zu speichern.

Als nächstes müssen Sie die Datei wpm-bg-tutorial.js per FTP in den Ordner /js/ Ihres WordPress-Themes hochladen. Wenn Ihr Theme keinen js-Ordner enthält, müssen Sie einen erstellen.

Upload your javascript file

Nachdem Sie Ihre JavaScript-Datei hochgeladen haben, ist es an der Zeit, sie in WordPress zu laden.

Sie müssen den folgenden Code in die Datei functions.php Ihres Themes einfügen.

function wpm_bg_color_scripts() { 
wp_enqueue_script( 'wpm-background-tutorial', get_stylesheet_directory_uri() . '/js/wpm-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true ) 
 } 
add_action( 'wp_enqueue_scripts', 'wpm_bg_color_scripts' ) 

Dieser Code lädt die JavaScript-Datei und das abhängige jQuery-Skript, das Sie für die Funktion dieses Codes benötigen, ordnungsgemäß.

Das ist alles, Sie können nun Ihre Website besuchen, um es in Aktion zu sehen. Sie werden feststellen, dass sich die Hintergrundfarbe in dem Bereich, den Sie ausgewählt haben, sanft ändert.

Es gibt viele andere Möglichkeiten, Hintergrundfarben in WordPress zu verwenden, um die Aufmerksamkeit der Benutzer zu erregen oder Ihren Inhalt hervorzuheben. Zum Beispiel können Sie es versuchen:

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie den Effekt des glatten Hintergrundfarbwechsels in WordPress leicht hinzufügen können.

Die beliebtesten Beiträge

Wie man den ungültigen JSON-Fehler in WordPress behebt (Anleitung für Anfänger)

Versuchen Sie, den ungültigen JSON-Fehler in WordPress zu beheben? Dieser Fehler tritt auf, wenn Sie WordPress-Beiträge oder -Seiten auf Ihrer Website bearbeiten. Sie erhalten die Meldung "Die Antwort ist keine gültige JSON-Antwort" und die Aktualisierung der Seite schlägt fehl. In diesem Artikel zeigen wir Ihnen, wie Sie den ungültigen JSON-Fehler ...

So beheben Sie den Fehler „Verbindung ist nicht privat“ (Anleitung für Website-Besitzer)

Sehen Sie die Fehlermeldung "Ihre Verbindung ist nicht privat" auf Ihrer WordPress-Website? Dies ist die Fehlermeldung, die Sie in Google Chrome sehen. Der gleiche Fehler wird auf allen modernen Browsern mit leicht unterschiedlichen Meldungen angezeigt und kann für Anfänger bei der Fehlerbehebung etwas verwirrend sein. In dieser Anleitung für Website-Besitzer ...

Wie man eine Seite in voller Breite in WordPress erstellt (Anleitung für Anfänger)

Möchten Sie eine Seite in voller Breite in WordPress erstellen, so dass Sie Ihren Inhalt über den Bildschirm strecken können? Die meisten WordPress-Themes verfügen bereits über eine integrierte Vorlage für eine Seite in voller Breite, die Sie verwenden können. Wenn Ihr Theme jedoch keine hat, dann ist es einfach, sie ...
DSGVO Cookie-Einwilligung mit Real Cookie Banner