Theme Styles
Grundtypografie, Links, Formelemente und Fokuszustände global definieren. Sora für Überschriften und Mulish für Lesetext lokal in WordPress hosten.
Interne Anleitung · v1.6.1
Diese Seite ist eine Arbeitsanleitung für die spätere Umsetzung in Bricks. Sie gehört nicht in die öffentliche Navigation und bleibt auf der Live-Website auf noindex.
Grundprinzip
Wiederkehrende Werte und Muster gehören in Bricks in Theme Styles, Global Variables, Global Classes und Templates. Individuelle Seitengestaltung entsteht danach durch Komposition, Inhalt und gezielte Varianten.
Grundtypografie, Links, Formelemente und Fokuszustände global definieren. Sora für Überschriften und Mulish für Lesetext lokal in WordPress hosten.
Farben, Inhaltsbreite, Abstände, Radien und fluid skalierende Typografie zentral pflegen. Keine wiederholten Einzelwerte pro Seite.
Nur echte wiederkehrende Muster als globale Klassen anlegen: Container, Section, Eyebrow, Buttons, Editorial Row, Dark Section, FAQ, CTA und interne Implementierungsbereiche.
Header, Footer und 404 als Bricks Templates mit passenden Bedingungen umsetzen. Header sticky, aber ruhig und ohne unnötige Animation.
Gestaltungsrichtung
v1.4.0 führt die visuelle Richtung aus v1.3.0 fort und setzt bewusst stärker auf offene Inhaltszeilen, große Typografie, klare Flächenwechsel und einzelne visuelle Motive. Karten nur dort einsetzen, wo ein Inhalt tatsächlich als abgegrenzte Einheit verstanden werden soll.
Nutzerführung
Besucher sollen früh erkennen, ob sie richtig sind, was angeboten wird und wie der nächste sinnvolle Schritt aussieht. Auf Leistungsseiten deshalb direkt nach dem Hero die kurze Leistungsnavigation beibehalten.
H1 und Einstieg nennen die Leistung in natürlicher Sprache und erklären unmittelbar den Nutzen.
Verwandte Leistungen direkt erreichbar machen, ohne den Inhalt mit Navigationselementen zu überladen.
Arbeitsweise, Grenzen, Betreuung und später echte Referenzen sichtbar machen statt Marketingbehauptungen zu stapeln.
Pro Abschnitt höchstens einen dominanten CTA. Abschluss-CTA und Kontaktweg bleiben eindeutig.
Bewegung & Grafik
Parallax und Reveal-Effekte nur als leise Unterstützung einsetzen. Inhalte müssen ohne Animation vollständig verständlich und sichtbar bleiben.
Responsive
Die großen Desktop-Kompositionen dürfen mobil vereinfacht werden. Dekorative Hero-Mockups und Motive können auf kleinen Displays entfallen, wenn dadurch H1, Lead und CTA schneller erfassbar werden.
Große Typografie, asymmetrische Aufteilungen und viel Weißraum.
Komplexe Grids vereinfachen und visuelle Motive unter oder neben den Inhalt verschieben.
Einspaltig, kurze Wege, klare CTA-Reihenfolge. Dekoration nur behalten, wenn sie einen echten Mehrwert liefert.
Keine festen Inhalts-Höhen, kein abgeschnittener Text, sichtbarer Fokus und logischer Reflow.
SEO & SEOPress
Die sichtbare Seitenstruktur wird in Bricks semantisch nachgebaut. Metadaten, Canonicals, Robots, Social-Daten und gegebenenfalls Schema werden ausschließlich über SEOPress gepflegt.
Genau eine H1 pro Seite. H2/H3 logisch nach Inhalt einsetzen; keine Überschrift nur wegen ihrer Schriftgröße wählen.
Leistungsnavigation, Kontextlinks und CTA-Verweise erhalten. Ankertexte natürlich formulieren und nicht künstlich mit Keywords überladen.
Die grünen Arbeitsbereiche der Vorlage nicht öffentlich nachbauen. Ihre Werte in SEOPress übernehmen. Falls Bricks eigene parallele SEO/Open-Graph-Ausgaben aktiviert sind, Doppelungen vermeiden.
FAQs als echte Besucherhilfe beibehalten. FAQ-Schema nur einsetzen, wenn Inhalt und aktuelle Suchmaschinenrichtlinien dies sinnvoll machen; nicht automatisch allein wegen vorhandener Fragen.
Kontaktformular
Die mailto-Funktion der statischen Vorlage dient nur der Vorschau. In WordPress das Bricks Form Element mit serverseitiger Verarbeitung einsetzen, SMTP sauber konfigurieren und datensparsamen Spam-Schutz verwenden.
Barrierefreiheit
Landmarks, Überschriftenstruktur, Tastaturbedienung, Fokusdarstellung, ausreichende Kontraste, sinnvolle Alternativtexte und Reduced Motion bei der Übertragung nach Bricks vollständig erhalten.
Diese Hinweise entsprechen dem Stand v1.4.0 und sind die Zielstruktur für Bricks.
Hero mit klarer H1, kurzer Nutzenzeile und abstrakter Systemgrafik. Direkt danach vier kompakte Einstiege nach Besucherabsicht. Leistungen als offene redaktionelle Zeilen statt Kartenraster. Danach dunkler Schwerpunkt „Betreut statt abgegeben“, offener Prozess, persönlicher Abschnitt, FAQ und Abschluss-CTA.
Hero mit „Dein Ziel“ als Zentrum und verbundenen Leistungsbereichen. Danach offene Leistungszeilen statt dichtem Kartenraster.
Hero mit kompakter H1 „WordPress-Websites für kleine Unternehmen“, direkter Nutzenkommunikation und abstraktem Website-Motiv (Struktur/Inhalt/Mobil). Danach Leistungsnavigation plus Trust-Strip, offene Inhaltsbereiche, dunkle Checklisten-Section, Rechtstext-Abgrenzung, FAQ und CTA.
Hero mit WooCommerce-Suchintention und kreisförmigem Shop-Motiv (Produkt/Warenkorb/Zahlung/Versand). Der Text erklärt zuerst reale Shop-Prozesse statt Technik. Danach Trust-Strip, Shoplogik, schlanke technische Basis, Rechtstext-Hinweis, Ablauf, FAQ und CTA.
Hero mit WordPress-Betreuung und Orbit-Motiv rund um Updates, Backups, Monitoring und Änderungen. Betreuung als dauerhafte Zuständigkeit erklären. Danach Aufgaben, Nutzen und die drei Preispakete START (59 €/Monat), BUSINESS (89 €/Monat) und BUSINESS PLUS (149 €/Monat) als responsive 3-Spalten-Komponente umsetzen; auf Tablet/Mobil untereinander. Paketüberschriften, Preise, Leistungslisten und Hinweise als echten HTML-Text ausgeben. Danach Grenzen, FAQ und CTA.
Hero mit „SEO für kleine Unternehmen“ und Such-/Sichtbarkeitsmotiv. Inhalte über Technik, Struktur, Suchintention, Inhalte und Auswertung erklären; keine Rankingversprechen.
Hero mit Prozessgrafik Eingabe → Prüfen → Aktion → Ergebnis. Nutzen vor Technik, Automatisierung nur bei klarer Vereinfachung.
Seitenbezogene Umsetzung
Hero mit Kreislaufmotiv Planen/Starten/Pflegen/Weiterentwickeln. Produkt als dauerhafte Zusammenarbeit erklären, nicht als bloßes Wartungspaket. Nach dem Vergleich Einzelprojekt vs. laufend betreut die drei Pakete START (1.490 € + 59 €/Monat), BUSINESS (2.490 € + 89 €/Monat) und BUSINESS PLUS (ab 3.990 € + 149 €/Monat) als responsive 3-Spalten-Komponente aufbauen. Preise und Leistungslisten als echten HTML-Text ausgeben, nicht als Bild oder SVG.
Hero mit RT-Kern und den Begriffen direkt/verständlich/verantwortlich. Solo-Selbstständigkeit als kurzen Kommunikationsweg erklären; kein Agentur-Bashing.
Hero als reduzierte Dialoggrafik. Besucher brauchen noch kein fertiges Konzept; kurze Anfrage, direkter Rückweg und klares Formular.
Reduzierte Fehlerseite mit unterbrochenem Pfad als Motiv und eindeutigen Links zurück zur Website.
KI-Suche
Google verlangt für AI Overviews und AI Mode keine Sondertechnik; die normale SEO-Basis bleibt entscheidend. OpenAI benötigt für ChatGPT Search insbesondere Zugriff durch OAI-SearchBot.
Wichtige Aussagen müssen als sichtbarer HTML-Text im DOM stehen. Grafiken ergänzen den Inhalt, ersetzen ihn aber nicht.
Die Seite website-check.html nativ in Bricks nachbauen. Prüfbereiche als wiederverwendbare Karten umsetzen; keine automatischen Prüfergebnisse oder Konformitätsversprechen simulieren.
Barrierefreiheit
Bricks liefert semantische Elemente und benutzerdefinierte Attribute; diese Möglichkeiten aktiv nutzen, statt neutrale Div-Strukturen zu stapeln.
DSGVO & TDDDG
Die Vorlage lädt ausschließlich lokale Assets. Dieses Prinzip soll im Live-System beibehalten werden, soweit es fachlich möglich ist.
SEOPress
Doppelte Meta- oder Schema-Ausgaben durch Theme, Bricks-Erweiterungen oder andere Plugins vermeiden.