Themify Ultra Kickstart – Startbeitrag für den neuen DIY-Bereich: Themify Ultra Nähkästchen

Willkommen zum Startbeitrag im neuen Blog-Bereich Themify Ultra Nähkästchen, dem Bereich für Themify Ultra Selbermacher (DIY). In Themify Ultra Nähkästchen werde ich Schritt für Schritt Best-Practices und Tipps und Tricks zum Haus-und-Hof-Theme der Webstylerei weitergeben, auch welche Plugins mit dem Ultra-Theme harmonieren.

Der Startbeitrag gibt einen groben Überblick zu einem ersten “Einfärben” des Ultra-Themes. Wie man es installiert, vorab, da ist alles easy, kommt in einem der nächsten Beiträge. Das Aufmacher-Bild des Startbeitrags zeigt den Einstellungs-Bereich des Ultra-Themes (Themify Settings) im WordPress Backend.

Am Anfang ein paar Links, damit man sich ein Bild darüber machen kann um welches WordPress Premium-Theme es hier geht…

Link zur Ultra-Theme Beschreibung (externer Link)

Link zum Themify Page Builder (externer Link), der in jedem Themify-Theme enthalten ist, den es aber auch standalone gibt

Blog zur Version 5 – Neuer Perfomance Framework (externer Link). Nach fast einem Jahr Entwicklungszeit kam im Oktober 2020 die Version 5 des Themify Ultra Themes und das war kein Update sondern ein sehr großes Upgrade; das sieht man auch am Versionssprung, es wurde direkt von 2.8 auf 5 hochgenummert.

Das Upgrade geschah speziell auch im Hinblick auf den im Frühjahr 2021 kommenden Google Mobile First IndexOnly, muss man ja eigentlich ergänzen. Es zählt ab dann für Google ausschließlich nur noch die Mobile-Variante einer Webseite, also voller Fokus auf die mobile Ansicht einer Webseite.

Was ich am Themify Ultra Theme schätze und was noch Potential birgt

Das Ultra-Theme von Themify bietet eine hervorragende Balance aus Performance, Options und Komfort und was ich darüber hinaus am Ultra Theme schätze ist seine Flexibilität und dass das Themify-Team keine Schnarchnasen sind, sprich mit Neuem nicht lange hinterm Zaum halten und Design in Mind haben.

Dafür muss man dann eventuell, also wenn was Neues kam, zuerst mit ein paar Nachkorrekturen rechnen. Erstmal durch eigenes CSS um ein Element ein paar Pixel zu verschieben und dann eben warten bis Themify nachliefert. Kein WordPress-Theme ist perfekt, auch das Ultra nicht, aber mit ein paar CSS-Hammerschlägen oder einem anderen Ansatz bekommt man es dank der vielen Theme-Options und seiner Flexibilität hin.

Hier will ich gleich auch noch auf das Themify-Hook-System hinweisen über das man ohne Programmierkenntnisse und ohne in die functions.php zu müssen vieles in das Seitenlayout eingebunden bekommt.

Der Header war bis Ultra V2.8 generell ein Bereich, den man öfters mit ein bisschen CSS nachzähmen musste bis alles so saß wie man es möchte. Möchte man aufwendigere Header-Lösungen könnte es Sinn machen zusätzlich nach einem ausgewiesenen Header-und-Nav Plugin Ausschau zu halten …wenn es mit dem Ultra-Theme harmoniert und die Perfomance stimmt. Ich selbst hab das noch nicht gebraucht, aber eben schon einige Zeit mit dem Nachjustieren von Headern verbracht 😉 Aber zuerst abwarten was da noch so kommt, mit der Ultra Version 5 kamen bereits reichlich weitere Header-Options und Überarbeitungen hinzu…

Child Theme einrichten

Bevor man nach der Installation irgendetwas anderes macht immer zuerst das Ultra-Child-Theme einrichten. Nur darüber ist es möglich individuelle Anpassungen vorzunehmen und gleichzeitig Update kompatibel zu bleiben.

Das kann auf zwei Wegen geschehen.

1. The Easy Way: Per Ultra-Child-Theme-Zip für normale Single-Installationen

Themify stellt für die Child-Theme Einrichtung des Ultra-Themes ein Child-Theme-Zip bereit.

Nachzulesen hier: https://themify.me/docs/child-theme (externer Link)

Abkürzung:

  1. Downloaden: https://themify.me/wp-content/uploads/themify-ultra-child.zip (externer Link)
  2. Als Theme installieren: Design -> Themes -> Theme hinzufügen -> Theme hochladen und gleich aktivieren …oder:

…wechseln zu Design -> Themes und sein Child-Theme aktivieren (es ist das ohne Vorschaubild 😉

2. Manuell oder wenn es eine WP-Multisite Installation ist

Ein Verzeichnis/Ordner: themify-ultra-child in themes hinzufügen

(WordPress-Installations-Verzeichnis)/wp-content/themes/themify-ultra-child

Eine Datei erstellen und als style.css in themify-ultra-child ablegen, mit folgendem Inhalt:

/* 
Theme Name: Themify Ultra Child 
Description: Mein wunderbares Themify Ultra Child Theme 
Author: MeMyselfAndI 
Template: themify-ultra 
*/

BeiMultisite-Installationen für jede Netzwerk-Website sowohl für den Verzeichnisnamen als auch bei Theme-Name und Description einen anderen Namen verwenden, z.B.
(WordPress-Installations-Verzeichnis)/wp-content/themes/themify-ultra-child-zwei mit einer style.css so:

/* 
Theme Name: Themify Ultra Child Zwei
Description: Mein zweites Themify Ultra Child Theme 
Author: MeMyselfAndI 
Template: themify-ultra 
*/

Danach wechseln zu Design -> Themes und Child-Theme aktivieren.

Base Styling

Noch ungestylte Elemente erkennt man im Ultra Theme an der Farbe Rot. Falls Rot die Style-Farbe der Wahl sein sollte hat man einen Haupttreffer gelandet 😉

  1. Eventuell Theme Color
  2. Themify Customizer -> Tab Advanced Settings
  3. Global Styles
  4. Custom Fonts
  5. style.css

Theme Color

Themify Ultra Child -> Themify Settings -> Theme Settings -> Theme Appearance -> Theme Color

Falls eine der bereitgestellten Standard-Farben passen sollte kann man hier beginnen das Theme einzufärben. Das tut es aber leider oft nicht, dann einfach auf default lassen.

Themify Customizer

Der Ultra-Customizer bietet viel und beherrscht Responsive-Styling

Als Erstes oben auf das Advanced – More Options Tab klicken und danach für immer so lassen. Aus Erfahrung ist ein Hin- und Herswitchen zwischen Basic und Advanced nicht zu empfehlen.

Folgend markiert sind die wichtigsten Bereiche um das Theme am Anfang grob “einzufärben” bzw. zu stylen.

Für die Base-Farben am Wichtigsten sind erstmal die Bereiche Body und Accent Styling.

Vorab Info zu Responsive-Styling (rechts neben Ausblenden)

Alles erstmal für Desktop machen, die Styles für Desktop gelten bis runter zu mobile ohne das man für die anderen Responsive-Stufen etwas machen muss.

Empfehlung: Für die kleineren Responsive-Stufen unterhalb Desktop nur dann Dinge ändern wenn es muss, wie z.B. wenn man für die Headlines Größenanpassungen machen möchte …und danach wieder zurück zu Desktop wechseln.

Grund: Es kann vorkommen, dass man z.B. auf mobile wechselt dort Dinge tut und dann weiter woanders Dinge weiter tut in der Annahme, dass man das für Desktop macht und wundert sich später, dass z.B. der Footer bei Mobile plötzlich einen anderen Hintergrund hat usw. Das als Tipp.

Wenn es mal passiert dann muss man die Styles in den betreffenden Respionsive-Stufen wieder herauslöschen. Eine Funktion, die alle Styles für eine Responsive-Stufe separat cleart, gibt es leider noch nicht, werde das Themify aber als Wish vorschlagen, ebenso wie ein wirklich globales Farben-System.

Weil wir gerade im unteren Bereich sind: Clear All putzt alles weg, also Vorsicht. Mit Export könnt ihr alle Style-Angaben als Zip exportieren und zu einem anderen Ultra-Theme per Import übertragen oder es als Style-Backup nutzen.

Body

Für Hintergrund, Schrift-Art, Schrift- und Link-Farbe.

Schriftart: Dazu mehr weiter unten im Abschnitt Custom Fonts.

Accent Styling

Hier am Besten rumspielen und zuschauen wie sich das Theme verändert. Wichtig hier auch Link-Farbe.

Headings

Klar, hier die Farben setzen, die man möchte

Header und Footer

Hier vor allem erstmal die Headerwrap und Footerwrap-Bereiche für den Hintergrund, oder so lassen

Custom CSS

Darüber kann man dem Theme CSS-Snippets hinzufügen. Ich nutze das gerne um Dinge schnell mal auszutesten, nehme es dort dann bei Gefallen aber wieder raus und füge es zu style.css hinzu, weil ich bei CSS-Angelegenheiten gerne alles an einem Platz habe (Stichwort: Bearbeiten mit einem gescheiten Editor). Bei mir ist Custom CSS generell leer.

Global Styles

Themify Ultra Child -> Global Styles

Ein weiterer Bereich über den man zuerst seinen Style global über die Seite verteilen kann. Ich mach darüber z.B. gerne die Buttons. Allerdings, der Button für das Kontaktformular wird über Buttons nicht mitgestylt, denn mus man dann nochmal extra in Global-Style des Kontaktfomulars stylen. Wieviel man über die Global Styles machen möchte hängt auch von der größe der Seite ab. Bei kleineren Seiten hinterlege ich hier z.B. den Style der Buttons, style aber den Button im Kontaktformular dann direkt über das Modul.

Die eigenen Global Styles können dann im Themify-Page-Builder wie folgt angewendet werden:

Z.B. im Button-Modul den Tab Styling anklicken, oben rechts dann ist das Icon für die Anwendung des Global Styles, anklicken und gewünschten Style auswählen.

Custom Fonts

Einbindung zusätzlicher Schriften über Custom Fonts

Da gibt es nichts Außergewöhnliches zu berichten, alles easy und man braucht die Font-Variante nur als woff und woff2 Hochladen und schon steht der Font im Customizer und Builder zur Verfügung.

Was man noch wissen muss ist dass wenn man den Font auch in style.css nutzen möchte er das URL-Nice-Format hat. Aus Roboto Condensed wird z.B. roboto-condensed … und immer alles klein.

Themify Ultra Child -> Custom Fonts

Tipp: Um einer Seite schnelle Ladezeiten zu bescheren empfiehlt sich der sparsame Einsatz von Schriften. Ich selbst nutze für die Webstylerei Seite zur Zeit z.B. nur lokale Fonts (Arial, Helvetica, sans-serif) und lade keine zusätzlichen Schriften. Das beschert mir gerade neben anderen Optimierungen meistens für Mobile wie Desktop einen Score nahe oder über 90 in Google Pagespeed Insights.

Deswegen sieht es bei mir in Custom Fonts gerade so aus …nichts außer gähnender Leere:

Wenn wir gerade schon bei Optimierungen sind. Wenn ihr die Webstylerei-Seite https://webstylerei.de per Mobile/Smartphone aufruft, seht ihr zur Zeit nur die Navigation, Logo, H1 und H2 …aber sonst im zuerst sichtbaren Bereich (früher content above the fold) nichts weiter. Der folgende Content (vor allem weitere Bilder) wurde so platziert, dass im zuerst sichtbaren Bereich nichts weiter hineinragt. Damit wird nur das Logo, ein hinsichtlich Kilobytes leichtgewichtiges Bild im WebP-Format, zum dicksten Brocken im Hinblick auf Largest Content Full paint (Google Pagespeed Score). Ist gerade ein Test und wer weiß ob das so bleibt…

Zurück zu den Schriften/Fonts: Fontsize 1 em und line-height 1.65 em sind im Ultra Standard. Kann man natürlich nach Gusto ändern und hab ich auch gemacht …was nicht bedeutet, dass das allzulange so bleibt, denn wie bei allem anderen auch was ich so mache, es gibt immer etwas auszuprobieren… 😉

 

Google Fonts …lokal über Custom Fonts installieren

Google Fonts stehen im Themify-Ultra natürlich allumfänglich für die Enbindung bereit. Das tue ich auch bei der Entwicklung neuer Seiten um passende Schriften auszusuchen. Nachdem ich die passenden Fonts aber gefunden habe lade ich sie über den Google Webfonts Helper (externer Link) herunter, schalte in Themify die Google Fonts wieder aus und installiere sie über Custom Fonts. Das mach ich so bei mir und meinen Kundenseiten aus Datenschutzgründen.

Themify Ultra Child -> Theme Seettings -> General -> Google Fonts

style.css

(WordPress Installations-Verzeichnis)/wp-content/themes/themify-ultra-child/style.css

Hier landen bei mir alle CSS-Angaben, die nicht über die Theme-Tools gemacht werden können.

Es gibt zwar auch die Möglichkeit über den Customizer CSS hinzuzufügen, aber ich mag bei CSS-Angelegenheiten alles an einem Platz.

Layout Parts

Themify Ultra Child -> Layout Parts

Hierüber können öfters und exakt gleich wiederkehrende Seitenbereiche gebaut werden und über den Builder eingebunden werden. Wird eine Änderung erforderlich muss man das dann nur an einer Stelle tun.

…und der Artikel hier wird aus der Erfahrung heraus ganz garantiert noch ein paar Mal überarbeitet werden 😉