Kurzfassung

Eine umfangreiche TYPO3-Website zu WordPress zu migrieren, klingt zunächst nach einem klassischen Website-Relaunch. Das neue Design wird in WordPress aufgebaut, bestehende Inhalte werden übernommen und die neue Website geht online.

Bei einer mehrsprachigen Website mit vielen Seiten, News, Bildern und unterschiedlichen Inhaltselementen wird die Content-Migration jedoch schnell zu einem eigenen Großprojekt.

Für den Relaunch einer internationalen Website aus der Agrar- und Landtechnik haben wir deshalb ein eigenes Migrationstool entwickelt. Damit konnten wir bestehende TYPO3-Inhalte direkt innerhalb der neuen WordPress-Website auswählen, den neu gestalteten Elementor-Seiten zuordnen und anschließend alle vorhandenen Sprachversionen automatisiert in WPML importieren.

Ohne jede Seite in jeder Sprache erneut manuell befüllen zu müssen.
Ganz einfach.

Der eigentliche Aufwand eines Website-Relaunches steckt oft im Content

Eine neue Website zu gestalten, ist nur ein Teil eines Relaunches.
Bei bestehenden Unternehmenswebsites sind oft über viele Jahre umfangreiche Inhalte entstanden:

Unternehmens- und Leistungsseiten
Produktinformationen
News und Pressemitteilungen
Bilder und Downloads
unterschiedliche Inhaltsbereiche innerhalb einzelner Seiten
Übersetzungen in mehreren Sprachen

Diese Inhalte einfach vollständig in das neue System zu importieren, ist selten die beste Lösung.

Die neue Website erhält normalerweise eine neue Seitenstruktur, ein neues Design und neu aufgebaute Inhaltsbereiche. Bestehende TYPO3-Elemente können daher nicht immer eins zu eins in WordPress oder Elementor übernommen werden.

Gleichzeitig sollen vorhandene Texte und Übersetzungen nicht verloren gehen. Gerade bei fachlichen Inhalten wurden diese oft aufwendig erstellt, abgestimmt und professionell übersetzt.

Es braucht also einen Mittelweg:
Die neue Website soll gestalterisch und technisch sauber neu aufgebaut werden. Bestehende Inhalte sollen aber dort übernommen werden können, wo sie weiterhin sinnvoll und aktuell sind.

Genau an diesem Punkt wird eine klassische TYPO3-zu-WordPress-Migration schnell aufwendig.

Warum mehrsprachige TYPO3-Migrationen so mühsam werden können

Bei einer Website mit nur wenigen Seiten und zwei Sprachen lässt sich ein Teil der Inhalte noch manuell übertragen.

Bei größeren Websites sieht das anders aus.

Angenommen, eine Website besteht aus 100 Seiten und ist in vier Sprachen verfügbar. Selbst wenn pro Seite nur einige Textbereiche und Bilder übernommen werden müssen, entstehen daraus schnell Hunderte einzelne Arbeitsschritte.

Für jede Seite müsste man unter anderem:
1. die bestehende TYPO3-Seite öffnen,
2. den passenden Inhaltsbereich finden,
3. den Text kopieren,
4. die neue WordPress-Seite öffnen,
5. das richtige Elementor-Element auswählen,
6. den Inhalt einfügen,
7. Bilder herunterladen und neu hochladen,
8. die passende Übersetzung suchen,
9. den Vorgang für jede weitere Sprache wiederholen,
10. anschließend alle Sprachversionen kontrollieren.

Das ist nicht nur zeitaufwendig. Durch die vielen manuellen Schritte steigt auch die Fehleranfälligkeit.

Texte können in der falschen Sprache eingefügt werden. Bilder werden vergessen. Absätze landen im falschen Element. Übersetzungen werden nicht richtig miteinander verknüpft oder einzelne Content-Bereiche werden versehentlich ausgelassen.

Die Arbeit ist machbar – aber bei vielen Seiten und Sprachen nicht besonders effizient.

Ein Komplettimport löst das Problem ebenfalls nicht immer

Natürlich gibt es Importlösungen, mit denen sich Daten aus einem bestehenden Content-Management-System exportieren und in WordPress importieren lassen.

Das kann sinnvoll sein, wenn Inhalte und Strukturen möglichst unverändert übernommen werden sollen.

Bei einem echten Relaunch ist das aber häufig nicht der Fall.

Die neue Website soll schließlich nicht einfach eine technische Kopie der alten Website werden. Sie erhält ein neues Design, eine verbesserte Seitenstruktur und neu aufgebaute Elemente in Elementor.

Ein Absatz aus TYPO3 soll vielleicht künftig in einem zweispaltigen Bereich erscheinen. Aus mehreren alten Inhaltselementen wird ein gemeinsamer neuer Abschnitt. Bestehende Bilder werden teilweise übernommen, teilweise ersetzt. Bestimmte News bleiben relevant, andere sollen nicht mehr migriert werden.

Ein blinder Komplettimport würde in solchen Fällen viele Inhalte übertragen, die anschließend trotzdem manuell bereinigt, neu zugeordnet oder wieder gelöscht werden müssten.

Deshalb haben wir einen anderen Ansatz gewählt.

Unsere Lösung: Inhalte auswählen, Seite gestalten, Sprachen automatisiert übernehmen

Für das Projekt haben wir ein eigenes Tool entwickelt, das direkt in den Migrationsprozess der neuen WordPress-Website integriert wurde.

Die Grundidee war einfach:

Wir wollten die volle gestalterische Freiheit von Elementor beibehalten, aber gleichzeitig so viele bestehende Inhalte und Übersetzungen wie möglich automatisiert übernehmen.

Dafür wurde der Prozess in zwei Teile aufgeteilt.

Zuerst wird die neue Seite in der Hauptsprache sauber in Elementor aufgebaut. Dabei kann direkt auf die Inhalte der bisherigen TYPO3-Website zugegriffen werden, ohne die neue WordPress-Umgebung verlassen zu müssen.

Die benötigten Content-Abschnitte werden ausgewählt und den entsprechenden Bereichen der neuen Seite zugeordnet.

Im Hintergrund speichert das Tool die IDs der ursprünglichen TYPO3-Inhaltselemente.

Sobald die Seite in der Hauptsprache fertig gestaltet ist, können anhand dieser IDs die zugehörigen Inhalte der weiteren Sprachen automatisch gefunden, ausgelesen und in die entsprechenden WPML-Sprachversionen importiert werden.

Das bedeutet:

Die Seite muss nur einmal vollständig aufgebaut und zugeordnet werden. Die bereits vorhandenen Übersetzungen werden anschließend automatisch in die richtigen Bereiche übernommen.

So funktioniert die TYPO3-zu-WordPress-Migration im Detail

1. Die neue Seite wird in Elementor aufgebaut

Der Ausgangspunkt ist die neue WordPress-Website.

Die Seite wird nicht aus TYPO3 kopiert, sondern passend zum neuen Webdesign in Elementor aufgebaut. Abstände, Spalten, Überschriften, Bilder, Buttons und weitere Elemente können damit frei gestaltet werden.

So bleibt der Relaunch ein echter Relaunch.

Die neue Website muss sich nicht an der technischen Struktur des alten TYPO3-Systems orientieren.

2. Bestehende Inhalte werden direkt in WordPress angezeigt

Während der Bearbeitung können die verfügbaren Inhalte der bisherigen TYPO3-Seite direkt innerhalb der neuen WordPress-Website aufgerufen werden.

Das ständige Wechseln zwischen TYPO3, Browser-Tabs und Elementor entfällt.

Die Person, die die neue Seite erstellt, sieht direkt, welche bestehenden Content-Abschnitte verfügbar sind und kann entscheiden, welche davon übernommen werden sollen.

Das ist besonders hilfreich, wenn eine TYPO3-Seite aus vielen einzelnen Inhaltselementen besteht.

Nicht jeder Bereich muss importiert werden. Nur die Inhalte, die für die neue Seite tatsächlich benötigt werden, werden ausgewählt.

3. Die IDs der TYPO3-Inhalte werden gespeichert

Jeder relevante Content-Abschnitt besitzt im ursprünglichen System eine eindeutige ID.

Wird ein Inhalt für die neue Seite ausgewählt, speichert unser Tool diese ID gemeinsam mit der Zuordnung zum entsprechenden Elementor-Element.

Vereinfacht gesagt merkt sich das System zum Beispiel:

Dieser TYPO3-Text gehört in dieses Textfeld.
Diese Überschrift gehört in dieses Elementor-Heading.
Dieses Bild gehört in diesen Bildbereich.
Dieser News-Inhalt gehört in diesen WordPress-Beitrag.

Die gespeicherte ID wird damit zur Verbindung zwischen dem alten TYPO3-Inhalt und dem neuen WordPress-Element.

4. Die Hauptsprache wird fertiggestellt

Die neue Seite wird zunächst in der festgelegten Hauptsprache fertig aufgebaut.

Dabei können Inhalte nicht nur übernommen, sondern auch überarbeitet werden. Absätze lassen sich kürzen, neu anordnen oder mit neuen Inhalten kombinieren.

Das ist ein wichtiger Unterschied zu einer vollständig automatisierten Migration.

Automatisiert wird dort, wo Automatisierung sinnvoll ist. Die redaktionelle und gestalterische Kontrolle bleibt trotzdem erhalten.

5. Die weiteren Sprachversionen werden automatisch ausgelesen

Sobald die Hauptseite fertig ist, beginnt der eigentliche Vorteil unseres Tools.

Anhand der gespeicherten TYPO3-IDs sucht das System nach den zugehörigen Inhaltselementen in den weiteren Sprachen.

Ist ein ausgewählter Abschnitt beispielsweise auf Deutsch, Englisch, Italienisch und Französisch vorhanden, kann das Tool die jeweiligen Sprachversionen eindeutig zuordnen.

Die Texte werden aus TYPO3 ausgelesen und automatisch in die passenden WPML-Sprachversionen der neuen WordPress-Seite importiert.

Die Zuordnung muss nicht für jede Sprache erneut durchgeführt werden.

6. Die Inhalte landen direkt in den richtigen Elementor-Elementen

Es reicht nicht, die übersetzten Texte einfach irgendwo in WordPress zu speichern.

Sie müssen in genau jenen Elementor-Elementen landen, die zuvor für die Hauptsprache aufgebaut wurden.

Deshalb verbindet das Tool nicht nur Seiten miteinander, sondern ordnet einzelne Content-Bereiche den richtigen Feldern und Widgets zu.

Die englische Überschrift landet im englischen Überschriftenelement. Der französische Fließtext wird im dazugehörigen französischen Textbereich gespeichert. Das vorhandene Bild wird dem richtigen Bildelement zugeordnet.

Das Elementor-Layout bleibt in allen Sprachen erhalten. Nur die jeweiligen Inhalte werden ausgetauscht.

Auch bestehende Bilder konnten übernommen werden

Bei Content-Migrationen geht es nicht nur um Texte.

Gerade bei News, Projekten und Unternehmensseiten spielen Bilder eine wichtige Rolle. Diese manuell aus TYPO3 herunterzuladen, sinnvoll zu benennen, in WordPress hochzuladen und anschließend wieder den richtigen Seiten und Sprachen zuzuordnen, verursacht zusätzlichen Aufwand.

Unser Tool konnte deshalb auch bestehende Bilder auslesen und in WordPress übernehmen.

Die Bilder wurden dabei nicht einfach extern eingebunden. Sie konnten in die WordPress-Mediathek übertragen und anschließend den vorgesehenen Elementor-Elementen oder Beiträgen zugeordnet werden.

Dadurch bleiben sie auch nach der Abschaltung der alten TYPO3-Website verfügbar.

Wichtig ist bei einer solchen Migration trotzdem eine anschließende Prüfung:
Ist die Bildqualität ausreichend?
Werden noch veraltete Motive verwendet?
Sind Dateinamen und Alt-Texte sinnvoll?
Ist das Bild für die neue Darstellung richtig zugeschnitten?
Liegen die notwendigen Nutzungsrechte weiterhin vor?
Sollte das Bild für eine bessere Ladezeit optimiert werden?

Die Vorteile unserer individuellen Migrationslösung

Deutlich weniger manuelle Arbeit

Die Seite wird nur in der Hauptsprache vollständig aufgebaut und zugeordnet. Die weiteren Sprachversionen können anschließend automatisiert übernommen werden.

Weniger Copy-and-paste

Das manuelle Kopieren einzelner Texte zwischen TYPO3, WordPress und Elementor wird auf ein Minimum reduziert.

Geringere Fehleranfälligkeit

Durch die eindeutige Zuordnung über gespeicherte IDs landen die Inhalte in den vorgesehenen Bereichen und Sprachen.

Bestehende Übersetzungen bleiben erhalten

Professionell erstellte und bereits freigegebene Übersetzungen müssen nicht neu angefertigt oder erneut manuell übertragen werden.

Neues Design ohne starre Altsystem-Struktur

Die neue Website kann frei in Elementor gestaltet werden. Die technische Struktur der alten TYPO3-Seite muss nicht nachgebaut werden.

Selektive Content-Übernahme

Es können einzelne Seiten, News oder Content-Bereiche migriert werden. Ein vollständiger Import der gesamten Website ist nicht zwingend notwendig.

Bilder werden ebenfalls übernommen

Vorhandene Medien lassen sich gemeinsam mit den zugehörigen Inhalten in WordPress importieren.

Skalierbar für viele Seiten und Sprachen

Je größer und internationaler die bestehende Website ist, desto stärker wirkt sich die Automatisierung auf den gesamten Projektaufwand aus.

Sie möchten eine mehrsprachige TYPO3-Website zu WordPress migrieren?

Gerade bei umfangreichen Websites ist ein CMS-Wechsel mehr als ein klassischer Import.

Inhalte müssen analysiert, ausgewählt, neu gestaltet und den richtigen Sprachversionen zugeordnet werden. Ein Standardprozess reicht dafür nicht immer aus.

Als WordPress-Agentur verbinden wir Webdesign, Content, Softwareentwicklung und SEO. Dadurch können wir nicht nur eine neue WordPress-Website gestalten, sondern auch individuelle Tools und Schnittstellen entwickeln, die den gesamten Relaunch einfacher machen.

Sie planen die Migration einer TYPO3-Website zu WordPress oder möchten bestehende mehrsprachige Inhalte in Elementor und WPML übernehmen?

Lassen Sie uns gemeinsam herausfinden, welcher Migrationsprozess für Ihre Website sinnvoll ist.

Ganz einfach.

Christian Schütz

Christian Schütz ist Mitgründer und Geschäftsführer von SuS.digital, einer Digitalagentur mit Sitz in Wels, Oberösterreich. SuS.digital begleitet KMU bei Webprojekten, Positionierung, SEO und digitaler Markenkommunikation – mit dem Anspruch, dass eine neue Website nicht nur gut aussieht, sondern messbar arbeitet.

Kurzfassung

Für Kremsmüller haben wir eine individuelle Onlyfy-Integration für WordPress entwickelt, die offene Stellen automatisiert ausliest und direkt im Design der Website darstellt. Im Gegensatz zur üblichen iFrame-Lösung fügt sich die Jobübersicht nahtlos in das Corporate Design ein, funktioniert deutlich ruhiger und benutzerfreundlicher und vermeidet störende Sprünge bei der Navigation. So entsteht eine moderne Karrierewebsite mit besserer User Experience – ohne doppelte Pflege der Stellenanzeigen.

Onlyfy ist eine leistungsfähige Lösung für das Bewerbermanagement. Sobald die offenen Stellen aber auf der eigenen Unternehmenswebsite dargestellt werden sollen, kommt häufig eine einfache Standardlösung zum Einsatz: Die Jobseite wird über ein iFrame eingebunden.

Das funktioniert grundsätzlich. Wirklich gut integriert fühlt es sich allerdings selten an.

Für unseren Kunden Kremsmüller wollten wir deshalb mehr als eine fremde Jobübersicht innerhalb der Website anzeigen. Wir haben eine individuelle Onlyfy-Integration für WordPress entwickelt, bei der die offenen Stellen automatisiert ausgelesen und direkt im Design der Kremsmüller-Website dargestellt werden.

Das Ergebnis: eine deutlich bessere User Experience, ein durchgängiger Markenauftritt und trotzdem keine doppelte Pflege der Stellenanzeigen.

Das Problem mit der klassischen Onlyfy-iFrame-Integration

Ein iFrame ist vereinfacht gesagt ein Fenster innerhalb der Website, in dem eine externe Seite geladen wird. Für die schnelle Einbindung einer Jobbörse ist das praktisch: Code einfügen, Größe einstellen und fertig.

Technisch einfach bedeutet aber nicht automatisch nutzerfreundlich.

Bei einer Standard-iFrame-Lösung können unter anderem folgende Probleme auftreten:

Die Jobübersicht wirkt optisch wie ein Fremdkörper.
Schriftarten, Abstände, Farben und Buttons passen nicht vollständig zum Corporate Design.
Unterschiedliche Höhen können zu unschönen Sprüngen innerhalb der Seite führen.
Bei Klicks verändert sich der sichtbare Ausschnitt oder die Seite springt an eine unerwartete Position.
Die Bedienung auf Smartphones kann umständlich wirken.
Anpassungen an die Struktur und Darstellung sind nur eingeschränkt möglich.

Besucherinnen und Besucher merken dadurch schnell, dass sie sich nicht mehr in einem einheitlichen Teil der Unternehmenswebsite bewegen. Gerade auf einer Karriereseite ist das problematisch: Sie ist häufig einer der ersten intensiven Berührungspunkte zwischen potenziellen Bewerberinnen und Bewerbern und dem Unternehmen.

Unsere Lösung: Onlyfy direkt mit WordPress verbinden

Für Kremsmüller haben wir Onlyfy daher nicht einfach über ein Standard-iFrame eingebunden. Stattdessen wurde eine individuelle WordPress-Integration entwickelt.

Die offenen Stellen werden direkt aus Onlyfy ausgelesen und automatisiert an die Website übertragen. Onlyfy bleibt dabei weiterhin das zentrale System für die Verwaltung der Jobs. Neue Stellen müssen also nicht zusätzlich in WordPress angelegt und später an zwei unterschiedlichen Stellen aktualisiert werden.

Der Ablauf ist einfach:

Eine offene Stelle wird in Onlyfy angelegt oder aktualisiert.
Die WordPress-Website ruft die entsprechenden Jobdaten automatisiert ab.
Die Stellenanzeigen werden innerhalb der Website aufbereitet.
Besucher sehen die aktuellen Jobs im Design und in der Struktur der Kremsmüller-Website.

So verbinden wir die zentrale Verwaltung über Onlyfy mit den gestalterischen und technischen Möglichkeiten einer individuellen WordPress-Website.

Bessere User Experience ohne störende Sprünge

Ein wesentliches Ziel der Entwicklung war eine möglichst ruhige und intuitive Bedienung.

Bei klassischen iFrames kann sich die Höhe des eingebetteten Bereichs verändern, sobald eine Stellenanzeige geöffnet oder zwischen Inhalten gewechselt wird. Dadurch springt die Website teilweise nach oben oder unten. Nutzer verlieren die Orientierung und müssen erst wieder die richtige Position auf der Seite finden.

Durch die individuelle Onlyfy-Integration konnten wir die Darstellung und Navigation gezielt an die Website anpassen. Die Jobs verhalten sich wie reguläre Bestandteile der Seite und nicht wie eine extern eingebettete Anwendung.

Das sorgt für:

klarere Klickwege,
weniger unerwartete Bewegungen innerhalb der Seite,
eine bessere Darstellung auf mobilen Geräten,
eine konsistente Navigation und
ein insgesamt professionelleres Nutzungserlebnis.

Die Technik bleibt dabei im Hintergrund. Bewerberinnen und Bewerber sehen keine „Integration“, sondern eine übersichtliche Karriereseite, die sich so verhält, wie sie es erwarten.

Stellenanzeigen passend zum Corporate Design

Eine Karrierewebsite vermittelt nicht nur Informationen über offene Positionen. Sie transportiert auch die Arbeitgebermarke.

Wenn die Website modern gestaltet ist, die Jobübersicht aber plötzlich wie ein externes Standardmodul aussieht, entsteht ein sichtbarer Bruch. Genau diesen Bruch wollten wir bei Kremsmüller vermeiden.

Durch die individuelle Umsetzung konnten wir die Darstellung der Onlyfy-Jobs an das Corporate Design der Website anpassen. Dazu gehören unter anderem:

Typografie,
Farben,
Buttons,
Abstände,
Inhaltsbreiten,
responsive Darstellung und
die visuelle Struktur der Stellenanzeigen.

Die Jobs wirken dadurch nicht nachträglich eingebaut, sondern wie ein fester Bestandteil der Website.

Automatische Übertragung statt doppelter Datenpflege

Bei individuellen Lösungen entsteht schnell die Sorge, dass offene Stellen künftig zusätzlich in WordPress gepflegt werden müssen.

Das ist bei unserer Umsetzung nicht notwendig.

Onlyfy bleibt die zentrale Datenquelle. Die zuständigen Mitarbeiterinnen und Mitarbeiter können ihre Stellenanzeigen weiterhin im gewohnten Bewerbermanagement verwalten. Die Website übernimmt die benötigten Informationen automatisch.

Das reduziert den laufenden Aufwand und verhindert typische Fehler:

Stellen werden nicht versehentlich nur in einem System aktualisiert.
Bereits besetzte Positionen bleiben nicht unnötig lange auf der Website sichtbar.
Änderungen müssen nicht doppelt eingetragen werden.
Die Karrierewebsite bleibt ohne zusätzliche redaktionelle Arbeit aktuell.

Damit verbindet die Lösung individuelle Gestaltung mit einem automatisierten und wartungsarmen Prozess.

Individuelle Onlyfy-Integration auch für andere WordPress-Websites

Die für Kremsmüller entwickelte Lösung zeigt, dass Unternehmen bei der Integration ihrer Recruiting-Software nicht auf ein Standard-iFrame beschränkt sind.

Eine individuelle Onlyfy-Schnittstelle für WordPress kann besonders sinnvoll sein, wenn:

die Karriereseite optisch vollständig zum Unternehmen passen soll,
eine bestehende iFrame-Integration Probleme verursacht,
die Bedienung auf Smartphones verbessert werden soll,
Jobs automatisch aus Onlyfy übernommen werden sollen,
das Corporate Design konsequent eingehalten werden soll,
individuelle Ansichten oder Strukturen benötigt werden oder
die Karrierewebsite langfristig weiterentwickelt werden soll.

Welche Umsetzung sinnvoll ist, hängt von der bestehenden Website, den verfügbaren Jobdaten und den Anforderungen an Darstellung und Bewerbungsprozess ab.

Standard einbetten oder individuell entwickeln?

Für eine kleine Website mit wenigen Anforderungen kann eine Standardintegration ausreichend sein. Sobald die Karriereseite jedoch eine wichtige Rolle im Recruiting spielt, lohnt sich ein genauerer Blick.

Eine individuelle Integration benötigt zwar mehr Konzeptions- und Entwicklungsaufwand als das Einfügen eines iFrames. Dafür entsteht eine Lösung, die technisch, gestalterisch und inhaltlich zur Website passt.

Der Unterschied zeigt sich vor allem dort, wo Bewerber ihn unmittelbar wahrnehmen: bei der Orientierung, der Bedienung und dem Gesamteindruck des Unternehmens.

Onlyfy mit WordPress verbinden? Ganz einfach.

Sie verwenden Onlyfy und möchten Ihre Stellenanzeigen besser in Ihre WordPress-Website integrieren?

Wir entwickeln individuelle Onlyfy-Integrationen, die offene Stellen automatisiert übernehmen und passend zu Ihrer Website darstellen. Ohne störenden Standard-Look, ohne doppelte Datenpflege und ohne unnötige Umwege für Bewerberinnen und Bewerber.

Gemeinsam prüfen wir Ihre bestehende Onlyfy-Einbindung und entwickeln eine Lösung, die zu Ihrer Website, Ihrem Corporate Design und Ihrem Recruiting-Prozess passt.

Christian Schütz

Wichtigste Erkenntnisse in Kürze

Beide Systeme ermöglichen hochwertige Websites mit modernen Animationen – der Unterschied entsteht durch Konzept, Design und Umsetzung, nicht primär durch das CMS.
Webflow ist ideal für Teams, die schnell und visuell arbeiten wollen (Landingpages, Kampagnen, kurze Iterationen).
WordPress bietet maximale Flexibilität und Datenhoheit – perfekt für Mehrsprachigkeit, Integrationen, E-Commerce und individuelle Funktionen.
Mit Elementor Pro setzen wir WordPress visuell, effizient und dennoch erweiterbar um – Designfreiheit ohne starres Korsett.
SEO & Performance sind bei beiden Systemen stark, sofern Inhalte, Medien und Skripte sauber geplant und schlank umgesetzt werden.
Compliance & Betrieb: WordPress gibt volle Kontrolle über Hosting und Datenschutz; Webflow ist gemanagt, vertragliche Rahmenbedingungen (z. B. Datenverarbeitung) sollten geprüft werden.
Kosten/TCO: Webflow ist planbar über Abos; WordPress ist variabel – ihr investiert genau dort, wo es Mehrwert schafft und bleibt unabhängig.

Worum es wirklich geht: Qualität entsteht vor dem Klick

Ob WordPress oder Webflow – zuerst entscheidet ihr, für wen die Website da ist, was sie leisten soll und wie sie in euer Marketing eingebettet ist. Ein klares Storyboard, ein gutes Designsystem, sauberes Copywriting, smarte Animationen und gute Ladezeiten: Das sind die Hebel, die am Ende wahrgenommen werden.

Das CMS ist das Werkzeug. Es kann euch bremsen – oder euch beschleunigen. Richtig gewählt, unterstützt es eure Arbeitsweise, euer Tempo und eure Wachstumspläne.

WordPress in Kürze – offen, flexibel, zukunftssicher

WordPress ist weltweit im Einsatz – von kleinen Seiten bis zu großen Unternehmensauftritten. Das System ist offen: Ihr entscheidet über Hosting, Datenschutz, Erweiterungen und Integrationen.

Mit Elementor Pro bauen wir Layouts, Komponenten, Animationen und ganze Landingpage-Strecken visuell.

Gleichzeitig bleibt die Tür zu individuellen Funktionen offen: eigene Module, Schnittstellen zu CRM/ERP, mehrsprachige Inhalte, komplexe Formulare, Portale oder E-Commerce mit WooCommerce.

Stärken in einem Satz: Ihr behaltet die volle Kontrolle – über Technik, Daten und Funktionen. Das ist besonders wertvoll, wenn ihr wachsen wollt oder Spezialanforderungen habt.

Webflow in Kürze – visuell bauen, schnell live

Webflow ist ein gehostetes System, das sich wie ein professioneller Baukasten anfühlt. Das visuelle Arbeiten ist sehr direkt: Design, Animationen und responsives Verhalten entstehen an einem Ort, in Echtzeit sichtbar (ähnlich wie bei Elementor Pro).

Für Marketing-Websites und Kampagnen ist das großartig: kurze Wege, schnelle Iteration, schlanke Übergaben. Teams können eigenständiger arbeiten, ohne für jede Änderung ein Development-Ticket aufzumachen.

Stärken in einem Satz: Tempo und Klarheit – besonders, wenn ihr häufig Landingpages und Kampagnen baut und das System euch „aus dem Weg“ gehen soll.

Webflow vs. WordPress – im Überblick

Kriterium	WordPress (mit Elementor Pro)	Webflow
Geschwindigkeit beim Umsetzen	Sehr schnell mit vorbereiteten Vorlagen und Komponenten; ideal für laufende Erweiterungen	Sehr schnell für Marketing-Seiten und Kampagnen; visuelles Arbeiten direkt im Tool
Design & Animationen	Hochwertige Designs und Animationen über Elementor Pro und saubere Assets; volle Gestaltungsfreiheit	Hochwertige Designs und Interaktionen „out of the box“; sehr intuitive Animationen
Bedienung für Redakteur:innen	Visuelles Bauen mit klaren Leitplanken, Rollen/Rechte gut steuerbar	Sehr eingängig, Änderungen sind sofort sichtbar; ideal für eigenständige Teams
Mehrsprachigkeit	Sehr stark bei vielen Sprachen und komplexen Strukturen	Möglich, bei großen Sprachumfängen schneller an Grenzen
Integrationen & Erweiterbarkeit	Nahezu unbegrenzt: Plugins, Schnittstellen, individuelle Funktionen	Gute Auswahl, aber stärker an die Plattform gebunden
E-Commerce	Von einfach bis komplex (z. B. WooCommerce, B2B-Logiken)	Gut für einfache Kataloge und klare Produktlogiken
Hosting & Datenschutz (EU)	Frei wählbares Hosting, volle Kontrolle (z. B. EU-Server); Datenschutz gut steuerbar	Gehostetes System; rechtliche Rahmenbedingungen (z. B. Auftragsverarbeitung) prüfen
Kontrolle & Datenhoheit	Sehr hoch – ihr behaltet Technik, Daten und Prozesse in der Hand	Bequemes Rundum-Paket, weniger tiefe Kontrolle
Laufende Kosten	Variabel, nach Bedarf skalierbar (Hosting, Pflege, Weiterentwicklung)	Planbar über Abos und Pakete
Am besten geeignet für	Wachsende Websites, individuelle Funktionen, viele Sprachen, Integrationen	Kampagnen, Landingpages, schnelle Marketing-Zyklen, visuelles Arbeiten

Design & Animationen: Beide können „wow“

Hochwertige Mikro-Interaktionen, Scroll-Effekte, dezente Parallax-Momente, flüssige Komponenten – all das ist in beiden Systemen möglich.

Der Unterschied liegt nicht im „Kann“ des CMS, sondern im Konzept und der Sorgfalt: sinnvolle Bewegungsdramaturgie, reduzierte Skripte, optimierte Assets und eine klare Designsprache.

Mit Elementor Pro und den Bordmitteln von Webflow lassen sich moderne, leichtgewichtige Animationen erstellen, die inhaltsstützend wirken statt zu blenden.

Ähnlich wie bei Webflow bieten wir für Elementor Pro auch hochwertigere und aufwändigere Animationen der Inhalte per GSAP an.

Wichtig:

Egal ob Webflow oder Elementor Pro: Hochwertige Animationen oder schöne Inhaltselemente müssen vorher von einem Webdesigner erstellt werden und können nicht einfach Out-of-the-box verwendet werden.
Bei Webflow braucht man das nötige Know-How in CSS, um alle Einstellungen zu verstehen.
Bei Webflow können deshalb Elemente und Komponenten in der Regel nicht vom Editor selbst angepasst werden. (nur inhaltlich)
Elementor bietet einen strikteren Rahmen und kann deshalb leichter auch selbst angepasst werden, in der Regel auch vom Editor selbst.

Redaktionsalltag: & Zusammenarbeit

Webflow punktet mit einem Editor, der sich für viele Inhalte fast wie „Gestalten am Objekt“ anfühlt. Das ist ideal, wenn Marketing-Teams eigenständig arbeiten wollen.

WordPress bietet mit seinem Block-Editor und Tools wie Elementor Pro ebenfalls ein sehr komfortables Redaktionsgefühl. Gleichzeitig lassen sich Rollen und Freigaben sehr fein einstellen – hilfreich, wenn mehrere Personen mit unterschiedlichen Rechten arbeiten oder wenn Prozesse wachsen.

Inhalte, Sprachen, Struktur

Beide Systeme können klar strukturierte Inhalte abbilden.

WordPress ist im Vorteil, sobald es vielsprachig, sehr umfangreich oder besonders individuell wird.

Eigene Inhaltstypen, spezielle Felder und Workflows lassen sich passgenau auf euer Unternehmen zuschneiden – ohne die spätere Erweiterbarkeit zu verlieren.

Webflow kann Mehrsprachigkeit und strukturierte Inhalte gut abdecken, fühlt sich aber am stärksten an, wenn die Website im Kern marketing-getrieben ist und das Inhaltsmodell überschaubar bleibt.

Suchmaschinen & Geschwindigkeit – verständlich erklärt

Google & Co. belohnen Websites, die schnell laden, klar aufgebaut sind und hilfreiche Inhalte bieten. Beide Systeme liefern dafür eine sehr gute Basis.

Webflow erzeugt von Haus aus sauberen Code. Wenn ihr sparsam mit externen Skripten (z. B. Tracking-Tools) umgeht, seid ihr leistungsfähig unterwegs.
WordPress performt ebenso sehr gut – vorausgesetzt, es wird sauber umgesetzt: leichtes Theme, gute Bildoptimierung, Caching und ein Content Delivery Network. Mit Elementor Pro achten wir auf disziplinierten Einsatz der Widgets, damit das System schlank bleibt.

Kurz: Gute Werte entstehen durch Konzept und Umsetzung – nicht durch den Systemnamen auf dem Papier.

Sicherheit, Datenschutz & Betrieb

Bei WordPress habt ihr freie Wahl: Serverstandort, Hoster, Sicherheits-Setup, Backups – alles in eurer Hand. Das ist oft ein Plus, wenn interne Richtlinien, Ausschreibungen oder besondere Datenschutz-Anforderungen bestehen.

Webflow nimmt euch vieles ab, weil es ein gehosteter Dienst ist. Updates und Infrastruktur sind dort gemanagt. Wichtig ist, die vertraglichen Punkte (Auftragsverarbeitung, Speicherorte, Datenflüsse) sauber zu prüfen.

E-Commerce, Integrationen & Wachstum

Braucht ihr einen Shop, individuelle Formulare, ein Kundenportal oder Anbindungen an CRM/ERP?

WordPress ist hier extrem flexibel. Vom schlanken Shop über Abo-Modelle bis zu komplexeren B2B-Anforderungen gibt es erprobte Wege – inklusive Sonderlösungen.
Webflow bietet E-Commerce und Integrationen, ist aber eher für einfachere Kataloge und klare Produktlogiken gemacht. Für Spezialfälle wird es schneller eng – dann punktet WordPress.

Betriebskosten – planbar vs. gestaltbar

Webflow ist sehr gut kalkulierbar: feste Pakete pro Website/Team.
WordPress startet oftmals günstiger, wird aber individueller: Hosting nach Bedarf, Erweiterungen nach Bedarf, Entwicklungsaufwand nach Bedarf. Der Vorteil: Ihr investiert genau dort, wo es einen Mehrwert schafft – und bleibt unabhängig.

Fazit

Beide Systeme haben ihre Berechtigungen. Für uns hat sich WordPress in Verbindung mit Elementor Pro als das ideale System ergeben. Damit können wir oder auch Marketingmitarbeiter schnell und einfach neue Landingpages bauen und wir können alles so anpassen, wie wir uns es vorstellen oder der Kunde es wünscht.

Dieser Guide hilft dir dabei, Bilder für die Website optimal aufzubereiten, zu komprimieren und in WordPress mit passenden Alt-Texten zu pflegen.

1. Warum Bilder optimieren?

Schnellere Ladezeiten: Kleinere Dateien sorgen für ein schnelleres Nutzererlebnis.
Besseres Ranking: Suchmaschinen belohnen performante Websites.
Optimale Darstellung: Klare, farbgetreue Bilder auf allen Endgeräten.
Barrierefreiheit: Alt-Texte und Beschreibungen machen Inhalte für alle zugänglich.

2. Die wichtigsten Dateiformate

Format	Für was geeignet	Stärken	Hinweise
JPEG	Fotos, komplexe Motive	Sehr gute Kompression bei Fotos	Qualität ab 70–85 % ausreichend für Web
PNG	Logos, Icons, Grafiken mit Transparenz	Verlustfrei, transparente Hintergründe	Für einfache Grafiken ideal
WebP	Moderne Websites, Fotos & Grafiken	Noch kleinere Dateien als JPEG/PNG	Breite Browser-Abstützung ist weit verbreitet
SVG	Logos, Icons, Vektorgrafiken	Skalierbar ohne Qualitätsverlust	Nur für Zeichnungen und Icons geeignet
AVIF	Zukunftsorientierte Nutzung	Sehr gute Kompression, zukunftssicher	Kann als Ergänzung neben WebP angeboten werden

3. Auflösung und Abmessungen festlegen

Zielgröße bestimmen: Definiere, wie groß das Bild maximal angezeigt wird. Für normale Content-Bilder sind häufig 800–1200 px ausreichend.
Optimale Breite für volle Darstellung: Bilder, die über die gesamte Bildschirmbreite laufen (z. B. Hero-Bilder), sollten etwa 1920 px breit sein.
Seitenverhältnis konstant halten: Achte darauf, Breite und Höhe im gleichen Verhältnis zu skalieren (z. B. 16:9 oder 4:3), um Bildverzerrungen zu vermeiden.

Übersicht: Empfohlene Abmessungen

Bildtyp	Empfohlene Abmessungen	Format
Hero-Banner	1920 × 1080 px	px als JPG
Logos	je nach Einsatzgröße (z. B. 200 × 200 px)	Vektor (SVG)
Grafiken	800 × 600 px (je nach Einsatz)	px, png oder Vektor (SVG)
SVG-Grafik	beliebige Skalierung	Vektor (SVG)
Animationen	variabel, z. B. 800 × 450 px (16:9 oder 1:1)	MP4, GIF/WebP oder auch SVG-Animation
Fotos	1200 × 800 px	px als JPG

4. Kompressionstechniken anwenden

Ideale Dateigröße: Strebe eine Dateigröße von 100–200 KB pro Bild an, um Ladezeiten gering zu halten.
Verlustbehaftete Kompression (Lossy):
Setze Qualitätseinstellungen zwischen 60 und 80 % ein – das spart Platz, ohne dass man den Unterschied visuell wahrnimmt.
Verlustfreie Kompression (Lossless):
Nutze sie für Logos und Icons, wenn jede Kante scharf bleiben muss.

Empfohlene Tools & Plugins

Desktop-Anwendungen: Photoshop, Affinity Photo, Figma, Adobe XD
Online-Tools: TinyPNG, Squoosh
WordPress-Plugins: Smush, ShortPixel, Imagify

5. Farbprofil und Metadaten

sRGB: Stelle vor dem Export sicher, dass Ihr Bild im sRGB-Farbraum ist – das gewährleistet größtmögliche Kompatibilität im Browser.
Metadaten entfernen: Entferne EXIF- und GPS-Daten, um die Dateigröße weiter zu reduzieren und Datenschutz zu wahren.

6. Alt-Texte und Beschriftungen

Datei-Name: Vermeide nicht aussagekräftige Namen. Anstatt “Bild-01.jpg” lieber “Webdesign-Agentur-Team.jpg”
Alternativtext (Alt-Text): Beschreibe kurz und präzise den Bildinhalt.
Beispiel: Statt „IMG_2025-3“ lieber „Roter Klassiker-Sportwagen auf Landstraße“.
Titel und Beschreibung: Ergänze bei Bedarf eine Bildbeschreibung im Titel- und Beschreibungsfeld für Nutzer, die mehr Kontext wünschen.
Keyword-Integration: Binde wichtige Begriffe ein, ohne den Alt-Text zu überladen.

7. Weitere nützliche Tipps

Bildnamen: Verwende nur Buchstaben, Zahlen und Bindestriche (z. B. „Sommer-Blumenwiese.jpg“).
Automatisierte Workflows: Nutze Tools wie Adobe Bridge oder Skripte, um Stapelverarbeitungen (Größe, Farbraum, Metadaten) automatisch durchzuführen.
Regelmäßige Überprüfung: Führe in festgelegten Abständen eine Bildbestandsprüfung durch, um veraltete oder doppelte Dateien zu entfernen.
SEO-Optimierung: Achte darauf, dass jede Seite nur die Bilder lädt, die tatsächlich benötigt werden, und gebe Bildunterschriften nur dort an, wo sie echten Mehrwert bieten.

Du kämpfst mit unzähligen WordPress-Seiten und bist genervt von jedem einzelnen Update?

Du wirst wahnsinnig, wenn du Plugins und Custom-Themes auf jeder Site neu aufsetzen musst?

Glaub uns: We feel you.

Mehrere WordPress-Projekte gleichzeitig zu managen, kann frustrierend werden. Darum wollen wir dir heute eine geniale WP-Funktion vorstellen, die genau dafür gemacht ist, dein nerviges Seiten-Chaos zu zähmen: WordPress Multisite.

Wie’s funktioniert, für wen es sich lohnt und wie du’s einrichtest? Das und mehr erfährst du jetzt!

Was ist WordPress Multisite?

Stell dir vor, du hast ein neues Produkt am Start und willst dafür eine eigene Website aufbauen – mit Branding, Themes, Plugins und allem Pipapo. Normalerweise müsstest du jetzt wieder bei null anfangen, ein eigenes WP aufsetzen, alle Plugins installieren und Themes anpassen. Bei jedem kleinen Update würdest du an zwei Stellen rumfrickeln. Puh!

Multisite ist hier der wahre Superheld. Einmal installiert, kümmerst du dich nur noch um eine WordPress-Installation, hast dafür aber beliebig viele Websites in einem Netzwerk. Gemeinsame Themes, gemeinsame Plugins, gemeinsames Dashboard. Genial, oder?

Kommt drauf an.

Wie funktioniert WP Multisite?

Das Hauptfeature: Alle Websites in einem Netzwerk nutzen denselben Pool an Themes und Plugins. Ob du jede Site damit anders aussehen lässt oder doch ein Corporate-Design durchziehst, entscheidest du. Die Daten einzelner Sites können komplett getrennt oder (teilweise) gemeinsam genutzt werden.

Jede Website hat zwar ihr eigenes Backend, das nur der jeweilige Admin sieht. Aber ein ganz besonderer Admin, der sogenannte Superadmin, hat Zugriff auf das große Ganze und kann alles steuern – von Benutzerrollen bis Plugin-Installationen.

Sogar neue Sites legt er mit ein paar Klicks an.

1. Gemeinsame Entwicklung

Du teilst dir einen Kern aus Code, Themes und Plugins. Das heißt weniger Installations-Orgie, wenn du eine neue Seite an den Start bringst. Vor allem, wenn du ein Custom Parent-Theme bauen lässt, das du für alle Sites nutzen willst, bist du auf der Überholspur.

2. Neue Administratoren-Rollen

Im Multisite-Weltall gibt es Sternenstaub für die Rollen und Rechte:

Der Superadmin thront oben in der Hierarchie und darf Plugins/Themes installieren oder löschen.
Die Site-Admins (untergeordnete Admins) kümmern sich um ihre eigenen Websites und dürfen nur, was du ihnen erlaubst.

Superpraktisch: Für mehrere Sites brauchst du nicht mal mehrere Accounts. Du kannst dich einfach auf verschiedenen Websites im Netzwerk umsehen und Änderungen vornehmen.

3. Gemeinsame Domainnamen

Neue Websites kannst du als Subdomain (sub.domain.at) oder Unterverzeichnis (domain.at/sub) anlegen.

Auch Domain-Mapping steht dir zur Verfügung, falls jede Website eine eigenständige URL bekommen soll.

Google bewertet Subdomains als einzelne Websites, während Unterverzeichnisse als Seiten der Hauptdomain durchgehen.

SEO-Strategie gefällig? Entscheide nach Belieben!

Sie suchen professionelle Unterstützung für den Website-Relaunch?

Dann sind wir die richtige Agentur an Ihrer Seite.

Vorteile eines Multisite-Netzwerks

Globale Installation von Plugins und Themes – einmal einrichten, für alle freischalten.
Weniger Update-Stress und zentrale Backups – ein Klick, alle Websites sind up to date.
Effiziente Entwicklung neuer Subsites – perfekt für Markenfamilien oder Tochterunternehmen mit ähnlichem Setup.
Weniger Code, weniger Serverleistung pro Website, daher nachhaltiger und oft günstiger beim Hosting.
Mehr Flexibilität bei den User-Rollen und Rechten – Site-Admins dürfen nur das, was du willst.

Nachteile von Multisite

Wo Licht ist, ist auch Schatten – so ist das leider im WordPress-Universum:

Backups für einzelne Websites sind tricky, weil alles in einer Datenbank steckt.
Sicherheitslücken treffen gleich alle Websites im Verbund (Autsch!).
Große Netzwerke brauchen ordentliche Serverleistung, Shared Hosting kann da schnell in die Knie gehen.
Manche Plugins sind nicht multisite-freundlich.
Site-Admins ohne FTP-Zugang können Code nicht selbst anpassen.

Kurz: Sei bei Plugins wählerisch. Achte besonders auf Sicherheit, denn wenn einer im Netzwerk schlampt, kann’s wehtun. Ein starkes Hosting hilft, Performance und Stabilität aufrechtzuerhalten.

Wir haben das Multisite Feature bereits erfolgreich im Einsatz.

Beim internationalen Online-Shop von Dr. Spiller machte es Sinn, Multisite einzusetzen.

Für wen lohnt sich Multisite?

Pro Multisite: Viele Websites mit ähnlichem Aufbau

Wenn deine Seiten sich in Optik, Funktionen und eingesetzten Plugins stark ähneln, wirst du Multisite lieben. Denke an:

Parent-Theme für ein einheitliches Branding
Wiederkehrende Plugins für SEO, Security und Co.
Mehrere Corporate Sites deiner Tochterfirmen oder internationale Varianten (Sprachen, Marken, Länder)
Intranet-Lösung – die Abteilungen sind nur einen Klick entfernt

Kontra Multisite: Große Netzwerke mit völlig unterschiedlichen Sites

Führt jede deiner Websites ein komplett anderes Leben (andere Plugins, Designs, Features)? Dann bringt dir eine gemeinsame WP-Installation nichts. Deine Pluginliste bläht sich nur unnötig auf und die Verwaltung wird chaotischer, statt einfacher.

Schau dir in dem Fall lieber Tools wie Jetpack oder ManageWP an. Die bieten ebenfalls gemeinsame Dashboards, Backups und Updates – nur eben ohne die Vor- und Nachteile einer echten Multisite.

Du interessierst dich für eine Multisite?

Dann hast du dich gerade frisch in unsere Spezial-Expertise verliebt! Wir sind genau die richtige WordPress-Agentur, um dich an die Hand zu nehmen.

Automatisierte Lieferantenbestellungen ohne Schnittstelle?

Webbasierte Schnittstellen bilden die Grundlage für reibungslose Kommunikation moderner Systeme.

Beispiel: Die Anbindung von Online-Shops an Lieferantensysteme zur direkten Auftragsabwicklung.

Doch was, wenn ein Lieferantensystem keine vorgesehene Schnittstelle bietet?

Genau vor dieser Herausforderung standen wir bei unserem Online-Shop Holzplatte-online.com. Unser Lieferant, dessen Bestellsystem auf einer älteren PHP-Webanwendung lief, hatte keinen eigenen Webservice.

Das Problem? Bestellungen aus dem Shop mussten manuell im System des Lieferanten eingegeben werden – ein zeitraubender und fehleranfälliger Prozess.

Für uns als Digitalagentur war klar: Hier musste eine Lösung her, die Automatisierung ermöglicht. Da eine neue Schnittstelle des Lieferanten in weiter Ferne lag, mussten wir uns selbst um die Lösung kümmern.

Gesagt, getan.

Das Problem im Detail

Der Lieferant verfügt über ein eigenes Bestellsystem, das über eine klassische Weboberfläche erreichbar ist. Es gibt keine SOAP- oder REST-Schnittstelle (API), um Bestellungen direkt aus dem Shop heraus zu übertragen. Jede Bestellung aus dem Online-Shop muss vom Mitarbeiter manuell in das Lieferantensystem eingegeben werden – ein Prozess, der nicht nur unnötig Ressourcen bindet, sondern auch zu Verzögerungen und möglichen Fehlern führt.

Unser Ansatz: Automatisierung ohne API

Statt auf eine API zu warten, entschieden wir uns, das Problem auf einer anderen Ebene zu lösen: Mithilfe eines .NET HTTP-Clients, der direkt mit der bestehenden Weboberfläche des Lieferantensystems kommuniziert.

Wie haben wir das umgesetzt?

Analyse der Lieferanten-Weboberfläche:
Im ersten Schritt haben wir uns das alte Webinterface des Lieferanten genau angesehen. Dabei ging es vor allem darum, die Struktur und Funktionsweise der Bestellprozesse zu verstehen.
Simulation der Benutzerinteraktionen:
Mithilfe eines .NET HTTP-Clients simulierten wir die Eingaben und Aktionen, die ein Benutzer manuell durchführen würde – vom Login bis zum Absenden der Bestellung.
Automatisierung der Prozesse:
- Wir haben die HTTP-Requests analysiert und nachgestellt. Dabei haben wir auch Parameter wie Session-IDs oder User Agent Strings berücksichtigt.
- Alle nötigen Daten einer Bestellung werden aus unserem Shop automatisch in die entsprechende Formularstruktur des Lieferantensystems übertragen um anschließend den Auftrag auszulösen.
Testphase:
In einer umfassenden Testphase haben wir sichergestellt, dass die automatisierten Bestellungen fehlerfrei und schnell durchlaufen.

Das Ergebnis und die Wirkung

Zeitersparnis: Der Aufwand für die manuelle Eingabe von Bestellungen entfällt.
Fehlerreduktion: Tippfehler oder falsche Angaben gehören der Vergangenheit an.
Kosteneffizienz: Die Mitarbeitenden können sich auf wertschöpfende Aufgaben konzentrieren, anstatt Zeit mit redundanten Eingaben zu verbringen.
Schnelligkeit: Bestellungen werden jetzt in Echtzeit an den Lieferanten übermittelt.

Für unseren Online-Shop Holzplatte-online.com bedeutet das einen großen Schritt in Richtung Effizienzsteigerung und Automatisierung. Gleichzeitig zeigt dieses Projekt, wie wir bei SuS.digital Lösungen finden, auch wenn die technischen Rahmenbedingungen auf den ersten Blick schwierig erscheinen.

Fazit

Das Ergebnis hat unsere Erwartungen nicht nur erfüllt, sondern übertroffen: Der Bestellprozess läuft nun reibungslos, und wir haben dadurch Holzplatte Online einen Wettbewerbsvorteil verschafft.

Docker hat zweifellos die Art und Weise revolutioniert, wie wir Anwendungen entwickeln, bereitstellen und ausführen. Allerdings kommt mit den vielen Vorteilen von Docker auch eine potenzielle Herausforderung: der teilweise hohe Festplattenspeicherverbrauch. Docker-Images und -Container können im Laufe der Zeit beträchtlichen Speicherplatz beanspruchen, insbesondere wenn alte Images nicht ordnungsgemäß freigegeben werden. In unserem Fall ging der Speicher auf unserem Continous Integration System kontinuierlich zur neige.

In diesem Blogbeitrag möchte ich zeigen, wie wir mit einigen nützlichen Linux-Commands dagegen vorgegangen sind.

Überblick verschaffen

				
					df -h -t ext4

Der Befehl df steht für „disk free“ und wird verwendet, um Informationen über die Festplattennutzung anzuzeigen. Mit der Option -h wird die Ausgabe in sinnvollen Größeneinheiten angezeigt, und mit -t ext4 wird die Anzeige auf das ext4-Dateisystem eingeschränkt um die zahlreichen Docker Filesysteme auszublenden. Das hilft, einen Überblick über den verbleibenden Speicherplatz auf dem Dateisystem zu erhalten, auf dem Docker-Images und -Container gespeichert sind.

Detailanalyse mit Verzeichnisbaum

				
					ncdu /

Der Befehl ncdu steht für „NCurses Disk Usage“ und ist ein hilfreiches Tool, um den Speicherverbrauch auf einem System zu analysieren. Durch die Ausführung von ncdu / erhält man eine interaktive Übersicht über den belegten Speicherplatz auf der Festplatte. Dies ermöglicht es, Verzeichnisse und Dateien zu identifizieren, die besonders viel Platz verbrauchen, und herauszufinden, ob Docker-Images und -Container zu den Platzfressern gehören.

Ungenutzte Docker Images löschen

				
					docker image prune -a

Mit diesem Befehl können nicht mehr verwendete Docker-Images bereinigt werden. Das Flag -a bedeutet „alle“ und zeigt an, dass sowohl nicht getaggte als auch ungenutzte getaggte Images entfernt werden sollen. Dadurch kann Speicherplatz freigeben werden, indem veraltete und nicht mehr benötigte Images gelöscht werden.

Alte Docker Build Artefakte entfernen

				
					docker builder prune

Der Befehl docker builder prune hilft dabei, nicht mehr verwendete Build-Elemente zu entfernen. Während des Build-Prozesses erstellt Docker temporäre Images und Schichten, die nach Abschluss des Builds oft nicht mehr benötigt werden. Durch das Aufrufen dieses Befehls können diese temporären Ressourcen gelöscht und somit Speicherplatz gespart werden.

Fazit

Insgesamt ist es wichtig, den Festplattenspeicherverbrauch von Docker im Auge zu behalten, um Engpässe und unerwartete Platzmangel-Probleme zu vermeiden. Durch die regelmäßige Verwendung der genannten Linux-Befehle kann der Speicherplatz effizient verwaltet und sichergestellt werden, dass das Docker-Ökosystem reibungslos läuft.

Der Pagebuilder Elementor für WordPress macht es Online-Marketern leicht, Inhalte dank WYSIWYG (what you see is what you get) Editor ohne Programmierkenntnisse zu erstellen. Je nach Kundenanforderungen setzen wir diesen Pagebuilder ein, um ansprechende Seiten effizient umzusetzen.

YOAST Primärkategorie im Elementor Blogloop nutzen

Bei einem vorangegangen Projekt gab es vom Kunden den Wunsch, beim bestehenden „Beiträge“-Element von Elementor nicht einfach alle hinterlegten Kategorien aufzulisten, sondern nur die Hauptkategorie als kleinen Tag anzuzeigen. Elementor bietet zwar die Darstellung der erstbesten Kategorie an, nicht aber die Darstellung eines mit dem YOAST-Plugin hinterlegten Primärkategorie.

Elementor Element Skin anpassen

Aus unserer Sicht gibt es drei Lösungswege. Eine davon ist die Umsetzung eines eigenen Blogloop Elements. Eine Andere die Erstellung eines eigenen Skins für die bestehende Elementor „Beiträge“ Komponente. Da wir das Rad nicht neu erfinden und das bestehende Design vom Elementor Pagebuilder wiederverwenden wollten, haben wir uns für die dritte etwas weniger gut dokumentierte Variante entschieden: Die Anpassung eines bestehenden Elementor Element Skins.

Mit unserer Lösung können wir nun die primäre Kategorie von YOAST auch im Elementor Pagebuilder Blogloop auslesen.

Im Code werden die einzelnen Schritte beschrieben.

				
					<?php
/**
 * Originalen Skin für das Posts-Widget durch Skin ersetzen, der den Primary Tag des YOAST Seo Plugins verwendet
 */
add_action( 'elementor/widget/posts/skins_init', function( $widget ) {
   
    if (!class_exists('\\WPSEO_Primary_Term')) {
        return;
    }
 
    //Originalen Skin ableiten um die render_badge Methode zu überschreiben
    class CardSkinWithPrimaryTerm extends \ElementorPro\Modules\Posts\Skins\Skin_Cards {
        protected function render_badge() {
            //Die Taxonomie des Badges auslesen
            //das heißt ob es sich um eine Kategorie, Schlagwörter etc. handelt
            $taxonomy = $this->get_instance_value( 'badge_taxonomy' );
            if ( empty( $taxonomy ) || ! taxonomy_exists( $taxonomy ) ) {
                return parent::render_badge();
            }
 
            //Der vom Benutzer hinterlegte primäre Term von YOAST auslesen. Bspw. die primäre Kategorie
            $primary_term = new \WPSEO_Primary_Term( $taxonomy, get_the_ID() );
            if ( ! $primary_term || ! $primary_term->get_primary_term() ) {
                return parent::render_badge();
            }
 
            //Beim oberen Objekt handelt es sich um eine Klasse von YOAST, von der wir die
            //zugehörige Term ID erhalten und das volle WordPress-Term Objekt laden:
            $primary_term = get_term( $primary_term->get_primary_term(), $taxonomy );
 
            //Nun kann der Name des Terms ausgegeben werden
            ?>
            <div class="elementor-post__badge"><?php echo esc_html($primary_term->name); ?></div>
            <?php
        }
    }
 
    //Damit Elementor beim Skin "Card" unsere Version verwendet, muss der Originale Skin zunächst deregistriert werden
    $original = $widget->get_skin( 'cards' );   
    remove_action( 'elementor/element/posts/section_layout/before_section_end',
                    [ $original, 'register_controls' ] );
    remove_action( 'elementor/element/posts/section_query/after_section_end',
                    [ $original, 'register_style_sections' ] );
    remove_action( 'elementor/element/posts/cards_section_design_image/before_section_end',
                    [ $original, 'register_additional_design_image_controls' ] );
    $widget->remove_skin( 'cards' );
 
    //Erst nachdem der vorige Skin vollständig deregistriert wurde,
    //kann unsere abgeleitete Version registriert werden.
    $widget->add_skin( new CardSkinWithPrimaryTerm( $widget ) );
} );

Man kennt es von Rechnungen die man erhält: Statt dem manuellen Abtippen vom IBAN und Zahlungsbetrag kann man einen QR-Code auf der Rechnung mit der Banking-App scannen und so die Überweisungsdaten der Rechnung direkt übernehmen. Aber wie bekommt man diese Funktion auf seine eigenen ausgesendeten Rechnungen?

QR-Code für Rechnungen in individueller Softwarelösung integrieren

Der in diesen QR-Codes verwendete Code entspricht den von der European Payments Clouncil (EPC) herausgegebenen QR Code Leitlinien zur Erfassung der Überweisungsdaten einer SEPA Geldüberweisung (Quick Response Code – Guidelines to Enable the Data Capture for the Initiation of a SEPA Credit Transfer) die bereits 2012 veröffentlicht wurden.

Im Wesentlichen werden die Überweisungsdaten wie IBAN, BIC, Empfängername, Währung Überweisungsbetrag und Verwendungszweck gemeinsam mit wenigen Steuercodes als Zeichenfolge mit Newlines kombiniert und diese als
QR-Code ausgegeben.

Umsetzung in einer .NET C# App

Unsere interne Zeiterfassungs- und Faktura Webanwendung ProjectTime ist mit .NET 6.0 mit der Programmiersprache C# umgesetzt. Die Generierung des QR-Codes kann folgendermaßen aussehen:

				
					decimal amount = 42.42M;
string reference = "Testzweck";
 
StringBuilder builder = new StringBuilder();
 
//  Service Tag
builder.Append("BCD\n");
 
//  EPC Code Version
builder.Append("002\n");
 
//  Character Set
builder.Append("2\n"); // ISO 8859-1 - Latin1
 
// "Sepa Credit Transfer"
builder.Append("SCT\n");
 
// BIC
builder.Append("GIBAATWWXXX\n");
 
// Name
builder.Append("Empfangskonto\n");
 
// IBAN
builder.Append("AT023400000002613800\n");
 
// Betrag
builder.Append(String.Format(new CultureInfo("en-EN"), "EUR{0:0.00}\n", amount));
 
//Zusatz
builder.Append("\n");
 
//Creditor Reference
builder.Append("\n");
 
//Verwendungszweck
builder.Append(reference + "\n");
 
//Hinweis an Nutzer
builder.Append("\n");
 
string result = builder.ToString();

Der in diesem Beispiel im QR Code eingebettete Code würde so aussehen:

				
					BCD
002
2
SCT
GIBAATWWXXX
Empfangskonto
AT023400000002613800
EUR42.42


Testzweck

Mit einer der vielen QR Bilbiotheken für .NET generieren wir daraus vektorbasierte QR Codes, die wir in unseren PDF-Rechnungen einbetten.

Vorteile des QR-Codes auf Rechnungen

Was sind die Vorteile? Durch die Vereinfachung der Bezahlung überweisen Kunden schneller. Außerdem werden Tippfehler bei Beträgen vermieden und der Verwendungszweck für die automatische Zuordnung beim Empfänger vorgegeben werden kann.

Was tun, wenn einer der Hauptrechner pünktlich zum Start des Homeoffice aufgrund des Covid19-Lockdown mit Displayfehler die Arbeit verweigert? Im Fall unseres 2011er iMac heizt man am besten den Ofen auf Ober- und Unterhitze mit 200°C vor.

Genau das ist bei uns im April eingetreten. Der in die Jahre gekommene Hauptrechner ließ sich nicht mehr starten, das Display zeigte beim Einschalten nur eine weiße Fläche mit vertikalen grünen Streifen – nichts geht mehr.

Grafikkarte defekt

Nach kurzer Recherche ist schnell klar, dass der Übeltäter die Grafikkarte ist und das Problem nicht gerade selten auftritt: Möglicherweise zeigen die Lötstellen der Grafikkarte Ermüdungserscheinungen. Da der Rechner schon einige Jahre auf dem Buckel hat und ohnehin bald erneuert werden soll, stellt sich die Frage nach einem Neu- bzw. gebrauchtkauf der baugleichen Grafikkarte nicht mehr. Stattdessen setzen wir auf Hop oder Drop und wenden einen schon länger bekannten „Schmäh“ an: Wir backen die Grafikkarte für kurze Zeit in einem Backofen um feine Risse der Lötstellen vielleicht doch wieder zu schließen.

Zutaten

Um das Prozedere durchzuführen ist es zunächst wichtig, alle relevanten Utensilien zu besorgen. Dazu gehören beispielsweise

Glasheber zum Anheben des Displayglases
Mittel zum Entfernen der alten Wärmeleitpaste (zb Arctic Silver ArctiClean)
Wattestäbchen
Neue Wärmeleitpaste
Torx T10 Schraubenzieher
Alufolie
Backofen
viel Zeit

Rezept

1. Gehäuse öffnen

Im ersten Schritt muss das Display entfernt werden, um überhaupt zum Mainboard zu gelangen. Das Display wird dabei von einem Displayglas geschützt, welches mit starken Magneten am Gehäuse gehalten wird. Mit den entsprechenden Glashebern hat man es aber schnell entfernt. Mit dem Torx-Schraubenzieher wird dann das Displaypanel vom Gehäuse abgeschraubt.

Das Display kann dann für wenige Zentimeter angehoben werden – die Ansteuerungskabel für das Panel und Hintergrundbeleuchtung sind derart kurz gehalten, dass das Abhängen eine kleine Herausforderung ist.

2. Mainboard ausbauen

Hat man das Display endlich entfernt, so erkennt man im mittleren Bereich das aufgeteilte, umgedreht eingebaute Mainboard. In der Mitte befinden sich die Heatpipes des CPU-Kühlers die nach rechts außen die Wärme zum Lüfter ableiten. Im linken mittleren Bereich, direkt zwischen dem Slot-In-CD-Laufwerk und der Festplatte, befindet sich dagegen der Kühlkörper der die ebenfalls umgedreht eingebaute Grafikkarte verdeckt. Um zu dieser zu gelangen, muss das Mainboard inklusive CPU, Grafikkarte und aller Kühlkörper abgesteckt und ausgebaut werden.

3. Grafikkarte reinigen

Der Kühlkörper der Grafikkarte kann nun abgeschraubt werden um zur Grafikkarte zu gelangen.

Mit den Wattestäbchen und der Lösung wird die alte, ausgetrocknete Wärmeleitpaste feinsäuberlich entfernt.

Der Kern der Grafikkarte ist nicht wie bei CPUs mittlerweile üblich mittels Heatspreader geschützt sondern sitzt blank am Board, weshalb man bei den Kanten des Kerns durchaus vorsichtig vorgehen sollte.

4. Backen

Die ganze Grafikkarte kommt nun mittels Distanzhaltern aus Alufolie auf einem Backblech für 10 Minuten bei ca. 200°C in den vorgeheizten Ofen. Den Geruch sollte man eher nicht genießen.

5. Ziehen lassen und garnieren

Nach 10 Minuten im Rohr lässt man die knusprig aussehende Karte abkühlen, steckt sie anschließend wieder ans Mainboard benetzt sie mit neuer Wärmeleitpaste.

6. Wieder zusammenstellen

Feinsäuberlich baut man die Teile wieder zusammen – zuvor aufgenommene Fotos der einzelnen Anschlüsse und Kabel helfen enorm.

7. Genießen

Abschließend der beste und spannendste Moment der Arbeit: Man schaltet den Rechner ein und wartet darauf, ob nun alles wieder funktioniert, oder ob der Rechner nun gänzlich für die Entsorgung bereit ist.

Wenn endlich eine rein weiße Fläche dargestellt wird dauert es noch eine gefühlte Ewigkeit bis auch tatsächlich das graue Apple-Logo inkl. Ladebalken erscheint und man realisiert, dass es tatsächlich geklappt hat.

Zusammenfassung

Mit dieser kuriosen Reparatur haben wir unseren iMac mittlerweile wieder 9 Monate in Betrieb. Sollte das Problem erneut auftreten, so kann ein zweiter Backvorgang nochmals helfen.