Die Standard-Kommentare in WordPress wirken oft wie aus einer anderen Zeit: zu dominante Überschriften, miniaturhafte Checkboxen, unklare Abstände. Mit einem klaren CSS-Set und zwei kleinen Snippets in der functions.php bringst du die Elementor Kommentarfunktion optisch und inhaltlich auf Kurs.
Unten findest du alles blockweise, in sinnvoller Reihenfolge, mit Kurz-Erklärung nach jedem Block. Ergänze im Beitrag zwei Bilder: vorher und nachher.
Zielbild und Vorgehen beim Styling der Elementor Kommentarfunktion
Du erreichst konsistente Typografie, saubere Abstände, bessere Bedienbarkeit mobil und eine Thread-Darstellung, die Kommentare wirklich lesbar macht. Vorgehen: Zuerst CSS global einbinden (Elementor Website-Einstellungen oder Child-Theme style.css). Danach die PHP-Snippets in die functions.php des Child-Themes. Caches leeren, hart neu laden, mobil prüfen.
Wenn du beim Styling der Elementor Kommentarfunktion Hilfe benötigst, nimm gerne Kontakt zu uns auf.
Wichtig: ich habe den gesamten Code in das Elementor-Kommentarmodul eingebaut, also bei Custom CSS nur für dieses Element. Dort funktioniert es bei mir tadellos.
CSS-Redesign: Block für Block
/* Button */
input[type="submit"] {
font-family: Montserrat, sans-serif !important;
font-size: 17px !important;
font-weight: bold !important;
background-color: var(--e-global-color-primary) !important;
color: white !important;
border-radius: 6px !important;
text-transform: none !important;
padding: 10px 15px !important;
border: none !important;
}Was passiert: Vereinheitlicht Typo, Größe, Farbe, Radius, Padding für den Absende-Button.
Vorteil: Klarer Call-to-Action, sofort on-brand. Der Button der Elementor Kommentarfunktion ist der Einzige, das wars also mit diesem Teil.
Button Hover
input[type="submit"]:hover {
background-color: var(--e-global-color-accent) !important;
}Was passiert: Wechsel auf Akzentfarbe beim Hover.
Vorteil: Deutliches Feedback, höherer Klickanreiz.
URL-Feld optisch wie Textfeld
/* URL-Feld als normales Textfeld behandeln */
#commentform input[type="url"] {
-webkit-appearance: textfield !important;
-moz-appearance: textfield !important;
appearance: textfield !important;
}Was passiert: Nimmt dem URL-Feld die abweichende Browser-Optik.
Vorteil: Ruhiges, konsistentes UI.
Checkboxen
/* Checkbox größer mit Akzentfarbe und korrekter Rahmenfarbe */
input[type="checkbox"] {
width: 20px !important;
height: 20px !important;
accent-color: var(--e-global-color-accent) !important;
border: 2px solid #00000017 !important;
}
Was passiert: größere Klickfläche, farbige Markierung.
Vorteil: Besser bedienbar mobil, visuell klar.
Eingabefelder
/* Alle Eingabefelder - weißer Hintergrund und korrekter Border */
#comment,
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"] {
font-size: 17px !important;
width: 100% !important;
box-sizing: border-box !important;
background-color: white !important;
border-width: 1px !important;
border-color: #00000017 !important;
}
Was passiert: einheitliche Größe, volle Breite, dezente 1-Px-Rahmen.
Vorteil: Saubere Optik, keine Layoutsprünge.
Fokuszustände
/* Focus/Active States - kein schwarzer Rand */
#comment:focus,
#comment:active,
#commentform input[type="text"]:focus,
#commentform input[type="text"]:active,
#commentform input[type="email"]:focus,
#commentform input[type="email"]:active,
#commentform input[type="url"]:focus,
#commentform input[type="url"]:active {
background-color: white !important;
border-width: 2px !important;
border-color: #00000017 !important;
outline: none !important;
box-shadow: none !important;
}
Was passiert: Entfernt grelle Outlines, hebt den Border dezent auf 2 px an.
Vorteil: Ruhiges Look-and-Feel bei erhaltener Erkennbarkeit.
Formular-Layout
/* Kommentarform Layout - kein Grid */
#commentform {
display: block !important;
}
Was passiert: Erzwingt Block-Flow statt Grid/Flex.
Vorteil: Vorhersehbare Reihenfolge von Label und Feld.
Vertikaler Rhythmus
/* Normale P-Elemente mit Abstand */
p.comment-form-author,
p.comment-form-email,
p.comment-form-url,
p.comment-form-comment,
p.form-submit {
margin-bottom: 20px !important;
}
Was passiert: einheitlicher Abstand zwischen den Formelementen.
Vorteil: Bessere Lesbarkeit und Scanbarkeit.
Datenschutz-Checkbox
/* Datenschutz-Checkbox Zeile - Checkbox links, Text rechts */
p.comment-form-cookies-consent {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
margin-bottom: 20px !important;
}
p.comment-form-cookies-consent input[type="checkbox"] {
margin-top: 3px !important;
flex-shrink: 0 !important;
}
p.comment-form-cookies-consent label {
font-family: Inter, sans-serif !important;
font-weight: normal !important;
line-height: 1.5 !important;
margin: 0 !important;
}
Was passiert: Checkbox und Text stehen sauber in einer Zeile; ruhige Lesefont.
Vorteil: Kompakter Consent-Block, schnell verstanden.
Labels
/* Labels über den Feldern */
#commentform label {
display: block !important;
margin-bottom: 5px !important;
font-weight: bold !important;
}
Was passiert: Labels stehen oberhalb mit klarer Zuordnung.
Vorteil: Schnelles Scannen, weniger Fehler.
Reply-Titel
/* Reply-Titel gleiche Font und Größe wie Button */
#reply-title,
.comment-reply-title {
font-family: Montserrat, sans-serif !important;
font-weight: bold !important;
font-size: 17px !important;
}
Was passiert: Überschrift des Formulars typografisch vereinheitlicht.
Vorteil: Weniger Dominanz, mehr Konsistenz.
Alternative Abschnittstitel
/* Title-Comments gleiche Font wie Button */
.title-comments {
font-family: Montserrat, sans-serif !important;
font-weight: bold !important;
font-size: 17px !important;
}
Was passiert: optionale Titelklasse mit identischer Typo.
Vorteil: Einheitliche Headline-Optik in Kommentarbereichen.
Hinweise ausblenden
/* Hinweis-Text komplett ausblenden */
.comment-notes {
display: none !important;
}
Was passiert: Entfernt Standard-Hinweise vor/nach dem Formular.
Vorteil: Weniger Ablenkung, Fokus auf das Schreiben.
Kommentar-Wrapper neutralisieren
/* Kommentarbereich - KEIN zusätzliches Padding */
.comments-area,
section[id*="comment"],
.wp-block-comments {
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
background-color: transparent !important;
margin: 20px 0 !important;
}
Was passiert: Entfernt überflüssige Rahmen/Hintergründe des Containers.
Vorteil: Saubere Einbettung in dein Seitenlayout.
Einzelne Kommentare
/* Einzelne Kommentare - mit Innenabstand */
.comment,
li.comment,
article.comment {
border: none !important;
background-color: transparent !important;
padding: 20px 0 !important;
margin-bottom: 30px !important;
margin-left: 20px;
border-radius: 0 !important;
}
Was passiert: Jeder Kommentar bekommt Luft und einen leichten Versatz.
Vorteil: Klarere Trennung zwischen Beiträgen.
Antworten
/* Antworten auf Kommentare - nur 15px eingerückt */
.comment .children .comment {
margin-left: 15px !important;
margin-bottom: 25px !important;
}
Was passiert: Weitere Ebenen bleiben auf demselben Einzug.
Vorteil: Bleibt lesbar, bricht mobil nicht.
Kommentarlisten
/* Kommentar-Listen ohne eigene Ränder */
.comment-list,
ol.comment-list,
ul.comment-list {
border: none !important;
background-color: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
Was passiert: Entfernt Listenrahmen und Zusatzabstände.
Vorteil: Aufgeräumtes Gesamtbild.
PHP-Anpassungen in der functions.php: Block für Block
Standardtexte für das Kommentarformular
function custom_comment_form_defaults($defaults) {
$defaults['title_reply'] = 'Du möchtest diskuttieren? Schreib los!';
$defaults['title_reply_to'] = 'Antworten auf %s';
$defaults['label_submit'] = 'Kommentar absenden';
$defaults['comment_notes_before'] = '';
$defaults['comment_notes_after'] = '';
return $defaults;
}
add_filter('comment_form_defaults', 'custom_comment_form_defaults');
Was passiert: Überschrift, Antwort-Text, Button-Label gesetzt; Hinweisblöcke entfernt.
Vorteil: Knackige Texte, weniger Ballast, bessere Conversion.
Website-Feld als Textfeld behandeln
// URL-Feld als normales Textfeld behandeln
function change_website_field_to_text() {
add_filter('comment_form_default_fields', function($fields) {
$fields['url'] = str_replace('type="url"', 'type="text"', $fields['url']);
return $fields;
});
}
add_action('init', 'change_website_field_to_text');
Was passiert: Das Website-Feld wird als normales Textfeld ausgegeben.
Vorteil: Stabilere Darstellung, weniger strenge Browser-Validierung, weniger Abbrüche.
Kommentartext sauber umbrechen (lange Wörter & Links)
/* Kommentarinhalt auch umbrechen */
.comment-content,
.comment-text,
.comment p {
word-wrap: break-word !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
hyphens: auto !important;
max-width: 100% !important;
}Was passiert: Lange Wörter/URLs in Kommentaren werden weich umgebrochen, automatisch getrennt und bleiben innerhalb des Containers.
Vorteil: Kein horizontales Scrollen, keine kaputten Layouts – bessere Lesbarkeit auf Mobilgeräten.
Hinweis: Für saubere Silbentrennung setze das Sprach-Attribut korrekt (<html lang="de">). Wenn du Codeblöcke im Kommentarbereich nutzt, kannst du (optional) ein Überschreiben verhindern:
.comment-content pre,
.comment-text pre {
white-space: pre-wrap;
word-break: normal;
overflow-wrap: normal;
hyphens: manual;
}
Du möchtest nicht alles einzeln kopieren?
Hier nachfolgend der gesamte Code-Block für C&P 😉
/* Button */
input[type="submit"] {
font-family: Montserrat, sans-serif !important;
font-size: 17px !important;
font-weight: bold !important;
background-color: var(--e-global-color-primary) !important;
color: white !important;
border-radius: 6px !important;
text-transform: none !important;
padding: 10px 15px !important;
border: none !important;
}
input[type="submit"]:hover {
background-color: var(--e-global-color-accent) !important;
}
/* URL-Feld als normales Textfeld behandeln */
#commentform input[type="url"] {
-webkit-appearance: textfield !important;
-moz-appearance: textfield !important;
appearance: textfield !important;
}
/* Checkbox größer mit Akzentfarbe und korrekter Rahmenfarbe */
input[type="checkbox"] {
width: 20px !important;
height: 20px !important;
accent-color: var(--e-global-color-accent) !important;
border: 2px solid #00000017 !important;
}
/* Alle Eingabefelder - weißer Hintergrund und korrekter Border */
#comment,
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"] {
font-size: 17px !important;
width: 100% !important;
box-sizing: border-box !important;
background-color: white !important;
border-width: 1px !important;
border-color: #00000017 !important;
}
/* Focus/Active States - kein schwarzer Rand */
#comment:focus,
#comment:active,
#commentform input[type="text"]:focus,
#commentform input[type="text"]:active,
#commentform input[type="email"]:focus,
#commentform input[type="email"]:active,
#commentform input[type="url"]:focus,
#commentform input[type="url"]:active {
background-color: white !important;
border-width: 2px !important;
border-color: #00000017 !important;
outline: none !important;
box-shadow: none !important;
}
/* Kommentarform Layout - kein Grid */
#commentform {
display: block !important;
}
/* Normale P-Elemente mit Abstand */
p.comment-form-author,
p.comment-form-email,
p.comment-form-url,
p.comment-form-comment,
p.form-submit {
margin-bottom: 20px !important;
}
/* Datenschutz-Checkbox Zeile - Checkbox links, Text rechts */
p.comment-form-cookies-consent {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
margin-bottom: 20px !important;
}
p.comment-form-cookies-consent input[type="checkbox"] {
margin-top: 3px !important;
flex-shrink: 0 !important;
}
p.comment-form-cookies-consent label {
font-family: Inter, sans-serif !important;
font-weight: normal !important;
line-height: 1.5 !important;
margin: 0 !important;
}
/* Labels über den Feldern */
#commentform label {
display: block !important;
margin-bottom: 5px !important;
font-weight: bold !important;
}
/* Reply-Titel gleiche Font und Größe wie Button */
#reply-title,
.comment-reply-title {
font-family: Montserrat, sans-serif !important;
font-weight: bold !important;
font-size: 17px !important;
}
/* Title-Comments gleiche Font wie Button */
.title-comments {
font-family: Montserrat, sans-serif !important;
font-weight: bold !important;
font-size: 17px !important;
}
/* Hinweis-Text komplett ausblenden */
.comment-notes {
display: none !important;
}
/* Kommentarbereich - KEIN zusätzliches Padding */
.comments-area,
section[id*="comment"],
.wp-block-comments {
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
background-color: transparent !important;
margin: 20px 0 !important;
}
/* Einzelne Kommentare - mit Innenabstand */
.comment,
li.comment,
article.comment {
border: none !important;
background-color: transparent !important;
padding: 20px 0 !important;
margin-bottom: 30px !important;
margin-left: 20px;
border-radius: 0 !important;
}
/* Antworten auf Kommentare - nur 15px eingerückt */
.comment .children .comment {
margin-left: 15px !important;
margin-bottom: 25px !important;
}
/* Keine tiefere Verschachtelung */
.comment .children .children .comment {
margin-left: 15px !important;
}
/* Kommentar-Listen ohne eigene Ränder */
.comment-list,
ol.comment-list,
ul.comment-list {
border: none !important;
background-color: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
/* Kommentarinhalt auch umbrechen */
.comment-content,
.comment-text,
.comment p {
word-wrap: break-word !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
hyphens: auto !important;
max-width: 100% !important;
}Hier das Endergebnis:
Einbau, Test und Feinschliff
CSS komplett einfügen, dann die beiden PHP-Snippets ins Child-Theme. Caches leeren, hart neu laden. Mobil prüfen: Fokus, Einrückung, Kontrast, Klickziele.
Im Beitrag die beiden Bilder vorher/Nachher einfügen und die Keyword-Ausrichtung auf Elementor Kommentarfunktion beibehalten. So entsteht ein professioneller Artikel und gleichzeitig ein sofort wirksames Upgrade deiner Kommentar-UX.
