Bausteine & CTAs
Kleinteile, die in andere Module hineingesetzt werden: die fünf Button-Stufen und die Highlight-Tags. Sie sind keine eigenständigen Module und brauchen deshalb auch keine volle Seitenbreite – hier stehen sie kompakt nebeneinander, damit man sie vergleichen kann. Die Stufen sind hierarchisch gedacht: Ein Button wirkt über den Abstand zu den Buttons daneben, nicht über sein Aussehen. Deshalb gibt es pro Bildschirmabschnitt nur einen Primary.
CTA Super Primary
rrg/cta-super-primary
Die lauteste Button-Stufe: größte Fläche, stärkster Kontrast.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »CTA Super Primary«
- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
+ So richtig einsetzen
- Nur für die eine Hauptaktion einer Kampagnenseite, typisch »Angebot anfragen«.
! Achtung
- Höchstens einmal pro Seite. Die Stufe wirkt allein dadurch, dass sie die Ausnahme ist – zweimal eingesetzt ist sie ein normaler Button.
CTA Primary
rrg/cta-primary
Der Standard-Button für die Hauptaktion eines Abschnitts – gefüllte Fläche.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »CTA Primary«
- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
+ So richtig einsetzen
- Ein Primary pro Bildschirmabschnitt. Er markiert den Weg, den die meisten gehen sollen.
- Beschriftung als Handlung formulieren: »Probefahrt vereinbaren« statt »Mehr«. Am Button entscheidet sich, ob geklickt wird – dafür muss vorher klar sein, was danach passiert.
- Auf schwarzem Grund muss nichts umgestellt werden: Das CSS dreht die Farben innerhalb dunkler Container automatisch um.
! Achtung
- Zwei Primary nebeneinander heben die Hierarchie auf, dann ist keiner mehr die Hauptaktion. Für den zweiten Weg eines der leiseren Pattern nehmen: CTA Secondary, CTA Tertiary oder CTA Outline.
CTA Secondary
rrg/cta-secondary
Textlink mit Unterstrich – die leisere Alternative zum gefüllten Button.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »CTA Secondary«
- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
+ So richtig einsetzen
- Für die Nebenaktion neben einem Primary, wenn ein zweiter gefüllter Button zu laut wäre.
- Immer über dieses Pattern einsetzen. Der Textlink sieht schlicht aus, hängt aber an einer eigenen Stufe im Button-System – von Hand nachgebaut sieht er nur so ähnlich aus.
- Auf dunklem Grund zusätzlich .inverted setzen, sonst steht dunkler Text auf dunklem Grund.
! Achtung
- Nicht als einzige Aktion eines Abschnitts. Steht dieser Textlink allein, sieht die wichtigste Handlung der Seite aus wie eine Nebensache.
CTA Tertiary
rrg/cta-tertiary
Pfeil-Textlink ohne Unterstrich – die leiseste Stufe im Button-System.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »CTA Tertiary«
- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
+ So richtig einsetzen
- Für Nebenwege: Downloads, Detailseiten, »Alle Angebote ansehen«.
- Immer über dieses Pattern einsetzen – der Pfeil und sein Abstand kommen aus dem Button-System und lassen sich nicht sauber nachbauen.
- Bewusst leise: Er soll gefunden werden, wenn jemand ihn sucht, und sonst nicht stören.
! Achtung
- Nicht für Conversion-Ziele. Wer eine Anfrage will, nimmt Primary – ein leiser Button bekommt auch leise Zahlen.
CTA Outline
rrg/cta-outline
Umrandeter Button ohne Füllfläche – für Bildhintergründe und Cover.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »CTA Outline«
- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
- Gut zu wissen
- In der Vorschau steht der Button auf dunklem Grund, weil das Pattern Schrift und Rahmen fest auf Weiß setzt.
+ So richtig einsetzen
- Im Header neben dem Primary. Die Umrandung funktioniert auf Bildern, wo eine volle Fläche das Motiv zudecken würde.
- Die Stufe steckt im Block-Stil »Outline«, den das Pattern schon mitbringt – in der Blockleiste unter »Stile« sichtbar.
- Innerhalb dunkler Container (Cover, schwarzer Hintergrund) stellt das CSS die Farbe von Markenfarbe auf Weiß um – von Hand ist dort nichts zu setzen.
! Achtung
- Dieses Pattern bringt Textfarbe und Rahmen fest auf Weiß mit und ist deshalb nur auf dunklem Grund einsetzbar. Auf hellem Grund ist es unsichtbar – dort in den Blockeinstellungen Text- und Rahmenfarbe zurücksetzen, dann greift automatisch die Markenfarbe.
- Auf unruhigen Bildern ist die dünne Linie schlecht zu sehen. Dann lieber Primary nehmen oder das Bild abdunkeln.
Tag Highlights
rrg/tag-highlights
Reihe kleiner Tags für Angebots-Highlights.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Tag Highlights«
- Struktur
- offen – der Aufbau lässt sich im Editor verändern
+ So richtig einsetzen
- Innerhalb von Tab Offers oder direkt unter einem Angebot, als schnelle Aufzählung der Vorteile.
- Drei bis fünf Tags mit je zwei bis drei Wörtern. Tags werden überflogen – ganze Sätze funktionieren in dieser Form nicht.
! Achtung
- Keine Preise in die Tags: Ein Tag hat keinen Platz für die Fußnotenziffer, und ohne die darf der Preis nicht stehen.
Header & Einstieg
Das erste Modul einer Seite. Genau eines davon pro Seite, immer ganz oben. Der Header bringt die H1 mit – deshalb verträgt eine Seite auch nur einen.
Header Pages
rrg/header-pages
Der Standard-Seitenkopf: vollflächiges Cover-Bild mit Headline, Copy und bis zu zwei CTAs.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Header Pages«
- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
+ So richtig einsetzen
- Der Regel-Header für alle normalen Inhaltsseiten. Kampagnenseiten bekommen stattdessen den Campaign-Header, weil dort der Leadform-Einstieg schon eingebaut ist.
- Die Headline ist die H1 der Seite. Genau eine H1 pro Seite, weil Google daraus das Hauptthema liest – zwei H1 machen dieses Signal unklar.
- Bild mindestens 2000px breit und Motiv mittig: Das Cover wird je nach Bildschirmbreite links und rechts beschnitten. Ein Motiv am Rand ist auf dem Handy weg.
- Höchstens zwei CTAs, einer davon Primary. Bei zwei gleich lauten Buttons entscheidet sich niemand – der zweite wird Outline.
! Achtung
- Kein zweiter Header weiter unten auf derselben Seite: Das Pattern bringt seine H1 mit, die dann doppelt wäre.
nach oben
Brand Page Intro
rrg/brand-page-intro
Zentrierter Intro-Textblock unter dem Header – Headline plus einleitender Absatz.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Brand Page Intro«
- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
+ So richtig einsetzen
- Direkt unter dem Header von Markenseiten (Renault, Dacia, Alpine). Er fängt den Sprung vom Bild in den Inhalt ab.
- Zwei bis vier Sätze. Das ist der Einleitungstext, aus dem Google das Thema der Seite liest – nicht die Markenbroschüre.
- Überschrift als H2 belassen: Die H1 sitzt schon im Header darüber.
! Achtung
- Nicht als allgemeiner Textabsatz irgendwo mitten auf der Seite verwenden. Das Pattern hat feste Abstände nach oben, die nur direkt unter dem Header aufgehen.
nach oben
Campaign-Header
rrg/campaign-header
Kampagnen-Kopf mit Cover, Fakten-Leiste, Kampagnen-Flag und direkt eingebautem Leadform-Einstieg.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Campaign-Header«
- Shortcode
[contact-form-7 id="00900ec" title="Campaign-Form_neu"]- JS-Modul
initLeadFormsCampaignsNeuNeu.js – lädt app.js automatisch nach, sobald das Modul auf einer Seite steht- Nur auf Template
- Campaigns NEU NEU
- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
- Gut zu wissen
- Der Angebots-Button öffnet das Leadform-Overlay. Das funktioniert ausschließlich auf dem Template »Campaigns NEU NEU« – auf jeder anderen Seite passiert beim Klick nichts.
+ So richtig einsetzen
- Nur auf Kampagnenseiten (Template »Campaigns NEU NEU«). Auf normalen Seiten fehlt drumherum die Leadform-Logik, die dieser Header voraussetzt.
- Die Flag ist das Kampagnen-Label (»Nur bis 31.12.«, »Aktion«). Höchstens drei Wörter – sie sitzt schräg über dem Bild und wird bei mehr Text unleserlich.
- Der Angebots-Button gehört zum Pattern und öffnet das Leadform-Overlay. Nur seine Beschriftung ändern – ein selbst eingesetzter Button an seiner Stelle öffnet nichts und meldet auch keinen Fehler.
- Die Fakten-Leiste nimmt drei bis vier Kernwerte auf (Preis, Laufzeit, Verfügbarkeit). Sie beantwortet die Frage »lohnt sich Weiterlesen?«, bevor jemand scrollt.
! Achtung
- Jeder Preis in der Fakten-Leiste braucht eine Fußnotenziffer und den zugehörigen Pflichttext am Seitenende. Ein Preis ohne Konditionen ist wettbewerbsrechtlich angreifbar.
- Die Seite muss im WP Rocket vom Page-Cache ausgenommen werden, sonst läuft die CF7-Nonce des Leadforms ab.
nach oben
Teaser & Content-Module
Die Arbeitspferde im Seitenverlauf. Frei kombinierbar, aber nicht beliebig oft: Jedes Modul wirkt über seinen Kontrast zum Nachbarn. Stehen drei ähnliche hintereinander, hört man auf hinzusehen.
Schmaler farbiger Hinweisstreifen mit Überschrift und Text, ohne Button.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Störer A«
- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
+ So richtig einsetzen
- Für kurze Hinweise im Lesefluss – Serviceinfo, geänderte Öffnungszeiten, Hinweis auf eine laufende Aktion.
- Höchstens zwei Zeilen Text. Der Störer unterbricht bewusst; wird er lang, ist er kein Hinweis mehr, sondern ein Absatz mit farbigem Hintergrund.
! Achtung
- Nur einer pro Seite. Zwei Unterbrechungen heben sich gegenseitig auf – dann fällt keine mehr auf.
nach oben
Wie Störer A, aber mit CTA Secondary.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Störer B«
- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
+ So richtig einsetzen
- Immer dann, wenn der Hinweis ein Klickziel hat. Hat er keins, reicht Störer A – ein Button ins Leere enttäuscht.
! Achtung
- Nicht direkt neben oder über einen Primary-CTA setzen. Zwei Handlungsaufforderungen nebeneinander teilen die Aufmerksamkeit, statt sie zu bündeln.
nach oben
Teaser A Grid
rrg/teaser-a-grid
Teaser-Raster mit mehreren gleichwertigen Karten (Bild, Headline, Text, CTA).
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Teaser A Grid«
- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
+ So richtig einsetzen
- Für drei bis sechs gleichrangige Ziele, typisch eine Angebotsübersicht. Gleichrangig heißt: Es ist inhaltlich egal, welche Karte geklickt wird.
- Alle Bilder im gleichen Seitenverhältnis, sonst starten die Headlines auf unterschiedlicher Höhe und das Raster wirkt schief.
- Textlängen über alle Karten angleichen: Die Karten sind gleich hoch, ein kurzer Text erzeugt darin ein sichtbares Loch.
! Achtung
- Nicht mit nur zwei Karten – das Raster ist auf drei Spalten ausgelegt, bei zwei Karten bleibt rechts eine Lücke stehen. Für zwei Ziele ist Teaser B das richtige Modul.
nach oben
Zweispaltiger Teaser, Bild und Text nebeneinander.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Teaser B«
- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
+ So richtig einsetzen
- Für ein Thema, das mehr Platz braucht, als eine Karte im Raster hergibt.
- Mehrere Teaser B untereinander im Bildwechsel setzen – erst Bild links, dann rechts, dann wieder links. Sonst entsteht eine harte Kante aus lauter Bildern auf einer Seite.
! Achtung
- Höchstens drei hintereinander. Danach sieht jeder Abschnitt gleich aus und das Auge überspringt sie.
nach oben
Bild links, Textspalte rechts auf weißem Grund mit Icon, Überschrift und CTA Primary.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Teaser C«
- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
- Gut zu wissen
- Das Icon ist ein Bild-Block im Pattern: austauschen ja, löschen nein – ohne Icon fehlt dem Modul sein Erkennungsmerkmal.
+ So richtig einsetzen
- Für Erklärstücke zu einem konkreten Merkmal. Das Icon benennt das Thema (Getriebe, Antrieb, Garantie) und macht schon vor dem Lesen klar, worum es geht.
- Icon aus dem Renault-Group-Set, 48px, als SVG. Andere Icons brechen die Bildsprache, und als PNG werden sie auf Retina-Displays unscharf.
- Genau ein CTA am Ende – der Teaser erklärt eine Sache und hat deshalb auch nur ein Ziel.
! Achtung
- Ohne Icon fehlt dem Pattern sein Erkennungsmerkmal, und es sieht aus wie ein schlecht gebauter Teaser B. Dann lieber gleich Teaser B nehmen.
nach oben
Aktions-Karten
rrg/aktion-cards
Aktionskarten mit Badge, Bild, Subline und Trennlinie – für zeitlich befristete Angebote.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Aktions-Karten«
- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
- Gut zu wissen
- Weitere Karten entstehen durch Duplizieren einer bestehenden Karte, nicht durch Nachbauen.
+ So richtig einsetzen
- Das Badge trägt die Befristung (»Nur im August«, »Solange der Vorrat reicht«). Ohne Frist wirkt eine Aktion beliebig, und beliebige Angebote werden aufgeschoben.
- Enddatum gleich beim Anlegen notieren, damit später klar ist, wann die Karte wieder raus muss.
- Der CTA ist bewusst Secondary: Die Karte zieht mit Badge und Bild schon genug Aufmerksamkeit. Ein Primary obendrauf würde mit dem Haupt-CTA der Seite konkurrieren.
! Achtung
- Abgelaufene Aktionen löschen statt umdatieren. Ein Preis, der nicht mehr gilt, aber noch online steht, ist abmahnfähig.
nach oben
Crosslinks A
rrg/crosslinks-a
Verweisblock »Das könnte Ihnen weiterhelfen« mit Links auf verwandte Seiten.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Crosslinks A«
- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
+ So richtig einsetzen
- Ans Seitenende, nach dem eigentlichen Inhalt. Der Block ist ein Angebot an alle, die fertig gelesen haben und noch nicht gefunden haben, was sie suchten.
- Drei bis vier Ziele, die thematisch wirklich zum Text passen. Je unpassender die Auswahl, desto mehr wirkt der Block wie Werbung und wird übersprungen.
- Sprechende Linktexte verwenden (»Dacia Bigster als Automatik« statt »hier klicken«): Google wertet den Linktext als Beschreibung der Zielseite – er hilft also der Seite, auf die er zeigt.
! Achtung
- Nicht auf die Startseite oder auf Seiten aus der Hauptnavigation verlinken. Die erreicht jeder ohnehin über das Menü, der Link ist dort also verschenkt. Der Block soll genau die tiefer liegenden Seiten sichtbar machen, die sonst niemand findet.
nach oben
Animated Cols
rrg/animated-cols
Mehrspaltiger Block mit Scroll-Animation, typischerweise für Markenstorytelling.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Animated Cols«
- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
+ So richtig einsetzen
- Für erzählende Abschnitte auf Marken- und Über-uns-Seiten, wo es aufs Lesen ankommt und nicht auf einen schnellen Klick.
- Pro Spalte ein Gedanke: Die Spalten blenden sich nacheinander ein, zwei Themen in einer Spalte gehen dabei unter.
! Achtung
- Nicht auf Seiten, deren Ziel eine Anfrage ist. Die Animation hält die Aufmerksamkeit im Text fest, statt sie zum Formular zu führen.
- Nicht direkt unter dem Header: Der Block ist beim Laden zunächst unsichtbar und blendet sich erst beim Scrollen ein. Im sofort sichtbaren Bereich sieht das aus wie ein Ladefehler.
nach oben
Dacia Garantie
rrg/dacia-garantie
Vollbreiter Garantie-Hinweisblock für Dacia.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Dacia Garantie«
- Struktur
- offen – der Aufbau lässt sich im Editor verändern
+ So richtig einsetzen
- Nur auf Dacia-Seiten – die Garantiebedingungen unterscheiden sich je Marke.
- Der Block ist auf volle Breite angelegt und gehört deshalb nicht in eine Spalte.
! Achtung
- Garantiebedingungen ändern sich. Vor der Übernahme auf eine neue Seite mit dem aktuellen Stand abgleichen: Ein veralteter Garantiezeitraum ist eine Zusage, die RRG einhalten müsste.
nach oben
Kundenversprechen
rrg/kundenversprechen
Die RRG-Kundenversprechen als Icon-Text-Reihe.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Kundenversprechen«
- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
+ So richtig einsetzen
- Ins untere Seitendrittel, kurz vor den Footer. Dort hat jemand den Inhalt gelesen und fragt sich, ob er bei RRG richtig ist – genau darauf antwortet der Block.
- Die Formulierungen sind abgestimmt und stehen seitenübergreifend gleich. Wer sie pro Seite anpasst, macht aus einem Versprechen eine unverbindliche Floskel.
! Achtung
- Nicht zusammen mit »Warum RRG« auf einer Seite – beide beantworten dieselbe Frage, hintereinander wirken sie wie eine Wiederholung.
nach oben
Vier-Argumente-Block (Händler, Auswahl, Lieferung, deutschlandweit) auf dunklem Grund.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Warum-RRG«
- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
- Gut zu wissen
- Die vier Spalten sind inhaltlich gesetzt und werden weder umformuliert noch ergänzt.
+ So richtig einsetzen
- Die zentrale Vertrauensstrecke – gehört auf Startseite, Markenseiten und Kampagnenseiten, also überall dorthin, wo jemand zum ersten Mal auf RRG trifft.
- Die vier Argumente sind abgestimmt und bleiben, wie sie sind. »Deutschlands einziger Händler in Renault-Besitz« ist eine Alleinstellungsaussage: Wer sie umformuliert, macht daraus schnell eine Werbeaussage, die so nicht mehr belegt ist.
! Achtung
- Genau einmal pro Seite. Ein Alleinstellungsargument, das zweimal auf derselben Seite steht, klingt nach Behauptung statt nach Fakt.
nach oben
News Query
rrg/news-query
Automatischer News-Block – zieht die neuesten Beiträge per Query-Loop.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »News Query«
- JS-Modul
initSlider.js – lädt app.js automatisch nach, sobald das Modul auf einer Seite steht- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
+ So richtig einsetzen
- Startseite und News-Übersicht.
- Der Block zieht automatisch. Hier wird nichts von Hand gepflegt, und genau das ist der Vorteil: Er kann nicht veralten.
! Achtung
- Mindestens drei veröffentlichte Beiträge nötig, sonst bleiben im Raster sichtbar Plätze leer.
nach oben
Fahrzeuge & Angebote
Alles, was Fahrzeuge, Preise oder Leasingkonditionen zeigt. Hier hängt Recht dran: Sobald ein konkretes Modell mit Preis gezeigt wird, sind Pflichttext und WLTP-Werte keine Kür, sondern Vorschrift (Pkw-EnVKV, PAngV).
Fahrzeugzeile: Bild, Modellname, Chips mit Eckdaten, Preisangabe und CTA-Gruppe.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Car Row«
- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
- Gut zu wissen
- Die Eckdaten-Pillen gehören zum Pattern: Text ändern ja, weitere durch Duplizieren.
+ So richtig einsetzen
- Für eine redaktionell gesetzte Modellauswahl. Echte Bestandsfahrzeuge kommen aus Carbando – die ändern sich täglich und dürfen nicht von Hand gepflegt werden.
- Chips nur für harte Fakten (Antrieb, Getriebe, Verbrauch). Sie werden überflogen, nicht gelesen – ganze Sätze funktionieren darin nicht.
- Die drei CTA-Stufen sind absichtlich gestaffelt: Primary zum Konfigurieren, Secondary für die Probefahrt, Outline für Details. So ist auf einen Blick klar, welches der Hauptweg ist.
! Achtung
- Jede Preisangabe braucht eine Fußnotenziffer und den zugehörigen Pflichttext am Seitenende. Ein Preis ohne Konditionen ist wettbewerbsrechtlich angreifbar.
- Sobald ein konkretes Modell mit Preis gezeigt wird, sind WLTP-Verbrauchs- und Emissionswerte Pflicht (Pkw-EnVKV) – unabhängig davon, wie kurz der Abschnitt ist.
nach oben
Car Row Erweitert
rrg/car-row-erweitert
Car Row mit zusätzlicher Detailebene – mehr Chips, mehr Konditionsangaben.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Car Row Erweitert«
- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
- Gut zu wissen
- Technisch dasselbe Modul wie Car Row – der Unterschied liegt allein im Inhalt.
+ So richtig einsetzen
- Wenn ein Modell in mehreren Varianten oder Finanzierungsformen nebeneinander steht und die Unterschiede sichtbar werden sollen.
- Ansonsten gelten dieselben Regeln wie bei Car Row.
! Achtung
- Höchstens vier Chips: Auf dem Handy stehen sie untereinander, und die Zeile wird sonst länger als der Bildschirm hoch ist.
- Pflichttext und WLTP-Werte wie bei Car Row – die zusätzlichen Konditionsangaben machen den Pflichttext eher länger, nicht kürzer.
nach oben
Carbando Widget
rrg/carbando-widget
Bindet den Carbando-Fahrzeugbestand ein und zeigt echte, sofort verfügbare Fahrzeuge.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Carbando Widget«
- Shortcode
[cars_campaign model="4377"]- JS-Modul
initCarbandoSlider.js – lädt app.js automatisch nach, sobald das Modul auf einer Seite steht- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
- Gut zu wissen
- Ohne Modell- oder Markenangabe im Shortcode bleibt das Modul leer.
+ So richtig einsetzen
- Wird über den Shortcode [cars_campaign model="…" brand="…"] gesteuert.
- Mindestens eines der beiden Attribute muss gesetzt sein. Ohne beide gibt der Shortcode bewusst gar nichts aus, statt den kompletten Bestand auf die Seite zu kippen.
- Die Werte müssen exakt der Carbando-Schreibweise entsprechen. Bei einem Tippfehler bleibt das Modul leer – ohne Fehlermeldung, weil der Filter schlicht nichts findet.
! Achtung
- Der Bestand kommt aus einem externen CDN und kann auch mal leer sein, wenn gerade kein passendes Fahrzeug verfügbar ist. Nach dem Einbau immer live nachsehen, im Editor sieht man nur einen Platzhalter.
- Ein Teil des Stylings kommt aus style-shop.css, nicht aus der Haupt-CSS. Sieht das Widget unformatiert aus, fehlt diese Datei auf der Seite.
nach oben
Quicksearch
rrg/quicksearch
Fahrzeug-Schnellsuche – der Einstieg in die Carbando-Suche.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Quicksearch«
- JS-Modul
initQuicksearch.js – lädt app.js automatisch nach, sobald das Modul auf einer Seite steht- Struktur
- offen – der Aufbau lässt sich im Editor verändern
- Gut zu wissen
- Beim ersten Klick ins Suchfeld lädt zusätzlich das Carbando-Widget nach – deshalb reagiert die erste Eingabe verzögert.
+ So richtig einsetzen
- Auf der Startseite und auf Übersichtsseiten, also dort, wo jemand noch sucht und sich nicht schon entschieden hat.
- Wird per Lazy-JS nachgeladen (initQuicksearch.js, initQuickSearchDropdown.js). Im Editor sieht man deshalb nur einen Platzhalter, nicht das fertige Feld.
! Achtung
- Nur einmal pro Seite. Das Modul arbeitet mit festen IDs – ein zweites Vorkommen erzeugt doppelte IDs, und das JavaScript greift dann auf das falsche Feld zu.
- Nicht auf Kampagnenseiten: Dort soll der Weg ins Leadform führen, nicht in die freie Fahrzeugsuche.
nach oben
Tab Offers
rrg/tab-offers
Angebots-Tabs: mehrere Leasing- oder Finanzierungsangebote, per Reiter umschaltbar.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Tab Offers«
- JS-Modul
initTabOffers.js – lädt app.js automatisch nach, sobald das Modul auf einer Seite steht- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
- Gut zu wissen
- Die Angebots-Buttons öffnen das Leadform-Overlay und funktionieren nur auf dem Template »Campaigns NEU NEU«.
+ So richtig einsetzen
- Das zentrale Modul auf Kampagnenseiten mit mehreren Konditionen. Die Reiter sparen Seitenlänge, weil nicht jedes Angebot untereinander ausgeschrieben werden muss.
- Pro Reiter ein Angebot: Überschrift = Kondition, Unterzeile = Modell, darunter die Highlights und der CTA.
- Die Angebots-Buttons gehören zum Pattern und öffnen das Leadform-Overlay. Nur die Beschriftung ändern, nicht durch eigene Buttons ersetzen.
- Zwei bis vier Reiter. Ab fünf klickt sich niemand mehr durch, und die hinteren Angebote werden faktisch nie gesehen.
! Achtung
- Jede hochgestellte Ziffer in der Überschrift (»149 €¹«) braucht den zugehörigen Pflichttext am Seitenende. Fehlt er, steht dort ein Preis ohne Bedingungen.
- Das wichtigste Angebot gehört in den ersten Reiter: Die anderen sind zwar im Quelltext, aber erst nach einem Klick sichtbar.
- Das Modul wird per Lazy-JS (initTabOffers.js) initialisiert. Nach einem Deploy den WP-Rocket-Cache leeren, sonst lädt der Browser weiter die alte Datei.
nach oben
Finanzierungstabelle
rrg/finance-options-table
Vergleichstabelle der Finanzierungsformen (Leasing, Finanzierung, Barkauf) mit Konditionen.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Finanzierungstabelle«
- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
+ So richtig einsetzen
- Auf Beratungs- und Kampagnenseiten, wenn die Finanzierungsarten direkt gegenübergestellt werden sollen.
- Die Spaltenköpfe entsprechen der Taxonomie »Finanzierungsart«. Gleiche Bezeichnungen verwenden, damit Seiteninhalt und Filterung dasselbe Vokabular benutzen.
! Achtung
- Alle Zahlen sind Beispielrechnungen und brauchen den vollständigen Pflichttext mit Laufzeit, Anzahlung und effektivem Jahreszins.
- Auf dem Handy scrollt die Tabelle seitlich weg. Die erste Spalte bleibt stehen und muss deshalb auch allein verständlich sein.
nach oben
Standorte & Marken
Module, die auf Händler, Standorte oder Markenwelten verweisen. Sie ziehen ihre Inhalte automatisch – gepflegt wird an der Quelle, nicht im Modul.
Markenwelt
rrg/markenwelt
Logo-Galerie der drei Marken (Dacia, Renault, Alpine), jeweils auf die Markenseite verlinkt.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Markenwelt«
- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
- Gut zu wissen
- Die drei Logos liegen fest. Anzupassen sind nur die Links, falls sich ein Marken-Slug ändert.
+ So richtig einsetzen
- Als Verteiler auf Übersichts- und Einstiegsseiten, solange noch nicht klar ist, für welche Marke sich jemand interessiert.
- Die Logos sind gesetzte SVG-Dateien. Anzupassen sind nur die Links, falls sich ein Marken-Slug ändert.
! Achtung
- Nicht auf einer Markenseite selbst einsetzen: Eines der drei Logos verweist dann auf die Seite zurück, auf der man schon steht.
nach oben
Slider Standorte
rrg/slider-standorte
Slider mit den Autohäusern, gefiltert nach Marke – basiert auf dem Shortcode [rrg_standorte].
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Slider Standorte«
- Shortcode
[rrg_standorte brand="renault"]- JS-Modul
initSlider.js – lädt app.js automatisch nach, sobald das Modul auf einer Seite steht- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
- Gut zu wissen
- Die Überschrift über dem Slider gehört zum Pattern und ist frei änderbar. Die Karten selbst kommen automatisch aus den Standort-Seiten.
+ So richtig einsetzen
- Marke im Shortcode setzen: [rrg_standorte brand="renault"], alternativ dacia, alpine oder all.
- Auf einer Markenseite immer die passende Marke filtern statt »all«. Sonst stehen dort Autohäuser, die diese Marke gar nicht führen.
! Achtung
- Die Standorte sind Unterseiten der Händlerseite. Ein neuer Standort, der woanders im Seitenbaum hängt, taucht im Slider nicht auf – auch dann nicht, wenn die Marke richtig gesetzt ist.
- Der Slider braucht initSlider.js. Nach einem JS-Deploy den WP-Rocket-Cache leeren.
nach oben
Formulare & Leads
Alles, was Kontaktdaten einsammelt. Wichtigster Punkt: Seiten mit Leadform gehören im WP Rocket auf die Cache-Ausnahmeliste. Aus dem Cache kommt eine abgelaufene CF7-Nonce, und der Versand scheitert dann still – der Nutzer sieht kein Problem, der Lead kommt trotzdem nie an.
Newsletter Quicksignup
rrg/newsletter-quicksignup
Kompakte Newsletter-Anmeldung (Shortcode [newsletter_quicksignup]).
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Newsletter Quicksignup«
- Shortcode
[newsletter_quicksignup]- Struktur
- gesperrt – nur Texte und Bilder sind änderbar, der Aufbau bleibt stehen
+ So richtig einsetzen
- Im unteren Seitendrittel oder auf der Newsletter-Seite.
- Ein Feld, ein Button – bewusst minimal, weil jedes zusätzliche Pflichtfeld die Anmeldequote messbar senkt.
! Achtung
- Das Double-Opt-in läuft über das Newsletter-System, nicht über CF7. Nach Änderungen einmal komplett durchtesten, inklusive Bestätigungsmail – die abgeschickte Anmeldung allein sagt nichts.
nach oben
Pre-Leadform: Angebot anfragen
rrg/preleadform-angebot
Vorschaltmodul »Angebot jetzt anfragen« – führt ins eigentliche Leadform-Overlay.
- Einfügen
- Block-Inserter → Patterns → Kategorie RRG → »Pre-Leadform: Angebot anfragen«
- Struktur
- offen – der Aufbau lässt sich im Editor verändern
+ So richtig einsetzen
- Auf Kampagnen- und Angebotsseiten, üblicherweise direkt nach dem Angebotsblock: Dort ist die Kaufabsicht am höchsten.
- Die übergebenen Felder folgen der dd_-Konvention (dd_vehicle_make, dd_financing_type …), weil Dealer Desk sie nur unter genau diesen Namen zuordnen kann.
! Achtung
- Die Seite muss im WP Rocket vom Page-Cache ausgenommen werden. Aus dem Cache kommt eine abgelaufene CF7-Nonce, und der Versand scheitert dann still – der Nutzer bekommt davon nichts mit.
- Nach jeder Änderung einen echten Testlead absenden und im Dealer Desk nachsehen. Ein Formular, das im Frontend »Danke« sagt, hat noch nichts bewiesen.
nach oben
Shortcodes
Drei Shortcodes stehen im Editor zur Verfügung. In der Regel nutzt man sie nicht direkt, sondern über das Pattern, das sie schon enthält – dort sind Umgebung und Styling gleich mitgeliefert.
[rrg_standorte brand="renault"]- Listet die Autohäuser einer Marke.
brand: renault, dacia, alpine oder all; img_size optional (Standard: standort-card). Gezogen werden die Unterseiten der Händlerseite – ein Standort, der woanders im Seitenbaum hängt, erscheint nicht.
[cars_campaign model="…" brand="…"]- Bindet den Carbando-Fahrzeugbestand ein. Mindestens eines der Attribute muss gesetzt sein, sonst gibt der Shortcode bewusst nichts aus, statt den gesamten Bestand zu zeigen. Die Schreibweise muss exakt Carbando entsprechen – sonst bleibt das Modul kommentarlos leer.
[newsletter_quicksignup]- Kompaktes Newsletter-Anmeldeformular, ein Feld plus Button.
JS-Module (lazy)
Diese Module liegen in /prod/lazy/ und werden von app.js erst nachgeladen, wenn das passende Element auf der Seite tatsächlich vorkommt. Wer ein Pattern einsetzt, bekommt das Modul automatisch dazu – einbinden muss man nichts. Deshalb sieht man im Editor auch oft nur einen Platzhalter.
initSlider.js- Allgemeiner Slider, unter anderem für den Standorte-Slider.
initContentSlider.js- Slider für Content-Karten im Fließtext.
initGallerySlider.js- Bildergalerie als Slider.
initLeistungenSlider.js- Slider für die Leistungsübersicht.
initCarbandoSlider.js- Slider für Carbando-Fahrzeugkarten.
initTabOffers.js- Reiter-Logik für das Pattern Tab Offers.
initStandorte.js- Händlersuche inklusive Umkreislogik.
googleMapsLoader.js- Lädt Google Maps erst nach einer Interaktion – spart Ladezeit und vermeidet unnötige Datenübertragung.
initQuicksearch.js, initQuickSearchDropdown.js- Fahrzeug-Schnellsuche und ihr Dropdown.
initFahrzeugkonfigurator.js- Konfigurator auf dem gleichnamigen Template.
initLeadFormsStandorte.js, initLeadFormsCampaignsNeuNeu.js- Leadform-Logik für Standort- beziehungsweise Kampagnenseiten.
Seiten-Templates
Auswählbar rechts in den Seiteneigenschaften unter »Vorlage«. Ohne Auswahl greift das Standard-Template.
- Campaigns NEU NEU
- Kampagnenseiten mit Leadform, Tab Offers und Kampagnen-Header. Muss im WP Rocket vom Cache ausgenommen werden, sonst scheitert der Formularversand still.
- Standort
- Einzelne Autohaus-Seite. Muss als Unterseite der Händlerseite angelegt werden, sonst taucht sie weder im Slider noch in der Händlersuche auf.
- Haendler
- Übersicht aller Autohäuser mit Suche.
- Carbando
- Fahrzeugsuche und -bestand. Lädt zusätzlich
style-shop.css.
- Fahrzeugkonfigurator
- Einstieg in den Konfigurator.
- Karrierepages
- Stellenanzeigen von onapply.de, extern nachgeladen.
- Newsletter
- Anmeldeseite mit vollem Formular.
- Handtuchseite (Pattern-Übersicht)
- Diese Seite. Setzt sich automatisch auf noindex, weil ein interner Styleguide mit echten Preisen und Headlines sonst als doppelter Inhalt im Index landen würde.
Breakpoints
Alle Breakpoints sind max-width-Regeln – es wird also von groß nach klein gedacht: Der Desktop-Zustand ist der Ausgangspunkt, jeder Breakpoint beschreibt eine Verkleinerung.
| Name | max-width | Geräte |
|---|
smartphone | 780px | Smartphones |
tablet-portrait | 1024px | iPad mini, Tablets hochkant |
tablet-landscape | 1280px | iPad Pro quer |
laptop | 1440px | 13–15" Notebooks |
desktop | 1920px | normale Desktop-Monitore |
Grundregeln für den Seitenaufbau
- Ein Header pro Seite, ganz oben, mit genau einer H1 – Google liest daraus das Hauptthema der Seite.
- Ein Primary-CTA pro Bildschirmabschnitt. Ein Button wirkt über den Abstand zu den Buttons daneben, nicht über sein Aussehen. Alles Weitere wird Secondary, Tertiary oder Outline.
- Kein Preis ohne Fußnote. Jede Preisangabe braucht ihre Ziffer und den zugehörigen Pflichttext am Seitenende – sonst steht dort ein Angebot ohne Bedingungen.
- Abgelaufene Aktionen entfernen, nicht umdatieren. Ein Preis, der nicht mehr gilt, aber noch online steht, ist abmahnfähig.
- Module kommen aus dem Inserter. Alles, was auf dieser Seite steht, ist ein fertiges Pattern: Block-Inserter öffnen, Kategorie RRG, Modul auswählen. Von Hand nachgebaut sieht ein Modul nur so ähnlich aus – Abstände, Farbverhalten auf dunklem Grund und teilweise auch die Funktion hängen an Dingen, die man nicht sieht.
- Patterns nicht auseinandernehmen. Die meisten sind gesperrt: Texte und Bilder tauschen ist vorgesehen, den Aufbau verändern nicht. Fehlt etwas, das es als Modul nicht gibt, ist das eine Frage an die Entwicklung – kein Fall für Eigenbau.
- Seiten mit Leadform gehören im WP Rocket auf die Cache-Ausnahmeliste, sonst läuft die CF7-Nonce ab und der Versand scheitert, ohne dass es jemand merkt.
- Nach jedem Deploy von JS oder CSS den WP-Rocket-Cache leeren – sonst liefert der Browser weiter die alte Datei aus, und die Änderung sieht aus, als hätte sie nicht funktioniert.
