Astra vs. Hello: Welches Theme soll ich mit Elementor Theme Builder verwenden?

Der Artikel über die besten Elementor Themes gehört zu den beliebtesten Beiträgen hier auf dem WPC Blog. Elementor User, die ihn gelesen haben, stellen sich aber schon die nächsten Fragen: Welches WordPress Theme sollte ich verwenden, wenn ich mich entschieden habe, meine komplette Website mit dem Elementor Theme Builder aufzubauen? Ist das Hello Theme von Elementor für diesen Einsatz wirklich die beste Wahl?

Vermutlich weißt du schon, dass man mit dem Theme Builder von Elementor die kompletten Website Elemente inklusive Header und Footer sowie alle Unterseiten inklusive Blog-, Archiv- und 404-Seiten komplett selbst erstellen und stylen kann. Deshalb ist die Frage durchaus berechtigt, warum man eigentlich noch ein WordPress Theme benötigt? Oder besser gesagt: Welche Rolle spielt überhaupt noch das WordPress Theme? Denn am WordPress Konzept, dass man ein Theme aktivieren muss, hat sich auch in Zeiten von Elementor nichts geändert.

Doch welches Theme ist der ideale Begleiter für Elementor und speziell für den Theme Builder von Elementor? Aus meiner Sicht kommen hier nur zwei Themes in Frage: Astra und Hello. Beide Themes haben ihre Vorteile. Die Entscheidung für das Hello Theme liegt nahe, da es aus dem gleichen Hause wie Elementor stammt und daher wahrscheinlich die höchste Kompatibilität gewährleistet. In diesem Beitrag möchte ich dir aber zeigen, dass es auch sinnvoll sein kann, ein qualitativ hochwertiges Theme, wie z. B. das Astra mit dem Elementor Theme Builder zu verwenden.

(*) = Affiliate Partner Links

Astra vs. Hello: Welches Theme sollte ich mit dem Elementor Theme Builder verwenden?

Folgende Fragen solltest du dir stellen, um dich zwischen Astra und Hello zu entscheiden. Astra steht hier stellvertretend für erstklassige Themes. Wie du meinem Elementor Themes Beitrag entnehmen kannst, sind vergleichbare Alternativen: OceanWP, Neve, Kadence, GeneratePress oder das Page Builder Framework. Doch das Astra Theme ist aus meiner Sicht die Nummer 1.

1. Willst du bei allen Seiten von Null anfangen?

In der Regel hat man mit der Erstellung der einzelnen statischen Unterseiten, wie Home, Kontakt, Über Uns, Unsere Leistungen etc. alle Hände voll zu tun. Hast du darüber hinaus noch die Zeit und Lust die Blog Seite, die Beitragseinzelansicht, die Archivseite, die 404- und die Suchergebnisseite komplett neu zu stylen?

Wenn deine Antwort „Ja“ lautet, spricht nichts gegen die Verwendung von Hello. Sollte das Gegenteil der Fall sein, wäre das Astra Theme die bessere Wahl, denn dort sind diese Seiten bereits in einem ansprechenden Design vorhanden. Manchmal möchte man aber auch nur das Design der Beiträge mittels eines Single Post Templates anpassen aber die anderen „Theme Builder“-Seiten, die seltener aufgerufen werden, wie die 404- oder die Suchergebnisseite gar nicht anfassen. Was uns zu der nächsten Frage führt:

2. Wie flexibel willst du sein?

Beim Astra Theme kann man alle Seiten mit Elementor Pro stylen, beim Hello Theme muss man alle Seiten mit Elementor Pro stylen. Der Unterschied ist nur ein kleines Wort und doch bietet dir der Einsatz des Astra Themes hohe Flexibilität. Nicht jeder von uns ist ein begnadeter Designer. Wenn das selbst erstellte Elementor Design nicht besser ist als das Astra Design, kann man jederzeit das Theme die Arbeit machen lassen und nur im Customizer die eigenen Farben und Schriftarten hinzufügen.

Ein weiteres Argument, was häufig für Hello in Kombination mit Elementor Pro spricht, ist das Stylen und das konditionelle Einblenden von Header und Footer. Die Custom Layout Settings von Astra Pro* erlauben es dir, genauso wie die „Conditions“ von Elementor Pro, Display Regeln für Header und Footer zu hinterlegen. So wie beim Elementor Theme Builder lassen sich damit verschiedene Kopf- und Fußzeilen erstellen und abhängig von der aufgerufenen Unterseite anzeigen. Darüber hinaus bietet dir Astra Pro sogar die Möglichkeit, diese Funktion auszuschalten, falls du doch die Elementor Funktion verwenden möchtest. Du bleibst also flexibel.

Diese Flexibilität ist z. B. auch wichtig, wenn du feststellst, dass deine Website bei einem Performance Test nicht gut abschneidet. Hast du diesen Übergang bemerkt 😉

3. Wie wichtig ist dir eine gute Performance deiner Seite?

Auch dieses Thema wird in meinem Beitrag „die besten Elementor Themes“ analysiert. Dort bin ich detailliert auf den Performance Verlust eingegangen, der entsteht, wenn man beim Hello Theme den Header und Footer hinzufügt. Du könntest jetzt natürlich sagen, wenn man beim Astra Theme den Header und Footer mit Elementor Pro stylt, hat man sogar ein noch schlechteres Performance Ergebnis.

Ja, das stimmt. Ich habe jedoch die Wahl: Ich könnte z. B. nur den Header mit Elementor Pro designen und für den Footer das Astra Design übernehmen. Damit würde sich meine Website schneller laden als beim Hello Theme und das ohne erhebliche Einbussen am Design.

4. Willst du globales Styling jetzt schon nutzen?

Update vom 18.01.2023: In der Zwischenzeit hat Elementor die globalen Styles eingeführt. Das ist deshalb kein Argument mehr für Astra oder ein vergleichbares Theme.

Es ist, glaube ich, kein großes Geheimnis mehr, dass Elementor seit einiger Zeit bereits an den globalen Styles arbeitet und diese mit den kommenden Releases ausgerollt werden. Bis es soweit ist, lassen sich mit einem gut-programmierten Theme die globalen Styles bereits jetzt schon umsetzen. Dafür kannst du einfach das Styling unter den Elementor Einstellungen deaktivieren und die Styles über den Customizer steuern.

Mit der Pro Version des Astra Themes* hast du natürlich viel mehr Möglichkeiten, dein individuelles Design umzusetzen und zentral über den Customizer zu steuern.

5. Willst du eine gute SEO-Basis haben?

Gute WordPress Themes fügen automatisch das Schema Markup an die passenden Stellen im Quellcode ein. Damit legst du eine gute SEO-Basis für deine Website. Das Astra Theme fügt beispielsweise folgende strukturierte Daten zu deiner Webseite hinzu:

• Für die Person in der Autor-Bibliographie auf Blog Seiten
• Für die Organisation im Titel und Logo der Seite
• Für die einzelnen Elemente deiner Seite (Header, Footer, Seitenleiste, Menü etc.)
• Für die Brotkrümmel-Navigation (nur mit Astra Pro)

6. Kennst du dich ein wenig mit Code aus?

Eigentlich musst du dich gar nicht mit Code auskennen. Ein wenig Copy & Paste reicht vollkommen aus, um dir bei einem tollen Theme einige Plugins zu ersparen und deine Seite damit schlank zu halten. Du solltest nur keine Abneigung davor haben, die WordPress Dateien zu bearbeiten. Die Rede ist hier von den WordPress Hooks. Das sind vordefinierte Stellen im Theme, an die man den eigenen Quellcode einsetzen kann. Themes wie Astra und OceanWP bieten dir die Möglichkeit, an vielen verschiedenen Stellen innerhalb einer Webseite „einzuhaken“.

Ein Beispiel: Viele WordPress User benutzen für die Integration von Google Analytics ein Plugin. Welche Problematik die Plugin-Methode mit sich bringt, habe ich in meinem Beitrag Google Analytics Integration mit und ohne Plugin erklärt. Die dafür vorgesehenen Plugins verwenden dafür einen Hook, den jedes WordPress Theme besitzt – entweder den „wp_head“ oder den „wp_footer“-Hook. Damit wird der Google Analytics Code entweder in den Header oder in den Footer eingesetzt. Beide Varianten sind nicht komplett falsch, es ist jedoch nicht die Stelle, die von Google empfohlen wird, wie du ebenfalls in dem referenzierten Beitrag nachlesen kannst. Mit einem gut programmierten WordPress Theme, wie dem Astra Theme, kannst du den Google Analytics Tracking Code bequem per Hook und ohne Plugin an die richtige Stelle einsetzen. Dafür kannst du einen der beiden von Astra zur Verfügung gestellten Hooks „astra_header_after“ oder „astra_content_before“ verwenden.

Astra macht es dir sogar noch einfacher und bietet dir das kostenlose Plugin Astra Hooks an, damit du nicht einmal die WordPress Dateien mit einem Text-Editor bearbeiten musst. Wenn du allerdings nur ein oder zwei Hooks verwenden möchtest, würde ich an deiner Stelle auf das zusätzliche Plugin verzichten und den Custom-Code einfach in die functions.php Datei deines Child Themes einfügen.

Hier ist das Beispiel für die Integration von Google Analytics Code mit Hilfe eines Astra Hooks:

// Google Analytics Code zum astra_content_before() Hook hinzufügen
add_action( 'astra_content_before', 'meine_eigene_funktion' );
function meine_eigene_funktion() { ?>
      Hier den Google Analytics Code eingeben!
<?php }

7. Verwendest du Plugins wie LearnDash, LifterLMS oder WooCommerce?

Das tolle an WordPress ist, dass sich jede Website fast beliebig erweitern lässt. So kann aus einem einfachen Blog eine Mitgliederseite oder ein Online Shop entstehen. Möglich machen das die zahlreichen WordPress Plugins. Eine gute Integration gerade von größeren Plugins ist jedoch das A und O, um Konflikte zu vermeiden und um einen nahtlosen Design-Übergang zu gewährleisten. Das Astra Theme bietet eine reibungslose Integration mit dem führenden E-Commerce Plugin WooCommerce sowie mit den LMS-Plugins wie LearnDash und LifterLMS. Damit lässt sich z. B. das Layout und die Funktionen der Checkout Seite von WooCommerce bequem über den Customizer steuern.

Fazit

Ich habe zwar versucht, diesen Artikel so gut es geht objektiv zu schreiben, du hast aber sicherlich schon bemerkt, welche Lösung ich favorisiere, wenn man mit dem Theme Builder arbeitet. Und das nicht nur, weil ich ein Affiliate Partner von Brainstorm Force (Macher von Astra) bin. Für mich ist die Flexibilität der größte Vorteil – ich kann, aber ich muss nicht. Beim Hello Theme bin ich leider gezwungen, alles selbst zu erstellen und zu stylen.

Das schöne an WordPress ist jedoch, dass man sich auch während des Design Prozesses noch umentscheiden kann. Wenn man mit einem Theme unzufrieden ist, kann man mit ein paar Klicks ein anderes aktivieren. Du solltest jedoch bedenken, dass ein Switch von Astra zu Hello wahrscheinlich mehr Nacharbeit erfordert als umgekehrt.