1) Warum wir eine neue Website erstellt haben und nicht einfach das „Design wechseln“ konnten

Als wir zum ersten Mal erkannten, dass eine Änderung notwendig war, schien die Aufgabe einfach: „Ändern Sie den oberen Block und machen Sie den Call-to-Action effektiver.“ Auf den ersten Blick mag dies wie eine schnelle Lösung erscheinen, aber wir erkannten bald, dass diese kleine Aufgabe viel größere zugrunde liegende Probleme mit der Struktur und dem Design der Site offenbarte. Das Problem war nicht nur ein Block; die gesamte Architektur der Site musste überarbeitet werden.

Unsere Website wurde im Laufe der Zeit aufgebaut, wobei verschiedene Seiten mit unterschiedlichen Designs und Layouts hinzugefügt wurden, ohne ein einheitliches Thema oder eine einheitliche Vorlage. Jede Seite hatte ein einzigartiges Design, was zwar kreativ klingen mag, aber zu einem erheblichen Problem führte: Inkonsistenz. Wenn wir nun ein neues Design für nur den obersten Block erstellten und den Rest der Website so ließen, wie er war, hätte dies bedeutet, dass wir diesen Block auf über 700 Seiten und Beiträgen manuell aktualisieren müssten. Schlimmer noch, dieser manuelle Prozess müsste jedes Mal wiederholt werden, wenn wir zukünftige Änderungen vornehmen wollten. Stellen Sie sich die Ineffizienz vor, Hunderte von Seiten durchkämmen zu müssen, um sicherzustellen, dass jede Seite auf dem neuesten Stand ist. Es wurde schnell klar, dass die Weiterarbeit mit der alten Website nicht nachhaltig wäre.

Über die Logistik der Aktualisierung jeder Seite hinaus mussten wir auch das allgemeine Benutzererlebnis berücksichtigen. Benutzer erwarten heute nahtlose, einheitliche Erlebnisse, wenn sie eine Website besuchen. Wenn sie auf einer Seite nach unten scrollen und feststellen, dass das Design inkonsistent ist – wobei jeder Block unterschiedliche Stile verwendet –, entsteht ein unzusammenhängender und unprofessioneller Eindruck. Noch schlimmer: Wenn ein Benutzer von einer Seite zur nächsten wechselt und feststellt, dass Layout und Design völlig unterschiedlich sind, verstärkt dies das Gefühl der Unordnung.

Die Inkonsistenz ging über das Layout hinaus. Viele der Bilder auf der Website waren veraltet, schlecht gestaltet oder sogar unangemessen von neuronalen Netzwerken generiert. Diese Bilder entsprachen nicht den modernen Designstandards und ihr Ersetzen war eine weitere gewaltige Aufgabe. Die Verwendung schlechter Bilder wirkte sich negativ auf die Gesamtqualität der Website aus und hinterließ bei den Benutzern einen negativen Eindruck von dem von uns angebotenen Produkt oder Service.

Es gab keine einfache Möglichkeit, die Seite mit einem Tool wie Elementor umfassend zu aktualisieren. Jede Seite und jeder Block enthielt ihre eigenen Inline-Stile, was bedeutete, dass Änderungen nicht global vorgenommen werden konnten. Wenn wir den Stil der Site aktualisieren wollten, müssten wir jede einzelne Seite durchgehen und jeden Block manuell aktualisieren, was zeitaufwändig und ineffizient wäre. Vor diesem Hintergrund wurde deutlich, dass unsere einzige Lösung darin bestand, eine neue Website von Grund auf neu zu erstellen. Dies würde es uns ermöglichen, alle Inhalte unter Beibehaltung derselben URLs, jedoch mit einem neuen, konsistenten und leicht aktualisierbaren Design zu übertragen.

2) Warum wir uns entschieden haben, es nicht zu verwenden Elementor

Elementor ist einer der beliebtesten Seitenersteller für WordPress. Oberflächlich betrachtet scheint es ein großartiges Tool zu sein, das eine schnelle und einfache Seitenerstellung ermöglicht. Nachdem wir jedoch intensiv damit gearbeitet hatten, stießen wir auf mehrere Einschränkungen, die uns dazu veranlassten, von Elementor abzuweichen und uns stattdessen für eine maßgeschneiderte Website zu entscheiden.

Elementor’s Einschränkungen und Herausforderungen:

1. Fehler und Störungen: Obwohl Elementor viele nützliche Funktionen bietet, ist es nicht ohne technische Probleme. Wenn wir beispielsweise eine Seite kopierten und versuchten, sie zu bearbeiten, sah die neue Seite oft anders aus als das Original, noch bevor wir Änderungen vornahmen. Es gab häufig Fehler bei der Anzeige von Elementen, beispielsweise funktionierte die Eigenschaft “maximale Bildbreite” nicht richtig. Diese Störungen machten es schwierig, ein einheitliches Styling auf allen Seiten sicherzustellen.
2. Zu viel kreative Freiheit, was zu Inkonsistenz führt: Eines der wichtigsten Verkaufsargumente von Elementor’ ist die Möglichkeit, alles individuell anzupassen. Diese Flexibilität kann jedoch ein zweischneidiges Schwert sein, insbesondere wenn mehrere Redakteure an der Website arbeiten. Für Laien ist es leicht, unbeabsichtigt Seiten mit inkonsistentem Design zu erstellen. Wir haben beispielsweise Fälle gesehen, in denen Redakteure rosa Text auf rosa Schaltflächen verwendeten oder fliegende orangefarbene Dreiecke im Hintergrund hinzufügten, was zu einem überladenen und verwirrenden Design führte. Ohne ein strenges Designsystem war es unmöglich, eine einheitliche visuelle Identität aufrechtzuerhalten.
3. Eingeschränkte Anpassung für erweiterte Funktionalität: Während Elementor sich durch die grundlegende Seitenerstellung mit Text und Bildern auszeichnet, wird es schwieriger, wenn Sie benutzerdefinierte Funktionen hinzufügen müssen. Wir waren oft auf die eingebauten Blöcke beschränkt, die sich nur schwer an komplexere Funktionen anpassen ließen. Als unsere Bedürfnisse über die grundlegenden Layouts hinaus wuchsen, wurden die Einschränkungen von Elementor’ immer offensichtlicher.
4. Aufgeblähter Code und Leistungsprobleme: Elementor’s Methode zum Erstellen von Seiten führt zu einer übermäßigen Verschachtelung von Elementen. Beispielsweise generiert Elementor automatisch mehrere
   Behälter innerhalb anderer

   Elemente, jedes mit seinem eigenen Stilsatz. Dies führt zu einer aufgeblähten Struktur, die sich negativ auf die Ladegeschwindigkeit, die Seitenleistung und letztendlich auf das SEO-Ranking der Website auswirkt. Als wir Geschwindigkeitstests durchführten, waren die Ergebnisse durchweg schlecht und die Hauptursache dafür war der von Elementor generierte umfangreiche Code.
5. Keine A/B-Testfunktionen: In der heutigen digitalen Landschaft sind A/B-Tests für die Optimierung des Benutzererlebnisses unerlässlich. Allerdings bietet Elementor nicht die Möglichkeit, verschiedenen Benutzern unterschiedliche Versionen der Site anzuzeigen. Jeder sieht dieselbe Site, was unsere Möglichkeiten zum Testen und Optimieren von Designelementen wie Farben, Schaltflächenformen und Hintergrundbildern einschränkt. Ohne diese Funktionalität könnten wir die Seite nicht anhand des realen Nutzerverhaltens optimieren.
6. Datenbank-Bloat: Einer der vielleicht größten Nachteile von Elementor ist die Art und Weise, wie mit Stilen und Inhalten umgegangen wird. Elementor speichert Stile, verschachtelte Strukturen und andere unnötige Tags, die mit dem Inhalt in der Datenbank vermischt sind. Dies führt zu einer aufgeblähten Datenbank, die auch dann nicht bereinigt wird, wenn Elementor deaktiviert oder deinstalliert ist. Daher löst der Wechsel zu einem neuen Theme oder Framework das Problem nicht – diese Stile bleiben in den Seiten eingebettet und verursachen weiterhin Probleme.

Angesichts all dieser Herausforderungen wurde klar, dass wir eine robustere Lösung brauchten. Wir haben uns entschieden, eine neue, unabhängige Website ohne Elementor zu erstellen und uns für einen nachhaltigeren und flexibleren Ansatz zu entscheiden.

3) So erstellen Sie eine Seite auf der neuen Site

Durch den Aufbau der neuen Site von Grund auf konnten wir einen sauberen, rationalisierten Prozess zum Erstellen von Seiten etablieren. Im neuen System ist das Erstellen einer Seite unkompliziert:

1. Anmelden zum Admin-Panel WordPress und klicken Sie auf Seiten -> Neue Seite hinzufügen.
2. Sie sehen den Standard-WordPress-Editor, in dem Sie Text schreiben oder einfügen, Links hinzufügen und Bilder hochladen können.

Dieser Prozess ist einfach, aber flexibel. Anstatt sich auf das komplizierte Blocksystem von Elementor’ zu verlassen, ist der Inhaltseditor in WordPress viel übersichtlicher und ermöglicht schnelle Updates und einfache Anpassungen. Unterhalb des Editors befinden sich Einstellungen für Erweiterte benutzerdefinierte Felder (ACF), die bereits so konfiguriert sind, dass die Konsistenz auf der gesamten Website gewahrt bleibt.

Mit ACF können wir flexible Inhaltsabschnitte erstellen, mit Blöcken wie „Inhalt 1…Inhalt 15“ , in denen Sie ganz einfach Titel, Text, Bild und Schaltflächenbeschriftungen für jeden Abschnitt der Seite festlegen können. Diese Blöcke wechseln automatisch die Positionierung von Bildern und Text ab und stellen so sicher, dass das Layout optisch ansprechend bleibt, ohne dass manuelle Anpassungen erforderlich sind.

Für Bilder haben wir ein Farbabstimmungssystem implementiert, das automatisch einen Farbverlauf in den Hauptfarben der Site anwendet. Dadurch wird sichergestellt, dass alle Bilder mit der Gesamtästhetik übereinstimmen. Für Logos oder Screenshots, bei denen die Farben unverändert bleiben müssen, gibt es eine Option „Farben beibehalten“, die den Farbverlauf überschreibt.

Dieses System vereinfacht die Inhaltsverwaltung und sorgt gleichzeitig für eine einheitliche Gestaltung aller Seiten.

4) So erstellen Sie einen neuen Beitrag

Das Erstellen von Beiträgen auf der neuen Site folgt demselben optimierten Prozess wie das Erstellen von Seiten, mit einigen wesentlichen Unterschieden:

• Beiträge haben URLs, die ../blog/.. enthalten, was sie von Seiten unterscheidet.
• In der rechten Seitenleiste zeigt ein Block automatisch die drei neuesten Artikel an und trägt so dazu bei, dass das Blog dynamisch und ansprechend bleibt.

Die Vorlage für alle Beiträge befindet sich in der Datei template-parts/content/content-single.php , die die Struktur und das Layout jedes Blogbeitrags verwaltet. Diese einheitliche Vorlage ermöglicht einfache Aktualisierungen und stellt sicher, dass alle Beiträge denselben Designrichtlinien entsprechen.

5) Erweiterte benutzerdefinierte Felder (ACF)

ACF war ein wesentlicher Bestandteil der Entwicklung unserer neuen Website. Es ermöglicht uns, benutzerdefinierte Felder zu erstellen, die einfach über das WordPress-Administrationsbereich verwaltet werden können. Felder wie content_1 werden im PHP-Code referenziert, sodass wir für jede Seite und jeden Beitrag dynamisch den richtigen Inhalt abrufen können.

Diese Flexibilität ist von entscheidender Bedeutung, um sicherzustellen, dass wir die Site effizient verwalten und aktualisieren können und gleichzeitig bei Bedarf noch Raum für individuelle Anpassungen bleibt.

6) A/B-Tests

Eine der wichtigsten Verbesserungen, die wir mit der neuen Website vorgenommen haben, war die Implementierung von A/B-Tests. Mit A/B-Tests können wir zwei Versionen der Website vergleichen, um zu sehen, welche bei den Benutzern besser ankommt. Dazu können Tests verschiedener Farben, Schaltflächenformen, Hintergründe oder sogar Layouts gehören.

Wir haben diese Funktionalität mithilfe von GET-Parametern in der URL implementiert. So können beispielsweise zwei identische Werbekampagnen erstellt werden, jedoch mit unterschiedlichen URLs:

• https://www.conveythis.com/?param=1

• https://www.conveythis.com/?param=2

Wenn Benutzer auf diese Links klicken, wird der Parameter in einem Cookie gespeichert. Abhängig vom Wert des Parameters zeigt die Site verschiedene Versionen der Seite an, beispielsweise unterschiedliche Schaltflächenfarben oder Hintergrundbilder. Auf diese Weise können wir wertvolle Daten zu Benutzerpräferenzen und -verhalten sammeln.

Alle Ereignisse werden protokolliert in einem .csv Datei sowie in einer MySQL-Datenbank, sodass wir die Daten analysieren und fundierte Entscheidungen zur Verbesserung der Site treffen können.

7) Die Datei functions.php

8) Umgang mit SEO und Site-Geschwindigkeit

Ein Hauptaugenmerk bei der Überarbeitung der Website lag auf der Verbesserung der SEO und der allgemeinen Website-Leistung. Die ursprüngliche Site, die mit Elementor erstellt wurde, hatte Probleme mit langsamen Ladezeiten und suboptimalen SEO-Praktiken aufgrund von aufgeblähtem Code und nicht optimierten Bildern.

SEO verbessern

Um sicherzustellen, dass unsere neue Website SEO-freundlich ist, haben wir von Anfang an mehrere Best Practices implementiert:

• Semantisches HTML : Wir haben das HTML der Site sorgfältig strukturiert und Header-Tags richtig verwendet (
  ,
  , usw.), um sicherzustellen, dass Suchmaschinen die Inhaltshierarchie leicht analysieren und verstehen können. Dies ist besonders wichtig für SEO-Rankings und Zugänglichkeit.
• Meta-Tags und Open Graph-Daten : Wir haben das Yoast SEO- Plugin genutzt, um Meta-Titel, Beschreibungen und Open Graph-Daten für das Teilen in sozialen Netzwerken zu verwalten. Durch die Verwendung von Yoast haben wir sichergestellt, dass jede Seite und jeder Beitrag optimierte Metadaten hatte, was für die Sichtbarkeit in Suchmaschinen und die Klickraten von Social-Media-Plattformen entscheidend ist.
• Schema-Markup : Mithilfe der Datei functions.php haben wir benutzerdefiniertes Schema-Markup für strukturierte Daten hinzugefügt, um die Anzeige unserer Seiten in den Suchergebnissen durch Suchmaschinen zu verbessern. Wir haben beispielsweise Schemata für Artikel, Fallstudien und Produkte eingefügt, damit Suchmaschinen unsere Inhalte besser kategorisieren können.

Funktion add_schema_markup() {
  Echo '
  {
    "@context": "http://schema.org",
    "@type": "Organisation",
    "Name": "ConveyThis",
    "url": https://www.conveythis.com,
"Logo": https://www.conveythis.com/logo.png;
, "gleiche Seiten": [
"https://www.facebook.com/conveythis",
"https://twitter.com/conveythis"
]
}
, ";
}
add_action( 'wp-head', "add/schema _markup" );


Optimierung der Site-Geschwindigkeit

Die Leistung ist nicht nur für das Benutzererlebnis, sondern auch für SEO-Rankings ein entscheidender Faktor. Wir haben mehrere Schritte unternommen, um die Website-Geschwindigkeit zu verbessern:

• Bildoptimierung : Wir haben moderne Bildformate wie WebP verwendet, die bessere Komprimierungsraten bieten als herkömmliche Formate wie PNG und JPEG. Alle Bilder wurden in der passenden Größe basierend auf der Bildschirmauflösung des Benutzers bereitgestellt, wodurch schnelle Ladezeiten auch auf Mobilgeräten gewährleistet sind.
• Lazy Loading : Durch die Implementierung von Lazy Loading für Bilder haben wir sichergestellt, dass zunächst nur die auf dem Bildschirm des Benutzers sichtbaren Bilder geladen werden. Zusätzliche Bilder werden beim Scrollen des Benutzers geladen, wodurch die anfänglichen Seitenladezeiten verkürzt werden.
• Caching und Minifikation: Wir haben WP Rocket zum Caching, Minification und Komprimieren von HTML-, CSS- und JavaScript-Dateien verwendet. WP Rocket half uns, schnellere Ladezeiten zu erreichen, indem es die Gesamtdateigröße reduzierte und statische, zwischengespeicherte Seitenversionen an wiederkehrende Besucher bereitstellte.

9) Datenbankoptimierung und -bereinigung

Auf der alten Website hatte sich aufgrund der Aufblähung von “1”s und der ineffizienten Datenbankstruktur eine erhebliche Menge an 《Junk-》’Daten angesammelt. Um einen reibungslosen Betrieb der neuen Site zu gewährleisten, haben wir eine gründliche Bereinigung und Optimierung der Datenbank durchgeführt.

• Entfernen alter Elementor Daten

Wie bereits erwähnt, waren seine Stile und Einstellungen auch nach der Deaktivierung von Elementor noch in die Datenbank eingebettet. Wir haben benutzerdefinierte Abfragen verwendet, um diese überschüssigen Daten zu löschen und die Datenbank zu bereinigen. Darüber hinaus haben wir alle ungenutzten Mediendateien, Postrevisionen und abgelaufenen Transienten entfernt, die sich im Laufe der Zeit angesammelt hatten.

• Datenbankindizierung

Wir haben die Datenbank außerdem optimiert, indem wir häufig abgefragten Spalten Indizes hinzugefügt haben, um sicherzustellen, dass Datenbankabfragen schneller und effizienter sind. Zum Beispiel das Hinzufügen eines Indexes zu den nachdatieren Spalte beschleunigte Abfragen im Zusammenhang mit aktuellen Beiträgen und verbesserte so die Leistung unserer Blogseiten.

Abschluss

Die Entscheidung, eine neue Website von Grund auf neu zu erstellen, wurde durch die Einschränkungen und Ineffizienzen der alten Website vorangetrieben. Aufgrund von Designinkonsistenzen, aufgeblähten Stilen und Leistungsproblemen, die durch Elementor verursacht wurden, war ein einfacher Wechsel des Designs keine praktikable Option. Durch die Erstellung einer neuen Site mit benutzerdefinierter Entwicklung und erweiterten benutzerdefinierten Feldern haben wir eine effizientere, einheitlichere und professionellere Website erstellt, die das Benutzererlebnis verbessert und gleichzeitig optimierte Updates und A/B-Testfunktionen ermöglicht. Dieser neue Standort bietet eine solide Grundlage für zukünftiges Wachstum und Verbesserungen.