Um schreiben oder kommentieren zu können, benötigen Sie ein Benutzerkonto.
Sie haben schon ein Benutzerkonto? Melden Sie sich hier an.
Jetzt anmeldenHier können Sie ein neues Benutzerkonto erstellen.
Neues Benutzerkonto erstellen
Hallo,
in meinem WP Blog (benutze Elementor) möchte ich die Thumbnails in Recent Posts breiter machen, damit sie nicht so abgeschnitten wirken.
Der CSS-Code funktioniert nicht. Jemand eine Idee, was im code falsch ist? Danke im voraus :)
/* Blog / Recent Posts in Elementor größer darstellen */
.elementor-widget-container .elementor-post__thumbnail img {
width: 100%;
height: auto;
object-fit: cover; /* Zuschnitt ohne Verzerrung */
}
Hallo!
Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.
Du solltest die Darstellung der Einträge in den Blog Einstellungen Deines Themes OceanWP beeinflussen können, hier die OceanWP Dokumentation dazu.
hab jetzt diverse CSS codes ausprobiert. nix klappt.
Auch über die internen Einstellungen habe ich absolut keine Möglichkeit gefunden, die Grösse zu ändern.
auch das plugin Recent Posts Widget With Thumbnails ausprobiert ... das verschlimmberst das ganz, die Thumbnails werden verzert, aber nie grösser. Wieder deinstalliert.
weitere Variante ausprobiert - OHNE ERFOLG
css codes:
/* Elementor → WordPress-Widget „Neueste Beiträge“ (OceanWP) – größere Thumbnails */
.elementor-widget-wp-widget-recent-posts .recent-posts-thumbnail img{
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
/* Größere Thumbnails nur im Elementor-Widget "Neueste Beiträge" */
.elementor-widget-wp-widget-recent-posts li,
.elementor-widget-wp-widget-recent-posts .recent-posts-li {
display: grid;
grid-template-columns: 240px 1fr; /* ← gewünschte Bildbreite */
gap: 14px;
align-items: start;
}
/* Container links wirklich breiter machen */
.elementor-widget-wp-widget-recent-posts .recent-posts-thumbnail {
width: 240px !important; /* gleiche Breite wie oben */
max-width: none !important;
display: block;
overflow: hidden;
border-radius: 8px;
}
/* Bild skalieren + evtl. zuschneiden */
.elementor-widget-wp-widget-recent-posts .recent-posts-thumbnail img.size-thumbnail {
width: 100% !important;
height: 100% !important;
max-width: none !important; /* überschreibt 150px-Grenze */
object-fit: cover; /* einheitlicher Zuschnitt */
aspect-ratio: 1 / 1; /* quadratisch; entferne, wenn Originalverhältnis gewünscht */
}
PLUS in Elementor einen HTML-Widget direkt unter den „Neueste Beiträge“-Block:
<script>
document.addEventListener('DOMContentLoaded', function () {
var imgs = document.querySelectorAll('.elementor-widget-wp-widget-recent-posts .recent-posts-thumbnail img.size-thumbnail');
imgs.forEach(function(img){
/* sag dem Browser, der Slot ist ~240px breit (wie im CSS oben) */
img.sizes = '240px';
});
});
</script>
BIN MIT MEINEM LATEIN AM ENDE :(
Die Thumbnails im Recent Posts Widget sind quadratisch und werden bereits "abgeschnitten" vom Server geliefert. Daher kann man sie nicht nachträglich per CSS "nicht abgeschnitten" wirken lassen.
Über CSS kannst Du allenfalls die nutzbare Fläche für die Bilder vergrössern, dann werden sie aber unschärfer dargestellt:
Eine empfehlenswerte Alternative wäre die Nutzung der Blog Funktion von OceanWP, indem Du in WordPress unter Einstellungen > Lesen > Beitragseite eine ansonsten leere Seite für das Blog auswählst und dann die Darstellung der Beiträge auf dieser Seite über die Blog Einstellungen im bereits oben genannten OceanWP Customizer konfigurieren kannst, mit standardmässig unbeschnittenen Bildern, ganz ohne CSS.
Ergänzung: Hier oder hier beispielhaft so konfigurierte Blog Seiten in OceanWP Demo Installationen.
hab die seite jetzt kommplett umgebaut: https://stepplan.de/blog
Danke für den Tipp!
viele korrekturen wie Trennlinie entfernen, Abstand, Titelgrösse, Datum ausblenden, etc. musste ich dennoch vie CSS erledigen.
Lt. der o.g. OceanWP Dokumentation können Felder wie Datum, Kommentare usw. einfach im Customizer ausgeblendet werden:
Display / Hide specific elements: to display or hide specific elements from appearing, simply click the icon next to the element's name.
Du müsstest da mal selbst ausprobieren, für welche Layout Vorlagen (dort genannt Blog-Stil) man was wie unter Blog-Archive > Content Builder anpassen kann.
Die Textgrösse usw. der Elemente sollte man in den Blog Einstellungen unter Blog-Archive > Typografie und Farben anpassen können.
Generell sollte man "zusätzliches CSS" nur im absoluten Ausnahmefall nutzen, wenn gewünschte Einstellungen nicht in entspr. Plugins oder im Theme Customizer selbst vorgenommen werden können. Denn dort werden in der Regel automatisch viele weitere Wechselwirkungen berücksichtigt, z.B. für die sog. Responsive Darstellung auf verschiedenen Geräten usw.
Das OceanWP Theme und auch Elementor sind sehr mächtige Werkzeuge, es ist daher kein Schaden, sich z.B. in Testinstallationen eingehend mit den verschiedenen Bereichen und auch den vielen vorhandenen jeweiligen Anleitungen zu beschäftigen.
Damit versteht man die generellen Möglichkeiten und Umsetzungen besser und man erkennt dann in echten Projekten leichter, ob was wo wie einstellbar sein könnte usw.
Blog-Archive wurde mir auch schon mehrfach genannt, aber das habe ich nicht. Nur Blog-Einträge und Einzelbeitrag.
Und in keinem kann ich Felder wie Datum, Kommentare usw. ausblenden.
Schau Dir den Bereich Blog Style in der OceanWP Dokumentation an. Je nach Style Auswahl kannst Du dann im Content Builder Elemente per Click ausblenden usw., das ist in der Dokumentation in vielen Screenshots eigentlich gut nachvollziehbar.
Bereiche können je nach eingestellter Sprache in WordPress etwas unterschiedlich benannt sein. Du müsstest die Bezeichnungen der Dokumentation nur grob auf Deutsch übersetzen oder in Deinem WordPress Konto Profil die Sprache temporär auf Englisch umstellen, falls das das Nachvollziehen erleichtert.
Viel Erfolg damit.
Danke für den Tipp, aber wie vermutet: Der Content Builder ist für den Blog-Stil Large Image und Grid verfügbar. Nicht für Thumbnail-Stil.
Also bleibt nur CSS.
Dann verwende doch einfach Image Large oder Grid als Vorlage und stelle auf der Basis Deine Wünsche ein...
Verwende "zusätzliches CSS" nur im absoluten Ausnahmefall, Erklärung siehe bereits oben, zudem musst Du bei jedem Update von Elementor oder Theme dann prüfen, ob Dein manuell eingefügtes CSS noch funktioniert und/oder Auswirkungen auf andere Dinge hat usw.
also ja das macht sinn, wenn ich bei jedem Update von Elementor oder Theme dann prüfen muss, ob mein manuell eingefügtes CSS noch funktioniert und/oder Auswirkungen auf andere Dinge hat usw.
Gebe mich Einsichtig bei deiner Erfahrung und hab auf Raster umgestellt und somit ein fast leeres CSS mit nur noch:
.entry-content table p:last-child {
margin-bottom: 0;
} /* entfernt leerezeile in tabellen */
body #mobile-fullscreen { width: 100vw;height: 100vh }
/* menü mittig in mobile ansicht */
Interessanterweise passt beim Raster-Stil auch alles in der mobilen Ansicht, Grösse der Thumbnails auf ganzer breite, wie auch Titel und Schrift. Das war im Thumbnail-Stil nicht so.
Gelöscht habe meine in stundenlangen Sitzungen hart erarbeiteten Codes:
.blog-entry.thumbnail-entry .thumbnail {
width: 40%;}
/* neue breite deines titelbildes */
.blog-entry.thumbnail-entry .blog-entry-content {
width: 80%;
} /* neue breite deines teaser textes */
/* Kommentare, Icon und Datum auf Blog-, Kategorie- und Archivseiten ausblenden */
body.blog .comments-link,
body.blog .comment-count,
body.blog .comment-meta,
body.blog .icon-bubble,
body.blog .blog-entry-date,
body.blog a[rel="category"],
body.blog a[rel="category tag"],
body.archive .comments-link,
body.archive .comment-count,
body.archive .comment-meta,
body.archive .icon-bubble,
body.archive .blog-entry-date,
body.archive a[rel="category"],
body.archive a[rel="category tag"] {
display: none !important;}
/* Linien, die als Border am Artikel/Container gesetzt sind */
body.blog article,
body.blog .blog-entry,
body.blog .blog-entry-inner,
body.blog .site-main article,
body.blog .content-area article,
body.archive article,
body.archive .blog-entry,
body.archive .blog-entry-inner,
body.archive .site-main article,
body.archive .content-area article {
border: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
background-image: none !important;}
/* Abstand etwas verkleinern */
body.blog .blog-entry,
body.blog .blog-entry-inner,
body.blog article,
body.archive .blog-entry,
body.archive .blog-entry-inner,
body.archive article {
margin-bottom: 5px !important;
padding-bottom: 5px !important;}
/* Linie unter der Textvorschau entfernen */
body.blog .blog-entry-bottom,
body.archive .blog-entry-bottom {
display: none !important;}
/* Titelgröße verkleinern */
body.blog .entry-title,
body.blog .blog-entry-title,
body.archive .entry-title,
body.archive .blog-entry-title {
font-size: 1.6em !important;}
/* NUR MOBIL (bis 768px): Thumbnails vollbreit */
@Media (max-width: 768px) {
body.blog .blog-entry .thumbnail,
body.archive .blog-entry .thumbnail,
body.blog .post-thumbnail,
body.archive .post-thumbnail,
body.blog .blog-entry-thumbnail,
body.archive .blog-entry-thumbnail {
width: 100% !important;
max-width: 100% !important;
}
body.blog .blog-entry .thumbnail img,
body.archive .blog-entry .thumbnail img,
body.blog .post-thumbnail img,
body.archive .post-thumbnail img,
body.blog .blog-entry-thumbnail img,
body.archive .blog-entry-thumbnail img,
body.blog .wp-post-image,
body.archive .wp-post-image {
width: 100% !important;
height: auto !important;
max-width: 100% !important;
display: block !important; }}
/* NUR MOBIL (bis 768px): Titel und Textvorschau vollbreit */
@Media (max-width: 768px) {
/* Titel vollbreit */
body.blog .entry-title,
body.archive .entry-title,
body.blog .blog-entry-title,
body.archive .blog-entry-title {
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: both !important; }
/* Textauszug (Excerpt) vollbreit */
body.blog .entry-summary,
body.archive .entry-summary,
body.blog .blog-entry-summary,
body.archive .blog-entry-summary {
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: both !important;
margin: 0 !important;
padding: 0 !important; }}
/* NUR MOBIL (bis 768px): Titel + Textauszug vollbreit */
@Media (max-width: 768px) {
/* Der Content-Bereich rechts vom Bild */
body.blog .blog-entry .blog-entry-content,
body.archive .blog-entry .blog-entry-content,
body.blog .blog-entry .entry-content,
body.archive .blog-entry .entry-content {
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: both !important;
display: block !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important; }
/* Der eigentliche Auszug/Teasertext */
body.blog .blog-entry .entry-summary,
body.archive .blog-entry .entry-summary,
body.blog .blog-entry .blog-entry-summary,
body.archive .blog-entry .blog-entry-summary,
body.blog .blog-entry .excerpt,
body.archive .blog-entry .excerpt {
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: both !important;
margin: 0 !important;
padding: 0 !important;
display: block !important; }
/* Titel */
body.blog .blog-entry .entry-title,
body.archive .blog-entry .entry-title,
body.blog .blog-entry .blog-entry-title,
body.archive .blog-entry .blog-entry-title {
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: both !important;
display: block !important; }
/* Falls das Layout per Grid/Flex nebeneinander erzwingt */
body.blog .blog-entry .blog-entry-inner,
body.archive .blog-entry .blog-entry-inner {
display: block !important; /* bricht Grid/Flex auf */
grid-template-columns: none !important; }}
Sehr gut. Noch ein Tipp am Rande, Du kannst bei der Grid Ansicht auch die Anzahl der Spalten (Grid Columns) einstellen.
ja hab ich gesehen und habs auf 3 spalten eingestellt :)
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!