0
Wie man Parallaxe Effekte zu jedem WordPress Theme hinzufügenby marvelads.comon.Wie man Parallaxe Effekte zu jedem WordPress Theme hinzufügen  Vor kurzem hat uns einer unserer Leser gefragt, wie man Parallaxeffekte zu WordPress-Themen hinzufügen kann? Parallaxeffekt ist ein Webdesign-Trend, bei dem Hintergrundbilder langsamer als der Vordergrundinhalt scrollen. In diesem Artikel werden wir Ihnen zeigen, wie man Parallax-Effekte leicht zu jedem WordPress-Thema hinzufügen. Was ist Parallaxeffekt? Parallaxeffekte sind eine moderne Webdesign-Technik, deren Hintergrundelemente langsamer als […]

 

Vor kurzem hat uns einer unserer Leser gefragt, wie man Parallaxeffekte zu WordPress-Themen hinzufügen kann? Parallaxeffekt ist ein Webdesign-Trend, bei dem Hintergrundbilder langsamer als der Vordergrundinhalt scrollen. In diesem Artikel werden wir Ihnen zeigen, wie man Parallax-Effekte leicht zu jedem WordPress-Thema hinzufügen.

"

Was ist Parallaxeffekt?

Parallaxeffekte sind eine moderne Webdesign-Technik, deren Hintergrundelemente langsamer als der Inhalt im Vordergrund gescrollt werden. Dieser Effekt fügt der Tiefe des Hintergrundbildes hinzu und macht sie interaktiv.

Parallaxeffekte können auf Landungsseiten, langformatigen Inhalten, Verkaufsseiten oder der Homepage von Geschäftswebsites verwendet werden. Dies ist eine großartige Möglichkeit, verschiedene Abschnitte auf einer langen Seite hervorzuheben.

Viele WordPress Premium Themen kommen mit Parallaxe-Effekte auf ihre Homepages gebaut. Sie können auch Parallaxeffekte in den meisten WordPress-Seiten-Ersteller-Plugins verwenden.

Allerdings haben nicht alle Themen angeborene Parallaxeffekte, und du möchtest den Seitenbauer nicht verwenden, um ein spezielles Seitenlayout nur für Parallaxeffekte zu erstellen.

Mal sehen, wie man Parallax Hintergrund Effekte leicht zu jedem WordPress Thema hinzufügen.

Methode 1: Hinzufügen Parallaxe Effekte zu WordPress Theme Plugin mit

Diese Methode erfordert nicht, dass Sie einen Code zu Ihrem WordPress-Thema hinzufügen. Einfacher und für die meisten Benutzer empfohlen.

Das erste, was Sie tun müssen, ist zu installieren und aktivieren Sie die Advanced WordPress Backgrounds Plugin. Weitere Informationen finden Sie in der Schritt-für-Schritt-Anleitung zur Installation des WordPress-Plugins.

Nach der Aktivierung musst du die Seite bearbeiten oder posten, wo du Parallaxeffekt hinzufügen möchtest. Sie sehen die & # 39; Advanced WordPress Hintergründe & # 39; neu im visuellen Editor

"

Wenn Sie darauf klicken, wird ein Popup-Fenster angezeigt, in dem Sie verschiedene Einstellungen für den Hintergrund ändern können, den Sie hinzufügen möchten.

Zuerst müssen Sie ein Bild als Hintergrundtyp auswählen und dann die Option & # 39;

"

Als nächstes müssen Sie auf die & # 39; Select Images & # 39; zum Hochladen oder Auswählen des Bildes, das Sie verwenden möchten. Vergewissern Sie sich, dass Sie das große Bild verwenden, sonst wird es pixelig erscheinen.

Danach musst du Parallax aktivieren, indem du den Parallaxentyp auswählst. Es gibt eine Reihe von Stilen, die Sie ausprobieren können. Der am häufigsten verwendete Parallaxeffekt ist Scroll.

Klicken Sie auf die Schaltfläche Einfügen, um fortzufahren.

Plugins werden nun kurze Codes in deinem WordPress Post Editor hinzufügen. Es sollte so aussehen:

[nk_awb awb_type=”image” awb_stretch=”true” awb_image=”22″ awb_image_size=”full” awb_parallax=”scroll” awb_parallax_speed=”0.5″ awb_mouse_parallax=”true” awb_mouse_parallax_size=”30″ awb_mouse_parallax_speed=”10000″]

Dein Inhalt hier

[/nk_awb]

Ersetzen Sie & # 39; Ihr Inhalt hier & # 39; mit deinem eigenen Inhalt und dann deine Seite speichern.

Sie können jetzt Ihre Website besuchen, um es in Aktion zu sehen.

Parallaxeffekt Vorschau “

Methode 2: Hinzufügen Parallax Effekte zu jedem WordPress Theme mit CSS

Diese Methode erfordert, dass Sie ein faires Verständnis von HTML / CSS sowie wie WordPress Themen funktionieren.

Zuerst musst du das Bild, das du für Parallaxeffekte verwenden möchte, in deine WordPress Medienbibliothek hochladen, indem du Medien nehme. Seite hinzufügen.

Nach dem Hochladen eines Bildes musst du die Bild-URL kopieren, indem du das Bild in der WordPress-Medienbibliothek bearbeite.

"

Als nächstes müssen Sie den folgenden HTML-Code in die Seite hinzufügen oder posten, wo Sie Parallaxeffekte anzeigen möchten. Sie können dieses HTML auch Ihrem Thema Thema oder WordPress Thema hinzufügen.


 

Ihre Inhalte hier

 

Als nächstes müssen Sie das folgende benutzerdefinierte CSS zu Ihrem WordPress-Theme hinzufügen.

.parallax {
background-image: url ("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
hoch: 100%;
Hintergrund-Anhang: fest;
Hintergrund-Position: Mitte;
Hintergrund-Wiederholung: no-repeat;
Hintergrund-Größe: Abdeckung;
Rand-links: -410px;
margin-right: -410px;
}

.parallax-content {
Breite: 50%;
Rand: 0 auto;
Farbe: #FFF;
padding-top: 50px;
}

Vergessen Sie nicht, die Hintergrundbild-URL mit Ihrem eigenen Hintergrundbild zu ersetzen.

Jetzt können Sie Ihre Änderungen speichern und besuchen Sie Ihre Website, um es in Aktion zu sehen.

"

Hinweis: Möglicherweise müssen Sie CSS anpassen, um mit dem Layout Ihrer Website zu arbeiten.

Wir hoffen, dass dieser Artikel hilft Ihnen zu lernen, wie man Parallax-Effekte leicht zu jedem WordPress-Thema hinzufügen. Sie können auch die Mega-Liste der meistgesuchten WordPress Tipps, Tricks und Hacks auschecken.

 

Vielen Dank für das Lesen, besuchen Sie den Originalartikel aus dieser Quelle Link.

Author: 

Related Posts

 

Leave a Reply