Wie du deine Website mit den Custom Layouts von Astra flexibel anpassen und erweitern kannst

Astra ist mein Lieblingstheme für WordPress – es hat schnelle Ladezeiten, harmoniert gut mit Page Buildern und lässt sich vor allem sehr flexibel anpassen.

In der kostenlosen Version ist da schon einiges möglich; Astra Pro bietet allerdings nochmal deutlich mehr Möglichkeiten.

Das liegt unter anderem an den Custom Layouts! Die sind meiner Meinung nach das beste Pro-Feature.

Was Custom Layouts genau sind, was du damit machen kannst und wie du sie erstellst, erfährst du in diesem Artikel.

Was sind Custom Layouts und wofür sind sie gut?

Custom Layouts sind im Prinzip individuell erstellte Layouts für deine Website.

Ein paar Beispiele:

• Header, die du nur auf bestimmten Seiten brauchst
• ein eigener Footer für jede Kategorie deines Blogs
• eine Autorenbox die automatisch am Ende jedes Artikels eingefügt wird
• eine individuelle 404-Seite
• Werbung für dein Angebot, die oberhalb des Headers in einem bestimmten Zeitraum angezeigt wird

Das sind jetzt alles Beispiele für Dinge, die auf deiner Website tatsächlich sichtbar sind.

Du kannst mit den Custom Layouts aber auch Code auf deiner Website einfügen, z.B. den Trackingcode von deinem Analyticstool im Header!

Du bist also wirklich sehr flexibel.

Es gibt fünf verschiedene Typen von Custom Layouts:

#1 Header

Wie der Name schon vermuten lässt, kannst du individuelle Header erstellen, die du nur auf bestimmten Seiten brauchst.

Wenn du auf deiner Website z.B. einen Mitgliederbereich integriert hast, kannst du auf den zugehörigen Seiten den passenden Header mit anderem Menü und Logout-Button anzeigen.

Du hast auch die Option, den Header sticky zu machen.

#2 Footer

Was für den Header gilt, gilt natürlich auch für den Footer. Mit unterschiedlichen Footern hast du bspw. die Möglichkeit, die Inhalte und Links im Footer auf deine unterschiedlichen Blogkategorien anzupassen.

#3 404 Page

Auch das ist selbsterklärend: Wenn du diese Option auswählst, kannst du dein eigenes Layout für deine 404-Seite erstellen. Die wird angezeigt, wenn jemand z.B. einen Tippfehler macht und die angefragte URL auf deiner Website nicht existiert.

#4 Hooks

Hier wird's jetzt so richtig interessant – mit den Hooks erstellst du die wirklich flexiblen Inhalte auf deiner Website! Damit kannst du nämlich einzelne Layouts an eine bestimmte Stelle einfügen.

Die Autorenbox, die du hier in diesem Blogartikel ganz unten findest, hab ich z.B. so erstellt. Das Layout an sich hab ich im normalen Block-Editor gebaut und es dann so eingestellt, dass es in allen Blogartikeln vor dem Footer eingefügt wird:

Vor dem Footer ist aber nur eine Option von vielen. Du kannst die Custom Layouts auch vor oder nach dem Header, zu Beginn oder nach dem Inhaltsbereich oder in die Sidebar einfügen.

Die Auswahl an sog. Hooks ist groß, es ist so ziemlich jede Stelle auf deiner Website möglich!

Wie ich weiter oben auch schon erwähnt habe, kannst du diesen Typ Custom Layout aber auch dazu nutzen, um Code auf deiner Website einzufügen.

#5 Inside Page/Post Content

Wenn du deine Seiten und Beiträge mit dem Block-Editor von WordPress erstellst, kannst du auch den letzten Typ Custom Layout nutzen: Inside Page/Post Content.

Das ist nützlich, wenn du den gleichen Inhalt in all deinen Blogartikeln und/oder Seiten anzeigen möchtest – die Anmeldung für deinen Newsletter zum Beispiel oder Hinweise für deine Produkte und Angebote.

Diese Optionen hast du, um den Inhalt automatisch in Seiten und Beiträge einzufügen:

• nach einer bestimmten Anzahl an Blöcken (also z.B. nach 5 Absätzen Text)
• vor einer bestimmten Anzahl an Überschriften (also z.B. vor der 3. Überschrift)

Natürlich kannst du dann immer noch festlegen, wo genau der zusätzliche Inhalt angezeigt werden soll, z.B. nur in den Beiträgen einer bestimmten Kategorie.

Custom Layouts aktivieren

Damit du die Custom Layouts nutzen kannst, brauchst du Astra Pro. Es gibt verschiedene Pläne, aus denen du wählen kannst:

• nur die Pro-Version von Astra
• Essential Bundle: Astra Pro + Ultimate Addons for Elementor und Spectra Pro als alternativen Page Builder für Gutenberg
• Growth Bundle: Astra Pro + alle Plugins, die Brainstorm Force (die Macher hinter dem Theme) ebenfalls anbieten

Du kannst zwischen der jährlichen oder einer einmaligen Zahlung wählen. Ich selber nutze die Lifetime-Version des Essential Bundles, inkl. Ultimate Addons for Elementor.

Nach dem Kauf kannst du das Astra Pro als Plugin herunterladen, das fügt nach der Aktivierung die Pro-Funktionen zu deiner Website hinzu.

Dann hast du die Möglichkeit, die einzelnen Funktionen zu aktivieren – also nur die, die du auch wirklich benutzt. Das hat den Vorteil, dass alle anderen gar nicht erst geladen werden und dementsprechend auch keine unnötige Ladezeit in Anspruch nehmen!

Du findest diese Option im Astra-Dashboard:

Stell also sicher, dass du die Custom Layouts (auf Deutsch heißen sie Eigene Layouts) aktiviert hast. Dann kann's losgehen.

Custom Layouts erstellen

Du hast drei Optionen, um die Designs an sich für deine Custom Layouts zu erstellen:

• mit dem Block-Editor von WordPress
• mit Elementor
• mit dem Beaver Builder

Am besten entscheidest du dich also für den Page Builder, den du eh nutzt. Wenn du alle deine Seiten mit Elementor erstellst, mach das auch bei den Custom Layouts.

Der "Mit Elementor bearbeiten"-Button wird dir hier ganz normal angezeigt:

Wenn du hauptsächlich mit dem Gutenberg-Editor arbeitest, kannst du auch den nehmen und musst dafür natürlich nicht extra einen anderen Page Builder installieren.

Generell gilt: Dadurch, dass du Page Builder nutzen kannst, hast du wirklich volle Flexibilität was Design und Layout angeht!

Die flexiblen Einstellungen für Custom Layouts

Wenn du ein Custom Layout erstellt hast, musst du festlegen, wo genau auf der Seite es angezeigt werden soll – dazu hast du verschiedene Einstellungen zur Verfügung.

Die findest du, wenn du im Editor auf das Astra-Logo rechts oben klickst:

Check hier auf jeden Fall nochmal, ob du den richtigen Typ ausgewählt hast (Header, Footer, Hook etc). Je nachdem unterscheiden sich die Einstellungen dann etwas, bei den Hooks musst du z.B. auswählen, wo genau das Layout eingefügt werden soll.

Drei Einstellungsmöglichkeiten sind aber immer gleich, und zwar die, die festlegen, wo genau auf deiner Website das Layout ausgespielt wird, auf welchen Geräten und wann.

Schauen wir uns das am Beispiel einer Autorenbox für deine Artikel an:

Display and User Conditions

Hier legst du fest, wo genau auf deiner Website die Autorenbox angezeigt werden soll. Du bist hier wirklich komplett flexibel:

Für die Autorenbox wäre "All Beiträge" (leider alles nur so halb auf Deutsch übersetzt) eine sinnvolle Wahl, damit machst du es dir auf jeden Fall am einfachsten.

Wenn du Custom Layouts bspw. auf eine bestimmte Kategorie abgestimmt hast, wählst du die letzte Option, "Specific Pages / Posts / Taxonomies". Damit kannst du eben einzelne Kategorien oder Schlagwörter auswählen oder auch nur einzelne Beiträge oder Seiten.

Du kannst zusätzlich auch ausschließende Bedingungen festlegen.

Nehmen wir an, ich würde auf meiner Website Gastartikel veröffentlichen und die mit dem Schlagwort "Gastartikel" kennzeichnen. Bei der Autorenbox würde ich dieses Schlagwort dann ausschließen, schließlich sind die Gastartikel ja von anderen Leuten geschrieben.

In den Einstellungen sähe das so aus:

Außerdem hast du hier noch die Möglichkeit, bestimmte Benutzerrollen festzulegen, für die das Custom Layout sichtbar sein soll.

Das spielt bei der Autorenbox keine Rolle, beim Beispiel von vorhin schon eher: Wenn du nämlich einen Header für deinen Mitgliederbereich erstellst, könntest du eine Variante für eingeloggte Mitglieder erstellen und eine für nicht eingeloggte Personen.

Ich denk, so langsam wird's deutlich, wie unglaublich flexibel du bei den Custom Layouts bist, oder?

Device Visibility

Diese Einstellung ist deutlich simpler: Hier legst du nämlich fest, auf welchen Geräten das Custom Layout sichtbar sein soll. Du hast Desktop, Tablet und Smartphone (Mobile) zur Auswahl.

Stell die Regler so ein, wie es in deinem spezifischen Fall Sinn ergibt – bei der Autorenbox wähle ich alle drei Gerätegrößen aus:

Date & Time Conditions

Zuletzt hast du die Möglichkeit, die Custom Layouts nur für einen bestimmten Zeitraum anzuzeigen – wenn du bspw. deinen Onlinekurs eine Woche lang zum Kauf anbietest und die Türen danach wieder schließt.

Du kannst Start- und Endzeitpunkt ganz genau festlegen:

Fazit

Astra Pro bietet dir dank der Custom Layouts extrem viel Flexibilität, was die Layouts und Designs deiner Website angeht. Du kannst damit individuelle Header und Footer und beliebige Design-Elemente erstellen und sogar Code auf deiner Website einbinden.

Die detaillierten Einstellungen bzgl. "Erscheinungsort" auf deiner Website, Gerät oder dem Zeitraum ermöglichen es dir außerdem, ganz exakt festzulegen, wo, wann und wie du deine Layouts anzeigen lassen möchtest.

Mit den drei konkreten Beispielen hast du hoffentlich auch ein Gefühl dafür bekommen, was du mit den Custom Layouts anstellen kannst – und wie du sie erstellen kannst.

Insgesamt finde ich, dass sich Astra Pro allein für diese zusätzliche Funktion absolut lohnt!

________________________

Bei den Links zu Astra handelt es sich um Affiliate Links. Wenn du dir darüber Astra Pro kaufst, erhalte ich eine Provision – für dich ändert sich am Preis natürlich nichts!