ChatGPT Praxiskurs - Teaser

Der 5 Stunden
ChatGPT Praxiskurs

Lerne ChatGPT professionell zu nutzen. Der 5 Stunden Videokurs zu zeigt dir an konkreten Beispielen und Anwendungsfällen, wie auch du Zeit und Aufwand sparen kannst. Kurzzeitig mit 33% Rabatt.

Astra Theme Tutorial - Keyvisual

Astra Theme – das ultimative Tutorial

Willkommen zu meinem Tutorial über das beliebte Astra Theme für WordPress! Bevor wir ins Detail gehen, lass mich ganz kurz ein paar Worte zur Einleitung verlieren.

Was ist das WordPress Astra Theme?

Astra ist ein Theme, das dir helfen soll, mit wenig Aufwand eine ansprechende WordPress-Webseite zu erstellen. Ohne dich um komplizierte Designs oder Code zu kümmern. Es ist schnell, leicht und anpassungsfähig. Das bedeutet, dass es für jede Art von Webseite geeignet ist. Egal, ob du eine einfache Blogseite, eine Unternehmens-Webseite oder einen Online-Shop erstellen möchtest – Astra bietet viele Optionen und Funktionen, um deine spezifischen Anforderungen zu erfüllen.

Was ist ein Theme?

Ein WordPress Theme ist eine Vorlage für das Aussehen deiner Webseite und steuert das grundlegende Design wie Farben, Schriftarten, Navigation, Anordnung von Elementen und das Grundgerüst (Layout). Das ermöglicht es dir, die Webseite an deinen Unternehmensauftritt bestmöglich anzupassen und einen hohen Wiedererkennungswert zu schaffen (einheitliches Corporate Design). Es gibt Tausende von kostenlosen und kostenpflichtigen Themes, die du herunterladen und installieren kannst. Mit einem Theme kannst du also deine Webseite anpassen und einzigartig machen.


Klingt gut, oder? In diesem Tutorial zeige ich dir, wie du das Theme für dein WordPress installierst und konfigurierst. Ich gebe dir Tipps aus meiner langjährigen Erfahrung mit und weise dich auf mögliche Fallstricke hin. Ziel ist es, dass du mit dieser Schritt für Schritt Anleitung am Ende eine nutzbare Webseite erstellt hast.

Warum ist das Astra Theme so beliebt?

Über 200.000 Webseiten nutzen Astra für ein professionelles Erscheinungsbild. So auch Dana Osborne Design für Hochzeits-Austattung.

Astra ist seit Monaten bereits ganz vorne in der WordPress Theme Bibliothek, wird immer wieder in der Szene empfohlen und genießt auch bei vielen Bloggern und kleinen Unternehmen einen guten Ruf. Mehr als 200.000 Webseiten nutzen Astra mittlerweile.

  • Eines der Gründe, liegt darin, dass es einfach zu bedienen ist, nur das Nötigste mitbringt (also nicht unnötig aufgebläht ist) und eine saubere Codebasis hat. Das bedeutet, dass deine Webseite am Ende nicht nur schnell lädt, sondern auch eine großartige Benutzererfahrung bietet.
  • Astra bietet für dich als Betreiber eine breite Palette von Optionen und Funktionen, die Gestaltung und Anpassungen deiner Webseite kinderleicht machen – ohne dass du ein Experte in Sachen Design oder Code sein musst.
  • Ein weiterer Grund für die Beliebtheit von Astra ist, dass es ein sehr flexibles Theme ist. Das bedeutet, dass es für jede Art von Website geeignet ist, von einfachen Blogseiten bis hin zu umfangreichen Online-Shops (Stichwort: Wo-Commerce).
  • Darüber hinaus bietet Astra eine Vielzahl von so genannten Starter-Vorlagen, die ihren Namen wirklich alle Ehre machen. Das sind komplett vorgefertigte Webseiten-Layouts für verschiedene Zwecke, auf die du direkt zugreifen und sie mit minimalen Änderungen für deine Bedürfnisse anpassen kannst. Sie erleichtern dir Einstieg erleichtern und sparen über 70% Zeit bei der Ersteinrichtung.

Ich selbst nutze Astra im Rahmen von Pixxelpassion bereits für mehrere Kundenprojekte. Nicht nur ich als Webdesigner profitiere von der sauberen Codebasis und guten Struktur des Themes. Auch meine Kunden finden sich nach kurzer Einweisung schnell im Administrationsbereich zurecht und können später auch fast alle Änderungen an ihrer Webseite pragmatisch selbst erledigen.

Alles in allem ist Astra in meinen Augen ein großartiges Theme für alle, die eine Website erstellen möchten, ohne sich um komplexe Designs oder Codes kümmern zu müssen.

Kostenlose oder pro Version?

Das kostenlose Theme beinhaltet beispielsweise bereits eine große Auswahl an vorgefertigten Vorlagen, mit denen du schnell und einfach starten kannst. Außerdem ist es sehr schnell und optimiert für Suchmaschinen, was für eine gute Performance und eine höhere Reichweite sorgt. Auch die Anpassungsmöglichkeiten sind mit dem kostenlosen Theme schon sehr vielfältig, du kannst beispielsweise Farben, Schriftarten und Layouts anpassen und Widgets hinzufügen.

Wenn du jedoch noch mehr Funktionen und Anpassungsmöglichkeiten möchtest, wird wohl das kostenpflichtige Astra Pro Theme für dich interessant sein. Hier bekommst du unter anderem zusätzliche vorgefertigte eine deutlich größere Auswahl an Vorlagen, sowie erweiterte Anpassungsmöglichkeiten für die Header-, Seiten- und Blog-Layouts.

Außerdem kannst du mit Astra Pro auch benutzerdefinierte Schriftarten und Farben hinzufügen, um dein Unternehmen optimal zu repräsentieren (Corporate Design).

Weitere Vorteile des kostenpflichtigen Themes sind beispielsweise die Möglichkeit, WooCommerce-Produktseiten anzupassen, Popup-Fenster zu erstellen und das Design mobiler Seiten zu optimieren.

Hier habe ich nochmal eine ausführliche Tabelle für dich, die dir einen Überblick über die Unterschiede gibt:

Funktionen
Kostenlos
Astra Pro
Vorgefertigte Templates
Ja
Ja
Anpassungsmöglichkeiten
Ja
Ja, erweitert
Performance-Optimierung
Ja
Ja
Benutzerdefinierte Schriftarten und Farben
Nein
Ja
Zusätzliche vorgefertigte Templates
Nein
Ja
Anpassungsmöglichkeiten für Header-, Seiten- und Blog-Layouts
Nein
Ja, erweitert
WooCommerce-Produktseiten-Anpassung
Nein
Ja
Erstellung von Popup-Fenstern
Nein
Ja
Optimierung des Designs mobiler Seiten
Nein
Ja

Wenn du dich für das kostenlose Astra Theme entscheidest, bekommst du bereits eine Menge toller Funktionen, mit denen du deine Webseite professionell gestalten kannst. Deswegen werde ich mich in diesem Tutorial auch erstmal auf diese Version beziehen. Eine Hochstufung auf das kostenpflichtige Theme ist jedoch jederzeit und auch noch nachträglich möglich.

Schnellstart mit Starter-Vorlagen

Mit den Starter-Templates von Astra kannst du deine WordPress-Website mit wenigen Klicks grundlegend aufbauen.

Gleich zu Beginn möchte ich dir DEN Grund vorstellen, warum ich meinen Kunden oftmals zu Astra rate. Die unglaubliche Anzahl an flexiblen Vorlagen, mit denen du im Handumdrehen und ohne technische Vorkenntnisse eine eigene Webseite erstellen kannst.

  • Starter-Templates
  • Einzelseiten
  • Module

Wir fangen mit den Starter-Templates an, denn diese bestimmen das grundlegenden Aussehen deiner Seite (inklusive Schriftart, Farben, Grundgerüst).

Was sind Starter-Templates?

Starter-Templates sind bereits durchgestaltete Vorlagen für komplett fertige Webseiten. Sie sind mit wenigen Klicks installiert und erleichtern dir den Einstieg, wenn du nicht gänzlich von Null anfangen möchtest. Wähle dein Starter-Template als Ausgangsbasis, ergänze es und passe es beliebig nach deinen Bedürfnissen an.


Um das Starter Template Plugin zu installieren gehst du links auf installieren (1), gibst oben in der Suchleiste “Astra Starter Template” ein (2) und drückst bei dem entsprechenden Plugin auf “installieren (3).

Um Starter-Templates zu nutzen benötigst du ein extra Plugin. Das ist kostenlos in in 10 Sekunden installiert.

  1. Gehe dazu in deinem WordPress-Administrationsbereich in der linken Menüleiste unter Plugins Installieren
  2. Gib in der Suchleiste rechts oben “Astra Starter” ein.
  3. Der erste Suchtreffer müsste dann bei dir “Starter Templates — Elementor, WordPress & Beaver Builder Templates” heißen
  4. Klicke dort auf installieren und anschließend auf aktivieren. Das war’s schon.

Nun kannst du in deinem WordPress-Administrationsbereich wiederum in der linken Menüleiste unter Designs Starter Templates loslegen. Du wirst nach deinem Page Builder gefragt. Hier wählst du “Block Editor” aus (auf Elementor und Beaver Designer komme ich in anderen Artikels später zu sprechen). Und nun steht dir dir große bunte Welt an unzähligen Vorlagen zur Verfügung.

Nimm dir ruhig Zeit und stöbere ein bisschen herum. Suche dir das Webseiten-Layout heraus, welches der Vorstellung deiner zukünftigen Webseite am nahsten kommt. Klar wirst du anfangs überfordert sein von der ganzen Masse an Vorschlägen. Deswegen hier ein paar Tipps von mir.

Über die Filter am oberen Ende kannst du das Angebot schon mal anhand deiner Branche eingrenzen.

Zudem kannst du auch die Suchleiste oben benutzen um gezielt nach Webseiten-Layouts zu suchen. Probier doch mal folgende Begriffe:

  • Agentur: Ideal für Agenturen, die ihre Dienstleistungen präsentieren möchten
  • Restaurant: Perfekt für Restaurants, Cafés oder Bars, die ihr Angebot online präsentieren wollen
  • Hochzeit: Ein romantischer Look für Hochzeits-Websites
  • Fitness: Für Fitnessstudios oder Personal Trainer, die ihr Angebot online darstellen wollen
  • Reisen: Perfekt für Blogger, Reisebüros oder Tourismus-Websites

Wenn du das passende Template gefunden hast, klicke auf darauf, um eine Vorschau in groß zu sehen. Hier kannst du schon erste Anpassungen in Richtung deines spezifischen Unternehmenslayouts machen.

  1. Lade doch bereits dein vorhandenes Logo hoch und prüfe wie es sich in das Seitenlayout einfügt
  2. Wähle ein grobes Farbset und erhalte ein Gefühl dafür, wie sich dadurch Farben von Texten, Überschriften und Buttons ändern.
  3. Wähle eine Schriftart, die deine Webseite zieren soll.
Astra Theme Customization
Wenn du deine Vorlage gewählt hast, kannst du sie gleich danach Schritt für Schritt mit eigenem Logo, eigener Schriftart und einer Farbpalette grob anpassen. rechts siehst du immer eine entsprechende Vorschau der Webseite.

Keine Angst. Alle Entscheidungen sind nicht für die Ewigkeit. Die Farben kannst du später noch viel feingranularer anpassen. Und auch Logo und Schriftart sind jederzeit wieder änderbar.

Nun noch bestätigen und schon hast du ein fertiges Grundgerüst. Keine aufwendiges Designkonzept, keine Programmierung. Glückwunsch!

Viele der Pixxelpassion Kunden können sich nicht gleich entscheiden oder wollen erstmal etwas herum probieren. Kein Problem. Du kannst jederzeit deine Startervorlage wechseln (unter Design → Starter Templates). Einmal getätigte Einstellungen zur Farbe, Schriftart und auch deine Inhalte bleiben dabei erhalten.

Wow, jetzt kannst du deine Webseite schon mal ansehen. Gehe dazu im WordPress-Administrationsbereich links oben auf das Haussymbol → zur Website und schau dir den ersten Wurf einmal an. Kein schlechtes Ergebnis für ein paar Minuten Zeitaufwand, oder?

Klar gehts jetzt an die weitere Anpassung, Bestückung mit deinen spezifischen Texten und Bildern und die Feinheiten.

Grundlegende Theme Einstellungen

Astra Theme - globale Einstellungen
Unter dem Customizer hast du links die Möglichkeiten, die globalen Einstellungen wie Farben, Schriftarten, Kopf- und Fußleiste einzustellen.

Abermals In der linken Menüleiste unter Design → Customizer versteckt sich unser nächster Spielplatz. Und was für einer. Abhängig von deinem gewählten Starter-Template hast du hier mehr oder weniger üppige Einstellungen. Alle drehen sich um die globalen Einstellungen zu deiner Webseite. Also definierst du hier Dinge, die auf jeder deiner Unterseiten gleich angezeigt werden.

Zum Beispiel:

  • Kopfzeile am oberen Ende deiner Webseite (Header)
  • Fusszeile am unteren Ende deiner Webseite (Footer)
  • Einstellungen für das Blog-Archiv (das ist die Übersichtsseite deiner Einzelbeiträge)
  • Einstellungen für einen Einzelbeitrag
  • Einstellungen für einen Seite
  • globale Einstellungen für Menüs
  • globale Einstellungen für Widgets (Module für deine Seitenleiste)
  • globale Einstellungen für deine Schriftarten
  • globale Einstellungen für deine Farben

Scheint ganz schön viel. Lass uns Stück für Stück mal im Detail durchgehen.

Gut zu wissen:

Gut zu wissen: Natürlich kann ich in diesem Artikel nicht alle Einstellungen bis ins kleinste Detail beleuchten. Das würde den Rahmen deutlich sprengen. Ich gehe aber auf alles Wichtige ein, was du benötigst, um deine erste Webseite zu erstellen und erwähne noch ein paar interessante Optionen am Rande die auch einen Blick wert sind. Die Anleitung basiert auf dem kostenlosen Astratheme. Mit Astra Pro hast du natürlich noch eine ganze Ecke mehr Möglichkeiten und deutlich individuellere Anpassungen.


Startseite und Menüs vorbereiten

Du hast mit der gewählten Startervorlage nun ein vorgefertigtes Set an Seiten und Unterseiten zur Verfügung. Die meisten Vorlagen bringen zum Beispiel von Haus aus eine Startseite, eine Über-uns Seite, eine Seite für die Kontaktaufnahme und mehr mit (hängt von der gewählten Startervorlage ab). Damit gehts jetzt noch an ein paar Vorbereitungen, bevor du zum Gestalten deiner Seite übergehen kannst.

Startseite zuweisen

Wir legen schon mal die Startseite fest. Das ist die Seite, die der Besucher als erstes sieht, wenn er deine Webseite aufruft.

Wenn du im Customizer (siehe oben) drin bist, findest du links einen Menüpunkt “Homepage Einstellungen”. Dort kannst du unter “Homepage” eine Startseite zuweisen. Öffne das Aufklappmenü und wähle “Home”. Damit müsste in der Vorschau rechts auch deine Startseite direkt angezeigt werden. Super!

Das ist praktisch, denn mit dieser Vorschau kannst du später all deine Gestaltungsentscheidungen direkt und ohne Zeitverzögerung prüfen.

Klicke nach jeder getanen Einstellung auf Veröffentlichen, um diese zu übernehmen und zu speichern.

Menü konfigurieren

Astra - Menüeinstellungen
Über die Menüanpassungen kannst du ganz einfach Menüpunkte hinzufügen, ändern oder löschen.

Jetzt wird es richtig interessant: denn im Customizer unter dem Punkt “Menü” findest du alle Einstellungen zu deinem Navigationsmenü. Auch hier siehst du alle Ändrungen direkt live in der Vorschau.

Je nach Startervorlage hast du verschiedene Menüs aufgelistet. Meistens gibt es jedoch einen Eintrag der lautet “Header”-Menü. Klicke da drauf. Das ist das Menü, was ganz oben in der Kopfzeile deine Webseite angezeigt wird und deinen Besuchern die Möglichkeit bietet, sich schnell und einfach zu den Unterseiten durchzuklicken.

Folgende Optionen stehen dir zur Verfügung:

  • Über den Punkt “Einträge hinzufügen” weist du nun bestehende Seiten zu deinem Navigationsmenü ganz einfach hinzu.
  • Klickst du auf einen Punkt im Navigatonsmenü dann klappen sich weitere Funktionen auf. Hier kannst du den Namen des jeweiligen Menüpunktes noch nachträglich ändern oder ihn gänzlich löschen.
  • Halte einen Menüpunkt mit gedrückter Maustaste fest und ziehe ihn innerhalb des Menüs an eine andere Stelle, um seine Position zu verschieben. So kannst du ganz einfach die Reihenfolge deiner Menüpunkte ändern.

Ähnlich kannst du auch mit etwaigen anderen Menüs verfahren und sie mit Menüpunkten bestücken. Welche Menüs neben dem “Header”-Menü noch zur Verfügung stehen, hängt natürlich von deiner gewählten Startervorlage ab. Viele Vorlagen bieten zum Beispiel auch ein oder mehrere Footermenüs. Damit kannst du die Menüpunkte in der Fußzeile ganz unten in deiner Webseite steuern.

Die Menüpunkte “Impressum” und “Datenschutz” sollten zwingend in dein Footermenü und somit in die Fußzeile deiner Webseite rein. Denn deine Besucher sind gewohnt, dort diese Informationen vorzufinden. Damit erfüllst du auch aktuelle Rechtsvorschriften.

Am besten du spielst mit den verschiedenen Menüs etwas herum und prüfst die Änderungen live in der Vorschau rechts. So bekommst du am schnellsten ein Gefühl, welches Menü, wo auf deiner Webseite verwendet wird.

Globale Einstellungen

Hier findest du alle Einstellungen zum grundlegenden Aussehen deiner Webseite. Vieles wird durch dein Starter-Template schon vorgegeben sein. Hier kannst du nun feinschleifen.

Typografie

Astra Theme - Einstellungen zur Schrift
Im Bereich “Typografie” legst du deine Schriftarten für Überschriften und Textabsätze für deine gesamte Webseite fest. In der Vorschau rechts siehst du gleich, wie sich das auswirkt.

Hier dreht sich alles um die Schriftarten auf deiner Webseite.

Unter Voreinstellungen findest du beliebte und gut funktionierende Schriftart-Kombinationen aus Überschriften und normalen Text. Wenn du noch keine konkreten Schriftarten durch dein Unternehmen vorgegeben hast, kannst du dich hier super inspirieren lassen.

Wahrscheinlich hast du aber schon konkrete Vorgaben. In diesem Fall empfehle ich dir, im Bereich “Basis Schrift” spezifische Einstellungen vorzunehmen. Hier kannst du jeweils für Überschriften und normalen Text nicht nur Schriftfamilie, -stärke, -größe und -formatierungen wählen, sondern auch auf den Pixel genau Abstände ober- und unterhalb sowie davor und danach einstellen.

Im Bereich “Überschriften” lassen sich sogar für jede Überschriften-Hierarchie einzeln Schriftarten zuweisen. So kannst du beispielsweise für die Hauptüberschrift deiner Webseite (H1) eine andere Schriftart wählen, als für Zwischenüberschriften inmitten der Seite (H2-H4).

Praktisch: du kannst in diesem Bereich auch festlegen, dass alle Links auf deiner Webseite unterstrichen sein sollen. Sofern das optisch zu deinem Layout passt, würde ich diese Einstellung aktivieren. Denn Besucher sind es gewohnt, dass Links unterstrichen sind und erkennen diese dadurch auch sofort.

Farben

Astra Theme - Einstellungen zur Farbpalette
Unter “Farben” legst du eine globale Farbpalette fest, an dem sich später alle Elemente orientieren. Zudem stellst du spezifische Farben für Links, Überschriften, Texte und viel mehr ein.

Der Zweitwichtigste Bereich. Hier kannst du die globalen Farben einstellen.

Die globale Farbpalette schlägt dir anhand deines zugrundeliegenden Starter-Templates passende Farbkombinationen vor. Wähle eine davon und beobachte, wie sich in der Vorschau rechts einzelne Elemente wie Schriften, Linien, Buttons und Icons farblich automatisch anpassen.

Wichtig zu wissen. Globale Farben werden bei Astra immer durch das kleine Globus-Symbol markiert. Beim weiteren Aufbau deiner Webseite wirst du im Administrationsbereich oder im Inhaltseditor später immer wieder auf Elemente treffen, die du einfärben kannst. Dazu stehen dir dann auch immer die Farben der globalen Farbpalette zur Verfügung. Somit gewährleistet Astra ein konsistente Farbnutzung und einen einheitliches Aussehen. Änderst du eine globalen Farbe nachträglich, werden auch alle Elemente denen diese zugeordnet ist automatisch angepasst. Praktisch, oder?

Im Bereich weiter unten kannst du für spezifische Elemente deiner Webseite einzelne Farbanpassungen vornehmen.

  • Akzent: wähle eine schöne Kontrastfarbe zu deiner globalen Farbpalette. Diese Farbe setzt du dann später ein, um Elemente bewusst farblich hervorstechen zu lassen (wie zum Beispiel Wichtige Informationen oder Angebote).
  • Links: hier kannst du zwei Einstellungen treffen. Zum einen die Standardfarbe für Links. Zum anderen die Farbe, die ein Link annimmt, wenn dein Besucher mit seinem Mauszeiger drüber fährt.
  • Überschriften: setze hier die globale Farbe für deine Überschriften
  • Haupttext: die Farbe für deine normalen Textabschnitte überall auf der Webseite
  • Ränder: Wenn Elemente wie beispielsweise Boxen Ränder haben sollen, kannst du diese hier gezielt einfärben

Zudem kannst du hier grundlegende Farbeinstellungen für den Hintergrund deiner Webseite sowie der Box um Textelemente treffen.

Übrigens: in den jeweiligen oben genannten Farbeinstellungen kannst du nicht nur einzelne Farben wählen, sondern alternativ auch Farbverläufe (Gradient) oder gar Bilder festlegen.


Container

Hier entscheidest du dich für ein Grundgerüst. Möchtest du eine Webseite, bei der die Inhalte wie Bilder und Texte über die volle Breite gehen? Möchtest du lieber eine Seitenleiste mit extra Inhalten rechts neben deinen Inhalten? In diesen Optionen kannst du den Aufbau deiner Webseite grundlegend festlegen.

Zudem kannst du auch weiter unten pixelgenau die Breite deiner Webseite angeben. Da solltest du etwas experimentieren und immer mit der Vorschau rechts prüfen, ob die Einstellungen deinen Vorlieben entsprechen.

Button

Astra Theme - Einstellungen zu den Buttons
Unter “Buttons” definierst du das Aussehen der Buttons auf deiner Webseite. Form, Farben, Ränder – alles kannst du hier ganz genau einstellen.

Hier legst du alles rund um die Buttons auf deiner Webseite fest. Dieser Bereich ist eigentlich weitestgehend selbsterklärend.

Ganz oben wählst du das Aussehen deiner Buttons. Eckig oder rund? Vollfarbig oder nur Umrandung? Je nach Geschmack kannst du dich hier austoben.

Ebenso lässt sich hier die Text-, Hintergrund- und Randfarbe aber auch die Randbreite und der Abstand zwischen Text und Buttonrand definieren.

Meist hast du zwei Farbfelder nebeneinander (zum Beispiel bei “Textfarbe”). In diesem Fall legst du mit dem ersten Farbfeld die normale Textfarbe des Buttons fest. Mit dem zweiten Farbfeld rechts daneben kannst du eine alternative Farbe wählen, die angezeigt wird, wenn dein Webseiten-Besucher mit seinem Mauszeiger über den Button fährt.


Das waren die wirklich essentiellen Einstellungen im Bereich “Global”. Die dürften reichen für deinen ersten Webseiten-Entwurf. Komm gern später wieder hierher und schau dir noch die anderen Optionen an. Jetzt gehen wir aber erstmal weiter zum…

Header Builder

Der Header Builder gibt dir die Möglichkeit, die Kopfzeile deiner Webseite zu gestalten. Wir gewohnt siehst du rechts eine Vorschau und darunter drei Zeilen. Hinter diesen drei Zeilen versteckt sich ein mächtiger Editor.

Astra Theme - Header Builder
Ein Beispiel, wie du ein Element durch das “+” auf der Kopfleiste anlegst und darüber ein Logo platzierst.

Fahre mit deinem Mauszeiger über diese Zeilen und die siehst ein kleines “+” Symbol. Somit kannst du recht genau definieren, an welcher Stelle der Kopfzeile du ein Element hinzufügen möchtest. Eher ein mittiges Logo und darunter das Navigationsmenü? Oder doch lieber klassisch Logo links und rechts daneben die Navigation? Vielleicht auch ein paar Icons zu deinen sozialen Kanälen wie Facebook darunter? Die Möglichkeiten sind schier unbegrenzt.

Übrigens: am jeweils linken Ende einer jeden Zeile findest du ein kleines Zahnradsymbol. Mit Klick darauf kannst du Einstellungen für diese konkrete Zeile vornehmen. Achte hier auch besonders auf den Bereich “Design” wo du beispielsweise Abstände sowie Rand- und Hintergrundfarben für diese Zeile wählen kannst.


Folgende Elemente werden in der Kopfzeile deiner Website wohl am meisten Sinn machen:

  • Website-Titel und Logo: Füge dein vorhandenes Unternehmens-Logo (und auf Wunsch das Retina Logo, siehe Box unten) an der gewünschten Stelle deiner Kopfzeile ein und lege dessen Größe mit dem Schieberegler komfortabel fest. Ebenso kannst du hier den Titel der Webseite sowie den Untertitel vergeben. Auf hochauflösenden Displays (wie zum Beispiel die des Iphones) sehen Logos mit normaler Größe leicht unscharf und verwaschen aus. Nutze für solche Geräte am besten gezielt ein Retina Logo. Das ist nichts weiter als eine doppelt so große Variante deines normalen Logos.
  • Button: du möchtest deine Besucher schnell zu einer Handlung motivieren, dann platziere doch einen Button direkt in deiner Kopfleiste. Mit diesem Element kannst du den Buttontext und einen entsprechenden Link hinterlegen, wohin der Button bei Klick führen soll. Die Einstellungen sind recht selbsterklärend.
  • HTML: Platzierst du ein HTML Element, so kannst du an dieser Stelle beliebigen Text eingeben. Nutze dafür den Editor, der dir darüber hinaus auch viele Text-Formatierungsmöglichkeiten bietet. Einige meiner Kunden schreiben so zum Beispiel ihre Kontaktdaten wie E-Mail oder Telefonnummer direkt in die Kopfzeile (wenn die Kontaktaufnahme primäres Ziel der Webseite ist).
  • Menüs: Mit primären und sekundären Menü kannst du deine vorab gebauten Navigationsmenüns einbinden. Ich wähle hier das Hauptmenü als primäres Menü, welches mit all den gewünschten Menüpunkten in der Vorschau rechts auch prompt erscheint. Schau dir auch die Optionen unter “Design” an. Hier kannst du zum einen das optische Verhalten der einzelnen Menüpunkte beim drüberfahren mit dem Mauszeiger festlegen. Zum anderen gestaltest du hier auch das Untermenü (wenn du Unterpunkte zu einem Hauptmenüpunkt hast).
  • Widgets: der wohl mit Abstand vielfältigste Bereich. Hast du ein Widget Element in deiner Kopfleiste platziert, dann kannst du über die Einstellungen links über das “+” Symbol verschiedene Module einfügen (beliebig viele). Diese entsprechen den Blöcken (z.B. Überschriften, Bilder, Zitate, Tabellen), die du in den kommenden Kapiteln beim Gestalten von Seiten und Beiträgen kennenlernen wirst. Deswegen gehe ich an dieser Stelle erstmal (noch) nicht weiter drauf ein. Nur so viel: wenn du später die Blöcke beherrschst, hast du mit einem Widget Modul in deiner Kopfzeile unglaublich viele Möglichkeiten.
  • Socials: Leite deine Besucher direkt auf Facebook, Xing, Twitter & Co. mit den Icons, die direkt zu deinen sozialen Profilen führen. Mit Klick auf das jeweilige soziale Icon im Menü links, kannst du direkt einen Link (zum Beispiel zu deiner Facebook-Seite, Facebook-Gruppe oder deinem Xing-Profil) hinterlegen. Und neben “Add Social Icon” hast du eine Liste, mit der du aus über 30 weiteren sozialen Kanälen wählen kannst.
  • Suche: Für sehr inhaltslastige Seiten bietet sich direkt eine Suche in der Kopfzeile an. Mit der erhält dein Besucher ein praktisches Suchfeld.

Hinweis 1: Beim Gestalten der Elemente hast du jeweils immer zwei Tabs. Einmal “General” für die allgemeinen Einstellungen. Und einmal “Design”, um das Aussehen näher zu definieren.

Hinweis 2: Bei vielen Eingabenfeldern gibt es darunter die so genannten “Visibility” Optionen. Das sind die drei Symbole mit dem Monitor, dem Tablet und dem Smartphone. Was diese bedeuten, kannst du dir sicherlich schon denken: durch aktivieren und deaktivieren kannst du bestimmen, auf welchem Gerät die Information jeweils angezeigt werden soll oder auch nicht. Ein klassisches Beispiel sind Kontaktdaten in deiner Kopfzeile. Während du auf einem großen Monitor genügend Platz hast, um diese anzuzeigen, möchtest du sie vielleicht auf einem kleinen Smartphone-Display eher ausblenden. Solche dedizierten Feinjustierungen triffst du mit den “Visibility Optionen” fast überall in den Astra Theme Einstellungen.

Transparenter Header

Es gibt übrigens auch die Option “Transparenter Header”. In diesem Fall wird der Hintergrund deiner Kopfleiste durchsichtig. Das ist besonders effektvoll, wenn du ein großes Bild dahinter hast. Und damit die Elemente und das Logo deiner Kopfleiste dennoch gut lesbar sind, kannst du alles individuell nochmal farblich anpassen oder den transparenten Header ausschließlich auf bestimmten Seiten anzeigen.


Footer Builder

Ich springe gleich mal zum Footer Builder (Editor für die abschließende Fußzeile am unteren Ende deiner Webseite). Warum? Weil dieser exakt genauso funktioniert, wie der Header Builder, den du gerade kennengelernt hast. Auch hier hast du drei Zeilen mit unterschiedlichen Positionierungsmöglichkeiten für deine Elemente. Das Angebot der Elemente sind fast identisch mit den oben bereits beschriebenen.

Einzig das Element “Copyright” kommt hier noch hinzu. Mit diesem kannst du per Text-Editor rechtliche Daten in der Fußzeile deiner Webseite platzieren.

Blog

Begriffsklärung: Was ist ein Blogarchiv und ein Einzelbeitrag?

Ein Einzelbeitrag ist ein einzelner Artikel mit konkretem zeitlichem Bezug zum Veröffentlichungsdatum (zum Beispiel Reisetagebuch, Neuigkeiten oder Pressemitteilungen). Alle veröffentlichten Einzelbeiträge werden dann im Blogarchiv übersichtlich in der Reihenfolge angezeigt, in der sie von dir geschrieben wurden – also der neueste Beitrag zuerst.

Klingt noch etwas kompliziert? Am Beispiel eines Pressebereiches, wäre ein Einzelbeitrag eine einzelne Pressemeldung. Und das Blogarchiv das Pressearchiv, wo all diese Pressemeldungen chronologisch aufgelistet sind.


Achtung: dieser Bereich ist wirklich nur interessant, wenn du regelmäßig Meldungen, Informationen und Neuigkeiten berichten willst – ähnlich wie in einem Tagebuch. Für eine einfache Unternehmens-Webseite genügen in vielen Fällen statische Seiten, um eine Galerie, eine Über uns Seite oder eine Kontaktseite zu bauen. Die Webseite, die ich exemplarisch baue, braucht keinen Blogbereich und somit die folgenden Einstellungen nicht. Der Vollständigkeit halber reiße ich den Bereich Blog an dieser Stelle dennoch kurz an.

Blog / Archive

In diesem Bereich kannst du jeweils das generelle Grundgerüst für dein Blogarchiv festlegen. Anhand der kleinen auswählbaren Vorschaubilder sollte eigentlich alles selbsterklärend sein.

Über Inhaltsbreite kannst du die Breite des Blogarchivs ganz genau in Pixeln festlegen. Ich würde immer dazu raten, die Breite der restlichen Webseite als Orientierung zu nutzen, damit ein einheitliches Bild entsteht.

Zudem stellst du hier ein, ob deine Blogartikel nur mit einer Überschrift aufgelistet werden sollen, oder mit einem markanten Beitragsbild. Wie lang der Beschreibungstext ausfallen soll und noch viel mehr.

Einzelbeitrag

In diesem Bereich designst du also die einzelnen Beiträge. Und auch wählst du wie im Blogarchiv oben dein gewünschtes Grundgerüst aus.

Wirklich interessant für regelmäßige Blogger ist die Option, weitere verwandte Beiträge unter einem Einzelbeitrag zu platzieren. Denn du willst deinen Besucher ja so lange wie möglich auf deiner Webseite behalten. Insofern ist ein Angebot für weiterführende Informationen nie verkehrt – und immer die bessere Alternative, als wenn er wieder komplett abspringt.

Seite

Was ist eine Seite?

Was ist eine statische Seite? Eine statische Seite ist wie eine Unterseite auf deiner Webseite. Anders als ein Blogbeitrag enthält sie Informationen, die zeitlos sind und nicht oft aktualisiert werden müssen. Also kein zeitlicher Bezug. Zum Beispiel “Über uns”, “Kontakt” oder “Häufige Fragen”.


Astra Theme - Einstellungen zur Seite
In den Einstellungen zur “Seite” legst du das Grundlegende Layout fest. Dieses bestimmt, ob all deine Unterseiten später zum Beispiel über die volle Bildschirmbreite gehen, oder eine Seitenleiste haben.

Jetzt kommen wir zum wesentlich interessanteren Bereich, denn hier kannst du jeweils das generelle Layout für deine statische Seiten einstellen. Auf statischen Seiten bauen wir uns später Startseite, Über uns Seite, Kontaktseite und viele weitere Seiten auf.

Anhand der kleinen auswählbaren Vorschaubilder sollte eigentlich alles selbsterklärend sein. Probier dich hier gerne etwas aus. Interessante Optionen sind:

  • Deine Inhalte (wie Texte, Bilder, Formulare) auf voller Breite darstellen. Das ist für Seiten eigentlich die häufigste Einstellung.
  • Alternativ kannst du jedoch auch deine Inhalte schmal in der Mitte darstellen. Dadurch bekommt deine Webseite eine offenere und luftigere Anmutung und wirkt nicht so voll gepackt.
  • Links oder rechts neben deinen Inhalten lässt sich eine Seitenleiste mit weiterführenden Informationen, einem Inhaltsverzeichnis oder Kontaktmöglichkeiten einblenden.

Da ich später für die Startseite, die Über uns-Seite und die Kontaktseite auf diese Layouts zurückgreife, wähle ich die volle Breite. Denn das bietet viel Raum für Gestaltung mit dem Seiten-Editor später.

Seitenleiste

Hier nimmst du generelle Einstellungen zur Seitenleiste für die gesamte Webseite vor: Also, ob du neben deinem Hauptinhalt noch links oder rechts daneben eine Seitenleiste mit weiterführenden Informationen anzeigen möchtest. Das können zum Beispiel Kontaktdaten sein, Werbung, die beliebtesten Einzelbeiträge deines Blogs oder ein Produktfilter für deinen Online-Shop.

Auch die Breite der Seitenleiste Hauptinhalt kannst du hier pixelgenau angeben.

Achtung: mit diesen Optionen überschreibst du sämtliche anderen Seitenleisten Einstellungen in den anderen Bereichen (zum Beispiel unter Seiten)


Weitere Einstellungsmöglichkeiten

Sicherlich gibt es noch viele weitere Einstellungen wie zum Beispiel Breadcrumbs (Navigationspfade), Widgets für deine Seitenleisten oder das Website-Icon. Hier könnte ich schnell vom hundertsten ins tausendste kommen.

Ich möchte den Rahmen dieser Anleitung jedoch nicht völlig sprengen und konzentriere mich auf das Wesentliche zum Erstellen deines ersten Webauftritts mit WordPress und dem Astra Theme. Weitere Feinheiten werde ich sicherlich in kommenden Artikel näher beleuchten. Bis dahin kannst du schon selbst einmal herumprobieren.

Ich als Webdesigner nutze Astra bei manchen Kundenprojekten und spare dadurch gegenüber herkömmlicher Programmierung bis zu 80% Zeit. Darüber hinaus ist das Theme auch einsteigerfreundlich genug, dass ich mit kurzen Schulungen meine Kunden auch selbst befähige, ihre Webseite mit Astra aufzubauen und spätere Änderungen auf eigene Faust zu machen. So sind sie langfristig flexibler und ungebunden von externen Dienstleistern. Wenn du Interesse hast, kontaktiere mich dich einfach mal und wir schauen gemeinsam, wie eine gute Lösung für dich aussehen könnte.


Wie geht es weiter?

Jetzt hast du erstmal deine grundlegende Webseite erstellt und ihr ein ganzheitliches und passendes Aussehen mit den Starter-Vorlagen von Astra verpasst. Aber natürlich sind die Inhalte der einzelnen Seiten immer noch Beispieltexte und Platzhalter-Fotos. Deswegen geht es im nächsten Artikel um die Gestaltung der konkreten Seiteninhalte.

Bis dahin kannst du aber gerne schon selbst einmal herumprobieren.

Fazit

Wie du in diesem Tutorial gesehen hast, ist eine Webseite mit Astra und WordPress kein Hexenwerk und durchaus in wenigen Stunden erstellt. Auch für nicht technikaffine Neulinge.

Durch die zahlreichen Startervorlagen erhältst du ein fertiges und professionelles Webdesign quasi auf Knopfdruck und musst dieses nur noch inhaltlich anpassen.

Leichter ist ein Einstieg in WordPress wohl kaum möglich.

Häufige Fragen

Ist das Astra Theme einfach zu bedienen?

Ja, das Astra Theme ist einfach zu bedienen. Es ist sehr intuitiv gestaltet und erfordert keine speziellen Kenntnisse in der Webentwicklung oder Programmierung. Das Astra Theme bietet eine benutzerfreundliche Bedienoberfläche und eine klare Struktur, die es auch Anfängern erleichtert, ihre Webseite zu erstellen und zu gestalten. Zudem gibt es viele Anleitungen, Tutorials und Support-Optionen.

Welcher ist der beste PageBuilder für Astra?

Das Astra Theme ist mit vielen Editoren kompatibel, daher hängt die Wahl des besten Editors stark von den persönlichen Vorlieben ab. Einige der populärsten Editoren sind der Gutenberg Editor, Elementor, Beaver Builder und Divi Builder.

Warum ist das Astra Theme so beliebt?

Einer der Hauptgründe ist die hohe Benutzerfreundlichkeit und Anpassungsfähigkeit des Themes. Das bedeutet, dass du ohne Programmierkenntnisse mithilfe von Astra deine Webseite einfach und schnell anpassen kannst. Astra verfügt auch über eine große Bibliothek an vorgefertigten Starter-Templates, die es ermöglicht, deine Webseite in kürzester Zeit mit professionellem Design zu gestalten.
Astra ist dafür beliebt, schnell zu laden – und eine kurze Ladezeit für Websites ist für Benutzererfahrung und Suchmaschinenoptimierung von großer Bedeutung.

Aktualisierungen dieses Artikels:

  • 02.05.2023 – Erstveröffentlichung

Quellen:

Über Chris Donner

Chris Donner sammelte in über 20 Jahren mit Start-ups und auch größeren Konzernen wertvolle Erfahrungen im Bereich Online Marketing als Digital Marketing Manager, Head of Webdesign und Marketing Automation Spezialist.
Nebenbei treibt es ihn aber immer wieder zu spannenden kleinen Kundenprojekten. Aus dieser Leidenschaft heraus wurde 2008 Pixxelpassion geboren.
Im Rahmen dessen hilft er seitdem über 300 Bloggern, Selbständigen sowie Kleinunternehmern beim Aufbau ihrer Online Präsenzen. Darunter namhaften Kunden wie den Wirtschaftsjunioren Leipzig, Finanzküche oder Senmotic Shoes.
Natürlich nicht als Einmann-Show: Ihm steht ein Netzwerk aus Experten zur Verfügung um ein vollumfassendes Angebot von Positionierung über Webdesign und Online Marketing bis hin zu SEO zu bieten.
Seit über 10 Jahren betreibt Chris zudem mit einigen Geschäftspartnern erfolgreich Affiliate-Projekte mit mehr als 12 Nischen-Ratgebern wie beispielsweise den Vakuumiergeräte-Berater – mit insgesamt sechsstelligen Umsätzen.
Die langjährigen Erfahrungen sowie viel selbstständiges Recherchieren, Experimentieren und Testen münden in diesen Blog über aktuelle Marketing Themen.
Ansonsten findest du Chris fernab von digitalen Welten in der freien Natur, beim Reisen und Sport.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 4.3 / 5. Anzahl Bewertungen: 3

Bisher keine Bewertungen! Sei der Erste, der diesen Beitrag bewertet.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen
Cookie Consent mit Real Cookie Banner