Magento 2 Experten — Hyvä Theme, Tailwind CSS & SEO aus einer Hand ›

Content

CMS-Seiten, Blöcke, Blog und Widgets: wie Sie Inhalte außerhalb des Produktkatalogs pflegen.

KAPITEL 4 Unterkapitel

CMS-Seiten erstellen und bearbeiten

<div class="prose prose-hyva max-w-none"><p>Wie Sie eine neue Inhaltsseite (z. B. "Über uns") anlegen, gestalten und veröffentlichen.</p><p>CMS-Seiten verwalten Sie unter <em>Content &gt; Elements &gt; Pages</em>. Über <strong>Add New Page</strong> legen Sie eine neue Seite an – typische Beispiele sind "Über uns", "AGB", "Widerrufsrecht" oder Landingpages für Kampagnen.</p> <img loading="lazy" src="{{media url=wysiwyg/handbuch/1kapitel/newpage7kategorie.png}}" alt="NewPage" /> <h3>Die wichtigsten Felder</h3> <ul> <li><strong>Page Title:</strong> interner und im Browser-Tab angezeigter Titel.</li> <li><strong>URL Key:</strong> der Pfad, unter dem die Seite erreichbar ist (z. B. "ueber-uns").</li> <li><strong>Content:</strong> der eigentliche Seiteninhalt – Hyvä-Themes nutzen dafür meist den Page-Builder oder ein einfaches WYSIWYG-Textfeld, je nach Konfiguration.</li> <li><strong>Search Engine Optimization:</strong> Meta Title, Meta Description, Meta Keywords sowie das Feld für die kanonische URL.</li> <img loading="lazy" src="{{media url=wysiwyg/handbuch/1kapitel/optimation7kategorie.png}}" alt="wichtigstenFelder" /> </ul> <h3>Design-Tab</h3> <p>Unter <strong>Design</strong> lässt sich pro Seite ein abweichendes Layout wählen (z. B. "1 column" ohne Sidebar für eine vollflächige Landingpage) sowie ein individuelles <strong>Layout Update XML</strong> hinterlegen, falls Sie z. B. zusätzliche Blöcke einbinden möchten. Über <strong>Custom Design Update</strong> lässt sich zusätzlich ein zeitlich begrenztes, abweichendes Design für die Seite terminieren (z. B. ein Kampagnen-Look für eine Woche).</p> <img loading="lazy" src="{{media url=wysiwyg/handbuch/1kapitel/design7kategorie.png}}" alt="Design tab" /> <h3>Store-View-Zuordnung</h3> <p>Im Tab <strong>Content</strong> ganz oben legen Sie unter <strong>Store View</strong> fest, für welche Store Views die Seite sichtbar ist – bei mehrsprachigen Shops idealerweise pro Sprache eine eigene Version derselben Seite mit übersetztem Content und eigenem URL-Key.</p> <img loading="lazy" src="{{media url=wysiwyg/handbuch/1kapitel/storeview7kategorie.png}}" alt="Store-View-Zuordnung" /> <h3>Veröffentlichung</h3> <p>Vergessen Sie nicht, die Seite über <strong>Enable Page</strong> zu aktivieren – neu angelegte Seiten sind standardmäßig zwar aktiv, aber nicht automatisch irgendwo verlinkt. Das Einbinden in Menü, Footer oder als Widget erledigen Sie separat (siehe Kapitel "CMS-Blöcke verwenden" und "Header und Footer anpassen").</p> <h3>Content Heading vs. Page Title</h3> <p>Im Content-Tab findet sich neben <strong>Page Title</strong> ein separates Feld <strong>Content Heading</strong>. Der Page Title erscheint nur im Browser-Tab und ist der Fallback für den Meta Title, wenn kein eigener gesetzt wird. Das Content Heading dagegen wird als sichtbare Überschrift (in der Regel als H1) oberhalb des Seiteninhalts ausgegeben. Beide Felder können bewusst unterschiedlich formuliert werden – z. B. ein knapper, SEO-optimierter Page Title und eine ansprechendere, längere Überschrift als Content Heading. Lässt man Content Heading leer, wird häufig gar keine automatische Überschrift ausgegeben, das hängt vom Theme ab.</p> <img loading="lazy" src="{{media url=wysiwyg/handbuch/1kapitel/contentheading7kategorie.png}}" alt="ContentHeading" /> <h3>Reservierte System-Seiten</h3> <p>Bestimmte CMS-Seiten übernehmen technische Sonderrollen im Shop. Unter <em>Stores &gt; Configuration &gt; General &gt; Web</em> im Bereich <strong>Default Pages</strong> legen Sie fest, welche CMS-Seite als <strong>CMS Home Page</strong> (Startseite), <strong>CMS No Route Page</strong> (404-Fehlerseite) und <strong>CMS No Cookies Page</strong> (Hinweisseite bei deaktivierten Cookies) verwendet wird. Diese Seiten müssen vorher unter <em>Content &gt; Elements &gt; Pages</em> existieren und einen sprechenden URL-Key haben, bevor Sie sie hier zuweisen können.</p> <img loading="lazy" src="{{media url=wysiwyg/handbuch/1kapitel/defaultpages7kategorie.png}}" alt="Reservierte System-Seiten" /> <p>Praxis-Tipp: Legen Sie sich eine eigene, gestaltete 404-Seite an (statt der Standard-Fehlerseite) und tragen Sie sie unter Default Pages ein – das wirkt professioneller und kann z. B. eine Suchmaske oder Links zu Bestsellern enthalten.</p> <h3>WYSIWYG-Editor konfigurieren</h3> <p>Ob und wie der Rich-Text-Editor beim Bearbeiten von Content-Feldern erscheint, steuern Sie unter <em>Stores &gt; Configuration &gt; General &gt; Content Management</em> über das Feld <strong>Enable WYSIWYG Editor</strong>. Zur Auswahl stehen u. a. "Disabled Completely" (nur Rohtext/HTML-Code), "Enabled by Default" (Editor ist beim Öffnen aktiv) oder "Enabled Manually" (Redakteure schalten ihn bei Bedarf per Button ein). Bei Hyvä-Themes mit Page-Builder-Einsatz kann diese Einstellung zusätzlich beeinflussen, ob der klassische WYSIWYG-Editor oder der Page-Builder als Standard angezeigt wird.</p> <img loading="lazy" src="{{media url=wysiwyg/handbuch/1kapitel/wygoptions7kategorie.png}}" alt="WYSIWYG-Editor" /> <h3>Bilder in den Content einfügen</h3> <p>Über den Button <strong>Insert Image</strong> in der WYSIWYG-Toolbar öffnet sich der Medien-Browser, der direkt in das Verzeichnis <em>pub/media/wysiwyg</em> hochlädt und von dort Bilder einbindet. Anders als Produktbilder landen diese Dateien nicht im Katalog-Medien-Ordner und werden separat verwaltet. Praxis-Tipp: Legen Sie sich innerhalb des Medien-Browsers themenbezogene Unterordner an (z. B. "wysiwyg/seiten/ueber-uns"), sonst sammeln sich mit der Zeit Hunderte Bilder unsortiert in einem einzigen Verzeichnis.</p></div>
Weiterlesen

CMS-Blöcke verwenden

Wiederverwendbare Inhaltsblöcke anlegen, die Sie an mehreren Stellen im Shop einsetzen können.

CMS-Blöcke (Content > Elements > Blocks) sind kleinere, wiederverwendbare Inhaltsfragmente – im Unterschied zu CMS-Seiten sind sie keine eigenständige URL, sondern werden IN andere Seiten oder Theme-Bereiche eingebettet.

Typische Einsatzzwecke

  • Footer-Inhalte, die auf jeder Seite gleich sind (Öffnungszeiten, Zahlungsart-Icons, Kontaktdaten).
  • Statische Beschreibungstexte am Anfang einer Kategorie (Display Mode "Static Block and Products", siehe Kapitel "Kategorien verwalten").
  • Banner oder Hinweistexte, die per Widget an bestimmten Stellen im Theme platziert werden.
  • Wiederkehrende Textbausteine, die an mehreren Stellen im Shop identisch erscheinen sollen, ohne sie mehrfach pflegen zu müssen.

Aufbau eines Blocks

Jeder Block hat einen Block Title (nur intern sichtbar, zur eigenen Orientierung) und eine Block ID (den technischen Bezeichner, über den er referenziert wird, z. B. in einer Kategorie oder per Layout-XML) sowie den eigentlichen Content im WYSIWYG-Editor.

Einbindung

Nach dem Anlegen binden Sie den Block auf drei Wegen ein: direkt in einer Kategorie (Feld "Static Block" bei entsprechendem Display Mode), über ein Widget an einer beliebigen Stelle im Theme (siehe Kapitel "Widgets einsetzen"), oder – für Entwickler – direkt per Layout-XML über die Block ID. Auch Store-View-spezifische Versionen desselben Blocks sind möglich, wenn Sie mehrsprachige Inhalte an derselben Stelle benötigen.

Block aktivieren und deaktivieren

Jeder Block besitzt ein eigenes Feld Enable Block. Deaktivieren Sie einen Block hierüber, bleibt er im System erhalten – inklusive aller Referenzen aus Kategorien, Widgets oder Layout-XML –, wird an diesen Stellen aber schlicht nicht mehr ausgegeben. Das ist praktisch, um einen Block temporär auszublenden (z. B. eine saisonale Ankündigung), ohne die Einbindungen an anderer Stelle im Shop wieder entfernen und später neu einrichten zu müssen.

Store-View-spezifische Blockversionen

Im Bearbeitungsformular legt das Feld Store View fest, für welche Store Views ein Block gilt. Standardmäßig steht hier "All Store Views" – für mehrsprachige Inhalte legen Sie stattdessen für jede Sprache einen eigenen Block mit identischer Block ID, aber auf den jeweiligen Store View eingeschränkt an. Magento wählt dann automatisch die zur aktuellen Store View passende Version aus, ohne dass die Einbindung (Kategorie, Widget, Layout-XML) angepasst werden muss.

Blöcke in E-Mail-Vorlagen einbinden

Neben Kategorien, Widgets und Layout-XML lassen sich CMS-Blöcke auch in Transaktions-E-Mails einbinden: In den Vorlagen unter Marketing > Communications > Email Templates fügen Sie über die Direktive {{block id="ihre_block_id"}} den Inhalt eines Blocks in den E-Mail-Text ein – etwa für rechtliche Hinweise oder saisonale Zusatzinformationen, die zentral gepflegt werden sollen, statt sie in jeder E-Mail-Vorlage einzeln zu duplizieren.

Block-IDs sinnvoll benennen

Da die Block ID shopweit eindeutig sein muss und technischer Bezugspunkt für alle Einbindungen ist, lohnt sich von Anfang an eine klare Namenskonvention, z. B. footer_oeffnungszeiten oder kategorie_hinweis_versand. Praxis-Tipp: Vermeiden Sie generische IDs wie "block1" oder "text" – bei wachsender Blockanzahl wird sonst schnell unklar, wo ein Block tatsächlich eingebunden ist, und versehentliches Überschreiben oder doppelte Anlage werden wahrscheinlicher.

Weiterlesen

Blog verwalten (Magefan)

<div class="prose prose-hyva max-w-none"><p>Wie Sie im Magefan-Blog neue Beiträge erstellen, Kategorien vergeben und Beiträge veröffentlichen.</p><p>Magento bringt selbst keinen Blog mit – die weit verbreitete Lösung ist die kostenlose Erweiterung <strong>Magefan Blog</strong>, in diesem Projekt erreichbar unter <em>Content &gt; Magefan Blog &gt; Posts</em>.</p> <h3>Einen Beitrag anlegen</h3> <ol> <li>Unter <strong>Add New Post</strong> Titel, URL-Key und den eigentlichen Beitragstext (per WYSIWYG-Editor) eingeben.</li> <li>Eine oder mehrere <strong>Blog Categories</strong> zuweisen, damit der Beitrag in der passenden Rubrik erscheint.</li> <li>Ein <strong>Featured Image</strong> hochladen – erscheint in der Blog-Übersicht und häufig als Social-Media-Vorschaubild (Open Graph).</li> <li>Unter dem Tab "Search Engine Optimization" Meta Title und Meta Description setzen.</li> </ol> <img loading="lazy" src="{{media url=wysiwyg/handbuch/1kapitel/newpage7kategorie_1.png}}" alt="Beitrag" /> <img loading="lazy"src="{{media url=wysiwyg/handbuch/1kapitel/displaysettings7kategorie.png}}" alt="settings" /> <h3>Veröffentlichung planen</h3> <p>Mit <strong>Enable Post</strong> aktivieren Sie den Beitrag; über <strong>Publish Date</strong> lässt sich die Veröffentlichung auch in die Zukunft terminieren – der Beitrag bleibt bis zu diesem Zeitpunkt unsichtbar, auch wenn er bereits gespeichert ist.</p> <h3>Blog-Kategorien und -Autoren</h3> <p>Blog-Kategorien selbst verwalten Sie unter <em>Content &gt; Magefan Blog &gt; Categories</em> – strukturell ähnlich wie normale Produktkategorien (eigener URL-Key, eigene Meta-Tags), aber komplett unabhängig vom Produktkatalog. Unter <em>Content &gt; Magefan Blog &gt; Authors</em> lassen sich zusätzlich Autorenprofile mit Namen, Foto und Kurzbiografie anlegen, die dann jedem Beitrag zugeordnet werden können.</p> <h3>Mehrsprachigkeit im Blog</h3> <p>Da Magefan-Blog-Beiträge (anders als Kategorien) pro Sprache eine eigene, separate Zeile in der Datenbank sind, braucht jeder Beitrag pro Store View eine eigene Version mit eigenem URL-Key – die Verknüpfung zwischen den Sprachversionen desselben Beitrags erfolgt über einen gemeinsamen Gruppenschlüssel, damit der Sprachwechsel nicht auf eine 404-Seite führt.</p> <h3>Tags vergeben</h3> <p>Unter <em>Content &gt; Magefan Blog &gt; Tags</em> verwalten Sie eine shopweite Tag-Liste, die – anders als die hierarchischen Blog-Kategorien – eher lockere, themenübergreifende Schlagworte abbildet (z. B. "Ratgeber", "Praxistipps"). Im Post-Editor weisen Sie einem Beitrag über das Feld <strong>Tags</strong> beliebig viele davon zu; neue Tags lassen sich meist direkt beim Schreiben eines Beitrags anlegen, ohne vorher in die Tag-Verwaltung wechseln zu müssen.</p> <h3>Kommentare moderieren</h3> <p>Nutzerkommentare zu Beiträgen laufen über <em>Content &gt; Magefan Blog &gt; Comments</em> zusammen. Von hier aus lassen sich eingehende Kommentare vor der Veröffentlichung prüfen, freigeben oder ablehnen – wichtig, um Spam und unpassende Inhalte von der Storefront fernzuhalten, bevor sie öffentlich sichtbar werden. Ob Kommentare überhaupt aktiv sind und wie sie sich verhalten, wird über die allgemeine Blog-Konfiguration gesteuert (siehe unten).</p> <h3>Kurztext für Übersichtsseiten</h3> <p>Neben dem vollständigen <strong>Content</strong> gibt es im Post-Editor ein separates Feld für einen <strong>Short Content</strong>. Dieser kürzere Anrisstext wird auf der Blog-Übersichtsseite, in "Recent Posts"-Widgets und ähnlichen Teaser-Darstellungen angezeigt, während der volle Beitragstext erst auf der Einzelansicht erscheint. Praxis-Tipp: Pflegen Sie den Kurztext bewusst redaktionell statt ihn automatisch aus den ersten Zeilen des Contents generieren zu lassen – so lässt sich der Teaser gezielt auf Neugier statt auf den Fließtext-Einstieg optimieren.</p> <img loading="lazy" src=" src="{{media url=wysiwyg/handbuch/1kapitel/shortcontent7kategorie.png}}" alt="shortcontent" /> <h3>Blog-Grundeinstellungen</h3> <p>Übergeordnete Einstellungen für den gesamten Blog finden sich unter <em>Stores &gt; Configuration &gt; Magefan Blog</em>. Dort lässt sich der Blog grundsätzlich aktivieren oder deaktivieren, die Anzahl der Beiträge pro Übersichtsseite festlegen sowie steuern, ob Kommentare shopweit überhaupt zugelassen sind und ob ein RSS-Feed für den Blog angeboten wird. Änderungen hier wirken sich global auf alle Store Views aus, sofern nicht auf Store-View-Ebene abweichend konfiguriert wurde.</p></div>
Weiterlesen

Widgets einsetzen

<div class="prose prose-hyva max-w-none"><p>Wie Sie Widgets (z. B. Produktkarussells oder CMS-Blöcke) an bestimmten Stellen im Shop platzieren.</p><p>Widgets (<em>Content &gt; Elements &gt; Widgets</em>) sind das Werkzeug, um dynamische oder statische Inhalte an genau definierten Stellen im Theme einzublenden, ohne selbst Layout-XML schreiben zu müssen.</p> <h3>Verfügbare Widget-Typen</h3> <p>Der genaue Umfang hängt vom installierten Theme/den Modulen ab, üblich sind aber u. a.: <strong>CMS Static Block</strong> (einen bestehenden CMS-Block einbetten), <strong>Catalog Products List</strong> (eine Produktliste nach Kriterien wie Kategorie oder Bestseller), <strong>Catalog New Products List</strong> (kürzlich hinzugefügte Produkte), <strong>Catalog Category Link</strong> und <strong>Catalog Product Link</strong> (einzelne Verlinkungen), sowie <strong>Recently Viewed/Compared Products</strong>.</p> <h3>Ein Widget einrichten</h3> <ol> <li>Unter <strong>Add Widget</strong> zunächst den <strong>Widget Type</strong> wählen.</li> <li>Das <strong>Design Theme</strong> auswählen, für das das Widget gelten soll.</li> <li>Unter <strong>Storefront Properties</strong> Anzeigename und Sortierpriorität setzen.</li> <li>Unter <strong>Widget Options</strong> die konkreten Inhalte festlegen (z. B. welcher CMS-Block oder welche Produkte, inkl. Filterkriterien wie Kategorie oder Anzahl).</li> <li>Unter <strong>Layout Updates</strong> festlegen, WO das Widget erscheint: auf welchem Seitentyp (z. B. nur Kategorieseiten, nur Startseite), optional weiter eingegrenzt auf bestimmte Kategorien/Produkte, und in welchem Layout-Container (z. B. "Sidebar Additional" oder "Content Top").</li> </ol> <img loading="lazy" src="{{media url=wysiwyg/handbuch/1kapitel/widget7kategorie.png}}" alt="Widget" /> <h3>Typische Beispiele</h3> <p>Ein Produktkarussell mit "Neu im Sortiment" auf der Startseite, ein Info-Banner nur auf bestimmten Kategorieseiten, oder ein CMS-Block mit Öffnungszeiten im Footer. Da Widgets über die Backend-Oberfläche konfiguriert werden, sind sie eine gute Möglichkeit, Inhalte platzieren zu können, ohne Entwicklerzugriff auf die Theme-Dateien zu brauchen – allerdings ist der Container/Block-Name, in den ein Widget eingehängt wird, themeabhängig und lässt sich nicht beliebig frei wählen.</p> <h3>Widgets direkt im Text einfügen</h3> <p>Neben der Platzierung über <strong>Layout Updates</strong> gibt es einen zweiten, oft übersehenen Weg: Im WYSIWYG-Editor einer CMS-Seite oder eines CMS-Blocks öffnet der Button <strong>Insert Widget</strong> denselben Auswahldialog wie bei der Widget-Instanz-Erstellung. Das gewählte Widget wird dabei als Platzhalter-Direktive direkt an der Cursor-Position in den Content eingefügt – nützlich, wenn ein Widget nicht an einer festen Layout-Stelle, sondern mitten im Fließtext erscheinen soll (z. B. ein Produktkarussell zwischen zwei Absätzen einer Landingpage).</p> <h3>Feingranulare Seiteneinschränkung</h3> <p>Im Bereich <strong>Layout Updates</strong> der Widget-Instanz steuert die Auswahl unter <strong>Display On</strong>, je nach gewähltem Widget-Typ, wie präzise die Anzeige eingegrenzt wird – von "All Pages" über "Specified Page" bis zu differenzierteren Optionen wie nur auf Anker-Kategorieseiten (mit Unterkategorien) oder nur auf Nicht-Anker-Kategorieseiten. Erst darunter lässt sich die Auswahl per Mehrfachauswahl weiter auf konkrete Kategorien oder Produkte einschränken. Praxis-Tipp: Testen Sie nach dem Speichern immer eine betroffene und eine nicht betroffene Seite – falsch gewählte Display-On-Optionen sind eine der häufigsten Ursachen dafür, dass ein Widget "einfach nicht erscheint".</p> <h3>Reihenfolge mehrerer Widgets im selben Bereich</h3> <p>Landen mehrere Widget-Instanzen im gleichen Layout-Container (z. B. zwei Banner in "Content Top"), bestimmt das Feld <strong>Sort Order</strong> unter Storefront Properties, in welcher Reihenfolge sie ausgegeben werden – niedrigere Werte erscheinen zuerst. Ohne bewusst gesetzte Sortierung hängt die Ausgabereihenfolge von der internen Anlage-Reihenfolge ab, was bei mehreren Redakteuren schnell zu einer unvorhersehbaren Anzeige führen kann.</p></div>
Weiterlesen