So fügen Sie mit Divis Theme Builder & Anime.js Ihr SVG-Logo in Ihrem globalen Header hinzu und animieren es

Ihr Logo ist ein zentraler Bestandteil der Identität Ihrer Marke. Aus diesem Grund ist es fast immer in jedem Website-Header enthalten, auf den Sie stoßen. Wenn Sie Ihrem Header ein Logo hinzufügen, können Sie eine PNG-Datei hochladen oder stattdessen eine SVG-Integration verwenden. Für einen individuelleren Ansatz können Sie auch Ihr SVG-Logo animieren. Genau das zeigen wir Ihnen in diesem Beitrag. Wir zeigen Ihnen, wie Sie ihn zuerst Ihrem von Divi erstellten globalen Header hinzufügen und ihn dann mit der Anime JS-Bibliothek animieren. Für unser Beispiel verwenden wir ein einfaches Design, aber sobald Sie den Ansatz verstanden haben, können Sie jedes Logo animieren!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie die globale Header-Vorlage KOSTENLOS herunter

Um die globale Header-Vorlage in die Hände zu bekommen, müssen Sie sie zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

1. SVG-Logo in Adobe Illustrator erstellen und SVG-Code abrufen

Illustrator öffnen und neues Dokument erstellen

Im ersten Teil dieses Tutorials erstellen wir ein einfaches Logo in Adobe Illustrator. Wenn Sie bereits ein eigenes SVG-Logo haben, können Sie dieses gerne verwenden. Alternativ können Sie auch auf die Illustrator-Beispieldatei des Logos im obigen Download-Ordner zugreifen. Wenn Sie es vorziehen, das Logo-Beispiel von Grund auf neu zu erstellen, fügen Sie zunächst ein neues Dokument mit einem Verhältnis von 1:1 hinzu.

• Breite: 500px
• Höhe: 500px

Kreis zu vorhandener Ebene hinzufügen

Das erste Element, das wir hinzufügen, ist ein Kreis. Wir verwenden eine Füllfarbe, die der Farbpalette des Spice Shop Layout Packs entspricht. Wir stellen auch sicher, dass der Kreis in unserer Leinwand mittig ausgerichtet ist.

• Füllen: #0C1019
• Schlaganfall: Keine

Neue Ebene erstellen und Logotext hinzufügen

Als nächstes fügen wir eine neue Ebene hinzu.

Wir verwenden diese Ebene, um Logotext hinzuzufügen.

• Schriftart: Montserrat
• Schriftstärke: Schwarz
• Schriftgröße: 110pt

Konturen für Logo erstellen

Nachdem Sie den Logotext geändert haben, können Sie mit der rechten Maustaste auf das Element klicken und auf „Konturen erstellen“ klicken, um den Text in eine Kontur umzuwandeln.

Textkonturen ausrichten

Wir stellen sicher, dass die Textkonturen auch mittig ausgerichtet sind.

Als SVG exportieren

Nachdem wir nun alle Pfade festgelegt haben, können wir das SVG exportieren. Dazu bewegen wir den Mauszeiger oben auf die Option „Datei“, gehen zu „Exportieren“ und klicken auf „Exportieren als…“.

SVG-Code abrufen

Nachdem Sie auf die Schaltfläche „Exportieren“ geklickt haben, wird ein Fenster mit einigen zusätzlichen SVG-Optionen angezeigt. Dort können Sie den SVG-Code kopieren. Stellen Sie sicher, dass Sie die SVG-Datei für die spätere Verwendung in diesem Tutorial in der Nähe haben.

2. Beginnen Sie mit der Erstellung eines globalen/benutzerdefinierten Headers im Divi Theme Builder

Gehen Sie zum Divi Theme Builder und beginnen Sie mit der Erstellung eines globalen Headers

Nachdem wir den ersten Teil dieses Tutorials durchgearbeitet haben und den SVG-Code unseres Logos erhalten haben, ist es an der Zeit, zu Divi zu wechseln! Wir erstellen einen neuen globalen Header, indem wir zum Theme Builder im WordPress-Backend navigieren.

Abschnittseinstellungen

Hintergrundfarbe

Nachdem Sie die globale Header-Vorlage eingegeben haben, sehen Sie einen Abschnitt. Öffnen Sie diesen Abschnitt und wenden Sie eine Hintergrundfarbe an.

• Hintergrundfarbe: #eaeaea

Abstand

Wechseln Sie zur Registerkarte Design und entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, gehen Sie zur Registerkarte Design und ändern Sie die Größeneinstellungen wie folgt:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja
• Breite: 95%
• Maximale Breite: 100%

Abstand

Entfernen Sie auch alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Hauptelement

Um sicherzustellen, dass unsere Spalten auf kleineren Bildschirmgrößen nebeneinander bleiben, fügen wir auch dem Hauptelement der Zeile eine Zeile CSS-Code hinzu.

display: flex;

Spalte 1 Hauptelement

Als Nächstes stellen wir sicher, dass die Spaltenstruktur (1/4 und 3/4) über kleinere Bildschirmgrößen hinweg beibehalten wird, indem wir jeder Spalte einzeln eine Zeile CSS-Code hinzufügen. Beginnen Sie mit dem ersten.

width: 25% !important;

Spalte 2 Hauptelement

Machen Sie dasselbe für die zweite Spalte, verwenden Sie jedoch einen anderen Breitenprozentsatz.

width: 75% !important;

3. SVG-Logo hinzufügen (innerhalb des Codemoduls)

Codemodul zu Spalte 1 hinzufügen

Zeit, Module hinzuzufügen, beginnend mit einem ersten Code-Modul. Wir platzieren dieses Codemodul in Spalte 1 und verwenden es, um unseren SVG-Code hinzuzufügen.

Kopierten SVG-Code hinzufügen

Strukturiere es

Sobald Sie den SVG-Code (siehe Teil 1 dieses Tutorials) in das Code-Modul eingefügt haben, hilft es, alles wie im Druckbildschirm unten gezeigt zu strukturieren. Auf diese Weise haben Sie einen sauberen Überblick über die verschiedenen Elemente in der SVG.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 465 465">
  
<defs>
  
<style>
.cls-1{
fill:#0c1019;  
}

.cls-2{
fill:#fff;
}
</style>
  
</defs>
  
<g id="Layer_1" data-name="Layer 1">
  
<circle class="cls-1" cx="232.5" cy="232.5" r="232.5"/>
  
</g>

<g id="Layer_2" data-name="Layer 2">
  
<path class="cls-2" d="M88,284.1a49.87,49.87,0,0,1-14.9-5.78l8.36-18.92a52.84,52.84,0,0,0,12.32,5.12,48.23,48.23,0,0,0,13.09,1.92c3.59,0,6.16-.34,7.7-1a3.36,3.36,0,0,0,2.31-3.14q0-2.42-3-3.63a66.69,66.69,0,0,0-9.95-2.64A111.94,111.94,0,0,1,89,252a25.32,25.32,0,0,1-10.34-7q-4.41-4.89-4.4-13.25a22.79,22.79,0,0,1,4.07-13.21q4.07-5.94,12.15-9.35t19.64-3.4a71.06,71.06,0,0,1,15.56,1.7,48.59,48.59,0,0,1,13.48,5l-7.81,18.8q-11.34-5.72-21.45-5.72t-10,4.84q0,2.31,3,3.47a62.92,62.92,0,0,0,9.79,2.47,101.06,101.06,0,0,1,14.85,3.8,25.9,25.9,0,0,1,10.5,7q4.46,4.84,4.46,13.2a22.59,22.59,0,0,1-4.07,13.15q-4.08,5.88-12.16,9.35t-19.63,3.46A80.82,80.82,0,0,1,88,284.1Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M204.13,227a27.32,27.32,0,0,1,10.56,11,36.64,36.64,0,0,1,0,32.94,27.42,27.42,0,0,1-10.56,10.89,28.9,28.9,0,0,1-14.57,3.79q-10,0-15.29-5.16v25.41H149.41V224.31h23.65v4.95q5.38-6,16.5-6A28.91,28.91,0,0,1,204.13,227Zm-13.47,36.14q2.75-3.09,2.75-8.69c0-3.75-.92-6.66-2.75-8.75a9.46,9.46,0,0,0-14.08,0c-1.84,2.09-2.75,5-2.75,8.75s.91,6.63,2.75,8.69a9.59,9.59,0,0,0,14.08,0Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M228,215.9a12.05,12.05,0,0,1,0-18.15q4.13-3.57,10.84-3.58t10.88,3.41a11,11,0,0,1,4.08,8.8,12.12,12.12,0,0,1-4.08,9.41q-4.07,3.69-10.88,3.69T228,215.9Zm-1.59,8.41h24.85v60.17H226.41Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M276.29,281.63a30.66,30.66,0,0,1-12.65-11.12,30.79,30.79,0,0,1,0-32.28,30.74,30.74,0,0,1,12.65-11.06,41.08,41.08,0,0,1,18.31-4q11,0,18.81,4.73A24.57,24.57,0,0,1,324.19,241l-19.25,9.46q-3.51-7.92-10.45-7.92a9.65,9.65,0,0,0-7.31,3.08c-1.95,2.06-2.92,4.95-2.92,8.69s1,6.75,2.92,8.81a9.65,9.65,0,0,0,7.31,3.08q6.93,0,10.45-7.93l19.25,9.46a24.49,24.49,0,0,1-10.78,13.09q-7.8,4.74-18.81,4.73A41.21,41.21,0,0,1,276.29,281.63Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M393.05,260.17h-41.8a10.13,10.13,0,0,0,4.4,5.23,15,15,0,0,0,7.7,1.81,19.75,19.75,0,0,0,6.66-1,23.5,23.5,0,0,0,5.88-3.42l13,13.09q-8.79,9.69-26.29,9.68a43.19,43.19,0,0,1-19.14-4,30.43,30.43,0,0,1-12.76-11.17,31.09,31.09,0,0,1-.05-32.17,30.46,30.46,0,0,1,12.21-11.06,40.22,40.22,0,0,1,34.1-.33,28.65,28.65,0,0,1,12,10.67,30.85,30.85,0,0,1,4.45,16.83Q393.38,254.9,393.05,260.17Zm-38.94-17.93a10,10,0,0,0-3.3,5.95h19.36a10.06,10.06,0,0,0-3.3-5.89,9.51,9.51,0,0,0-6.38-2.15A9.72,9.72,0,0,0,354.11,242.24Z" transform="translate(-17.5 -17.5)"/>
  
<path class="cls-2" d="M402,281.57a13.75,13.75,0,0,1-4.13-10.29A13.36,13.36,0,0,1,402,261.11a15.8,15.8,0,0,1,20.79,0,13.35,13.35,0,0,1,4.12,10.17,13.74,13.74,0,0,1-4.12,10.29,15.48,15.48,0,0,1-20.79,0Z" transform="translate(-17.5 -17.5)"/>
  
</g>
  
</svg>

Hinzufügen von Strich und Strichbreite zu Elementen im CSS-Code

In Illustrator haben wir nur Füllfarben für die hinzugefügten Elemente verwendet. Der Grund dafür ist, dass wir vermeiden wollen, zusätzliche Pfade zu generieren. SVG-Code ist nicht immer so vorhersehbar, wie Sie vielleicht denken, daher können einige manuelle Änderungen am CSS-Code oft dazu beitragen, die Pfade einfach zu halten. Um das gleiche Ergebnis wie in der Vorschau dieses Beitrags zu erzielen, müssen wir unseren beiden Elementen einen Strich hinzufügen. Dazu fügen wir den beiden Klassen innerhalb unseres Codes CSS-Codezeilen hinzu. Die in AI generierte CSS-Klasse „cls-1“ steht für den Kreis, die CSS-Klasse „cls-2“ repräsentiert die Textkonturen.

stroke: #0c1019;
stroke-width: 3px;

Kreisradius verringern

Da wir unserem Kreis einen zusätzlichen Strich hinzugefügt haben, scheint der Kreis weiter zu reichen als die SVG-Leinwand (erkennbar an den Seiten). Um dies zu beheben, reduzieren wir einfach den Radius innerhalb unseres Kreis-Tags. Anstatt das ursprüngliche „232.5“ zu verwenden, reduzieren wir es auf „225“. Sie können selbst bestimmen, welchen Wert Sie bevorzugen, indem Sie vorsichtig mit dieser Zahl herumspielen.

• r = ”225″

Codemoduleinstellungen ändern

Größe

Nachdem unser SVG-Code nun vorhanden ist, können wir einige zusätzliche Änderungen am Codemodul selbst vornehmen. Gehen Sie zur Registerkarte Design und ändern Sie die Breite des Moduls über verschiedene Bildschirmgrößen.

• Breite:
  • Desktop: 25%
  • Tablette: 50%
  • Telefon: 80%

Abstand

Wir erzeugen auch eine untere Überlappung, indem wir die Abstandseinstellungen ändern.

• Obere Polsterung: 5%
• Untere Polsterung:
  • Desktop: -12%
  • Tablette: -20%
  • Telefon: -35%

4. Verwenden Sie Anime.js, um Ihr SVG-Logo zu animieren

Fügen Sie ein weiteres Codemodul unter dem vorherigen hinzu

Unser SVG-Logo wurde unserem Divi-Header hinzugefügt! Im nächsten Teil dieses Tutorials animieren wir das SVG-Logo mit der Anime JS-Bibliothek. Die Zeichnungsanimation, die Sie in der Vorschau sehen, ist eine der beliebtesten, aber Sie können mit dieser Bibliothek jede Art von Animation erstellen. Fügen Sie ein neues Codemodul direkt unter dem vorherigen hinzu.

Anime-Bibliothek hinzufügen

Das erste, was Sie tun müssen, ist, die Bibliothek in Skript-Tags hinzuzufügen.

• src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"

Anime-Timeline-Animationscode hinzufügen

Direkt darunter müssen Sie den Anime-JS-Code zwischen Skript-Tags einfügen, wie im Druckbildschirm unten gezeigt:

jQuery(function($){
$(document).ready(function(){  
  
anime.timeline({loop: false})

.add({
duration: 2000,
})
.add({
targets: ['path.cls-2', 'circle.cls-1'],
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) { return i * 250 },
})
.add({
targets: 'path.cls-2',
duration: 10,
fill: ['rgba(0,0,0,0)', '#fff'],
}) 
.add({
targets: 'circle.cls-1',
duration: 2000,
fill: ['rgba(0,0,0,0)', '#0c1019'],
});

});  
});

Jede „Hinzufügen“-Funktion repräsentiert eine Animation in einer Zeitleiste von Animationen. Sie können diese „Hinzufügen“-Funktionen beliebig ändern, neue hinzufügen oder bestehende entfernen, stellen Sie nur sicher, dass die letzte Hinzufügen-Funktion mit einem ';' am Ende (wie Sie im obigen Code sehen können). Sie können innerhalb dieser „Hinzufügen“-Funktionen verschiedene CSS-Eigenschaften hinzufügen. Weitere Informationen zu den Eigenschaften und ihrer Verwendung finden Sie in den Dokumentationsbeispielen von anime.js.

5. Menümodul zu Spalte 2 hinzufügen

Das einzige Element, das wir zum Vervollständigen unserer globalen Kopfzeile benötigen, ist ein Menümodul in Spalte 2.

Menü auswählen

Wählen Sie ein Menü Ihrer Wahl.

Hintergrundfarbe entfernen

Entfernen Sie dann die Standardhintergrundfarbe.

Menütexteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Menütexteinstellungen wie folgt:

• Menütextfarbe: #000000
• Menütextgröße:
  • Desktop: 0.7vw
  • Tablet: 2.2vw
  • Telefon: 3vw
• Textausrichtung: Rechts

Texteinstellungen des Dropdown-Menüs

Ändern Sie auch die Farbe der Dropdown-Menüzeile.

• Farbe der Dropdown-Menüzeile: #ffffff

Symboleinstellungen

Zusammen mit der Farbe des Hamburger-Menüsymbols.

• Hamburger Menüsymbol Farbe: #0c1019

Größe

Gehen Sie dann zu den Größeneinstellungen und stellen Sie sicher, dass die Breite "100%" beträgt.

• Breite: 100%

Position

Vervollständigen Sie die Moduleinstellungen, indem Sie das Modul auf der Registerkarte Erweitert neu positionieren.

• Position: Absolut
• Ort: Mitte rechts

6. Alle Theme Builder-Änderungen speichern

Sobald Sie das gesamte globale Header-Design abgeschlossen haben, können Sie alle Änderungen am Theme-Builder speichern und das Ergebnis auf Ihrer Website anzeigen!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie Ihren globalen Divi-Header in Ihrer Webentwicklungsreise einen Schritt weiterbringen. Genauer gesagt haben wir Ihnen gezeigt, wie Sie Ihr SVG-Logo mit Divi und der Anime-JavaScript-Bibliothek hinzufügen und animieren. Sie konnten auch die JSON-Datei für die globale Header-Vorlage kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne einen Kommentar im Kommentarbereich unten hinterlassen.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.