Erstellen Sie eine bewegliche Hintergrundbildanimation mit dem Free Elementor Page Builder

Das Erstellen einer bewegten Hintergrundbildanimation mit dem Free Elementor Page Builder scheint mir jetzt sehr einfach zu sein. Hier müssen Sie etwas CSS-Code innerhalb der Seite hinzufügen. Es gibt eine Möglichkeit, auch CSS-Code-freien Elementor hinzuzufügen.

Ich werde etwas Erstaunliches mit dem Hintergrundbild teilen. Es hat wirklich Spaß gemacht, etwas Großartiges zu schaffen, das auffällig erscheint. Hier sind zwei Quellen zu verschiedenen Arten von Hintergrund der Elementorseite und Elementor-Schräghintergrund Überprüfen Sie dies unbedingt, wenn Sie den Hintergrund Ihrer Elementorseite oder Abschnitte auf kreative Weise anordnen möchten. 

Was ist eine bewegte Hintergrundbildanimation?

A Bewegtes Hintergrundbild Animation Ist eine Looping-CSS-Animation, die langsam ein breites Hintergrundbild hinter Ihren Seiteninhalt schiebt, so dass sich der Abschnitt lebendig anfühlt, ohne eine Videodatei zu laden In Elementor bauen Sie es mit einem Abschnitt voller Höhe, zwei Abstandshaltern, die die CSS-IDs tragen bg und Überlagerungund ein kurzer Block davon CSS @keyframes Code, der in ein HTML-Widget eingefügt wurde, ist nicht in eine Elementor Pro-Lizenz eingebunden und JavaScript ist nicht erforderlich. Es ist eines der leichtesten Elementoranimationseffekte Sie können hinzufügen, da der Browser eine einzelne Transformation animiert, anstatt Medien abzuspielen.

Zunächst mal sehen, wie es genau aussieht im folgenden Video.

Dieser Abschnitt ist verfügbar in Master Addons Vorlagenbibliothek Kostenlos. Sie können dies ganz einfach auf Ihre Webseite importieren, wenn Sie ein sind Master Addons – Elementor-Seiten-Builder-Add-on Plugin-benutzer. 

        <a href="https://downloads.wordpress.org/plugin/master-addons.zip" target="_blank" data-text="Master Addons Plugin" rel="noopener">
                Master Addons Plugin
        </a>
    <h2>Moving Background Image animation in one click</h2><p>If you have installed and activated Master Addons Plugin in your Website then follow me. 

Überprüfen So installieren und aktivieren Sie das Master Addons Plugin

Erstellen Sie eine Seite oder einen Beitrag und bearbeiten Sie sie mit Elementor. Sie sehen das Symbol der Master Addons Template-Bibliothek. 

Klicken Sie auf die Bibliothek von MA Tempalte und warten Sie einige Sekunden, um die Daten zu laden Sie sehen “Ready Page” und “Abschnitte” Klicken Sie auf die Registerkarte Abschnitte und warten Sie einige Sekunden Jetzt sehen Sie die “Moving Background Image Animation”. 

Klicken Sie nun auf das Zoom-Icon, um eine Vorschau anzuzeigen Dann sehen Sie einen Einfügebutton Klicken Sie auf diesen “Einfügen” - Button, um diese Vorlage mit einem Klick zu erhalten Danach steht es Ihnen frei, den Inhalt zu bearbeiten.

So wird dein Abschnitt aussehen Ich verwende in meinem localhost das WordPress-Standardthema Klicke einfach auf Titel oder Absatz oder Social, um Inhalte zu bearbeiten. 

Wenn Sie Ihr eigenes Bild und Ihren eigenen Overlay-Effekt hinzufügen möchten, sollten Sie zum wechseln BG ändern und Bildausschnitt überlagern Jetzt.

Tutorial zur Bildanimation mit beweglichem Hintergrund

Kurze Antwort: Erstellen Sie einen einspaltigen Elementorabschnitt, der auf “Fit to screen” gesetzt ist, und fügen Sie einen Abstandshalter mit der CSS-ID hinzu bg Über Ihren Inhalten und einen zweiten Abstandshalter mit der ID Überlagerung Darunter, dann unten in ein HTML-Widget Animationscode einfügen und die eigene Bild-URL austauschen, dazu braucht man drei Assets mit breitem Hintergrund, ein PNG-Overlay und ein SVG-Overlay und den ganzen Build nimmt etwa zehn Minuten auf dem kostenlosen Elementor-Seiten-Builder.

Vermögenswerte, die Sie benötigen: 

1. Ein Bild mit den Abmessungen 1500 x 500 Pixel
2. Ein PNG-Overlay-Bild
3. Ein SVG-Overlay-Bild

Fügen Sie nun eine Einspaltenstruktur hinzu und machen Sie die Höhe “Fit to screen”. 

Fügen Sie jetzt einfach Ihre Inhalte hinzu. Ich werde hier die Informationen zur Typografie von Demoinhalten teilen. 

Titel (Standardüberschriftenelement des verwendeten Elementors): Schriftfamilie: Quelle Sans Pro, Schriftgröße: 120 px, Schriftgewicht: 900, Zeilenhöhe: 140, Buchstabenabstand: -5, Farbe: Schwarz

Text (Standardelement für Text-Editoren mit verwendetem Elementor): Schriftfamilie: Quelle Sans Pro, Schriftgröße: 30 Prozent, Schriftgewicht: 400, Zeilenhöhe: 40, Farbe: Schwarz

Soziales (benutztes Elementor-Standard-Sozialelement): Form: Kreis, Ausrichtung: Mitte, Farbe: Benutzerdefiniert, Primär Schwarz: rgba (175,175,175,0), Sekundärfarbe: Schwarz, Größe: 40, Platz: 30, Randtyp: Solid, Randbreite: 2, Randfarbe: Schwarz

Werfen Sie einen Blick auf die folgende GIF-Animation und Sie werden verstehen, wie Sie alle diese Eigenschaften in Ihrem Elementorelement anwenden. 

Setzen Sie mit der Registerkarte Erweitert z-index=1. Klicken Sie einfach auf jedes Element und navigieren Sie zur Registerkarte Erweitert. Überprüfen Sie das folgende Bild. 

(Wenn Sie dies verpassen, werden Sie nach dem Hinzufügen von CSS-Code für bewegte Hintergrundbilder Probleme beim Bearbeiten von Elementen haben. Sie müssen das Elementor Navigator-System verwenden, um Inhalte zu bearbeiten, wenn Sie hier keinen Z-Index einfügen.)

Jetzt fügen Sie zwei Abstandshalter hinzu. Einer steht oben im Titel und ein anderer unten auf dem Social-Media-Symbol. 

Im oberen Abstandshalter “BG” als ID einlegen Und im unteren Abstandshalter “Überlagerung” als ID einlegen. 

Hinzufügen einer BG-ID im oberen Abstandshalter

Hinzufügen einer Overlay-ID im unteren Abstandshalter

Fügen Sie das “HTML” Element unter dem Social Media Icon oder oben im zweiten Abstandshalter. 

BG-Bild ändern und Bild überlagern Link

Erinnerst du dich an unsere Moving BG Bildanimations Assets? jetzt ist es Zeit, sie auf deiner Website hochzuladen Hintergrundbild, PNG-Overlay, und SVG-Overlay-Bild hochladen Dann kopiere diese 3 Links und liste in deinem Code-Editor oder Notizblock nach unten. 

Kopieren Sie folgenden Code in Ihren Code-Editor Und ändern Sie den Hintergrundbildlink, PNG und SVG Bildüberlagerungslink Ich habe zwei Screenshot hinzugefügt, wo Sie leicht finden können, welche Links Sie ändern sollten. 

Klicken Sie auf jedes Bild, um die hochauflösende Version anzuzeigen. 

Hintergrundbild-URL ändern

Überlay-Bilder-URL ändern

<style>

#bg {
-moz-animation: bg 60s linear infinite;
-webkit-animation: bg 60s linear infinite;
-ms-animation: bg 60s linear infinite;
animation: bg 60s linear infinite;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
/* Set your background with this /
background: #348cb2 url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/bg.jpg") bottom left;
background-repeat: repeat-x;
height: 100%;
left: 0;
opacity: 1;
position: fixed;
top: 0;
}

@-moz-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@-webkit-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@-ms-keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

@keyframes bg {
0% {
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

100% {
-moz-transform: translate3d(-2250px,0,0);
-webkit-transform: translate3d(-2250px,0,0);
-ms-transform: translate3d(-2250px,0,0);
transform: translate3d(-2250px,0,0);
}
}

#bg {
background-size: 2250px auto;
width: 6750px;
}

/ Overlay */

@-moz-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-webkit-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@-ms-keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

@keyframes overlay {
0% {
opacity: 0;
}

100% {
opacity: 1;
}
}

#overlay {
-moz-animation: overlay 1.5s 1.5s forwards;
-webkit-animation: overlay 1.5s 1.5s forwards;
-ms-animation: overlay 1.5s 1.5s forwards;
animation: overlay 1.5s 1.5s forwards;
background-attachment: fixed, fixed;
background-image: url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/overlay-pattern.png"), url("http://127.0.0.1/master-addons/wp-content/uploads/2019/10/overlay.svg");
background-position: top left, center center;
background-repeat: repeat, no-repeat;
background-size: auto, cover;
height: 100%;
left: 0;
opacity: 0;
position: fixed;
top: 0;
width: 100%;
}
</style>

Kopieren Sie nun Ihren bearbeiteten Code mit Bg und Overlay Bildern Fügen Sie ihn dann im HTML-Element ein, Sie sehen das Ergebnis sofort Wenn Sie wissen, wie man mit CSS arbeitet, dann können Sie auch die Animation anpassen.

Ändern wir die Textfarbe und die Farbe der sozialen Medien in Weiß, um den genauen Look zu sehen, den ich Ihnen gezeigt habe.

Dabei geht es vor allem darum, Moving Background Image Animation mit dem Elementor Page Builder Plugin zu erstellen. Sie können Ihre Inhalte mit unserem stylen Plugin von Master Addon Auch Das wird fixer Hintergrund für deine Seite, wenn du bewegten Hintergrund für einen Abschnitt einstellen willst dann ändere einfach die Position auf “Absolut“. 

Kommentieren Sie gerne hier, wenn Sie mit Problemen konfrontiert werden. Ich werde Sie anleiten, Ihre bewegte BG-Bildanimation anzupassen.

Häufig gestellte Fragen