css Archives - id23 Webdesign

Schlagwortarchiv für: css

WordPress E-Mail Vorlagen in HTML

10. November 2019/0 Kommentare/in Allgemein, Web/von id23

WordPress hat sich über die Jahre von einer einfachen Lösung für Blogs zu einem vollwertigen Content Management System gewandelt und ist mittlerweile das am weitesten verbreitete CMS der Welt. Trotzdem werden bis heute bei jeder frisch installierten WordPress-Instanz alle Systemnachrichten, wie z. B. Benachrichtigungen über neue Konten, dem Zurücksetzen des Passworts oder der Moderation von Kommentaren, immer als reine Text E-Mails versendet.

Für Webseitenbetreiber, die Kontakt-/Anfrageformulare im Einsatz haben oder einen Online-Shop betreiben, über die E-Mails zur Bestellung oder Registrierung an Kunden versendet werden, ist das alles andere als optimal. Zum einen sind die Möglichkeiten zur Gestaltung eingeschränkt, zum anderen wirkt es gerade auf Kunden nicht unbedingt vetrauenswürdig und professionell.

Warum sendet WordPress E-Mails nicht in HTML?

Das liegt daran, dass die wp_mail() Funktion in WordPress im Standard den Inhaltstyp „plain/text“ verwendet. Um das zu ändern, muss der Inhaltstyp (content-type) über die functions.php im Theme-Verzeichnis in „html/text“ geändert werden, wie es beispielsweise hier beschrieben wird. Zwar sendet WordPress die E-Mails mit dieser Anpassung in HTML, allerdings mehr oder weniger ohne jegliche Formatierung oder Layout, da es im Standard für WordPress keine E-Mail-Templates gibt.

Viele Kontaktformular- oder Online-Shop-Erweiterungen, die über WordPress E-Mails versenden, überschreiben dieses Verhalten ebenso und liefern oft bereits ihre eigenen HTML-E-Mail-Vorlagen.

Aber einfacher wird es dadurch nicht – im Gegenteil. Die Vorlage wird in der Regel nur für den Versand der Nachrichten des verwendeten Plugins genutzt. D. h. die Systembenachrichtigungen von WordPress werden weiterhin ohne HTML-Template verschickt und wenn mehrere Plugins mit eigenen E-Mail-Vorlagen im Einsatz sind, wird eine einheitliche Gestaltung der E-Mail-Vorlagen zur Qual und verursacht bei jeder Änderung enormen Aufwand.

Wie erstelle ich eine einheitliche HTML-E-Mail-Vorlage für WordPress?

Wenn Sie über Ihre Website alle E-Mails mit einer einheitlichen HTML-Vorlage versenden wollen, können Sie jedoch auf einige kostenlose Plugins zurückgreifen. Eine dieser Lösungen ist das Plugin WP HTML Mail – Email Designer.

WP HTML Mail

Mit den Plugin WP-HTML Mail können Sie ohne großen Aufwand ein responsives HTML-Template für Ihre E-Mails, die über WordPress versendet werden, erstellen. Nach der Installation des Plugins erscheint unter „Einstellungen“ der Punkt „E-Mail Template“, über den Sie Ihre E-Mail-Vorlage ganz einfach konfigurieren können, auch ohne HTML-Kenntnisse.

Im Reiter „Allgemein“ können Sie eine Hintergrundfarbe wählen sowie den Namen und die E-Mail des Absenders festlegen. In den Reitern „Header“, „Inhalt“ und „Footer“ können Sie die jeweiligen Bereiche gestalten. In allen Bereichen können Sie eine beliebige Schriftart, -größe und -Farbe definieren. Im Header Ihrer E-Mail-Vorlage können Sie außerdem auch ein Bild (maximal 600 Pixel breit) hinterlegen.

Im Vorschau-Fenster sehen Sie immer direkt jede Änderung live. Wenn Sie Ihre Konfiguration in Ihrem E-Mail-Programm testen möchten, können Sie im unteren Bereich der Konfigurationsoberfläche einfach eine Testnachricht an Ihre E-Mail Adresse senden lassen.

Nach Ihrer Anpassung speichern Sie Ihre neue E-Mail Vorlage einfach ab. Die WordPress System-E-Mails sollten nun immer diese Vorlage verwenden.

Wenn Sie als Kontaktformular-Lösung auf Contact Form 7 setzen, können Sie im Reiter „Plugins“ einfach ein Häkchen bei „Template verwenden“ setzen, um die Vorlage auch dafür zu nutzen. Unter Plugins finden Sie außerdem weitere kostenpflichtige Erweiterungen für WP HTML Mail, mit der Sie die E-Mail-Vorlage auch für andere Plugins wie beispielsweise WooCommerce oder Ninja Forms einsetzen können.

Sie benötigen Hilfe bei der Einrichtung Ihrer E-Mail-Vorlagen?
Gerne unterstütze ich Sie bei diesem Problem oder ähnlichen Themen in WordPress.

Jetzt anfragen

Oder haben Sie sich für die Erstellung einer neuen Website entschieden?
Mit meinen Website-Paketen, Lite, Basic oder Premium auf WordPress-Basis gelingt der einfache Ein- und Umstieg zu Ihrer neuen Website. Gerne unterstütze ich Sie auch bei der Optimierung eines vorhandenen WordPress-Webangebots. Kontaktieren Sie mich gerne und wir arbeiten gemeinsam die Konditionen für Ihr individuelles Projekt aus!

Weitere Infos zu den Leistungen

SVG Artista – SVG Zeichnungsanimationen erstellen

25. August 2019/0 Kommentare/in CSS, Web/von id23

Screenshot von svgartista.net

Vor Kurzem habe ich hier im Ratgeber Animista vorgestellt, eine Plattform mit einer großen Sammlung vorgefertigter CSS Animationen. Animista ist ein Projekt von Ana Travas aus Kroatien, und seit einigen Tagen gibt es ein weiteres nützliches Tool von Ana Travas – SVG Artista. Damit lassen sich die Strich- und Fülleigenschaften von SVG-Grafiken mit einfachem CSS-Code animieren.

SVG Artista ist keine aufwendige SVG Animations-App oder JS-Bibliothek, worüber sich fortgeschrittene Bewegungsanimationen erzeugen lassen. Es können lediglich Zeichnungsanimationen erstellt werden. Also das Zeichnen von Linien oder das Füllen von Flächen sowie das Ein- und Ausblenden von Elementen. Laut Beschreibung sollte es problemlos mit Pfad-, Linien-, Polylinien-, Rechteck-, Kreis-, Ellipsen- und Polygonelementen funktionieren. SVG-Verläufe können jedoch nicht animiert werden.

Ein kleines Beispiel:

See the Pen
SVG Cat – CSS Stroke Animation by Sergej Skrjanec (@iamlark)
on CodePen.

Wie funktioniert SVG Artista?

Über die Buttons „Open SVG“ oder „Paste Markup“ lädt man entweder seine SVG-Grafik hoch oder fügt direkt einen SVG-Code ein. Anschließend lassen sich über die Einstellungsleiste am linken Rand verschiedene Voreinstellungen für die Füll- oder Strichanimationen auswählen und zuweisen. Unter anderem kann eine eigene CSS Klasse festgelegt werden, die jedem Element in deiner SVG-Grafik zugewiesen und für die Erzeugung der CSS Animation verwendet wird. Außerdem lassen sich auch die Hintergrundfarbe und der Animationstyp (Animation oder Transition) festlegen.

Die Idee dazu so ein Tool zu entwickeln ist daraus entstanden, dass viele Besucher von Animista gefragt haben, wie die Animista-Splash-Screen-Animation erstellt wurde. Ursprünglich sollte es auch als ein Teil von Animista veröffentlicht werden, es stellte sich jedoch während der Umsetzung heraus, dass es sinnvoller wäre, ein eigenes Projekt zu starten.

Wer seinen SVG-Grafiken automatisiert, ohne großen Aufwand, etwas Pep verleihen möchte, sollte sich SVG Artista mal ansehen. Die konfigurierbaren Zeichnungsanimationen sind eine unaufdringliche und schöne Möglichkeit einer Website etwas Leben einzuhauchen. Der Download des CSS-Codes steht unter der MIT Lizenz und ist kostenlos für private und kommerzielle Projekte verwendbar.

Hier geht’s weiter zu SVG Artista.

Animista – Vorgefertigte CSS Animationen

19. August 2019/1 Kommentar/in CSS, Web/von id23

Screenshot Animista - CSS Animations on demand

Screenshot von animista.net

Die Zeiten von Adobe Flash und komplett animierten Webseiten, die mit einer gefühlt endlosen Ladezeit die Geduld ihrer Besucher strapaziert haben, sind glücklicherweise lange vorbei. Auch heute werden Seiten natürlich noch animiert – allerdings meistens zurückhaltender als noch in den Anfangszeiten des Internets und anstatt auf Adobe Flash setzt man heute z. B. auf CSS3. Damit lassen sich schlichte, aber auch aufwendige Animationen recht einfach umsetzen. Noch einfacher ist es natürlich, wenn man dabei auf vorgefertigte CSS Animationen zurückgreifen kann, die man nur noch in sein eigenes Webprojekt einbinden muss.

Animista ist eine solche Sammlung mit vorgefertigten CSS Animationen. Über die Navigation ist die Sammlung unterteilt in verschiedene Bereiche, z. B. „Entrances“ (Eingangsanimationen), „Exits“ (Ausgangsanimationen) oder „Background“ (Hintergrundanimationen). Jede Animation ist in verschiedenen Varianten vorkonfiguriert verfügbar, kann aber auch beliebig angepasst werden. Über eine Einstellungsbox am linken Rand lässt sich u. a. die Verzögerung, die Wiederholung, die Richtung oder auch die Dauer der gewählten Animation verändern. Über den Replay-Button rechts oben lässt sich die Animation beliebig wiederholen, um die Auswirkung der Einstellungen zu testen.
Wenn eine passende Animation gefunden wurde, kann diese entweder zu einer Favoritenliste hinzugefügt werden oder man lässt sich direkt den CSS Code generieren, der dann nur noch kopiert und im eigenen Webprojekt eingefügt werden muss.

Entstanden ist Animista als kleines Nebenprojekt von Ana Travas aus Kroatien. Ursprünglich wollte sie ihre verwendeten CSS Animationen einfach nur sinnvoll und zugänglich organisieren, damit sie diese auch in anderen Projekten wiederverwenden kann. Mit der Zeit hat sich aus der Sammlung eine Art Spielplatz entwickelt, auf dem die Auswirkung verschiedener Optionen, wie z. B. die Beschleunigung, eine Verzögerung oder die Dauer auf die Animation getestet werden konnte.

Wer also auf der Suche nach passenden Animationen für seine Website ist oder wer einfach mal ausprobieren möchte, was man mit CSS alles animieren kann, sollte mal bei Animista vorbeischauen. Der Download der vorgefertigten und generierten CSS Animationen ist kostenlos für private und kommerzielle Projekte und steht unter der FreeBSD-Lizenz.

Hier geht’s weiter zu Animista.