Site Templates

KickStarter auf bestehender Website nutzen

Füge KickStarter-CSS-Variablen und PHP-Helper sicher zu einer bestehenden Kadence-Website hinzu, indem du Styles und Funktionen überträgst, ohne das Child Theme zu installieren.

Überblick

Füge die Typografie, Abstände und Helper-Funktionen von KickStarter zu einer bestehenden Kadence-Website hinzu, indem du das CSS und PHP kopierst, statt das Starter-Template zu installieren. So bleiben deine aktuellen Inhalte und dein Design erhalten, während du das globale System von KickStarter übernimmst.

Installiere das KickStarter-Child-Theme niemals auf einer bestehenden Live-Website. KickStarter ist ein Starter-Template. Wenn du es direkt installierst, überschreibst du deine aktuellen Inhalte, Theme-Einstellungen und Konfigurationen. Übertrage die Funktionen immer manuell.

Für eine vollständige Übersicht über den Umfang von KickStarter lies die zentrale Seite KickStarter sowie die Feature-Guides wie Typografie & Clamp-Funktionen, Fluid Spacing, Border Radius, Card Framework, Blog Post Styling und Functions.php Features.

Bevor du startest

Erstelle ein vollständiges Backup deiner bestehenden Website, bevor du Änderungen vornimmst. Dieses Backup sollte deine Datenbank, die Dateien des aktiven Themes (und Child Themes) sowie die Customizer-Einstellungen umfassen.

Wenn beim Bearbeiten von CSS oder functions.php etwas schiefgeht, stell dein Backup wieder her, um die Website in den vorherigen Zustand zurückzubringen.

Zwei Wege, um auf den KickStarter-Code zuzugreifen

Du benötigst Zugriff auf die Dateien style.css und functions.php von KickStarter und optional auf die Styling-Block-Vorschau. Nutze dafür entweder das direkte Entpacken der Dateien oder eine Sandbox-Installation.

Lade die KickStarter-.zip-Datei aus deinem WP Templater Account herunter. Entpacke sie auf deinem Computer und öffne style.css und functions.php in einem Code- oder Texteditor wie VS Code, Sublime Text oder Notepad++.

Kopiere das CSS und PHP aus diesen Dateien, während du die folgenden Schritte durchgehst. Dies ist der schnellste Weg, wenn du nur den Code benötigst und keine Live-Styling-Block-Vorschau brauchst.

Bereite deine bestehende Website vor

Bereinige widersprüchliche Styles, bevor du KickStarter-CSS einfügst. So verhinderst du, dass alte Einstellungen die neuen globalen Variablen überschreiben.

Kadence-Typografie-Einstellungen zurücksetzen

Setze die integrierten Typografie-Steuerungen von Kadence zurück, sodass sie nicht mit den Clamp-Funktionen von KickStarter kollidieren.

Typografie-Einstellungen öffnen

Gehe auf deiner bestehenden Website zu Appearance → Customize → General → Typography.

Alle Texttypen zurücksetzen

Verwende das Zurücksetzen-Symbol neben jeder Einstellung für H1–H6, Body-Text und alle weiteren Texttypen. Entferne Schriftgrößen, Zeilenhöhen und verwandte Werte.

Responsive Überschreibungen zurücksetzen

Prüfe bei jeder Typografie-Einstellung die Tabs für Tablet und Mobil und setze auch diese Überschreibungen zurück. Lass die Felder leer, damit die globalen Clamp-Werte von KickStarter greifen können.

Wenn du bestehende Werte stehen lässt, überschreiben diese die Clamp-Funktionen des Systems Typografie & Clamp-Funktionen, und deine Typografie skaliert nicht wie vorgesehen.

Vorhandenes Custom-CSS entfernen

Überprüfe und bereinige Custom-CSS, das die globalen Regeln von KickStarter dupliziert oder mit ihnen kollidiert.

Additional CSS prüfen

Öffne Appearance → Customize → Additional CSS. Suche nach Styles, die Typografie, Abstände oder Layout steuern und künftig von KickStarter global gehandhabt werden.

Konfliktträchtige Regeln entfernen oder auskommentieren

Lösche oder kommentiere (/* ... */) Regeln, die Schriftgrößen, Zeilenhöhen, Farben, Padding, Margins oder Layout-Eigenschaften setzen, die in das System von KickStarter überführt werden sollten. Wenn du unsicher bist, kommentiere Regeln zunächst aus, statt sie zu löschen, damit du sie bei Bedarf zurückholen kannst.

Kopiere vor Änderungen den gesamten Inhalt von Additional CSS in eine Textdatei. So hast du eine sichere Referenz, falls du später einzelne Regeln wiederherstellen musst.

Block-Level-Styling in Beiträgen und Seiten entfernen

KickStarter setzt auf globale Styles. Block-spezifische Überschreibungen verhindern, dass diese Globals greifen.

Prüfe wichtige Seiten und Beiträge auf:

Direkt in den Blockeinstellungen gesetzte Schriftgrößen, Zeilenhöhen oder Farben (zum Beispiel bei Paragraph oder Advanced Heading).
Eigene CSS-Klassen, die Blöcken zugewiesen wurden und eigene Typografie oder Abstände mitbringen.
Block-spezifisches Custom CSS unter Advanced → Custom CSS in Row-Layout- und Section-Blöcken, das Typografie, Abstände oder Layout hart kodiert.

Entferne oder neutralisiere diese, damit die globalen KickStarter-Variablen das Design steuern können. Wenn ein Block in seinen Einstellungen eine konkrete Schriftgröße hat, setzt sich diese gegen jede globale Clamp-Funktion durch.

Geh bei großen Websites zunächst die wichtigsten Seiten durch: Startseite, Leistungen, Über-uns, Kontakt. Arbeite dich dann nach und nach durch die weiteren Seiten.

KickStarter-CSS in Stufen übertragen

Die Styles von KickStarter befinden sich in Appearance → Customize → Additional CSS auf der Sandbox oder in style.css, wenn du die Dateien entpackt hast. Übertrage sie abschnittsweise in den Customizer deiner bestehenden Website.

Füge niemals die komplette KickStarter-CSS-Datei auf einmal in deine Live-Seite ein. Arbeite in klar abgegrenzten Abschnitten und teste nach jeder Stufe, damit du Konflikte schnell erkennen und beheben kannst.

Schritt 1: Typografie-Basis

Kopiere den Typografie-Bereich aus dem KickStarter-CSS. Dieser umfasst die Variablen für die Clamp-Funktionen und deren Anwendung auf H1–H6, Body-Text, Icon-Listen und verwandte Elemente.

Füge diesen Abschnitt in Appearance → Customize → Additional CSS auf deiner bestehenden Website ein.

Prüfe danach:

Öffne Appearance → Customize → General → Typography.
Vergewissere dich, dass du die Schriftgrößen- und Zeilenhöhenwerte für H1–H6 und Body-Text einschließlich Tablet- und Mobil-Überschreibungen zurückgesetzt hast.
Durchstöbere mehrere Frontend-Seiten und prüfe, ob Überschriften, Fließtext und Listen über die Website hinweg stimmig aussehen.

Wenn dein bisheriger Designer in Additional CSS, seitenbezogenem CSS oder im blockbezogenen Custom CSS !important bei Schriftgrößen oder Zeilenhöhen verwendet hat, überschreiben diese Regeln die KickStarter-Variablen. Nutze die Browser-DevTools (F12), um Elemente mit falscher Darstellung zu inspizieren und nachzuverfolgen, welche CSS-Regel sich durchsetzt.

Schritt 2: T-Shirt-Größen und Zeilenhöhen

Sobald die Basis-Typografie stabil wirkt, überträgst du die T-Shirt-Größen-Neudefinitionen (SM–3XL) und die Zeilenhöhenwerte von KickStarter.

Füge diese in Additional CSS direkt unterhalb des Typografie-Bereichs ein. Lade nach jedem logischen Block das Frontend neu und überprüfe Überschriften, Buttons und Textblöcke, die diese Größen nutzen.

Konzentriere dich auf Seiten, auf denen du die T-Shirt-Größensteuerungen von Kadence einsetzt, um zu prüfen, ob sie nun mit dem System Typografie & Clamp-Funktionen von KickStarter übereinstimmen.

Schritt 3: Border-Radius-Variablen

Kopiere den globalen Border-Radius-Bereich aus KickStarter (die CSS-Variablen für die Radii SM, MD und LG) und füge ihn in Additional CSS nach den Typografie-Abschnitten ein.

Prüfe im Frontend:

Buttons und Formularfelder.
Cards und Feature-Boxen.
Bilder und andere abgerundete Elemente.

Vergewissere dich, dass diese die erwarteten Radii verwenden und weiterhin zu deiner Marke passen, während sie vom System Border Radius profitieren.

Schritt 4: Spacing-Tokens

Übertrage die globalen Spacing-Tokens aus KickStarter, einschließlich:

Padding am Inhaltsrand.
Abschnitts-Padding.
Container-Abstände.
Der Kadence-Spacingskala, die das fluides Spacing steuert.

Füge diesen Abschnitt unterhalb der Border-Radius-Variablen ein. Durchstöbere anschließend deine wichtigsten Seiten und prüfe:

Ob Abschnitte nicht zu gedrängt oder übermäßig weit auseinander liegen.
Ob Stapel von Blöcken die Regeln von Fluid Spacing respektieren.
Ob keine unerwarteten Layout-Verschiebungen auftreten.

Wenn du unerwartete Änderungen siehst, such nach hart kodierten Padding- oder Margin-Werten an bestimmten Blöcken und bereinige diese, damit die Spacing-Tokens ihre Aufgabe erfüllen können.

Schritt 5: Verbleibende Styles und Utilities

Übertrage zum Schluss die übrigen CSS-Abschnitte nacheinander, zum Beispiel:

Eyebrow-Heading-Styles und Helper-Klassen.
Card-Styles, die an das Card Framework gekoppelt sind.
Blogpost-Abstände und Verfeinerungen aus Blog Post Styling.
Utility-Klassen und zusätzliche Layout-Helper.

Nach jedem Unterabschnitt:

Füge ihn in Additional CSS ein.
Lade eine repräsentative Auswahl an Seiten neu (Blogbeiträge, Leistungsseiten, Archive).
Prüfe, ob es keine Regressionen oder offensichtlichen Konflikte mit alten Layouts gibt.

Wenn du in kleinen Schritten arbeitest, bleibt die Fehlersuche überschaubar, und du kannst jederzeit stoppen und nachsteuern, falls ein bestimmter Abschnitt stark mit früheren Anpassungen kollidiert.

KickStarter-PHP-Funktionen übertragen

Die Datei functions.php von KickStarter enthält Helper-Funktionen, etwa zum Laden der Customizer-CSS in den Block-Editor oder zum Deaktivieren von E-Mail-Benachrichtigungen zu Auto-Updates. Kopiere diese Funktionen über ein Child Theme oder ein Snippet-Plugin in den Code deiner bestehenden Website.

Ort wählen, an dem du die Funktionen einfügst

Option A: Child Theme verwenden

Wenn deine Website bereits ein Child Theme nutzt, öffne Appearance → Theme File Editor und wähle das Child Theme aus. Bearbeite die Datei functions.php und scrolle nach unten.

Suche in der functions.php von KickStarter die KickStarter-Sektionsmarkierung (in allen Versionen ab 1.4 vorhanden) und kopiere alles unterhalb dieser Markierung. Füge diesen Block am Ende der functions.php deines Child Themes ein.

Option B: Code-Snippet-Plugin verwenden

Wenn du kein Child Theme verwendest, bearbeite die Dateien des Parent Themes nicht direkt. Installiere stattdessen ein Snippet-Plugin wie Fluent Snippets, WPCode oder Code Snippets.

Erstelle ein neues Snippet, füge den Inhalt der KickStarter-functions.php ab der Sektionsmarkierung ein und aktiviere es global auf der Website. Dieser Ansatz übersteht Theme-Updates und hält die Logik getrennt von den Theme-Dateien.

Eine detaillierte Beschreibung, was jede Helper-Funktion macht, findest du unter Functions.php Features.

Erstelle immer ein Backup, bevor du PHP bearbeitest oder hinzufügst. Ein Syntaxfehler in functions.php oder in einem Snippet-Plugin kann deine Website offline nehmen. Stell in diesem Fall das Backup wieder her oder deaktiviere das fehlerhafte Snippet per FTP oder über den Dateimanager deines Hostings.

Troubleshooting

Selbst mit sorgfältiger Vorbereitung enthalten bestehende Websites häufig ältere Workarounds und Überschreibungen. Nutze diese Kontrollen, um Probleme einzugrenzen.

Styles greifen nicht wie erwartet

Wenn KickStarter-Variablen scheinbar nicht wirken, prüfe an drei Stellen nach höher priorisierten CSS-Regeln:

Customizer → Additional CSS unter Appearance → Customize → Additional CSS auf Regeln, die Typografie, Abstände oder Layout setzen und weiterhin Konflikte verursachen könnten.
Row-Layout-/Section-Blöcke → Custom CSS unter Advanced → Custom CSS in den Blöcken, die in den betroffenen Bereichen verwendet werden.
Page Scripts → Custom CSS and JS (nur Kadence Blocks Pro) auf seitenbezogene Regeln, die globale Styles überschreiben.

Nutze die Browser-DevTools (F12), um ein Element mit falscher Darstellung zu inspizieren, und verfolge die Cascade, um die Regel zu finden, die sich durchsetzt, insbesondere solche mit !important.

Typografie sieht auf Mobilgeräten falsch aus

Wenn Überschriften oder Fließtext auf Tablet oder Mobil nicht korrekt aussehen:

Öffne erneut Appearance → Customize → General → Typography und prüfe, ob du alle Tablet- und Mobil-Überschreibungen zurückgesetzt hast.
Suche in Additional CSS, Page Scripts oder im blockbezogenen Custom CSS nach mobil-spezifischen CSS-Klassen oder Media Queries, die kleinere Viewports gezielt ansprechen.

Sobald du diese Überschreibungen entfernst, können die responsiven Clamp-Werte des Systems Typografie & Clamp-Funktionen die Skalierung steuern.

Abschnitte wirken nach dem Hinzufügen von CSS kaputt

In älteren Setups haben Designer häufig Spacer-Blöcke, hart kodiertes Padding oder versteckte Blöcke genutzt, um Layouts zu erzwingen. Wenn du globale Abstände und Card-Styles einführst, können diese Workarounds als ungewöhnliche Lücken oder Fehlanordnungen sichtbar werden.

Geh bei problematischen Abschnitten so vor:

Entferne unnötige Spacer-Blöcke und ersetze feste Werte durch die Spacing-Tokens von KickStarter.
Entferne hart kodierte Padding- oder Margin-Werte, wenn eine globale Variable dieselbe Aufgabe übernimmt.
Passe ältere Inhalte so an, dass sie mit den Systemen Fluid Spacing und Card Framework harmonieren.

Rechne damit, einige Seiten nachzujustieren; im Gegenzug erhältst du ein saubereres, besser wartbares Design, das auf künftige Änderungen gut reagiert.

Zusammenfassung der wichtigsten Grundsätze

Behalte diese Regeln im Kopf, während du KickStarter auf einer bestehenden Website einsetzt:

Installiere das KickStarter-Child-Theme niemals direkt auf einer Live-Seite; übertrage die Funktionen manuell.
Erstelle und überprüfe immer ein vollständiges Backup, bevor du beginnst.
Bereite deine Website vor, indem du Typografie zurücksetzt und widersprüchliches CSS sowie Block-Level-Overrides bereinigst.
Übertrage CSS in Stufen: Typografie-Basis, T-Shirt-Größen und Zeilenhöhen, Border-Radius, Spacing-Tokens und anschließend die übrigen Styles.
Prüfe nach jeder Stufe mehrere Frontend-Seiten, um sicherzustellen, dass die Styles wie vorgesehen greifen.
Spüre !important-Überschreibungen auf und entferne sie, wo sie mit den globalen Variablen von KickStarter kollidieren.
Füge PHP-Helper über die functions.php eines Child Themes oder ein Code-Snippet-Plugin hinzu, niemals durch direkte Bearbeitung des Parent Themes.

Sobald du diese Schritte abgeschlossen hast, profitiert deine bestehende Kadence-Website von der globalen Typografie, den Abständen und den Helper-Funktionen von KickStarter, ohne dass du deine aktuelle Struktur oder Inhalte verlierst.

Was this page helpful?

Last updated 4 days ago

Built with Documentation.AI