Menu

Themify

Das große Themify Update V7

Themify Update V7

Nach einer längeren Beta-Phase Ende vergangenen Jahres gab es zum Jahreswechsel nun die finale Version vom großen Themify Update V7 für den Page Builder. Es ist ein weiterer Schritt, das Framework für die Zukunft zu rüsten und an die neuen Gegebenheiten und Herausforderungen im Netz anzupassen. Alle Änderungen und Verbesserungen stelle ich Dir in diesem Artikel kurz vor.

Ein großer Sprung nach vorne

Seit dem letzten großen Update (V5) steht die allgemeine Verbesserung der Seitengeschwindigkeit und Leistung der Themes und des Builders auf dem Plan. Das V5-Update konzentrierte sich dabei ganz auf die Frontend-Seitengeschwindigkeit, während sich das Themify Update V7 mehr auf Features und Leistung im Backend konzentriert.

Laut Themify wurden dafür viele Komponenten im Backend neu codiert, um das Framework sowie auch den Builder zu optimieren. Das Hauptziel war, die Themen schneller zu machen und mit einer besseren Stabilität auszustatten. Der gesamte Code wurde dahingehend optimieren. Unter anderem wurden die Datenbankabfragen reduziert und der Code im ganzen „leichterer“ gemacht (PHP/Javascript/CSS).

Das neue „Grid System“

Die wohl auffälligste Änderung im aktuellen Update ist das neu gestaltete Rastersystem. Der alte CSS-Flexbox-Ansatz wurde verworfen und durch ein CSS-Grid ersetzt. Hierdurch entstehen zukünftig deutlich mehr Gestaltungs- und Layout-Möglichkeiten, wie das hinzuzufügen unbegrenzten vielen Spalten, die Neuordnung von Spalten und das Erstellen von kachelähnlichen Rastern.

Die Spaltenanzahl ist nunmehr nicht mehr wie früher auf „nur“ 6 Spalten begrenzt. Es lassen sich theoretisch „unbegrenzt“ viele Spalten in ein „Colum“ einfügen. Zudem lässt sich auch die Spaltenreihenfolge responsive ändern. Dies erlaubt für jede Ausgabengröße eine neue, individuelle Anordnung der einzelnen Spalten festzulegen. Auch das responsive Anpassen der Spaltengröße selbst lässt sich nun für jedes einzelne Ausgabegerät individuell festlegen.

Neuordnung von Columen

Die Abstände zwischen den Spalten (Gutter) werden ab Version 7 über einen Prozentwert gesteuert, der global definieren werden kann oder separat dem jeweiligen Ausgabegerät zugewiesen werden kann. Dies macht die gesamte Gestaltung noch flexibler.

Responsiver Hintergrundmodus

Neu im Themify Update V7 ist, dass man bei der Wahl des Hintergrundmodus nicht mehr an eine Auswahl gebunden ist. Für jedes Endgerät lassen sich jetzt die Modi individuell festlegen. Somit kann beispielsweise aus einem Parallax-Hintergrundbild auf dem Desktop ein „zoom“ Bild auf Tablet und ein „fullcover“ auf Mobil werden.

Responsive Hintergrundbild, für jedes Ausgabegeräte den passenden Modus auswählen

Verbesserte Integration von Google Font

Die verschärfte Diskussion der letzten Zeit über die DS-GVO konforme Integration von Google-Fonts hat auch Themify veranlasst, dahingehend einige Verbesserungen am Framework vorzunehmen.

Download von Google Fonts

Bisweilen war es möglich, Schriften separat auf dem Server abzulegen, um mit einer selbstgehosteten Version zu arbeiten. Neu ist nun die Möglichkeit, alle verwendeten Schriften in einem Projekt auf den Server nachzuladen. Das ist insbesondere für diejenigen interessant, die immer noch Google-Schriften via Link in ihr Projekt einbinden.

Galerie einfach per Drag & Drop sortieren

Eine kleine Annehmlichkeit hat sich auch im „Gallery-Modul“ getan. Hier kann ich ab sofort bequem per Drag & Drop meine Bilder sortieren und muss nicht mehr auf die Upload-Reihenfolge achten.

Bilder verschieben per Drag & Drop im Galereimodus

Video-Play on Hover

Eine Verbesserung hinsichtlich der User Experience gab es auch im Video-Modul. Dieses reagiert nun via „Hover-Effekt“ und spiel automatisch das Video im Vorschaufenster ab. Die Funktion steht allerdings nur für selbst gehostete Videos zur Verfügung. Bei YouTube und Viemo Videos funktioniert dieser Effekt leider nicht.

Neue Builder Module

Zuwachs gab es auch bei den einzelnen Builder- und Builder Pro Modulen. Und hier bewahrheitet sich wieder einmal meine Aussage, dass ich viele Plugins aus dem Projekt entfernen kann, da diese Funktionalitäten im Framework enthalten sind. Neu hinzugekommen sind ein einfaches „Inhaltsverzeichnis“. Sehr praktikabel bei langen Texten und Dokumentationen auf einer Seite. Des Weiteren ein Modul für „Bewertungssterne“ sowie eine kleine Anzeige für die „Lesezeit“.

Modul Lesezeit

Zudem stoßen noch ein „Code-Modul“ zur Veröffentlichung von Code-Snippet inklusive Code-Syntax-Highlights für verschiedene Programmiersprachen und ein „Taxonomie-Modul“ zur differenzierten Anzeige von Artikeln hinzu.

Happy New Year

Dagegen recht unscheinbar ist die neue Möglichkeit im Footer, die Jahreszahl im Copyright-Nachweis automatisch auszugeben. Somit entfällt dieser kleine lästige Arbeitsschritt jedes Jahr die Jahreszahl aufs Neue anzupassen. Einfach die aktuelle Jahreszahl mit dem Shortcode %year% ersetzen.

Alle Features aus dem V7 Update findest Du auch noch mal in diesem Beitrag von Themify.

Post Type Builder (PTB) V2 Update

Zeitgleich mit dem Themify Update V7 wurde auch eine überarbeitete Version des „Post Type Builders (PTB)*“ vorgestellt. In der neuen Version 2 lassen sich jetzt mehrere Archivvorlagen erstellen, die jeweils über eine Shortcode in das Projekt eingebunden werden können.

Zudem können nun auch benutzerdefinierte Felder zu jedem Beitragstyp hinzugefügt werden. Dazu gibt es ein speziellen PTB-Shortcode [ptb_field], mit dem man sich benutzerdefinierte Feldwerte in Artikeln anzeigen lassen kann.

Neu in der Version 2 ist auch die Integration der ehemals separaten „PTB Extra Fields“ in den PTB-Kern. Es bedarf jetzt nicht mehr der zusätzlichen Installation eines extra Add-ons.

Alle Änderungen findest Du auch noch mal detailliert in diesem Artikel beschrieben.

Ein kleiner Ausblick

Für das nächste Hauptupdate sind einige interessante Features geplant. Unter anderem soll das Bearbeiten von Builder-Inhalten auf Touch-Geräte (Tablet & Mobil) verbessert werden und wir können uns auf die Integration von „Lottie-Animation“ freuen.

Hinweis: Dieser Beitrag enthält Werbelinks, gekennzeichnet mit einem (*)

header-typekit

Adobe Fonts im Themify Page Builder nutzen

Es gab einmal eine Zeit, da war die Schriftauswahl in einem Webprojekt sowas wie ein Kinderspiel. Die eigentliche Entscheidung war seinerzeit, aus einer Handvoll Systemschriften auszuwählen ob man das Projekt in einer serif- oder sans-serif Schrift gestaltet. Mittlerweile leben moderne Webseiten von ihrer Typografie, ich möchte sogar behaupten, sie sind ein essenzieller Bestandteil.

Die mannigfaltige Auswahl an Webfonts heutzutage macht dies möglich. Eine der großen Anbieter von Schriften ist Adobe Fonts, ehemals Adobe Typekit. In diesem Beitrag zeige ich Dir, wie Du Adobe Fonts im Themify Page Builder* oder allgemein in Deinem Webprojekt nutzen kannst.

Was sind die Adobe Fonts bzw. Typekit?

Bereits vor Typekit unterstützte jeder große Browser die Möglichkeit, auf eine Schriftdatei zu verlinken und diese mit ein wenig CSS anzupassen. Vor diesem Hintergrund brachte 2009 die Firma Small Batch Inc. die Plattform Typekit auf den Markt. Eine cloudbasierte Bibliothek hochwertiger Webschriften.

Das Revolutionäre an Typekit war eine einheitliche Lizenz für die Verlinkung von Web-Schriften, kostenlose als auch kommerzielle Schriftarten unglaublich schnell zu hosten, Unterschiede im Umgang von Browsern mit Schriftarten auszugleichen sowie Schriftdesignern ein Schutzniveau für ihre Arbeit zu bieten.

„Für Designer und Entwickler ist dies ein bedeutender Schritt nach vorne. Sie müssen Ihre Inhalte nicht mehr in Bildern oder Flash einfangen, nur um sich visuell auszudrücken. Seiten werden besser nutzbar, zugänglicher und indexierbarer. Dies ist ein massives Upgrade für das Web.“ so Jeffrey Veen, CEO von Typekit, zum Start der Plattform 2009.

Im Oktober 2011 übernahm Adobe die Firma als kreative Erweiterung ihres cloudbasierten Abo-Dienstes und entwickelt ihn kontinuierlich weiter. 2018 erfolgt dann die Umbenennung in Adobe Fonts. Mittlerweile wurden auch die Lizenz Modele und Einbettungsmöglichkeiten angepasst und vereinfacht.

Adobe Fonts vs. Goggle-Fonts

Die Adobe Fonts Bibliothek umfasst mittlerweile 20.000+ hochwertiger Schriften (Stand 2021). Bis auf ein paar kostenlose Schriften ist diese Bibliothek grundsätzlich kostenpflichtig. Zugang zum ganzen Angebot bekommst Du automatisch bei Abschluss eines Creative Cloud-Abos oder einer Software Einzellizenz.

Das günstigste Angebot wäre im Moment eine „InCopy“ Einzellizenz zu 5.94 EUR monatlich. Ein mehr als fairer Preis, allein für die nicht- und kommerzielle Nutzung der gesamten Schriftbibliothek.

Das große Manko in meinen Augen, eine „physische“ Auslieferung der eigentlichen Schriftdatei ist seitens Adobe nicht vorgesehen. Mit Beendigung Deines Abos gehen auch alle Schrifteinbettungen wieder verloren.

Ganz anders gestaltet sich dies bei den Google-Fonts. Der Zugriff auf die mittlerweile 1300+ Schriften (Stand 2021) ist grundsätzlich kostenlos. Viele Schriftarten sind unter der SIL Open Font License veröffentlicht, während andere unter der Apache-Lizenz veröffentlicht wurden. In beiden Fällen handelt es sich um freie Software-Lizenzen. Dies bedeutet, dass jeder Webseitenbetreiber sie frei verwenden kann, ohne mit Lizenzgebühren rechnen zu müssen.

Natürlich besteht zusätzlich die Möglichkeit, erweiterte Lizenz direkt bei der Gießerei oder dem Designer zu erwerben.

Zudem kannst Du dir alle Schriftdateien aus der Bibliothek oder auf der „goggle-webfonts-helper“ Plattform direkt herunterladen.

Wie bindest Du Adobe Fonts in Dein Projekt ein?

Wie oben bereits erwähnt, benötigst Du ein Konto sowie ein abgeschlossenes Abo bei Adobe, in welcher Form auch immer. Die gesamte Verwaltung übernimmt die Creativ Cloud Applikation. Von hier hast Du dann Zugriff auf die gesamte Schriftbibliothek sowie die Verwaltung Deiner installierten Schriften.

Um mit einzelnen Schriften auf Deinem Computer oder Laptop zu arbeiten reicht es aus, die jeweilige Schrift in der Bibliothek zu aktivieren. Die Schrift wird dann für die Zeit der Aktivierung in einem versteckten und verschleierten Ordner auf Deinem System installiert.

Ausgewählte Schrift mit den aktivierten Schnitten

Für die Nutzung in einem Webprojekt ist noch ein zusätzlicher Schritt notwendig. Die sogenannten Webfonts werden nochmal spezielle in einzeln angelegtem „Webprojekten“ gespeichert, auf das später verlinkt wird. Um die zu ladende Datei so klein wie möglich zu halten, macht es Sinn genau hier nur die wirklich benötigten Schriftschnitte zu aktivieren.

Neues Webprojekt anlegen oder einem bestehenden zuordnen

In diesem generierten „Webprojekt“ kannst Du weitere Einstellung für den jeweiligen Zeichensatz, wie OpenType-Funktionen und Sprachunterstützung, steuern. Und nicht zuletzt bekommst Du an dieser Stelle den benötigten CSS-Code für Deine Website.

Webprojekt in Adobe Fonts anlegen

Als ersten Schritt suchst Du dir Deine bevorzugte Schrift aus der Bibliothek aus. Auf der Detailansicht des jeweiligen Fonts findest Du rechts oberhalb den Link „zu Webprojekt hinzufügen“. In dem sich öffnenden Popup Fenster kannst Du entweder ein neues Projekt anlegen bzw. die Familie einem bestehenden Projekt hinzufügen. Mit der Bestätigung erhältst Du bereits alle nötigen Links und CSS-Codes für Dein Projekt.

Die Verwaltung Deiner ausgewählten Schriften

Um ein Webprojekt auch später bearbeiten zu können, navigierst Du in der Hauptübersicht Deiner Schriftverwaltung zum Stichpunkt „Webprojekte“. Es öffnet sich eine Übersicht aller relevanten Punkte, die Dein Projekt im Moment beinhaltete. Neben den aktivierten Schriften ist dies auch die spezielle ID und der Link zum Einbinden auf Deiner Website.

Die Hauptansicht in Deinem Webprojekt

Über den Punkt „Projekt bearbeiten“ kannst Du weitere Einstellung vornehmen. Speziell nicht benötigte Schriftschnitte solltest Du hier, wenn nicht bereits in der Vorauswahl passiert, abschalten.

Weitere Bearbeitungsmöglichkeiten in Deinem Webprojekt

Schriften auf der Website einbinden

Die von Adobe Fonts empfohlene Methode zur Verwendung der Schriften auf deiner Website ist recht einfach. In einem ersten Schritt kopierst du dir den bereitgestellten Link aus deinem „Webprojekt“ und fügst ihn in den Header-Bereich Deiner Seite ein.

Themify bietet dir für hierfür einen eigenen Unterpunkt in den „General Setting“ an. Unter dem Bereich „Header Code“ fügst du einfach den kopierten Linkt ein.

Der Adobe Font Link für den Header Bereich Deiner Seite
p{
 font-family: arno-pro, serif;
font-weight: 400;
font-style: normal;
}

h1, h2, h3, h4, h5, h6{
 font-family: arno-pro, serif;
font-weight: 700;
font-style: normal;
}

Mit dem oben gezeigten Code beschreibst du aber nur die Eigenschaft „font-familie“. Alle anderen Eigenschaften deiner Schrift, wie „color“, „font-size“, „line-height“ und „letter-spacing“, kannst Du wie gewohnt in den Custom Einstellungen des Themas vornehmen. Im Ergebnis erscheint nun Deine ausgewählte Adobe Schrift anstelle des Default-Fonts.

Nutzt du ein anderes Thema auf deiner Seite, ist es unter Umständen erforderlich ein zusätzliches Plugin zu installieren, was es dir erlaubt speziellen Code in den Header-Bereich deiner Seite zu schreiben. Alternativ biete sich aber auch die nachfolgende Plugin Variante an.

Plugin Alternative zum Einbinden

Alternativ zur oben beschriebenen Methode kannst Du diese Schritte auch über das Plugin „Typekit Fonts für WordPress“ realisieren. Es ist recht einfach und selbsterklärend aufgebaut. Das Plugin übernimmt an dieser Stelle die Einbindung auf Deine Seite. Dafür benötigst Du nur die Adobe ID, die Du oberhalb in Deinem „Webprojekt“ findest, um die Verbindung zum Font-Server herzustellen.

Auch hier ist es erforderlich, den oben angesprochenen CSS Code zu schreiben. Das Plugin bietet Dir hierfür ein eigens Feld an.

Vorteil bei der Plugin Methode, der CSS Code liegt dezentral auf Deiner Seite. Er wird nicht gelöscht, sollte die Custom CSS Deines Themas durch ein Update verändert oder überschrieben werden. Nachteil, es läuft ein Plugin mehr auf Deiner Seite, was eigentlich nicht nötig wäre.

Erweiterte CSS Möglichkeiten

Im Regelfall reicht die Beschreibung der HTML-Tags p (Paragrph) und H1-H6 (Headings) aus. Damit sollten alle Formatierungen in Deiner neuen Schrift dargestellt werden. Wenn Du nur eine Schrift verwendest, kannst Du auch global dem HTML-Tag „body“ diese Schriftfamilie übergeben und dann gesondert einzelne HTML-Tags über die Eigenschaft „font-style“ formatieren.

CSS Anweisungen in der Custom CSS Datei Deines Themas

Du kannst aber noch weiteren HTML-Tags spezielle Eigenschaften zuordnen. Den CSS Code schreibst Du, wie oben gezeigt, entweder mit in Deine Custom CSS oder in das Plugin. Eine Liste aller vom WordPress erlaubten HTML-Tags findest Du an dieser Stelle.

Aber keine Angst, Du musst nicht jedes HTLM-Tag einzeln definieren. Ein Großteil der Tags „vererbt“ sich innerhalb des Codes aus anderen bereits formatierten HTML-Tags. Du hast aber an dieser Stelle die Möglichkeit, auf einige speziellen Formatierungen Einfluss zu nehmen. Ein möglicher Kandidat, wie beispielsweise die Bildunterschrift (figcaption), könnte dann beispielsweise wie folgt aussehen.

figcaption{
font-family: arno-pro, serif;
font-weight: 400;
font-style: italic;
color: #555555;
font-size: 15px;}

Bestimmte Aufgaben kannst Du auch über eigene CSS-Klassen (.class) lösen. Eine weitere, interessante Möglichkeit Dein Design zu individualisieren. Eigene Klassen kannst Du im Editor (Gutenberg) genauso vergeben wie in jedem einzelnen Themify Baustein, den Du in Deiner Gestaltung platzierst hast.

Zuordnung einer eigenen Klasse im Textbaustein von Themify

In dieser neu definierten Klasse gibst Du dann die entsprechenden CSS Anweisungen ein. Ein sehr spannender Anwendungsfall wäre bei einer Schriftmischung innerhalb einer Überschrift mit einer zweiten Schriftart. In diesem gesonderten Beispiel vergibst Du die neue Klasse direkt im HTML-Tag mittels eines „span“ Tag. Dieser umgibt dann das zu formatierende Wort.

<h1>Eine H1 Überschrift mir einer<span class="klassenname">Auszeichnung</span></h1>

Die CSS-Formatierung könnte dann wie folgt lautet:

.klassenname{
font-family: calgary-script-ot, sans-serif;
font-weight: 400;
font-style: normal;}
Deine eigene Klasse innerhalb einer Überschrift

*Das Wort „Klassenname“ ersetze bitte durch Deinen gewählten Namen!

Wie Du siehst, gibt es an dieser Stelle dutzende Möglichkeiten in den Default-Standart eines Themas einzugreifen. Trotz all dieser phantastischen Möglichkeiten laute die Devise immer „Less is more“!

Fazit

Außer Frage, als Designer und Typografie Liebhaber schätze ich diese Ressource sehr, mit den Adobe Fonts auf über 20.000 Schriften zurückgreifen zu können. Dieses Tutorial wurde allerdings durch einige Forenbeiträge inspiriert. Demnach tauchten immer wieder Probleme mit der Integration der Adobe Fonts, speziell in verschieden Page Buildern, auf.

Allein aus einem gewissen Eigeninteresse heraus interessierte mich, ob und wie die Nutzung in meinem bevorzugten Page Builder von Themify* funktioniert. Und, es gestaltete sich in den beiden oben beschriebenen Varianten als problemlos.

Hinweis: Dieser Beitrag enthält Werbelinks, gekennzeichnet mit einem (*)

Die-Page-Speed-Optimierung

Die Page Speed Offensive

Vor gut einem Jahr veröffentlichte Google den Zeitplan für eine Berücksichtigung der Benutzerfreundlichkeit von Webseiten in ihrer Suche. In diesem Atemzug fanden auch neue Werkzeuge in der Google Search Console ihren Platz. Mit der Page Speed Offensive und dem V5 Update ziehen nun Themify nach und präsentieren ihr überarbeitetes Framework.

Der neue „Core Web Vitals-Bericht“ bietet Dir einen Überblick über die Leistung Deiner Webseite und liefert ausführliche Informationen zum Page Speed und anfallenden Problemen. Zudem kannst Du Dir über Page Speed Insights oder Lighthouse Verbesserungsvorschläge einholen und prognostizierte Problem beheben.

User experience im Focus

Die Benutzerfreundlichkeit von Webseiten rückt immer stärker in den Focus der Google-Suche. Somit etablieren sich nach und nach neue Parameter bei der modernen Webseitengestaltung. Während „Mobile Friendly“ und das „HTTPS-Protokoll“ schon lange zum guten Ton gehören, so halten jetzt auch Reaktionszeiten und Ladegeschwindigkeit (Page Speed) Einzug in die Suche.

Page Experience Signal Quelle: Google Search Central

Spätestens jetzt ist es an der Zeit, als Webseitenbetreiber auf diese neue Entwicklung zu reagieren, und sich dem Thema Website Optimierung zu stellen. Ein Aspekt, diesen neuen Herausforderungen gerecht zu werden, ist die Page Speed Optimierung.

Spezielle Page Builder stehen im Verruf, die Ladezeiten einer Webseite, aufgrund des integrierten Frameworks, auszubremsen. Das liegt schlichtweg an der Komplexität dieser Konstrukte. Immer mehr Tools und Einstellungsmöglichkeiten finden Einzug, was den Anwender auf der einen Seite natürlich freut. Auf der anderen Seite wächst damit auch die gesamte Dateigröße einer Website, die letztlich geladen werden muss.

Die Page Speed Offensive von Themify

Genau diesem Problem haben sich die Jungs von Themify für ihr Framework angenommen. Anfang des Jahres präsentierten Sie ihre Antwort, die PageSpeed Offensive. Dabei wurde das gesamte Framework komplett überarbeitet und an die neuen Herausforderungen angepasst. In meinem Page-Builder Revue bin ich bereits ein wenig auf dieses Feature eingegangen.

Mit der technischen Anpassung des Frameworks kam auch eine neue und übersichtliche „Schaltzentrale“ für die Optimierung hinzu, die ich dir an dieser Stelle einmal näher vorstellen möchte.

Themify General Settings/Performance

Viele grundlegende Einstellungen im Themify Page Builder* findest Du in den General Settings. Seit einiger Zeit findest Du dort auch die neue Registerkarte „Perfomance“.

Mit der Page Speed Offensive präsentiert Themify auch eine komplett überarbeitete Performance Setting im Backend deiner Website
Der Bereich „Perfomnce“ in den Themify General Settings

Um ein Optimum für Deine Seite herauszuholen, solltest Du wenigstens die folgenden Einstellungen vornehmen. Wenn Du das erste Mal diese Einstellungen an Deiner Seite vornimmst, empfehle ich Dir, immer nur eine Einstellung zu aktivieren und danach die Seite auf seine Funktion hin zu prüfen. Treten Fehler auf, nimm diese Einstellung zurück und untersuche das Problem.

Die Einstellungen, die Du auf jeden Fall aktivieren solltest:

  1. Lazy Load – Lazy Load, das Laden von Bildern, wenn sie in den Sichtbereich kommen, solltest Du aktiviert lassen.
  2. Themify Casch – Aktiviert den Cash für Deine gesamte Seite.
  3. Exclude Cashing on – An dieser Stelle kannst Du bestimmen, welchen Bereich unter Umständen nicht in den Cash aufgenommen werden sollen.
  4. GZip Script – Eine serverseitige und verlustfreie Datenkompressionsmethode, sie sollte aktiviert werden.
  5. WebP Images – Die Bereitstellung Deiner Bilder im neuen WebP Format sollte aktiviert werden. WebP erreicht bei sehr hoher Komprimierung mehr Bildqualität pro Datenmenge als JPEG und steht somit in direkter Konkurrenz zum JPEG-Format.
  6. jQuery Migrate – Die Reduzierung der jQuery Bibliothek solltest Du aktivieren

Die Bildoptimierung

Die „Perfomance-Einstellung“ legen im Hintergrund die richtigen Schalter für Dich um, aber es gibt auch Schrauben, an den Du noch selbst drehen kannst, um dem Framework und Deiner Seite unter die Arme zu greifen. Der Schwerpunkt liegt hierbei auf der Reduzierung der gesamten Dateigrößen Deiner Website.

Den größten Speicherplatz belegen in Deinem Content Bilder und Videos. Und genau hier gibt es eine Menge an Optimierungsmöglichkeiten. Im Rahmen meines Website-Relaunch für meine Photoseite habe ich genau an dieser Schraube gedreht. Bei mittlerweile über 1200 Photos, die ich im Schnitt um 60-70 Prozent optimieren konnte, reden wir über einige MB weniger Speicherbedarf, die jetzt den Server belasten. Auch bei weniger Bild-intensiven Seiten steckt in dieser Page Speed Optimierung eine Menge Potenzial.

Es mag pedantisch klingen, aber bei dieser Optimierung zählt jedes Byte.

Was definiert ein Photo?

Dazu erst einmal ein paar Gedanken zum Thema: „Was definiert eigentlich ein Photo“? Grundlegend wird die Dateigröße eines Photos durch seine Dimension und seine Auflösung definiert. Hinzu kommt dann noch, in welchem Dateiformat es letztendlich bereitgestellt wird.

In der Photographie geht der Trend immer weiter nach oben, verbesserte Sensoren und Optiken liefern immer bessere Bildqualitäten. In der Summe steigt auch die Dateigröße eines Ausgangsphotos. Das Ziel der Bildoptimierung für das Web ist aber genau entgegengesetzt. Wir benötigen Bilder, die bei einer optimalen Qualität eine sehr geringe Dateigröße aufweisen. Doch wie kommen wir genau zu diesem Ergebnis?

Ich stelle Dir an dieser Stelle einmal einen möglichen Optimierungsprozess etwas genauer vor.

Das Ausgangsphoto

Schauen wir uns den Prozess für ein einfaches Content-Photo eines Blogs an. Es spielt erst einmal keine Rolle, ob Du das Photo mit dem Handy oder einer DSLR Kamera aufgenommen hast. In beiden Fällen hast Du eine qualitativ hochwertige, aber auch große Ausgangsdatei.

Das Origianl Photo aus einem modernen Handy

Im erstem Schritt solltest Du Dir über die später benötigte Dimension klar werden. Eine Webseite, speziell der Content Bereich, hat immer eine maximale Breite. Bei einfachen Themes kann diese „fix“ sein, im Themify Framework hast Du eine Wahlmöglichkeit. Um es nicht zu kompliziert zu machen, gehen wir vom „Default“ Wert aus. Das sind 1160px für die gesamte Seitenbreite auf dem Desctop. Im Regelfall hat ein Blog Bereich noch eine s.g. Sidebar, die Unterteilung liegt meistens bei 1/3 zu 2/3.

Daraus ergibt sich bereits eine grobe Dimension für das spätere Photo von ca. 770px Breite. Um den genauen Wert für Deine Seite zu ermitteln, wechsle in die Console Deines Browsers und untersuche in alten Beiträgen die integrierten Photos. Hier bekommst Du eine pixelgenaue Anzeige der Dimensionen.

Blick in die Console von Chrome

Bildbearbeitung und Zuschnitt

Wenn Du alle benötigten Werte ermittelt hast, kann es an die Bildbearbeitung und den Zuschnitt gehen. In einer Bildbearbeitungssoftware Deiner Wahl wähle als Erstes den passenden Ausschnitt und das passende Verhältnis für das spätere Photo. Bei vielen Tools findest Du bereits passende Seitenverhältnisse als Vorauswahl.

Dialog „Bildgröße“ in Photoshop

Schritt 2 ist, die endgültige Dimension Deines Bildes zu definieren. In Photoshop findest Du dies beispielsweise unter dem Dialog „Bild“. Hier kannst Du den oben ermittelten Wert (Breite) für das Bild eingeben. Die Auflösung sollte auf 72 ppi eingestellt werden. Dies hat den einfachen Hintergrund, dass Monitore im Regelfall nicht mehr als 72 ppi (Pixel per Inch) wiedergeben können.

Dialog „Speichern für das Web“ in Photoshop

In Schritt 3 erfolgt jetzt noch das „Speichern für das Web“. Auch hierfür steht Dir in Photoshop ein eigener Dialog zur Verfügung. In einer anderen Software mag er ähnlich oder anders betitelt sein. Bei diesem Schritt fällt auch die Überlegung, in welchen Datei-Format Du Dein Bild speicherst. Für den Webbereich funktionieren folgen Formate:

JPEG (Joint Photographic Experts Group) – Das jpeg-Format ist das gängigste Dateiformat im Web und im Zweifel immer die richtige Wahl. Über variabel einstellbare Qualitätsstufen kann hier sehr viel Speicherplatz gewonnen werden.

PNG (Portable Network Graphics) –  ist das Nachfolgeformat zum veralteten GIF Format. PNG -Formate kommen immer dann ins Spiel, wenn Du transparente Bereiche abspeichern möchtest. Das Format unterscheidet sich noch einmal in PNG 8 und PNG 24. Die Zahlenwerte beziehen sich auf die speicherbaren Farbwerte. Das PNG 8 Format kann 256 verschiedene Farbwerte speichern, somit kommt es hauptsächlich bei einfachen Grafiken (Graustufenbilder) zum Einsatz, in denen nicht viele Farbwerte enthalten sind. PNG 24 (32) kann dagegen 16,8 Mio. Farben plus Transparenz abzuspeichern, was dann für ein freigestelltes Photo die richtige Wahl wäre.

GIF (Graphics Interchange Format )– Das frühere Format für die Transparenzspeicherung war das GIF-Format. Es kommt heute nur noch wenig bis gar nicht zum Einsatz. In den meisten Fällen sieht man es noch bei animierten Dateien.

SVG (Scalable Vector Graphics) – Ein verhältnismäßig neues Format im Web ist das SVG. Es liefert sehr keine Dateigrößen bei maximaler Skalierbarkeit ohne Qualitätsverlust, da nur eine mathematische Berechnungsformel gespeichert wird. Bevorzugte Motive sind Grafiken, Icon und Seitenlogos.

WebP – Dieses Grafikformat wurde 2010 von Google als ein weiterer Abkömmling des Video-Codec VP-8 eingeführt. Es kann statische und animierte Bilder verlustbehaftet oder verlustfrei komprimieren und speichern.

Das Photo nach der Bearbeitung in eine Bildbearbeitungssoftware

Kompression

In einem letzten Bearbeitungsschritt werden die Bilder nochmals komprimiert. An dieser Stelle sind Kompressionsraten von bis zu 70% möglich, was die Dateigröße noch einmal merklich reduziert. Wenn Du händisch einzelne Bilder komprimieren möchtest, kannst Du dies beispielsweise auf Compressor.io erledigen. Lade Deine Bilder via Drag&Drop in das Tool, wähle eine Kompressionsrate (Lossless = Verlustfrei, Lossy = Verlustbehaftet) und starte den Vorgang.

Die Startseite von Compressor.io
Das Photo nach der Komprimierung in Compressor.io

Prozesse automatisieren

Wie Du am Beispielphoto siehst, ist dieser Optimierungsprozess ein lohnenswertes Unterfangen und hinsichtlich der neuen Google Suche auch nur empfehlenswert. Bei kleineren Seiten wäre es ein einmaliger Arbeitsaufwand, den man auch händisch erledigen kann.

Bei größeren Seiten und Blogs macht es Sinn, einige Arbeitsschritte zu automatisieren. Beispielsweise kannst Du dir in Deiner Bearbeitungssoftware sogenannte „Aktionen“ hinterlegen, um mit einem Klick den Zuschnitt und das „Speichern für das Web“ automatisch zu erledigen.

Das Fenster „Aktionen“ in Photoshop mit vorgefertigten Speicheroptionen

Auch verschieden WordPress-Plugins nehmen Dir viel von den oben beschriebenen Arbeiten ab. Ein empfehlenswertes Plugin für die Bildoptimierung und WebP Konvertierung ist das Plugin „Imagify“. Es komprimiert in einem ersten Schritt alle bereits vorhandenen Photos auf Deiner Seite und übernimmt dann die weitere Komprimierung für alle neu hoch geladenen Bilder.

Wenn Du ein anderes Thema als Themify auf Deine Seite nutzt, fehlt Dir unter Umständen die Bereitstellung des neuen Webformates WebP. Mit „WebP Converter for Media“ kannst Du diesen Job auch im nachher rein auf Deiner Seite erledigen lassen.

Optimierung meines Portfolios

Wie ich es eingangs bereit erwähnte, ist jetzt der ideale Zeitpunkt seine Webseite für die neue Google-Suche zu rüsten. In meiner Funktion als Webmaster überarbeite ich derzeit alle Kundenseiten sowie meine eigenen Online-Projekte. Ich denke, die bereits erreichten Score-Werte beim Page Speed Insights Test sprechen für sich.

Website-Score-Arnerahn_de
Homepage „Arne Rahn Mediendesign“
Website-Score-Alltagshilfe_Radloff
Homepage „Alltagshilfe Radloff“ Waren
Website-Score-RA_Schilling
Homepage „RA H. Schilling“ Neubrandenburg
Website-Score-Arnerahn_Photography
Mein Photo-Portfolio
Website-Score-Individual_Travel
Travel Blog weltweit
Website-Score-Black_Bikes_Motorcycles
Homepage „Black Bikes Motorcycles“

Alle oben gezeigten Projekte sind mit dem Themify Page Builder* und dem Ultra Thema* entstanden. Planst Du bereits Deine Page Speed Offensive? Wenn Du Hilfe benötigst oder auf Themify umsteigen möchtest, spreche mich gerne an!

Hinweis: Dieser Beitrag enthält Werbelinks, gekennzeichnet mit einem (*)

Header-social-network

Wie Du „Social Links“ auf Deiner Website platzierst

Ein Element, was Du heutzutage auf jeder modernen Website findest, ist eine Verlinkung auf die sozialen Netzwerke. Die verschiedenen Links finden sich zumeist in Icon-Form im Header oder Footer einer Seite wieder. Einen Link auf Dein Social Network Profil zu setzen, ist per sé keine große Sache. Eine exakt positionierte und farblich abgestimmte Icon-Leiste stellt dar unter Umständen eine größere Herausforderung dar. An dieser Stelle unterstützt Dich der Themify Pagebuilder mit einem sehr nützlichen Feature.

Themify Social Links

In den General Setting von Themify* gibt es eine eigene Registerkarte, die sich ausschließlich diesem Problem widmet. Der Grundgedanke ist die zentrale Verwaltung Deiner sozialen Profil-Links, die Du dann nach Bedarf an jeder erdenklichen Stelle auf Deiner Website aktivieren kannst. Das erspart Dir letztlich viel Zeit und Arbeit.

Wie Du dieses nützliche Feature einrichtest und effektiv nutzen kannst, zeige ich Dir in diesem kleine Tutorial.

Step 1 – Die Verlinkungen anlegen

Um bei der späteren Gestaltung Deiner Seite das Feature nutzen zu können, musst Du als ersten Schritt Deine sozialen Profillinks anlegen. Dazu benötigst Du nur die genaue URL (www.intagram.com/ProfilName/) Deiner Netzwerk-Profile.

Die Themify Settings im Backend von WordPress

Wechsel dann im Backend Deiner WordPress-Installation in die Themify Settings und dort auf die Registerkarte „Social Links“.

Als Erstes wähle aus, ob Du für die spätere Darstellung ein Bild oder einen Icon-Font benutzen möchtest. In den meisten Fällen wird der Icon-Font mehr Sinn machen, da dies Vektorgrafiken sind, die Du zudem farblich an Dein Design anpassen kannst.

Dann geht es an das Einrichten der eigentlichen Links. Für jedes Profil hast Du Einstellungsmöglichkeiten wie Titel, URL, Icon und Farben.

Die Registerkarte „Social Links“ in den Settings

1- Titel = Netzwerkname, dieser kann nachBedarf später neben dem Icon mit ausgehen werden.

2- Link = eindeutige URL auf das Netzwerkprofil

3- Icon = das passende Netzwerk-Icon, im Framework von Themify findest Du neben den hauseigen Font auch den „Awesome Fontsatz“, aus dem Du frei wählen kannst. Optional besteht auch die Möglichkeit, sich über „Fontello“ einen ganz individuellen Fontsatz anzulegen.

4- Icon Color = definiert die Farbe der Icon

5- Background = definiert eine Hintergrundfarbe für die Icons (Bsp. Weißes Icon auf blauem Grund)

Icon Fonts im Themify Pagebuilder

Für einen neuen Profillink klickst Du unterhalb auf „+ Add Link“ und es öffnet sich ein neuer Bereich. Grundsätzlich kannst Du hier beliebig viele Links anlegen. Bedenke aber immer den benötigten Platzbedarf bei der späteren Ausgabe auf Deiner Website. Wenn Du alle Links angelegt hast, sichere Deine Einstellung rechts oben über „Save“.

Step 2 – Platzierungen im Header oder Footer

Im nächsten Schritt kannst Du globale Einstellungen für den Header- und Footerbereich festlegen. Wechsel dazu in den „Settings“ auf die Registerkarte „Theme Settings“ und dort auf den Punkt „Theme Appearance“. An dieser Stelle wählst Du Dein globales Header- und Footerdesign aus. Jede wählbare Variante hat auch einen definierten Platz für die Social Links, die Du nach Bedarf über „Exlcude Social Widgets“ ausblenden kannst.

Die Registerkarte „Theme Settings“

Step 3 – Platzierung in der Sidebar

Wenn Du einen Blog betreibst, möchte Du vielleicht die Social Links lieber in der Sidebar Deiner Seite platzieren? Auch das ist kein Problem! Dazu navigiere im linken WordPress-Menü auf den Oberpunkt „Design“ und dort zum Register „Widgets“.

WordPress Menü Design/Widget

An dieser Stelle findest Du alle Platzhalter zur Widgets-Ausgabe, die Dein Theme anbietet. Mit der Installation stellt Themify* auch einige fertige Widgets zur Verfügung, unter anderem das der „Social Links“. Dieses kannst Du ganz bequem in der Sidebar platzieren und anpassen.

Widget-Einstellungen der Social Links

1- Titel = vergebe einen allgemeinen Widget-Titel

2- „show link name“ = zeigt neben dem Icon auch den Netzwerknamen

3- „open link in new window“ = öffnet den Link auf einer neuen Registerkarte des Browsers

4- „Icon Size“ = bestimmt die Ausgabegröße der Icons

5- „Orientation“ = bestimmt die Ausrichtung der Icons, horizontal oder vertikal

Step 4 – Alternative Platzierung im Content

Noch individueller lassen sich die „Social Links“ über den Builder platzieren. Hier findest Du das „Widget-Modul“ über, dass Du das „Social Link Widget“ ausgeben kannst.

Verfügbare Module im Pagebuilder

Öffne dazu die Bearbeitung im Builder und wähle aus den Modulen das „Widget-Modul“ aus. Hier kannst Du optional einen Modultitel vergeben und danach, über „Select Widget“ die Themify – Social Links auswählen. Jetzt bekommst Du die gleichen Anpassungsmöglichkeiten, wie bereits in Step 3 vorgestellt.

Die Einstellungen im Modul Widget

Zusätzlich steht Dir hier auch noch der Registertap „Styling“ zur Verfügung, über den Du Deine Social Links noch umfangreicher gestalten kannst.

Individuelle Gestaltungsmöglichkeiten über den Registertap „Styling“

Fazit

Mit diesem Feature von Themify* sind der Verlinkung von Social Network Profilen fast keine Grenzen gesetzt. Du hast an jeder Stelle die Möglichkeit, die Links ganz individuell anzupassen, damit sie sich nahtlos in Dein Design integrieren. Und sollte sich ein neues Profil dazu gesellen oder wegfallen, ändere es einmal in der globalen Verwaltung, die Änderungen werden sofort auf allen Platzhalter Deiner Website sichtbar.

Hinweis: Dieser Beitrag enthält Werbelinks, gekennzeichnet mit einem (*)

feat-Relaunch

Der Website-Relaunch – Eine praxis­bezogene Anleitung

Es waren gleich mehrere technische aber auch persönliche Aspekte, die mich dazu veranlasst haben, über einen Website-Relaunch meines Photographie Portfolios nachzudenken. In diesem Artikel möchte ich Dir an meinem persönlichen Beispiel zeigen, wie Du an einen Website-Relaunch herangehen kannst, ihn zielsicher planen und umsetzen kannst.


Was ist ein Website-Relaunch?

In der Fachsprache versteht man unter einem Relaunch eine Wiedereinführung eines Produktes.

In unserem Wirtschaftskreislauf durchlaufen sämtliche Produkte einen sogenannten Produktlebenszyklus. Vereinfacht ausgedrückt bedeutet das, dass ein Produkt oder eine Dienstleistung als Erstes erdacht bzw. designt wird. Dann folgt die Markteinführung, -Reife und -Sättigung. In vielen Fällen endet es mit dem Verschwinden vom Markt. Und an dieser Stelle setzt der Relaunch an. Man überdenkt das Produkt, richtet es neu aus und verpasst ihm im besten Fall ein neues Gewand und führt es danach wieder in den großen Kreislauf zurück. 

Und so wurde dann aus „Raider“ irgendwann mal „Twix“.

Gründe für eine Website-Relaunch

Auch eine Webseite durchläuft mehr oder weniger diesen Zyklus. Ich möchte sogar behaupten, schneller als manch ein klassisches Produkt, was nicht zuletzt der rasanten Entwicklung des Mediums selbst geschuldet ist. Die Gründe, warum man über einen Website-Relaunch nachdenken sollte, können dabei vielseitig sein und werden von Fall zu Fall unterschiedlich ausfallen.

Allgemein kann man hier in drei Obergruppen unterteilen. Zum einen der technische Aspekt, sprich die gesamte Codierung der Seite sowie der integrierten Dienste. Dann das Design und damit einhergehend die „User Experience“ einer Seite. Und nicht zuletzt der wohl wichtigste Part, die Zielgruppenausrichtung. 

Aus diesen drei Bereichen ergibt sich im Vorfeld ein umfassender Fragenkatalog, der dann unter Umständen einen Website-Relaunch erforderlich machen kann.

Herangehensweise an einen Website-Relaunch

IST-Analyse Deiner Webseite

In dieser ersten, analysierenden Phase gilt es festzustellen, ob und in welchem Umfang ein Website-Relaunch erforderlich wird. Unternehmungen, sei sie nun analog oder digital, steht in einem kontinuierlichen Wandel. Sie müssen sich stetig weiterentwickeln und immer wieder aufs Neue erfinden, um am Markt existieren zu können. Daher ist es sehr wichtig, die Unternehmensziele und das dahinterstehende Konzept regelmäßig zu durchleuchten und zu hinterfragen. Bezogen auf Deine Website solltest Du wenigstens die folgenden Fragen stellen:

  • Was findest Du gut oder schlecht an der bisherigen Website?
  • Gibt es ein Feedback Deiner Kunden/Besucher zur alten Website?
  • Hast Du eine auszuwertende Statistik Deiner alten Seite zur Hand? 
  • Ist Dein Design noch zeitgemäß?
  • Und einhergehend damit, spreche ich meine Zielgruppe noch an?

Die IST-Analyse zu meiner Website.

Wie oben schon mal angesprochen, kamen mehrere Punkte zusammen, die letztlich einen Website-Relaunch erforderlich machten. Ein großer Schwerpunkt war die technische Seite.

Dazu muss ich sagen, dass diese meine älteste Seite im Netz war, an der ich über die Jahre unzählige Änderungen vorgenommen habe. Immer wieder wurden hier Plugins getestet, verschiedenste Codesnippets eingebaut und gelöscht sowie Seitenstrukturen geändert.

Aus technischer Sicht ein großes, loses Stückwerk, was ich endlich einmal von Grund auf bereinigen wollte. Hinzu kam das große V5 Update seitens Themify, bei dem im Framework sehr viel umgestellt wurde.

Mit hoher Wahrscheinlichkeit hätte ich nach dem Update die Rache meiner „Altlasten“ zu spüren bekommen. Daher entschied ich mich für eine komplette Neuinstallation der Seite.

Die alte Seite mit ihren „Fehlern“

Zweiter entschiedener Aspekt war die Performance. Die Seite lebt nicht zuletzt von den Fotografien, von denen sich mittlerweile weit über 1000 Stück auf der Seite angesammelt haben. Dies machte sowieso einen Umzug auf einen neuen Server mit mehr Speicherplatz erforderlich sowie die Überlegungen einer besseren Bildoptimierung.

Aus meiner Besucherstatistik ergaben sich auch gleich mehrere Erkenntnisse zur Seitenstruktur sowie den benutzten Endgeräten, die das neue Konzept berücksichtigen musste.

Aber auch hinsichtlich meiner angestrebten Zielgruppe galt es einige neue Überlegungen anzustellen. Alles in allem sollte es ein rundes und umfangreiches Paket werden!

Zielsetzung

Aus der IST-Analyse lässt sich leicht ein detaillierter Zielkatalog definieren, der in der folgenden Planung und Vorbereitungsphase seine Berücksichtigung finden muss. Mögliche Zielsetzungen bei einem Website-Relaunch wären:

  • Deine Seite wurde bisher schlecht gefunden? Dann sollte die Verbesserung des Suchmaschinen-Rankings als Ziel definiert sein.
  • Es sollen mehr Kontakte oder Verkäufe über die Seite abgewickelt werden, sprich eine Steigerung der Konversionsrate?
  • Du möchtest Deine Marke nach außen festigen und stärken?
  • Die Seite an ein neues Corporate Design anpassen.
  • Die Seite technisch auf den neusten Stand bringen.
  • Arbeitsprozesse vereinfachen durch FAQ-Seiten oder Online Chatmöglichkeiten.

Und, das ist nur ein kleiner Auszug an möglichen Zielen, die sich aus der IST-Analyse ergeben können.

Meine Zielsetzung im Detail

  • Die Seite von ihren Altlasten (Codierungen) befreien und technisch auf den aktuellen Stand bringen (neuste WP Version inklusive dem V5-Update von Themify)
  • Die Performance der Seite verbessern, speziell in Form einer umfangreichen Bildoptimierung
  • Umsetzung eines neuen, zeitlosen Designs
  • Eine zielgerichtete Seitenstruktur für eine höhere Konversionsrate
  • Eine erweiterte Contentstrategie

Zielgruppe und Wettbewerber

Man kann es nicht oft genug wiederholen, aber eine gute und erfolgreiche Website orientiert sich immer an ihrer Zielgruppen. Daher ist eine genaue Zielgruppenanalyse eines der ersten und wichtigsten Aufgabe in Deinem Business. An dieser Stelle arbeite ich persönlich gerne mit der „Buyer Persona“, aber auch das SINUS-Modell liefert hier viele wertvolle Erkenntnisse.

Mein „Buyer Personas“ Template

In der Planungsphase zum Website-Relaunch sollte man einen Blick auf die ursprünglich definierte Zielgruppe werfen. Insbesondere solltest Du hier die folgenden Fragen stellen:

  • Hat sich meine Zielgruppe verändert?
  • Wie habe ich bisher Kunden angesprochen und kann dies noch verbessert werden?
  • Setze ich mit dem Relaunch neue/andere Schwerpunkte auf der Seite?

Auch lohnt es sich immer einen Blick auf Dein näheres Umfeld zu werfen. In diesem Zusammenhang schau Dir einmal Deine unmittelbaren Mitbewerber an und versuche unter anderem diese Fragen zu beantworten:

  • Wie sieht allgemein der Wettbewerb in meiner Branche aus?
  • Was machen Deine Mitbewerber anders/besser?
  • Welche Funktionalitäten bieten sie an?
  • Wie sieht die Suchmaschinenoptimierung (SEO) in diesem Segment aus?
  • Welche Keywords ranken am besten bzw. befinden sich an erster Stelle in der Suche?

Zeitplanung für den Relaunch

Um die Zeitplanung und eine Deadline musste ich mir bei meinem Projekt weniger Gedanken machen. Ich hatte mir die neue Seite parallel zur alten installiert und schrittweise aufgebaut. Zudem ist es mein reines Privatvergnügen, sprich, es ist nicht „lebenswichtig”. Trotz allem hatte ich mir als spätesten Termin das Frühjahr 2021 gesetzt, man will ja auch mal irgendwann fertig werden!

Wenn Deine Website essenziell für Deine Einnahmen verantwortlich ist (eCommerce Shop), dann ist das offline Zeitfenster bzw. eine Deadline der wichtigste Faktor, den Du berücksichtigen solltest.

  • Wie groß darf das offline Zeitfenster sein bzw. gibt es eine Deadline?
  • Gibt es vielleicht saisonal bedingt schlechte Zeiten, in denen man den Website-Relaunch durchführen kann?
  • Reichen meine eingeplanten Ressourcen und Mittel – was kostet mich ein Tag offline gehen?

Die Vorbereitung

Wenn sich aus der IST-Analyse der Umstand eines Website-Relaunchs herauskristallisiert, stehen die nächsten organisatorischen Fragen auf dem Zettel.

  • Stehen die Ressourcen, intern wie extern, für einen Relaunch bereit?
  • Wer erstellt die neuen Inhalte, wer liefert die Bilder?
  • Gab oder gibt es ein Content Audit für die bestehenden Inhalte?
  • Wer ist der Ansprechpartner und hat dieser alle benötigten Zugänge und Berechtigungen?
  • Wie hoch ist mein Gesamtbudget?

Und das sind nur einige Fragen, die Du Dir in diesem Zusammenhang stellen musst. Es ist ähnlich wie beim Kochen, bevor Du richtig loslegen kannst, besorgst Du Dir erst einmal alles, was laut Rezept benötigt wird. Fehlt Dir eine entscheidende Komponente, gelingt unter Umständen das ganze Gericht nicht.

Wie hab ich mich vorbereitet.

Zugegeben, ich habe es ein wenig einfacher, da ich Seiten-Betreiber und Webmaster in einer Person bin. Trotz allem gab es eine Menge zu erledigen, bis die Seite technisch umgesetzt werden konnte. An erster Stelle stand, das komplette Konzept neu zu überarbeiten. Die Grundlage für ein richtiges Gestaltungskonzept ist immer Deine Zielgruppe.

Ein Design fertigst Du nicht für Dich, sondern für Deine Zielgruppe! 

Deine persönlichen Präferenzen können an dieser Stelle zwar mit anklingen, sind aber nicht maßgeblich für das spätere Erscheinungsbild entscheidend. 

In meinem Fall hat die Statistik Auswertungen der letzten Jahre gezeigt, dass ich meine angestrebte Zielgruppe nicht ausreichend genug anspreche. Ein erklärtes Ziel der Seite ist die Gewinnung von Modellen für meine Photographie, die ich allerdings in der Vergangenheit verhältnismäßig wenig über diese Seite generiert habe. 

Dieser Aspekt sollte im neuen Konzept stärker berücksichtigt werden, indem ich dem gesamten Thema mehr Transparenz verleihe. Das bedeutet, dass ich in Zukunft mehr aufklärenden Content mit auf die Seite bringe. Über diesen soll dann auch vermehrt der „Call to Action“ angesprochen werden. 

Zweiter großer Konzeptgedanke war die Abwendung von einer klassischen Galerie bzw. Portfolioseite. Die einzelnen Photostrecken sollen Ihre ganz eigene Geschichte erzählen und somit eine ganzheitliche Retro Perspektive abbilden.

Zudem sollten den Bildern im gestalterischen mehr Platz eingeräumt werden, was die Überlegungen auf einen minimalistischen Designansatz lenkten. 

Aus diesen ganzen Vorüberlegungen entstand als Erstes ein „Style Cap“. Eine erweiterte Ideensammlung für das neue Projekt, in dem Schrift, Farbe und Formen bereits Gestalt annehmen.

Das gesamte "Style Cap" zur neuen Seite für den bevorstehenden Website-Relaunch
Das gesamte „Style Cap“ zur neuen Seite

Noch konkreter wird die Planung mit dem Erstellen des Prototyps. An dieser Stelle verdichten sich die Ideen aus dem „Style Cap“ zu einer kompletten und funktionstüchtigen „offline“ Webseite. Hier zeigt sich auch die spätere Seitenstruktur sowie die verschiedenen Ansichten auch unterschiedlichen Endgeräten.

Der komplette Prototyp in Adobe XD für den Website-Relaunch
Der Prototyp in Adobe XD

Für die angestrebte Performance-Verbesserung stand eine komplette Bildoptimierung zur Disposition. Dafür musste der gesamte Bilderbestand in der Bilddimension und der Datenkomprimierung überarbeitet werden. Zudem kam die Überlegung, diese Schritte für die Zukunft zu automatisieren. Im Rahmen der Vorbereitungen galt es jetzt aber erst einmal, den vorhandenen Bestand händisch zu optimieren.

Die technische Umsetzung

Mit der technischen Umsetzung geht der Website-Relaunch in die heiße Phase. Hier zeigt sich sehr schnell, wie gründlich die gesamte Vorbereitung war. Bis zu diesem Zeitpunkt waren Deine investierten Stunden „nur“ offline, an Deiner eigentlichen Website ist dagegen noch nichts passiert.

Gleichzeitig beginnt jetzt auch die Phase, in der Du für Deine Kunden nicht erreichbar seien, wirst und Umsätze wegfallen. Wann und wie lange dieses Zeitfenster andauert, sollte daher explizit geplant werden.

Meine Umsetzung

Ein großer Vorteil war mit Sicherheit, dass ich meine Seite komplett neu aufsetzen wollte. Somit hatte ich mir parallel zur alten Seite eine frische WordPress Installation auf den Server installiert, an der ich bequem arbeiten konnte, ohne den Betrieb der alten Seite zu stören. Für einen Website-Relaunch ist dies natürlich ein sehr günstiger Umstand, da es später nur ein minimales offline Fenster gibt.

Nach der WordPress Installation wurden alle benötigten Plugins und das Themify Ultra Themes* aufgespielt und eingerichtet. Somit stand die technische Basis der neuen Webseite und ich konnte mich an das Überspielen (WordPress Importer) der alten Inhalte (Seiten und Artikel) machen.

Als Nächstes habe ich mich an die Umsetzung des neuen Designs gemacht. Die neuen Schriften wurden implementiert, Farbschemen gespeichert und die neuen Inhaltselemente gestaltet.

Im Bereich der Seiten gab es die größten Anpassungen, da sich die Seitenstruktur komplett geändert hat. Verbunden damit, musste auch alle Menüs überarbeitet werden. Einzig die Artikel blieben wie gehabt. Hier mussten dann „nur“ die optimierten Photos eingepflegt werden.

In letzter Instanz gab es noch das eine oder andere Feintuning. Es gibt immer einige Punkte, die man im Konzept nicht berücksichtigt hat und die einem erst auffallen, wenn man das Gesamtwerk vor Augen hat. Aber danach konnte die Seite Online gehen, was aber nicht bedeutet, dass damit die Arbeiten erledigt sind.

Zu oft wird unterschätzt, welche Arbeit eine Website im laufenden Betrieb macht. Vor allem, wenn die Seite über einen News- bzw. Blogbereich verfügt. Spezielle für meine Seite bedeutet dies auch neuen Content zu produzieren.

Projektplanung in der Übersicht

Wie Du siehst, kann ein Website-Relaunch unter Umständen ein ressourcen- und zeitraubendes Unterfangen werden. Das Geheimnis liegt in einer gründlichen Planung und Vorbereitung, damit die Ausfallzeit so gering wie möglich ausfällt. Hier nochmal eine knappe Zusammenfassung, wie Du an das Projekt Website-Relaunch ran gehen kannst.

Phase 1: Recherche und Analyse – verschaffe Dir einen umfassenden Überblick über den IST-Zustand.

Phase 2: Konzeption – definiere Deine Ziele und die daraus entstehenden Aufgaben.

Phase 3: Design – überarbeite oder passe Dein Gestaltungskonzept an Dein Corporate Design an.

Phase 4: Inhalte – stelle alle neuen Inhalte (Texte, Bilder, Video, etc.) bereit.

Phase 5: Technische Umsetzung – mach Dich wie geplant und konzentriert an die Umsetzung.

Phase 6: Test und Relaunch – überprüfe die gesamte Funktionalität sowie die Ansicht auf allen Endgeräten der neuen Seite. Geht wieder online!

Phase 7: Weiterbetreuung – organisiere die technische und inhaltliche Betreuung der neuen Seite.

Update 05/2021

In die Phase 7, der Weiterbetreuung, gehört auch eine zeitnahe Nachkontrolle der gestellten Ziele. Die Ergebnisse aus der Performance Optimierung können nicht sofort und vollumfänglich gemessen werden. Die großen Suchmaschinen brauchen eine gewisse Zeit, neue oder geänderte Webseite zu indexieren und zu bewerten.

Die Performance nach dem Website-Relaunch
Aktueller PageSpeed Score von 97

Um so mehr freut mich das jetzige Ergebnis der Seite mit einem Score von 97 beim PageSpeed Insights Test. Zum Zeitpunkt der Veröffentlichung dieses Posts lag die Messung noch bei „nur“ 90. Somit wurde mit dem aktuellen Ergebnis ein Teil der seinerzeit definierte Zielsetzung bestmöglich umgesetzt.

Fazit

Ein Website-Relaunch kann unter dem Strich eine Menge Arbeit bedeuten. Die Vorteile aus so einem Vorhaben überwiegen aber deutlich. Eine Webseite, die optisch wie inhaltlich überzeugt, verbessert nicht nur Deine Marktposition, sondern bietet auch die Chance, sich noch klarer von Deinen Mitbewerbern abzusetzen.

Hinweis: Dieser Beitrag enthält Werbelinks, gekennzeichnet mit einem (*)

feat-404

Die 404 Page, eine unterschätzte Seite.

Die 404 Page, eine unterschätzte Seite.

Arne Rahn

Weniger als 1 MinuteLesezeit min

Steve Jobs, der Begründer von Apple, vertrat die Philosophie, dass man im Gestaltungsprozess auch den nicht sichtbaren Bereichen eine gewisse Aufmerksamkeit schenken sollte. Im Fall von „Apple“ und später „Next“ bezog sich dies unter anderem auf das Innerste oder die Rückseite eines Computers. Folgt man diesem Ansatz auch im Webdesign, dann sind es hier die wenig oder bestens falls kaum benutzten Serviceseiten, wie die 404 Page.

Warum die Arbeit?

Aber ist es unbedingt erforderlich, diese Seite zu berücksichtigen? Zumal sich das CMS WordPress doch automatisch um die Auslieferung der standardmäßig vorhandenen Error-Page kümmert.

Die Antwort lautet: JA!

Trotz aller Sorgfalt kannst Du es nicht verhindern, dass Nutzer auf Deiner Seite mit dem 404-Fehler konfrontiert werden. Fehlt diese individuelle Seite in Deinem Webprojekt, bleibt der Nutzer in einem Error Fall im Dunkeln. Er kann nicht nachvollziehen, warum die aufgerufene Seite nicht funktioniert. 

In einer technisch hochmodernen Zeit verbindet man so etwas schnell mit einem negativen Gefühl. Um diesem entgegenzuwirken, empfiehlt sich immer die Gestaltung einer 404 Page, auf dem der User informiert wird und ihm Optionen für das nächste Vorgehen vorgeschlagen werden. Mit einer individuellen Konfiguration stellst du auch sicher, dass der User auf deiner Seite bleibt, ganz zu schweigen vom Gefühl „gut aufgehoben“ zu sein.

Zudem hat auch Google ein Problem mit einer nicht konfigurierten 404 Page. Die Suchmaschine versucht, auf eine nicht existierende Ressource zuzugreifen, was einen nicht korrekten HTTP-Statuscode 404 zur Folge hat. Die Suchmaschine wertet sowas als ein negatives Signal und auch dies wollen wir ja möglichst vermeiden.

Was ist eigentlich der HTTP-Statuscode 404?

Auf jede HTTP-Anfrage eines Web-Client erfolgt eine Antwort des Servers in Gestalt eines HTTP-Statuscode. Der Server teilt somit dem Client mit, ob seine Anfrage erfolgreich bearbeitet wurde. Im Falle eines auftretenden Fehlers gibt der Statuscode Auskunft darüber, wie die gewünschten Informationen zu erlangen sind. Die bekanntesten Meldungen sind: 404: „Nicht gefunden“, 403: „Fehlende Zugriffsberechtigung“ und 400: „Fehlerhafte Anfrage“.

Die Gründe derartiger Fehler können vielfältig sein. Ein Domainumzug ohne Weiterleitung (Redirekt), die komplette Löschung einer Webseite oder interne URL-Umstrukturierungen sind häufige Fehlerquellen. Ändern sich oft Inhalte auf der Seite, können auch vergessene „tote“ Links die Meldung auslösen. Nicht zu vergessen, ein banaler Schreibfehler eines Users in der URL.

Eine individuelle 404-Page konfigurieren

Im CMS WordPress ist diese grundlegende Funktion bereits vorhanden. Eine individuelle Lösung lässt sich recht einfach über ein zusätzliches Plugin realisieren. Wer ein wenig programmiertechnische Fähigkeiten mitbringt, kann dies aber auch problemlos in HTML oder PHP selbst erledigen.

Eine manuelle HTML-Page

Die Auslieferung einer individuellen 404-Page kannst Du über eine htaccess-Datei in Deinem Root-Verzeichnis realisieren.

Als Erstes erstelle Dir Deine 404-Page in einem Editor Deiner Wahl und lade sie anschließend in das Root-Verzeichnis auf den Server. Als Nächstes ergänze die htaccess-Datei um folgenden Eintrag: ErrorDocument 404 / 404-Seitenname.html (der Präfix „404-Seitenname“ sollte Deinem tatsächlich vergebenen Dateiname entsprechen). Hat Dein Webprojekt noch keine htaccess-Datei, musst Du auch diese im Root des Servers bereitstellen.

Unter WordPress

Unter WordPress sind die vorgenannten Schritte nicht nötig, da sich WordPress automatisch um die Auslieferung kümmert. Die standardmäßig vorhandenen Error Page liegt im Root-Verzeichnis Deines WordPress-Themes. Hier kannst Du diese Datei individuell auf Deine Bedürfnisse anpassen.

Eine weitere Option ist die Realisierung über ein externes Plugin. Es gibt verschiedene Anbieter, die sich ausschließlich um die Konfiguration der Fehlermeldungen kümmern. Du findest diese spezielle Option aber auch in einigen SEO oder Maintenance Plugins.

Mit dem Themify Framework

Auch Themify hat sich diesem Problem in seinem Framework angenommen und stellt Dir in den General-Settings eine Direktverlinkung auf eine individuelle Page zur Verfügung. Nutzt Du beispielsweise das Ultra Themes von Themify*, dann findest Du unter Themify/Settings/General die Seiteneinstellung „Error 404 Page“. 

Hier kannst Du bequem eine zuvor erstellte Seite auswählen und verlinken. Wie Du eine ganz originelle 404-Page im Themify Builder umsetzen kannst, zeige ich Dir im nächsten Abschnitt. 

Eine individuelle 404-Page erstellen

Eine Error-Page muss im Kern keine aufwendig gestaltete Seite sein. Versetze Dich in die Lage des Anwenders und überlege, wie Du ihm an dieser Stelle helfen kannst. Dazu stellt sich die Frage: Welche Elemente müssen in einer 404-Page unbedingt vorhanden sein?

Elemente einer 404-Page

Mit einer kleinen Textpassage solltest Du den Anwender aufklären, was gerade schiefgelaufen ist. Auf vielen Seiten findest Du den Standardtext „Seite nicht gefunden“ oder „Page not found“. An dieser Stelle kann man aber auch gerne etwas kreativer werden.

Des Weiteren solltest Du dem User eine Möglichkeit aufzeigen, wie er wieder auf Deine Seite zurückfindet. Das kann ein einfacher Button zur Startseite oder ein Link zu einem Archiv oder einer Sitemap sein. Optional bietet sich auch eine Suchfunktion oder die Möglichkeit einer Kontaktaufnahme an.

In meinen Projekten versuche ich immer, diesem „Fehler“ ironisch zu begegnen. Je nach Thema und Inhalt der Seite ist dies meist ein etwas abgewandelter Spruch und ein thematisch passendes Bild. Weiter unten findest Du einige ausgesuchte Beispiele aus meinen Projekten. 

Die Umsetzung mit dem Themify Builder

An dieser Beispielseite möchte ich Dir die Umsetzung mit einer einfachen Grafik im Themify Page Builder zeigen. Die Grafik habe ich mir von OpenDoodles geladen. Eine kleine, witzige Sammlung von Sketsch Illustrationen, die Du frei verwenden kannst. Zudem lässt sich im „Generator“ der Seite auch die Farbwahl individuell auf Dein Design anpassen.

Die fertige 404 Page für das nachfolgende Tutorial

➀ Als allererstes legte Du Dir unter WordPress eine neue Seite an. Diese Page sollte sich im Aufbau von Deinen anderen Seiten unterscheiden, damit sie später auch als eine Fehlerseite wahrgenommen wird. Daher entferne ich grundsätzlich den Header- und Footer Bereich.

Das Themify Framework stellt Dir auf jeder Seite ein „Themify Custrom Panel“ bereit. An dieser Stelle lassen sich individuelle Eistellungen vornehmen, die sich dann ausschließlich nur auf diese Seite auswirken. Wechsel dazu in den unteren Bereich Deiner Seite, für die folgenden Einstellungen.

Auf der Registerkarte „Page Option“ wähle die Sidebar Option „ohne Sidebar“ und unterdrücke zudem den Seitentitel unter Hide Page Title mit „Yes“.

Die Registerkarte „Page Option“

Auf der Registerkarte „Page Appearance“ findest Du die Einstellungen für den Header- und Footer Bereich. Für beide deaktiviere das entsprechende Design mit dem „X-Icon“.

Die Registerkarte „Page Appearance“

Nachdem Du diese Einstellungen erledigt hast, kannst Du die Seite in WordPress veröffentlichen. Deine neue Seite findet sich jetzt in der Seitenübersicht von WordPress wieder. 

➁ In der Übersicht klick jetzt auf „Themify Builder“. Die neue 404-Page öffnet sich zur Bearbeitung im Frontend Deiner Seite.

Die zentrale Seitenübersicht im WordPress Backend

➂ Auf der noch leeren Seite vergibst Du als Erstes im Grid-Setting ein zweispaltiges Layout. Zusätzlich werden die Inhalte an der Mittelachse (align middle) des Row ausgerichtet. Das sorgt für eine optisch, ansprechendere Verteilung der Inhalte.

Die Grid- und Row Options im Themify Builder

➃ In die rechte Spalte setzt Du als Erstes ein Textfeld-Modul für den „404“ Text und formatierst ihn zu einer H1 Überschrift. Schriftart, Größe und Farbe werden erst einmal von Deinen globalen Seiteneinstellungen übernommen. Als Nächstes folgte ein zweites Textfeld-Modul für den individuellen Text. Die Formatierung bleibt hier auf Paragraf.

Das Text-Modul mit seine Einstellungsmöglichkeiten

Zu guter Letzt platziere noch ein Button-Modul unter die beiden Textfelder. Konfiguriere ihn mit einer aussagekräftige Beschreibung und der URL, auf die der User weitergeleitet werden soll.

Das Button-Modul

➄ In die linke Spalte platzierst Du nun die Grafik mit dem Images-Modul.

Das Images-Modul aus der Builder Palette

➅ Da die Seite ohne einen Header-Bereich angelegt wurde, empfiehlt es sich, im oberen Bereich noch einen kleinen Abstand (Padding) einzustellen. Das kannst Du in den „Row-Setting“, unter “Padding”, mit einem Zahlenwert erledigen. Alternativ kannst Du auch an der oberen Kante mit der „Maus anfassen“ und das Padding einfach aufziehen.

Mit Padding-Top eine „Weißraum“ an der Oberkante schaffen

➆ Jedes eingesetzte Modul kannst Du natürlich noch weiter Deinen ganz individuellen Bedürfnissen anpassen. Eine reichhaltige Palette an individuellen Einstellungen findest Du im jeweiligen Modul unter dem Register „Styling“. Wenn alles erledigt ist, speichere Deine Einstellungen über „Save“ und verlasse den Builder Modus (x = Exit). Deine Seite ist nur fertig gestaltet und muss nur noch in das System integriert werden.

➇ Dazu wechselst Du wieder in das Backend Deiner Seite. Im linken Menü von WordPress findest Du unter Themify/Settings/General die Seiteneinstellung „Error 404 Page“. Aus dem DropDown Menü wählst Du Deine erstellte 404-Seite aus und speicherst den gesamten Dialog. WordPress folgt nun nicht mehr der Standard Einstellung, sondern verweist den User, im Falle eines Fehlers, auf Deine neue 404-Page. Das war’s, wie Du siehst, kein allzu großes Hexenwerk!

Die Themify Settings im linken WordPress Menü

Inspirationen für Deine neue 404-Page

Ich hoffe, der Beitrag konnte offene Fragen hinsichtlich der 404 Page klären? Hast Du bereits eine 404 Fehlerseite in Deinem Webprojekt oder steht dies als Nächstes auf Deinem Zettel? Lass es mich in den Kommentaren wissen.

Hinweis: Dieser Beitrag enthält Werbelinks, gekennzeichnet mit einem (*)

Weiterlesen

Oft gelesen

Steve Jobs, der Begründer von Apple, vertrat die Philosophie, dass man im Gestaltungsprozess auch den nicht sichtbaren Bereichen eine gewisse Aufmerksamkeit schenken sollte. Im Fall von „Apple“ und später „Next“ bezog sich dies unter anderem auf das Innerste oder die Rückseite eines Computers. Folgt man diesem Ansatz auch im Webdesign, dann sind es hier die wenig oder bestens falls kaum benutzten Serviceseiten, wie die 404 Page.

Warum die Arbeit?

Aber ist es unbedingt erforderlich, diese Seite zu berücksichtigen? Zumal sich das CMS WordPress doch automatisch um die Auslieferung der standardmäßig vorhandenen Error-Page kümmert.

Die Antwort lautet: JA!

Trotz aller Sorgfalt kannst Du es nicht verhindern, dass Nutzer auf Deiner Seite mit dem 404-Fehler konfrontiert werden. Fehlt diese individuelle Seite in Deinem Webprojekt, bleibt der Nutzer in einem Error Fall im Dunkeln. Er kann nicht nachvollziehen, warum die aufgerufene Seite nicht funktioniert. 

In einer technisch hochmodernen Zeit verbindet man so etwas schnell mit einem negativen Gefühl. Um diesem entgegenzuwirken, empfiehlt sich immer die Gestaltung einer 404 Page, auf dem der User informiert wird und ihm Optionen für das nächste Vorgehen vorgeschlagen werden. Mit einer individuellen Konfiguration stellst du auch sicher, dass der User auf deiner Seite bleibt, ganz zu schweigen vom Gefühl „gut aufgehoben“ zu sein.

Zudem hat auch Google ein Problem mit einer nicht konfigurierten 404 Page. Die Suchmaschine versucht, auf eine nicht existierende Ressource zuzugreifen, was einen nicht korrekten HTTP-Statuscode 404 zur Folge hat. Die Suchmaschine wertet sowas als ein negatives Signal und auch dies wollen wir ja möglichst vermeiden.

Was ist eigentlich der HTTP-Statuscode 404?

Auf jede HTTP-Anfrage eines Web-Client erfolgt eine Antwort des Servers in Gestalt eines HTTP-Statuscode. Der Server teilt somit dem Client mit, ob seine Anfrage erfolgreich bearbeitet wurde. Im Falle eines auftretenden Fehlers gibt der Statuscode Auskunft darüber, wie die gewünschten Informationen zu erlangen sind. Die bekanntesten Meldungen sind: 404: „Nicht gefunden“, 403: „Fehlende Zugriffsberechtigung“ und 400: „Fehlerhafte Anfrage“.

Die Gründe derartiger Fehler können vielfältig sein. Ein Domainumzug ohne Weiterleitung (Redirekt), die komplette Löschung einer Webseite oder interne URL-Umstrukturierungen sind häufige Fehlerquellen. Ändern sich oft Inhalte auf der Seite, können auch vergessene „tote“ Links die Meldung auslösen. Nicht zu vergessen, ein banaler Schreibfehler eines Users in der URL.

Eine individuelle 404-Page konfigurieren

Im CMS WordPress ist diese grundlegende Funktion bereits vorhanden. Eine individuelle Lösung lässt sich recht einfach über ein zusätzliches Plugin realisieren. Wer ein wenig programmiertechnische Fähigkeiten mitbringt, kann dies aber auch problemlos in HTML oder PHP selbst erledigen.

Eine manuelle HTML-Page

Die Auslieferung einer individuellen 404-Page kannst Du über eine htaccess-Datei in Deinem Root-Verzeichnis realisieren.

Als Erstes erstelle Dir Deine 404-Page in einem Editor Deiner Wahl und lade sie anschließend in das Root-Verzeichnis auf den Server. Als Nächstes ergänze die htaccess-Datei um folgenden Eintrag: ErrorDocument 404 / 404-Seitenname.html (der Präfix „404-Seitenname“ sollte Deinem tatsächlich vergebenen Dateiname entsprechen). Hat Dein Webprojekt noch keine htaccess-Datei, musst Du auch diese im Root des Servers bereitstellen.

Unter WordPress

Unter WordPress sind die vorgenannten Schritte nicht nötig, da sich WordPress automatisch um die Auslieferung kümmert. Die standardmäßig vorhandenen Error Page liegt im Root-Verzeichnis Deines WordPress-Themes. Hier kannst Du diese Datei individuell auf Deine Bedürfnisse anpassen.

Eine weitere Option ist die Realisierung über ein externes Plugin. Es gibt verschiedene Anbieter, die sich ausschließlich um die Konfiguration der Fehlermeldungen kümmern. Du findest diese spezielle Option aber auch in einigen SEO oder Maintenance Plugins.

Mit dem Themify Framework

Auch Themify hat sich diesem Problem in seinem Framework angenommen und stellt Dir in den General-Settings eine Direktverlinkung auf eine individuelle Page zur Verfügung. Nutzt Du beispielsweise das Ultra Themes von Themify*, dann findest Du unter Themify/Settings/General die Seiteneinstellung „Error 404 Page“. 

Hier kannst Du bequem eine zuvor erstellte Seite auswählen und verlinken. Wie Du eine ganz originelle 404-Page im Themify Builder umsetzen kannst, zeige ich Dir im nächsten Abschnitt. 

Eine individuelle 404-Page erstellen

Eine Error-Page muss im Kern keine aufwendig gestaltete Seite sein. Versetze Dich in die Lage des Anwenders und überlege, wie Du ihm an dieser Stelle helfen kannst. Dazu stellt sich die Frage: Welche Elemente müssen in einer 404-Page unbedingt vorhanden sein?

Elemente einer 404-Page

Mit einer kleinen Textpassage solltest Du den Anwender aufklären, was gerade schiefgelaufen ist. Auf vielen Seiten findest Du den Standardtext „Seite nicht gefunden“ oder „Page not found“. An dieser Stelle kann man aber auch gerne etwas kreativer werden.

Des Weiteren solltest Du dem User eine Möglichkeit aufzeigen, wie er wieder auf Deine Seite zurückfindet. Das kann ein einfacher Button zur Startseite oder ein Link zu einem Archiv oder einer Sitemap sein. Optional bietet sich auch eine Suchfunktion oder die Möglichkeit einer Kontaktaufnahme an.

In meinen Projekten versuche ich immer, diesem „Fehler“ ironisch zu begegnen. Je nach Thema und Inhalt der Seite ist dies meist ein etwas abgewandelter Spruch und ein thematisch passendes Bild. Weiter unten findest Du einige ausgesuchte Beispiele aus meinen Projekten. 

Die Umsetzung mit dem Themify Builder

An dieser Beispielseite möchte ich Dir die Umsetzung mit einer einfachen Grafik im Themify Page Builder zeigen. Die Grafik habe ich mir von OpenDoodles geladen. Eine kleine, witzige Sammlung von Sketsch Illustrationen, die Du frei verwenden kannst. Zudem lässt sich im „Generator“ der Seite auch die Farbwahl individuell auf Dein Design anpassen.

Die fertige 404 Page für das nachfolgende Tutorial

➀ Als allererstes legte Du Dir unter WordPress eine neue Seite an. Diese Page sollte sich im Aufbau von Deinen anderen Seiten unterscheiden, damit sie später auch als eine Fehlerseite wahrgenommen wird. Daher entferne ich grundsätzlich den Header- und Footer Bereich.

Das Themify Framework stellt Dir auf jeder Seite ein „Themify Custrom Panel“ bereit. An dieser Stelle lassen sich individuelle Eistellungen vornehmen, die sich dann ausschließlich nur auf diese Seite auswirken. Wechsel dazu in den unteren Bereich Deiner Seite, für die folgenden Einstellungen.

Auf der Registerkarte „Page Option“ wähle die Sidebar Option „ohne Sidebar“ und unterdrücke zudem den Seitentitel unter Hide Page Title mit „Yes“.

Die Registerkarte „Page Option“

Auf der Registerkarte „Page Appearance“ findest Du die Einstellungen für den Header- und Footer Bereich. Für beide deaktiviere das entsprechende Design mit dem „X-Icon“.

Die Registerkarte „Page Appearance“

Nachdem Du diese Einstellungen erledigt hast, kannst Du die Seite in WordPress veröffentlichen. Deine neue Seite findet sich jetzt in der Seitenübersicht von WordPress wieder. 

➁ In der Übersicht klick jetzt auf „Themify Builder“. Die neue 404-Page öffnet sich zur Bearbeitung im Frontend Deiner Seite.

Die zentrale Seitenübersicht im WordPress Backend

➂ Auf der noch leeren Seite vergibst Du als Erstes im Grid-Setting ein zweispaltiges Layout. Zusätzlich werden die Inhalte an der Mittelachse (align middle) des Row ausgerichtet. Das sorgt für eine optisch, ansprechendere Verteilung der Inhalte.

Die Grid- und Row Options im Themify Builder

➃ In die rechte Spalte setzt Du als Erstes ein Textfeld-Modul für den „404“ Text und formatierst ihn zu einer H1 Überschrift. Schriftart, Größe und Farbe werden erst einmal von Deinen globalen Seiteneinstellungen übernommen. Als Nächstes folgte ein zweites Textfeld-Modul für den individuellen Text. Die Formatierung bleibt hier auf Paragraf.

Das Text-Modul mit seine Einstellungsmöglichkeiten

Zu guter Letzt platziere noch ein Button-Modul unter die beiden Textfelder. Konfiguriere ihn mit einer aussagekräftige Beschreibung und der URL, auf die der User weitergeleitet werden soll.

Das Button-Modul

➄ In die linke Spalte platzierst Du nun die Grafik mit dem Images-Modul.

Das Images-Modul aus der Builder Palette

➅ Da die Seite ohne einen Header-Bereich angelegt wurde, empfiehlt es sich, im oberen Bereich noch einen kleinen Abstand (Padding) einzustellen. Das kannst Du in den „Row-Setting“, unter “Padding”, mit einem Zahlenwert erledigen. Alternativ kannst Du auch an der oberen Kante mit der „Maus anfassen“ und das Padding einfach aufziehen.

Mit Padding-Top eine „Weißraum“ an der Oberkante schaffen

➆ Jedes eingesetzte Modul kannst Du natürlich noch weiter Deinen ganz individuellen Bedürfnissen anpassen. Eine reichhaltige Palette an individuellen Einstellungen findest Du im jeweiligen Modul unter dem Register „Styling“. Wenn alles erledigt ist, speichere Deine Einstellungen über „Save“ und verlasse den Builder Modus (x = Exit). Deine Seite ist nur fertig gestaltet und muss nur noch in das System integriert werden.

➇ Dazu wechselst Du wieder in das Backend Deiner Seite. Im linken Menü von WordPress findest Du unter Themify/Settings/General die Seiteneinstellung „Error 404 Page“. Aus dem DropDown Menü wählst Du Deine erstellte 404-Seite aus und speicherst den gesamten Dialog. WordPress folgt nun nicht mehr der Standard Einstellung, sondern verweist den User, im Falle eines Fehlers, auf Deine neue 404-Page. Das war’s, wie Du siehst, kein allzu großes Hexenwerk!

Die Themify Settings im linken WordPress Menü

Inspirationen für Deine neue 404-Page

Ich hoffe, der Beitrag konnte offene Fragen hinsichtlich der 404 Page klären? Hast Du bereits eine 404 Fehlerseite in Deinem Webprojekt oder steht dies als Nächstes auf Deinem Zettel? Lass es mich in den Kommentaren wissen.

Hinweis: Dieser Beitrag enthält Werbelinks, gekennzeichnet mit einem (*)

Header-tools

Themify Custom Font – Schriften selbst verwalten

Vor langer Zeit…, so beginnen die meisten Geschichten, wie auch diese. Es war einmal vor langer Zeit, da kannte das Netz nur die websicheren Schriften. Schriften wie die „Time New Roman“, „Arial“ oder „Verdana“, die plattformübergreifend auf jedem System zu finden waren. Nur sie gewährleiteten, dass der Inhalt einer Webseite auch so wiedergegeben wurde, wie der Verfasser ihn kreiert hatte.

Doch dann erschienen neue Sterne am Himmel, die Webschriften. Optimiert für den Bildschirm, beglückten sie uns zuerst in Pixelform und später als Vector-Schriften. Und ihre Zahl steigt stetig an. Mittlerweile tummeln sich unzählige Anbieter auf dem Markt und es gibt tausende von Schriften zu Auswahl. Aber, genau da liegt auch der Hund begraben.

Warum Schriften selbst verwalten?

Zugegeben, es wird uns heutzutage sehr einfach gemacht, eine Schrift in ein Webprojekt einzubinden. Viele Anbieter haben bereits eine Schnittstelle zu den beliebten Google Fonts in ihren Themes und Frameworks integriert. Auch im Themify Pagebuilder findest Du diese Schnittstelle. Warum sollte ich mir also die Arbeit machen, Schriften selbst zu hosten?

Dazu zwei Gedankengänge, die Du in diesem Zusammenhang in Betracht ziehen solltest. Diese o.g. Schnittstelle ist im Grunde nur ein Link auf die jeweilige Font-Library, beispielsweise die Google-Fonts. Die eigentliche Schrift ist also Fremdgehoste oder auch Cloudbasiert, wenn man so will. In Deiner CSS hast Du hinterlegt, wie Deine Überschriften (H1-6) und die Paragrapen (p) aussehen soll. Wenn nun ein Besucher auf Deine Seite kommt, interpretiert dessen Browser die hinterlegten CSS Anweisungen und über den Link werden die ausgewälten Schriften geladen und dem Besucher angezeigt.

Aber genau mit diesem Vorgang gehen zwei „Probleme“ einher. Zum Einen greift Deine Seite auf einen externen Dienst zurück. Nach der neuen Datenschutzverordnung DS-GVO bist Du als Seitenbetreiber verpflichtet, mit jedem externen Anbieter eine Datenverarbeitungsvertrag zu schließen. Die gilt grundsätzlich dann, wenn Daten an Dritte weitergegeben werden, so auch bei sämtlichen Google Diensten. Laut Google soll das beim Font-Service zwar nicht der Fall sein, aber he, es ist Google!

Ein zweiter Punkt, der hierbei ins Gewicht fällt, Deine Seiten-Performance. Jeder Zugriff auf einen externen Dienst verbraucht Zeit und Ressourcen Deiner Seite. Das mag in Zeiten von 4/5 G optisch nicht ins Gewicht fallen, aber dieser Vorgang schmälert trotz allem die Ladegeschwindigkeit bei jedem Seitenaufruf. Und das wiederum beeinfluss das Ranking Deiner Seite bei den großen Suchmaschinen.

Aber diese gesamte Problematik kannst Du umgehen, wenn Du deine Schriften selbst verwaltest. Wie einfach das mit den Themify Custom Fonts funktioniert, zeige ich Dir in diesem Beitrag!

Die richtigen Schriften finden

Bereits unter CSS2 bekamen wir die @font-face Regel an die Hand, die es uns ermöglicht, Schrift selbst zu verwalten und in ein Webprojekt einzubinden. Ich hatte hierzu auch schon einmal eine ausführlichen Beitrag geschrieben. Hierbei waren allerdings einige Kenntnisse in CSS erforderlich, um die benötigten Verknüpfungen herzustellen. Themify macht es Dir aber deutlich einfacher. Du brauchst Dich nur noch um die Beschaffung der gewünschten Schrift kümmern.

Welche Schriften darf ich verwenden?

Im Grunde darfst Du jede Schrift verwenden, wenn Du die erforderlichen Rechte an dem Font besitzt. Schriften, wie auch viele andere Designprodukte, sind Lizenzgebunden. Das bedeutet, Du muss dir ggf. für eine Schrift eine Lizenz kaufen um sie nutzen zu können. Das ist von Anbieter zu Anbieter unterschiedlich geregelt. Daher empfehle ich Dir , vorab ein Blick in die jeweiligen Vertragsbedingungen zu werfen.

Startseite Google Fonts
Die Google Font Library

Es gibt aber auch kostenlose Möglichkeiten an Schriften zu gelangen. Eine Möglichkeit ist die Google-Font-Library. Die hier angebotenen Schriften darfst Du ohne weiteres frei nutzen. Wenn Du mit Produkten aus der Adobe® Cloud arbeitest, hast Du auch automatisch Zugang zum Typekit von Adobe®. 

Startseite Adobe Fonts
Typekit von Adobe®

Auf Plattformen wie, Dafont.com, MyFonts.com oder FontSquirrel.com, findest Du im Regelfall die Lizenzbedingungen in den jeweiligen Beschreibungen. Hier ist nicht selten „für den Privaten Gebrauch kostenlos“ zu lesen. Bedeutet, erst der Einsatz auf kommerziell genutzten Webseiten wird dann für Dich kostenpflichtig.

Eine sehr schöne Quelle, vor allen für die derzeit sehr in Mode gekommenen „Handschriften“, ist die Seite CreativeMarket.com. Hier findest Du vereinzelt kostenlose Angebote, die aber in abgespeckter Form ausgeliefert werden. Die kostenpflichtigen Varianten befinden sich aber in einem bezahlbaren Rahmen. 

Startseite Creative Market
Handschriften auf Creative Market

Wenn Du allerdings auf der Suche nach etwas Speziellerem bist, bleibt nur der Gang zu den Font Foundries. Angebote findest Du bei Monotype, URW++, ITC oder Type Mates. Hier fangen die Einzellizenzen ab 30.00 EUR pro Schnitt an und können gerne in die hunderte, für einen vollständigen Satz, anwachsen. 

Webfont-Formate

Wenn Du deine gewünschte Schriftdatei (.ttf/.otf) vorliegen hast, kann es an den nächsten Schritt gehen. Leider gibt es noch immer kein browserübergreifendes Format. Jeder Hersteller kocht hier immer noch sein eigenes Süppchen. Ergo, benötigst Du alle browserspezifischen Fontformate Deiner Schrift.

Hier gibt es grob zwei Gruppen, für alle modernen Browser das .woff ,.woff2 und .svg Format. Einige ältere Browser benötigen auch das .ttf und .eot Format. Nicht alle Formate sind zwingend, es hängt ein wenig von Deiner Zielgruppe ab und wie diese im Netz unterwegs sind.

Ein Blick in ein Analyse-Tool (z. Bsp. Google Analystic) hilft Dir dabei herauszufinden, über welche Technik (Browser) Deine Seite besucht wird. Hieraus ergeben sich die benötigten Formate, die Du zwingend einbinden solltest.

Speziell Google stellt für die benötigte Webformate auf der „Google-Webfonts-Helper“ Plattform die modernen Webformate bereit. Das erübrigt den Schritt über eine w.u.g. Webfont-Generator.

Wenn Du Schrift-Lizenzen einkaufst, besteht immer die Option, diese auch als Webfont-Variante zu laden. Dieses Paket enthält im Regelfall die .woff und .woff2 Dateien der Schrift. Benötigst Du zusätzlich eins der anderen Formate, besteht die Möglichkeit dieses über ein Webfont-Generator zu erstellen. Wie genau das funktioniert, findest Du in diesem Beitrag.

Übrigens: Diese Generatoren verarbeiten nicht jede Schrift! Namenhafte Schriften, wie beispielsweise die „Didot“ sind vom jeweiligen Hersteller geschützt. Auch wenn Du auf irgendwelchen dubiosen Seiten den Font herunterladen kannst, spätestens beim generieren der Webformate wirst Du merken, das hier kostenpflichtige Lizenzen erforderlich sind.

Deinen Font unter Themify einbinden

Voraussetzung für die eigene Schriftverwaltung, Du nutzt den Themify Page Builder mit einem freien Themes oder ein Themify Pro Themes*. In beiden Fällen findest Du in der linken Menüleise unter „Themify Settings“ den Unterpunkt „Custom Font“ im Hauptmenü von WordPress.

Die Custom Fonts im Themify Builder
Das Untermenü „Custrom Fonts“

Im geöffneten Dialog legst Du einen neuen Font über den Button „Add New“ an. Als Erstes vergibst Du einen Namen (1), im Regelfall ist das der Schriftname selbst. Wähle als nächstes das Schriftgewicht und den Style aus (Schrift Weight im CSS = 100-900; Style = Normal, Italic, Oblique). (2) Diese Angaben müssen Deiner geladenen Schrift entsprechen. Dann erfolgt der Upload der einzelnen Dateien (3). Wenn Du alle Formate geladen hast, geh rechts auf den Button „Veröffentlichen“, Fertig. Du hast Deine ersten Font eingebunden.

Eine neue Schrift in den Themify Custom Fonts anlegen
Einen neuen Font anlegen

Wenn Du mehrere Gewichtungen (100-900) der Schrift hast, kannst Du im selben Dialog auch eine weitere Variante der Schrift anlegen. Über den Button „Add New Variation“ öffnen sich neue Auswahlfelder.

Neue Variation einer Schrift in den Themify Custom Fonts
Eine neue Variation einer Schrift anlegen

Upload von .ttf Dateien unter WordPress

Spätestens bei Hochladen der .ttf Datei wirst Du auf ein kleines Problem stoßen. Standartmäßig ist der Upload dieses Formats aus Sicherheitsgründen unter WordPress deaktiviert. Man kann mit einem kleine Code-Snippet diesen Sicherheitsmechanismus vorübergehend außer Kraft setzen. Du solltest ihn, nach getaner Arbeit aber wieder zurücksetzen. Dazu schreibe nachfolgender Code in die wp-config.php Deines Themes oder alternativ dem Child Themes.

<!--?php define('ALLOW_UNFILTERED_UPLOADS', true); ?-->

Es gibt allerdings auch eine einfachere Methode! Lade diese Datei einfach via FTP in das Upload-Verzeichnis von WordPress hoch. Öffne Deine WordPress Installation in einem FTP-Program (bsp. FileZilla). Navigiere zum Ordner …/wp-content/uploads und öffne diesen. Hier findest Du die hierarchische Upload-Struktur von WordPress. (…2020/12; Jahr und Monat). Die Datei solltest Du in den aktuellen Monat hochladen. 

Wechsel nun wieder in Dein WordPress Backend. In die Zeile für die TTF Schrift kopierst Du Dir einmal den Pfad, wie bei den anderen Formaten und dann änderst Du die Dateiendung auf .ttf. Achte darauf, das auch der Präfix richtig geschrieben ist, damit die Datei später auch gefunden wird.

Verwendung der selbst verwalteten Schrift

Wenn Du Deine Schrift eingebunden hast wird sie noch nicht automatisch auf Deinem Webprojekt angezeigt. In einem letzten Schritt musst Du nun in Deinen globalen Seiteneistellungen die neue Schrift den jeweiligen Elementen Deiner Seite zuweisen. Dazu wechselst Du jetzt ins Frontend Deiner Seite und dann zum „Customizer“.

Customizer Zugang im Frontend
Zugang zum Customizer unter WordPress

Hier findest Du die globalen Einstellungen zu Deinem Themes. Die Einstellungsmöglichkeiten sind abhängig von Deinem Themes und können, von dem hier gezeigten, abweichen. Im Verhältnis zu einem Pro Themes wirst Du, mit aller Wahrscheinlichkeit, weniger Einstellungsmöglichkeiten in einem freien Themes finden

Themify Option im Customizer
Einstellungsmöglichkeiten unter Themify im WordPress Customizer

Unter der Rubrik Body und Headings (Ultra Themes) kannst Du nun Deine neue Schrift zuweisen und einstellen. Im Dropdown Menü der Schriftfamilie erschein ein zusätzlicher Eintrag vor den extern geladenen Google Fonts. Das ist Deine intern geladene Schrift. 

Google Font deaktivieren

Um einem der o.g. Vorgaben (Performance) gerecht zu werden, bleibt in letzter Instanz jetzt nur noch, dass Laden der Google Font Library zu unterbinden. Der Themify Page Builder biete Dir in der kostenlosen Variante nur die Möglichkeit zwischen einer „ausgesuchten Menge“ oder „allen Fonts“ zu wechseln. Hier sollte auf jeden Fall ersteres ausgewählt sein, das verringert auf jeden Fall die Ladezeit erheblich.

Deaktivierung des automatischen Google Fonts laden im Themify Builder
Schriftkontrolle im kostenlosen Themify Builder

In der Pro Variante findest Du in den Themify Settings auch die Option, die Google Font komplett zu deaktivieren. Hier kannst Du das Laden der Google Fonts auch komplett deaktivieren.

Google Font Settimgs im Themify Builder
Goggle Font Verwaltung im Themify Ultra

Fazit

Wie Du siehst ist die Selbstverwaltung von Schriften in der heutigen Zeit kein großes Hexenwerk mehr. Themify macht es Dir recht einfach, Deine Lieblingsschriften auf den Server zu laden und zu verwalten.

Zudem umgehst Du so, auf ganz einfache Weise, die oben angesprochenen Problem mit fremd gehosteten Schriften. Und Du bist, mit einer Selbstverwaltung Deiner Schriften, auch gegen einen möglichen Server-Ausfall eines Drittanbieters bestens abgesichert.

Hinweis: Dieser Beitrag enthält Werbelinks, gekennzeichnet mit einem (*)

Header-color

Themify Pagebuilder für WordPress – Review

Wen man sich mit dem Thema Pagebuilder unter WordPress auseinandersetzt, fallen die ersten Suchergebnisse immer zu Gunsten von Elementor aus. Dahin weniger bekannt ist der Themify Pagebuilder, was mich letztlich zu dieser kleinen aber umfassenden Review veranlasst hat.

Noch vor dem Erscheinen von Elementor 2016 hatte ich das Vergnügen, mit dem Themify Pagebuilder zu arbeiten. Bereits Anfang der 2010er Jahre suchte ich nach einem benutzerfreundlichen Framework mit einem großen Leistungsumfang für meine Kundenprojekte sowie auch meinen eigenen Seiten. Mehr durch einen Zufall stieß ich seinerzeit bei meiner Suche auf Themify.

WAS GENAU IST DER THEMIFY PAGEBUILDER? 

Themify, mit Sitz in Toronto, Kanada, starteten bereits vor 10 Jahren mit ihrem Business. Ihr Schwerpunkt lag seinerzeit auf den Pro Themes für WordPress. Es gab damals schon eine Menge guter Angebote in diesem Bereich, ohne Frage. Was mich allerdings schwer beeindruckt hat, war der integrierte Pagebuilder.

Als Erweiterung zu den Themes entstanden dann über die Jahre ein Menge Add-ons und Plugins, die für den normalen Webseitengebrauch fast keine Wünsche mehr offen lassen. Ein nicht zu unterschätzende Erweiterung ist auch der „Post Type Builder“.

WordPress kennt ja standardmäßig nur Posts und Seiten. Mit dem PTB kann man benutzerdefinierte Post erstellen und somit an jeden erdenklichen Zweck anpassen. Relativ neu ist der Builder Pro. Er ermöglicht es jetzt auch ein komplettes Thema von Grund auf neu zu gestalten.

DER THEMIFY BUILDER (FREE)

Der Themify Builder ist ein leistungsstarker und benutzerfreundlicher Pagebuilder für WordPress und steht bei WordPress.org zu download bereit.

Der Themify Pagebuilder bei WordPress.org zum kostenlosen Download
Der Themify Pagebuilder bei WordPress.org zum kostenlosen Download

Mit dem Builder lassen sich alle erdenklichen Layouts für ein Webprojekt umsetzen. Die einfach zu bedienende Drag & Drop-Oberfläche ermöglicht Gestaltung ohne eine einzige Codezeile. Individuelle HTML- und CSS Erweiterungen sind aber trotz allem möglich.

Zugriff auf den Builder erhalte ich sowohl im Backend der Seite als auch im Frontend und hier verbunden mit einer Live-Vorschau meiner Arbeiten.

Der Pagebuilder im Backend von WordPress

Der Builder selbst ist modular aufgebaut und auf Leistung optimiert. Zudem wurde von vornherein auf die SEO-Freundlichkeit, Multilanguage und Netzwerkunterstützung Wert gelegt. Ein eigenes Cache-System im Builder reduziert Serverressourcen, sodass Prozesse und Seiten schneller verarbeitet werden.

Integrierten Tools wie das flexible Rastersystem, reaktionsschnelles Styling, Sticky & Parallax-Scrolling, Videohintergrund, Animationen und vielem mehr machen den Builder zum Allrounder.

Auch die Anbindung externer Plugins wie WooCommerce, SEO Yoast, MailChimp, Jetpack, WPML und CF 7 stellt für den Builder kein Problem dar. Der Builder ist zu 100 % kompatibel mit dem Gutenberg Editor und ergänzt sich hervorragend mit diesem.

Der Themify Builder in Action

Der Builder kann, neben den fest integrierten Modulen, um weitere 25 Add-ons (Pro-Varianten), wie bsp. Mosaic, Maps Pro, Contact, Preistabellen und anderen, erweitert werden.

Eine Übersicht zu alle Funktionen und Features des Builders gibt es auf dieser Seite zu sehen.

INTEGRIERTE MODULE (FREE)

Die intergrierten Module im Themify Pagebuilder
Die integrierten Module im Builder

  • Accordion

  • Advanced Posts

  • Alert

  • Box

  • Button

  • Callout

  • Divider

  • Fancy Heading

  • Feature

  • Gallery

  • Icon

  • Images

  • Layout Part

  • Login

  • Map

  • Menu

  • Optik Form

  • Plain Text

  • Portfolio

  • Post

  • Service Menu

  • Sign Up Form

  • Slider

  • Social Share

  • Tab

  • Testimonial

  • Text

  • Video

  • Widget

  • Widgetized

Mit der Palette der freien Add-ons lassen sich ohne weiteres alle Standartgestaltungen für eine moderne Webseite umsetzen. Neben den klassischen Elementen wie “Divider”, “Accordion” oder “Tab” findest Du auch Add-ons, um auf individuelle Menüs oder Widgets zuzugreifen. Auch die Anbindung Deiner Social Accounts oder Newsletter werden zum Kinderspiel.

VERFÜGBARE ADDONS (PRO)

VERFÜGBARE ADDONS in der PRO Variante des Themify Pagebuilder
Die Addonverwaltung im Builder

  • Mosaic

  • WooCommerce

  • Contact

  • Slider Pro

  • Themify Tiles

  • Image Pro

  • Maps Pro

  • Pricing Table

  • Audio

  • Infinite Posts

  • Typewriter

  • Infinite Background

  • Countdown

  • Pointers

  • Timeline

  • Progress Bar

  • FitText

  • Counter

  • Button Pro

  • A/B Image

  • BG Video Slider

  • Slideshow

  • Masked Image

  • Bar Chart

  • Content Restriction

Die meisten Pro-Add-ons entsprechen ihrem Pandant in der freien Palette, bieten dir aber mehr Features und Gestaltungsmöglichkeiten. Pro Add-ons wie beispielsweise “Masked” oder “Mosaic” bringen dagegen ganz spezielle Funktionen mit, die dem kreativen Gestaltungsprozess fast keine Grenzen mehr setzen. 

POST TYPE BUILDER

Ein wirklich leistungsstarkes Mitglied der Themify Familie ist der Post Type Builder. WordPress kennt standardmäßig nur Post- und Seitentypen. Hier kommt der PTB ins Spiel. Mit ihm lassen sich benutzerdefinierte Beitragtypen erstellen.

Auf eine sehr einfache Weise lassen sich WordPress Posts um spezifische Eingabefelder erweitern und in einer individuellen Gestaltung wieder ausgeben. So hast Du die Möglichkeit, neben den klassischen Blogposts, sehr spezielle Posts zu kreieren und auszugeben. Die Anwendungsbereiche können dabei recht vielfältig sein. Interessante Beispiele in Form eines Immobilenportfolios oder einer Filmdatenbank findest Du auf der Seite von Themify.

Zusätzlich kann der PTB mit Add-ons erweitert werden. So können beispielsweise Beiträge auf einer Karte anzeigt werden oder ein erweitertes Suchformular eingerichtet werden, was diesen speziellen Post Type durchsuchen kann. Im Post Type Builder-Bundle* sind folgende Add-ons verfügbar:

  • PTB Map View

  • PTB Extra Fields

  • PTB Search

  • PTB Submissions

  • PTB Relation

BUILDER PRO

Der jüngste Zugang bei Themify ist der Builder Pro*. Er verwendet dieselbe Themenlogik wie der WordPress-Kern und erweitert den Builder um die klassischen Feldtypen Kopfzeile, Fußzeile, Beitrag, Seite, 404, Archiv, WooCommerce und mehr.

Die vom Builder Pro erstellten Vorlagen sind einem eigenen Pro-Design zugeordnet und können mit nur einem Klick exportiert bzw. importiert werden. Somit lassen sich komplette Themen von Grund auf neu gestalten, sei es für die eigene Seite oder wenn man spezielle Kundenprojekte umsetzen möchte.

Wie im o.g. Builder sind auch im Builder Pro fertige Vorlagen bereits vorinstalliert, die einem den Einstieg erleichtern sollen. Man kann aber auch mit einem kompletten “Blanco Thema” starten. Der Builder Pro generiert alle benötigten Seitenformate, die man dann ganz individuell anpassen kann.

FEATURE IM BUILDER PRO

ANZEIGEBEDINGUNGEN

Mit den Anzeigebedingungen kannst Du Regeln für die Anzeige der Vorlagen festlegen. Diese Bedingungen kannst Du global für die ganze Seite oder für einzelne Post, Seiten und Kategorien definieren. Alternativ kannst Du auch Seiten oder Posts ausschließen. Somit kannst Du beispielsweise Deine Blog-Kategorien in individuellen Designs ausgeben und somit Deine Inhalte besser strukturieren.

DYNAMISCHER INHALT

Verwandelte einfach ein statisches Modul in ein dynamisches Element. Du bist nicht mehr an die klassischen Elemente eines Beitrages gebunden. Gefällt Dir der einfache Seitentitel nicht, ersetze das Modul beispielsweise durch das „FitText-Addon“ und verpasse Deiner Überschrift einen ganz neuen Look. 

BENUTZERDEFINIERTE FELDER

Integriert Post-Meta-Felder und benutzerdefinierte Felder aus der Datenbank in Deinem Layout. Sie können an jeder beliebigen Stelle in den Vorlagen angezeigt werden. Es funktioniert mit allen benutzerdefinierten Feldern, unabhängig davon, ob sie manuell mit WordPress erstellt oder mit Plugins von Drittanbietern wie ACF, Pods, Toolset, Meta Box usw. hinzugefügt wurden.

FERTIGTE VORLAGEN

Das Erstellen eines vollständig gestalteten Themes mit dem Builder Pro erfolgt buchstäblich mit nur wenigen Klicks. Lege ein neues Projekt an und wähle ein vorgefertigtes Thema aus. Alle zugehörigen Vorlagen werden automatisch importiert. Anschließend kannst Du die importierte Vorlagen unverändert verwenden oder nach Deinen Wünschen individuell anpassen.

WEITERE FEATURES

100% REAKTIONSSCHNELL – Alle mit dem Builder erstellten Inhalte und Vorlagen reagieren zu 100%.

JEDES THEMA – Der Builder Pro funktioniert mit jedem WordPress-Themes, wenn das Builder-Plugin aktiviert ist.

STICKY HEADER – Erstelle einen Sticky-Header mit dem im Themify Builder enthaltenen Sticky-Scrolling.

GLOBALER STIL – Speicher Dein Styling als globalen Stil ab und verwende ihn auf Deiner gesamten Webseite immer wieder.

IMPORT/EXPORT – Eine sehr einfache Art, Pro-Themes und Vorlagen auf verschiedenen Webseiten zu tauschen. Sehr interessant für Designer, um Projekte in einer Entwicklungsumgebung zu gestalten und nach Fertigstellung an den Kunden auszuliefern.

PRO-MODULE – Builder Pro enthält mehr als 30 Module, mit denen Du nach Bedarf Deine Vorlagen erstellen kannst.

WORDPRESS THEMES

Den Themify Builder kannst Du mit jedem Themes, was für WordPress geeignet ist, verwenden. Du kannst Dich aber auch für ein hauseigenes Themes von Themify entscheiden, dort ist der Builder bereits integriert.

Wie ich seinerzeit auf der Suche nach einem umfangreichen WordPress-Theme war, faszinierte mich die „Vielfalt“ und nicht zuletzt die Flexibilität durch den integrierten Page Builder von Themify. Mittlerweile greife ich bei meinen Projekten nur noch auf das Flaggschiff von Themify zurück, dem „Ultra“.

Es ist ein echtes Mehrzweckthemes, das für jede Art von Webseiten einsetzbar ist. Mit einer Vielzahl von Layoutoptionen (Kopf-, Fuß-, Post-Layouts usw.), die auf der gesamten Website oder für einzelne Seiten ausgewählt werden können, einschließlich einer großen Auswahl an Skins und vorgefertigten Demos, ist das „Ultra Themes“ immer meine erste Wahl.

Ultra Themes* 

Das Allrounder Themes für alle privaten oder geschäftlichen Webseiten.

Neben dem „Ultra“ gibt es noch weitere, teils sehr spezialisierte Themes wie das „Shoppe-Themes“ für E-Commerce Seiten. „Shoppe“ ist ein Muss für die Erstellung von E-Commerce-Websites. Es ist mit einer Vielzahl von E-Commerce-Funktionen wie Wunschliste, Schnellansicht, Mega-Menü, Ajax-Warenkorb, Schnellsuche und vielem mehr ausgestattet, wie sie auf professionellen Shop-Websites zu sehen sind.

Shoppe Themes* 

Die ultimative Wahl für einen E-Commerce Shop

Ein wahres All-in-One-Thema für Musiker und Bands ist das „Music-Themes“. Es enthält einige benutzerdefinierte Beitragstypen zum Veröffentlichen von Alben, Videos, Galerien, Veranstaltungen und Pressemitteilungen. Das Highlight von „Music“ ist der spezielle Continuous Audio Player. Besucher können beim Surfen auf der Website Musik ohne Unterbrechung genießen.

Musik Themes* 

Das All-in-One Themes für Musiker und Bands

Eine komplette Übersicht aller Themes von Themify findest Du an dieser Stelle*.

PLUGIN

Die Plugins runden die Palette von Themify ab. Derzeit stehen insgesamt 14 Plugins bei Themify bereit, die den Funktionsumfang Deiner Seite nochmals erweitern können. 

PLUGINS (PRO)

  • WooCommerce Shopdock

  • Announcement Bar

  • Tiles Plugin

PLUGINS (FREE)

  • Conditional Menus

  • Themify Shortcodes

  • Themify Icons plugin

  • Themify audio dock plugin icon

  • Shopify Buy Button plugin icon

  • WC product filter plugin icon

  • Themify Store Locator

  • Themify Popup

  • Themify Portfolio Post Thumbnail

  • Portfolio Post

  • Themify Event Post Thumbnail

Eine ausführliche Beschreibung und Demos der Plugins findest Du auf dieser Seite.

SOCIAL NETWORK UND NEWSLETTER

Die Integration von Social Network und Newsletter auf der eigenen Homepage ist heutzutage ein Muss, möchte man Reichweite erzielen oder seine Besucher binden! Der Themify Pagebuilder macht es Dir in beiden Fällen sehr einfach, die Dienste auf Deine Seite zu bringen. In den Settings findest Du einen Unterpunkt „Social Network“.

Social Link Manager in der Themify Settings

An dieser Stelle kannst Du Deine Social Profile verlinken, die passenden Icons vergeben und Aussehen und Farbe an Dein Design anpassen. Das Ganze kannst Du dann als Social Network Bar in einem Sidebar-Widget oder direkt auf der Seite anzeigen lassen. Auch die Anbindung an einen Newsletter gestaltet sich recht einfach.

API Integration in der Themify Settings

Unter dem Punkt „Integration“ in den Settings lässt sich die API deines Anbieters hinterlegen. Auf der Seite platzierst und gestaltest Du mit dem “Sing Up Form Addon” ein Anmeldeformular und fertig ist Integration deines Newsletters. Keine umständlichen Anmeldeprozeduren, keine zusätzlichen Plugins mehr. Wie jedes Addon von Themify kannst du auch beim „Sing Up Form“ auf eine Stylingpalette zugreifen und dein Formular ganz individuell anpassen.

UNTERSTÜTZTE DIENSTE

  • Twitter API

  • Google Maps API

  • Bing Map API

Optin Optionen:

  • MailChimp

  • ActiveCampaign

  • ConvertKit

  • GetResponse

  • MailerLite

SKINS & DEMOS

So manch einer kennt bestimmt das Gefühl vor einer weißen Seite zu sitze und man grübelt darüber, wie man anfangen soll. Für genau dieses Problem liefern die Builder wie auch die Themes von Themify zahlreiche Skins und Demo-Inhalte mit.

Im Themify Pagebuilder findest Du unter “Layouts” eine Unzahl an Gestaltungsvorlagen, die Du für Deine gesamte Seite übernehmen kannst. Mit einem Klick gestaltest Du eine fertige Webside, die Du dann ganz individuell mit Deinen Inhalten füllen kannst. In der Modulpalette findest Du zudem den Reiter “Blocks”. Hier verbergen sich eine Vielzahl an vorgefertigten Seitenelementen, beispielsweise eine fertige Preistabelle oder ein Testimonial, dass Du Deiner Gestaltung hinzufügen und an Deine Bedürfnisse anpassen kannst.

Fertig gestaltete Layouts im Themify Pagebuilder

Da der Themify Pagebuilder in den Themes bereits integriert ist, findest Du auch hier diese Layouts und Blocks wieder. Die Themes von Themify bieten Dir zusätzlich bei der Installation die Möglichkeit, Demo-Inhalte zu laden. Diese kannst Du nach Bedarf überarbeiten oder bequem wieder deinstallieren, wenn Du mit Deiner Seitengestaltung fertig bist. Eine praktische Sache gegen das „Weiße-Seiten-Blackout“!

Die Blockpalette im Themify Pagebuilder

PERFORMANCE

Ein grundsätzlicher Kritikpunkt an einem Page-Builder ist die Seitenladezeit. Verschiedene Zungen behaupten ja, dass durch den reichhaltigen Funktionsumfang derartiger Frameworks die Performance verloren geht und somit das SEO einer Webseite verschlechtert. Und genau diesen Kritikpunkt haben sich die Jungs von Themify auch zu Herzen genommen.

In den letzten Monaten wurde das gesamte Framework neu überarbeitet mit dem einzigen Ziel, den Pagespeed zu optimieren. Alle Neuerungen sind in die Themes und in das Framework integriert, bedürfen also keiner weiteren PlugIn Installationen. Zeitgleich mit dem verfassen dieses Artikels kam die erfreuliche Meldung, das die Beta-Phase abgeschlossen und das neue Framework zum Update bereit steht. Yeeha!

Die Page-Speed-Offensive von Themify

CUSTOM FONTS

Spätestens bei Einführung der DSGVO im Mai 2018 kam auch die Überlegung auf, wie mit der Einbindung von Google Fonts umgegangen werden soll. Die Geister scheiden sich immer noch an der Frage, ob es datenschutztechnisch bedenklich oder unbedenklich ist. Eine sichere Variante, um allen Problemen aus dem Weg zu gehen ist, diese auf seinem System selbst zu hosten. Eine Methode, die auch unter WordPress umsetzbar ist, die “@FontFace-Regel”!

Mit ein wenig CSS Kenntnissen konnte man sich seine Schriften auf das eigene System laden und verwalten. Themify macht es dir aber einfach und hat dieses bereits in die Settings integriert. Nachdem Du Dir deine bevorzugten Schriften auf den Server hochgeladen hast, kann Du Dir eigenen Schriftfamilien anlegen. Das klappt wunderbar, sowohl mit den Google Fonts als auch mit allen anderen Schriften, an denen du die rechtmäßigen Lizenzen besitze.

Die Schriftenverwaltung in den Themify Settings

PREISMODELLE

Wenn Du Dich für Themify entscheidest, macht eine Clubmitgliedschaft richtig Sinn. Mit der Master- oder Liftime Club Mitgliedschaft erhältst Du alle Themes, Plugins und Add-ons, jeweils für ein Jahr oder lebenslang. Zudem gibt es noch von jedem Themes die Photoshop Datei obendrauf.

Du hast aber auch die Möglichkeit – je nach Bedarf – einzelne Themes und Addons zu kaufen. Alle Komponenten gibt es einzeln oder als Bundle.

Die Preisangebote auf der Seite von Themify.me

  • Master Club: $89,-
    Updates & Support für 1 Jahr auf alle Themes, Plugins und Addons

  • Lifetime: $249,-
    Updates & Support lebenslang auf alle Themes, Plugins und Addons

  • Einzelnes Themes: $59,–
    Updates & Support für 1 Jahr

  • Addon Bundle: $39,-

  • Builder Pro: $69,-

  • Einzelnes Pro Plugin: $19,-

ZUR PREISÜBERSICHT VON THEMIFY*

FAZIT

Auch auf die Gefahr hin mich zu wiederholen, aber ich bin seit Jahren mit dem gesamten Paket von Themify sehr zufrieden und konnte damit die verschiedensten Projekte umsetzen. Die komplexe und bereits integrierte Funktionalität überzeugt mich immer wieder aufs Neue.

Wenn ich teilweise sehe, was man im Normalfall an Plugins installieren muss, um essenzielle Funktionalität auf eine Seite zu bekommen, dann kann das unter Umständen eine längere Liste werden. Ich suche regelmäßig nach neuen Funktionen, um meine Projekte weiter zu verbessernd und zu optimieren. Bei sehr vielen Features oder auch Plugins merke ich aber: „Oh, hab ich ja bereits inklusive!“

Allein hier überzeugt das Preis-Leistung-Verhältnis von Themify.

Neben dieser großen Funktionalität erwartet Dich eine umfangreiche und sehr detaillierte Dokumentation und ein wirklich schneller Support im Forum. Es gab bisweilen noch kein technisches oder gestalterisches Problem, was wir nicht lösen konnten.

Hinweis: Dieser Beitrag enthält Werbelinks, gekennzeichnet mit einem (*)

FAQ Bereich

Was ist eigentlich ein Page-Builder?

Page-Builder sind im Grunde eine einfach zu bedienende Sammlung verschiedener Gestaltungswerkzeuge. In einem flexiblen Rastersystem kannst Du die Inhalte Deiner Artikel und Seiten bequem per Drag&Drop anordnen und stylen.

Benötige ich besondere Kenntnisse?

Mit einem Page-Builder kann man sehr intuitiv arbeiten. Man benötigt keine CSS und HTML-Kenntnisse, um ihn zu bedienen.

Was kostet der Themify Builder?

Der Themify Builder ist kostenlos erhältlich und mit einer Vielzahl an Addons ausgestattet. Je nach Bedarf kannst Du kostenpflichtig auf Pro Addons wechseln und somit Deine Einsatzmöglichkeiten erweitern.

Benötige ich ein spezielles Theme, um mit dem Themify Builder zu arbeiten?

Nein, der Themify Builder funktioniert in jedem WordPress-Themes. Du hast aber auch die Möglichkeit, auf ein Pro Themes von Themify zu wechseln. Der Builder und weitere Feature sind hier bereits integriert.