So fügen Sie Ihrem Divi-Design eine SVG-Animation mit kreisförmigem Textpfad hinzu

Mit den Trends im Webdesign-Bereich Schritt zu halten, ist eine der besten Möglichkeiten, als Webdesigner auf dem Laufenden zu bleiben. Es ermöglicht Ihnen, moderne Websites zu erstellen, die Ihre Kunden beeindrucken und Ihre Fähigkeiten auf die nächste Stufe bringen. Im heutigen Tutorial zeigen wir Ihnen, wie Sie sich mit einem Trend vertraut machen können, den Sie heutzutage oft auf fortgeschrittenen Websites sehen. Kreistext SVG-Animationen. Wir zeigen Ihnen, wie Sie diese in Ihr Divi-Seitendesign einfügen und sogar als Schaltfläche verwenden. Sie können die JSON-Datei auch kostenlos herunterladen!

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 das Layout KOSTENLOS herunter

Um das kostenlose Layout in die Hände zu bekommen, müssen Sie es 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!

Heldendesign erstellen

Neuen Abschnitt hinzufügen

Hintergrundfarbe

Beginnen wir mit der Erstellung des Heldendesigns. Öffnen Sie eine neue oder vorhandene Seite mit Divi und fügen Sie einen neuen regulären Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen und wenden Sie eine Hintergrundfarbe Ihrer Wahl an.

• Hintergrundfarbe: #f3eee8

Abstand

Fahren Sie als nächstes mit den Abstandseinstellungen fort und ändern Sie die oberen und unteren Abstandswerte.

• Obere Polsterung: 30px
• Untere Polsterung: 30px

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile hinzufügen, indem Sie die folgende Spaltenstruktur verwenden:

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen, navigieren Sie zum Design-Tab, öffnen Sie die Größeneinstellungen und nehmen Sie die folgenden Anpassungen vor:

• Breite: 95%
• Maximale Breite: 2580px

Spalte 1 Einstellungen

Sobald die allgemeinen Zeileneinstellungen vorgenommen wurden, können Sie mit dem Öffnen der Einstellungen der ersten Spalte fortfahren.

Hintergrundbild

Laden Sie in den Hintergrundeinstellungen ein Hintergrundbild Ihrer Wahl hoch. Dieses Bild wird weiter unten im Tutorial unter der SVG-Animation mit Kreistext angezeigt.

• Hintergrundbildgröße: Cover
• Position des Hintergrundbilds: Mitte
• Hintergrundbild wiederholen: Keine Wiederholung

Textmodul Nr. 1 zu Spalte 2 hinzufügen

H1-Inhalt hinzufügen

Es ist an der Zeit, Module hinzuzufügen, beginnend mit einem ersten Textmodul in Spalte 2. Fügen Sie H1-Inhalte Ihrer Wahl hinzu, wenn Sie diesen Abschnitt als Helden verwenden, oder H2-Inhalte, wenn Sie ihn an anderer Stelle auf Ihrer Seite verwenden.

H1-Texteinstellungen

Als nächstes gestalten Sie die Überschriftentexteinstellungen dieses Moduls.

• Überschrift Schriftart: Playfair Display
• Überschrift Textfarbe: #212121
• Textgröße der Überschrift:
  • Desktop: 100px
  • Tablet: 60px
  • Telefon: 45px

Größe

Gehen Sie dann zu den Größeneinstellungen und wenden Sie eine maximale Breite an.

• Maximale Breite: 600px

Textmodul #2 zu Spalte 2 hinzufügen

Inhalt hinzufügen

Unterhalb des ersten Textmoduls fügen wir ein weiteres Textmodul hinzu. Dieses Mal fügen wir einige Beschreibungsinhalte hinzu.

Texteinstellungen

Navigieren Sie zur Registerkarte Design und gestalten Sie den Text wie folgt:

• Textschriftart: Montserrat
• Textgröße: 15px
• Textzeilenhöhe: 2em

Größe

Verwenden Sie auch in den Größeneinstellungen eine maximale Breite.

• Maximale Breite: 520px

Abstand

Navigieren Sie dann zu den Abstandseinstellungen und verwenden Sie einige Reaktionswerte.

• Oberer Rand:
  • Desktop: 20vh
  • Tablet & Telefon: 50px
• Linke Polsterung: 5%

Grenze

Wir fügen auch einen linken Rand in die Randeinstellungen ein.

• Breite des linken Rands: 2px
• Farbe des linken Rands: #000000

Kreis-Text-SVG-Animation hinzufügen

Codemodul zu Spalte 1 hinzufügen

Nachdem wir nun die Grundlage für unser Abschnittsdesign geschaffen haben, können wir uns auf die Erstellung der SVG-Animation mit Kreistext konzentrieren. Um die SVG-Animation mit Kreistext hinzuzufügen, verwenden wir ein Codemodul in Spalte 1. Fahren Sie fort und fügen Sie eines hinzu.

Link hinzufügen

Wenn Sie möchten, dass diese SVG-Animation mit Kreistext anklickbar ist, können Sie in den Linkeinstellungen des Moduls eine URL Ihrer Wahl hinzufügen.

Größe

Stellen Sie sicher, dass die Breite des Moduls auch in den Größeneinstellungen auf „100%“ eingestellt ist.

• Breite: 100%

Kreis- und Text-SVGs zur Codebox hinzufügen

Zurück zum Codefeld auf der Registerkarte Inhalt. Hier fügen wir zuerst den Kreis-SVG und den Textpfad mit dem folgenden HTML-Code hinzu:

<svg viewBox="0 0 500 500">
<defs>
	<path d="M50,250c0-110.5,89.5-200,200-200s200,89.5,200,200s-89.5,200-200,200S50,360.5,50,250" id="circle">
	</path>
</defs>
	<text dy="70">
		<textPath xlink:href="#circle">View Portfolio • New Homes •</textPath>
	</text>
</svg>

SVGs mit CSS stylen

Natürlich müssen wir den SVG-Textpfad so gestalten, dass er zu unserem Design passt. Wir stellen außerdem sicher, dass das SVG auf „100%“ eingestellt ist. Fügen Sie die folgenden CSS-Codezeilen in das Codefeld zwischen den Style-Tags ein:

<style>
svg { 
	width: 100%;
}
svg textPath { 
  font-size: 39px;
	font-family:  "Montserrat";
	text-transform: uppercase;
	letter-spacing: 20px;
	fill: #fff;
}
</style>

AnimateTransform HTML-Tags hinzufügen

Um nun eine endlose Rotation für unseren Text zu erstellen, verwenden wir das animate-Transformationselement, mit dem wir die Animation erstellen können, ohne dass externen JavaScript-Code erforderlich ist. Dies sind die Attribute, die wir unserem SVG zuweisen:

  <animateTransform
            attributeName="transform"
            begin="0s"
            dur="15s"
            type="rotate"
            from="0 250 250"
            to="360 250 250"
            repeatCount="indefinite" 
			/>

Sie können diese Attribute beliebig ändern, um die Animation Ihrer Wahl zu erstellen. Beachten Sie, wie das letzte Attribut, repeatCount, auf „unbestimmt“ gesetzt ist. Dies ermöglicht es uns, eine endlose Rotationsschleife für unser SVG zu erstellen.

Textpfad für den eigenen Gebrauch ändern

Natürlich möchten Sie den Text so ändern, dass er Ihrer eigenen Website entspricht. Dies können Sie ganz einfach zwischen den Textpfad-Tags tun. Sobald Sie jedoch die Länge der Kopie ändern, müssen Sie die Einstellungen ändern, um sicherzustellen, dass Sie einen perfekten Kreis erstellen. Sie können mit dem Wert „dy“ herumspielen, der eine Verschiebung entlang der y-Achse anzeigt, und die Schriftgröße und den Buchstabenabstand des Textpfads ändern, bis Sie das gewünschte Ergebnis erhalten. Das ist es!

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 Ihre Website über Designtrends auf dem Laufenden halten. Genauer gesagt haben wir Ihnen gezeigt, wie Sie eine SVG-Animation mit Kreistext erstellen und elegant in Ihrem Divi-Design verwenden. Sobald Sie den Ansatz verstanden haben, können Sie dieses Element verwenden, um jeden gewünschten Text anzuzeigen und ihn an Ihr eigenes Design anzupassen. Sie konnten die JSON-Datei auch 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.