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.

Mit einem Tool wie Elementor gab es keine einfache Möglichkeit, die Site umfassend zu aktualisieren. Jede Seite und jeder Block enthielt seine eigenen Inline-Styles, was bedeutete, dass Änderungen nicht global vorgenommen werden konnten. Wenn wir den Style der Site aktualisieren wollten, hätten wir jede einzelne Seite durchgehen und jeden Block manuell aktualisieren müssen, was zeitaufwändig und ineffizient gewesen wäre. Vor diesem Hintergrund wurde klar, dass unsere einzige Lösung darin bestand, eine neue Website von Grund auf neu zu erstellen. Dadurch könnten wir den gesamten Inhalt übertragen und dabei dieselben URLs beibehalten, aber mit einem neuen, konsistenten und leicht aktualisierbaren Design.

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

Elementor ist einer der beliebtesten Seitenersteller für WordPress. Oberflächlich betrachtet scheint es ein großartiges Tool zu sein, mit dem sich Seiten schnell und einfach erstellen lassen. Nachdem wir jedoch intensiv damit gearbeitet hatten, stießen wir auf mehrere Einschränkungen, die uns dazu veranlassten, von Elementor abzurücken und uns stattdessen für eine individuell erstellte Website zu entscheiden.

Einschränkungen und Herausforderungen von Elementor:

1. Fehler und Störungen : Elementor bietet zwar viele nützliche Funktionen, ist aber 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, sogar bevor wir Änderungen vorgenommen hatten. 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 Design auf allen Seiten sicherzustellen.
2. Zu viel kreative Freiheit führt zu Inkonsistenz : Eines der wichtigsten Verkaufsargumente von Elementor ist die Möglichkeit, alles anzupassen. Diese Flexibilität kann jedoch ein zweischneidiges Schwert sein, insbesondere wenn mehrere Redakteure an der Site arbeiten. Laien können leicht unbeabsichtigt Seiten mit inkonsistentem Design erstellen. Wir haben beispielsweise Fälle gesehen, in denen Redakteure rosa Text auf rosa Schaltflächen verwendeten oder fliegende orange Dreiecke im Hintergrund hinzufügten, was zu einem überladenen und verwirrenden Design führte. Ohne ein striktes Designsystem wurde es unmöglich, eine einheitliche visuelle Identität beizubehalten.
3. Begrenzte Anpassung für erweiterte Funktionen : Elementor eignet sich hervorragend für die Erstellung einfacher Seiten mit Text und Bildern, wird aber anspruchsvoller, wenn Sie benutzerdefinierte Funktionen hinzufügen müssen. Wir waren oft auf die integrierten Blöcke beschränkt, die sich nur schwer für komplexere Funktionen anpassen ließen. Als unsere Anforderungen über grundlegende Layouts hinausgingen, wurden die Einschränkungen von Elementor immer deutlicher.
4. Aufgeblähter Code und Leistungsprobleme : Die Methode von Elementor zum Erstellen von Seiten führt zu einer übermäßigen Verschachtelung von Elementen. Beispielsweise generiert Elementor automatisch mehrere
   Container in anderen

   Elemente, jedes mit seinem eigenen Satz von Stilen. Dies führt zu einer aufgeblähten Struktur, die sich negativ auf die Ladegeschwindigkeit, die Seitenleistung und letztendlich das SEO-Ranking der Website auswirkt. Als wir Geschwindigkeitstests durchführten, waren die Ergebnisse durchweg schlecht, und der schwere Code, der von Elementor generiert wurde, war größtenteils schuld.
5. Keine A/B-Testfunktionen : In der heutigen digitalen Landschaft sind A/B-Tests zur Optimierung des Benutzererlebnisses unerlässlich. Elementor bietet jedoch 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 Funktion könnten wir die Site nicht basierend auf dem tatsächlichen Benutzerverhalten optimieren.
6. Aufgeblähte Datenbank : Einer der größten Nachteile von Elementor ist vielleicht die Art und Weise, wie es mit Stilen und Inhalten umgeht. Elementor speichert Stile, verschachtelte Strukturen und andere unnötige Tags vermischt mit dem Inhalt in der Datenbank. Dies führt zu einer aufgeblähten Datenbank, die nicht bereinigt wird, selbst wenn Elementor deaktiviert oder deinstalliert wird. Daher löst der Wechsel zu einem neuen Design oder Framework das Problem nicht – diese Stile bleiben in den Seiten eingebettet und verursachen weiterhin Probleme.

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

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. Melden Sie sich beim WordPress-Administrationsbereich an 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 auf das komplizierte Blocksystem von Elementor zu setzen, ist der Inhaltseditor in WordPress viel übersichtlicher und ermöglicht schnelle Aktualisierungen und einfache Anpassungen. Unter dem Editor befinden sich Einstellungen für Advanced Custom Fields (ACF), die bereits so konfiguriert sind, dass die Konsistenz auf der gesamten Site gewährleistet 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.csvDatei 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 Website, die mit Elementor erstellt wurde, hatte aufgrund von aufgeblähtem Code und nicht optimierten Bildern Probleme mit langsamen Ladezeiten und suboptimalen SEO-Praktiken.

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",
"sameAs": [
"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.
• Zwischenspeichern und Minimieren : Wir haben WP Rocket zum Zwischenspeichern, Minimieren und Komprimieren von HTML-, CSS- und JavaScript-Dateien verwendet. WP Rocket hat uns geholfen, schnellere Ladezeiten zu erreichen, indem es die Gesamtdateigröße reduziert und wiederkehrenden Besuchern statisch zwischengespeicherte Versionen von Seiten bereitstellt.

9) Datenbankoptimierung und -bereinigung

Aufgrund der aufgeblähten und ineffizienten Datenbankstruktur von Elementor hatte sich auf der alten Website eine erhebliche Menge an „Junk“-Daten angesammelt. Um sicherzustellen, dass die neue Website reibungslos läuft, haben wir eine gründliche Datenbankbereinigung und -optimierung durchgeführt.

• Entfernen alter Elementor-Daten

Wie bereits erwähnt, waren die Stile und Einstellungen von Elementor auch nach der Deaktivierung noch in der 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 unbenutzten Mediendateien, Post-Revisionen 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 dennachdatierenSpalte beschleunigte Abfragen im Zusammenhang mit aktuellen Beiträgen und verbesserte so die Leistung unserer Blogseiten.

Abschluss

Die Entscheidung, eine neue Website von Grund auf zu erstellen, wurde durch die Einschränkungen und Ineffizienzen der alten Website bestimmt. Ein einfacher Designwechsel war aufgrund von Designinkonsistenzen, aufgeblähten Stilen und Leistungsproblemen durch Elementor keine praktikable Option. Durch die Erstellung einer neuen Website 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. Diese neue Website bietet eine solide Grundlage für zukünftiges Wachstum und Verbesserungen.