{"id":46108,"date":"2019-01-30T12:24:27","date_gmt":"2019-01-30T11:24:27","guid":{"rendered":"https:\/\/strato.de\/blog\/?p=46108"},"modified":"2022-04-11T13:38:46","modified_gmt":"2022-04-11T11:38:46","slug":"schoenheitstipps-twenty-nineteen","status":"publish","type":"post","link":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/schoenheitstipps-twenty-nineteen\/","title":{"rendered":"6 Sch\u00f6nheitstipps f\u00fcr das WordPress-Theme Twenty Nineteen"},"content":{"rendered":"\n

Das Standard-Theme von WordPress <\/a>kann mehr als nur Standard. Mit einfachen CSS-Anweisungen machst Du Twenty Nineteen noch sch\u00f6ner.<\/p>\n\n\n\n\n\n\n\n

Twenty Nineteen verf\u00fcgt \u00fcber ein minimalistisches, einspaltiges\nLayout und eignet sich damit vor allem f\u00fcr Blogs. Das Design kannst Du im\nBackend \u00fcber den Customizer anpassen. Mit Cascading Style\nSheets (CSS) hast Du jedoch viel mehr M\u00f6glichkeiten. Mit wenigen Code-Zeilen\nkannst Du zum Beispiel die Farben und Schriften individuell anpassen. <\/p>\n\n\n\n

Hinweis: Am besten verwendest Du f\u00fcr die folgenden Anpassungen ein Child Theme<\/a>. Alternativ kannst Du die CSS-Anweisungen auch in das WordPress-Backend eingeben (Design<\/em> -> Customizer<\/em> -> Zus\u00e4tzliches CSS<\/em>).<\/p>\n\n\n\n

Tipp 1: Farbfilter entfernen<\/strong><\/h3>\n\n\n\n

Standardm\u00e4\u00dfig sind die Beitragsbilder auf der Startseite mit\neinem blauen Overlay versehen. Im Backend kannst Du die Farbe \u00e4ndern oder den\nFilter unsichtbar machen (Design<\/em>\n-> Customizer<\/em> -> Farben<\/em>). Das funktioniert jedoch nur bei\nden Bildern auf der Startseite \u2013 in den Beitr\u00e4gen werden die Bilder weiterhin abgedunkelt\nangezeigt.<\/p>\n\n\n\n

\"\"
Beitragsbild mit Filter (links) und ohne<\/figcaption><\/figure>\n\n\n\n

Um das zu \u00e4ndern, entfernst Du im Customizer zun\u00e4chst das\nH\u00e4kchen bei \u201eF\u00fcr hervorgehobene Bilder einen Filter unter Benutzung der Prim\u00e4rfarbe\nanwenden\u201c:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Danach gibst Du folgende Zeilen als Zus\u00e4tzliches CSS<\/em> ein:<\/p>\n\n\n\n

.site-header.featured-image::after {\nbackground: none;\n}<\/code><\/pre>\n\n\n\n
Wichtig: Das\nAbdunkeln der Bilder hat den Vorteil, dass die dar\u00fcber liegende wei\u00dfe Schrift\nbesser zu lesen ist. Pr\u00fcfe daher, ob die Schrift \u00fcber Deinen Beitragsbildern auch\nohne Filter noch lesbar ist. <\/p>\n\n\n\n
Tipp 2: Hintergrundfarbe \u00e4ndern<\/strong><\/h3>\n\n\n\n
Dank des hellen Hintergrunds l\u00e4sst sich der Flie\u00dftext gut\nlesen. Falls Dir das Wei\u00df aber zu langweilig ist, kannst Du die\nHintergrundfarbe ganz leicht \u00e4ndern, zum Beispiel in ein helles Grau:<\/p>\n\n\n\n
#page {\n\tbackground-color: #F5F5F5;\n}<\/code><\/pre>\n\n\n\n
Tipp 3: Schriftart anpassen<\/strong><\/h3>\n\n\n\n
Als minimalistisches Theme setzt Twenty Nineteen auf eine ungew\u00f6hnliche\nTypografie. Falls Dir die Standardschriftart Hoefler Text zu exotisch ist,\nlegst Du per CSS einfach andere Schriften fest. Mit der folgenden Anweisung\nsieht Dein Text aus wie beim Vorg\u00e4nger-Theme Twenty Seventeen:<\/p>\n\n\n\n
#page {\n\tfont-family: \"Libre Franklin\", \"Helvetica Neue\", helvetica, arial, sans-serif;\n}<\/code><\/pre>\n\n\n\n
\"\"
Die Serifenschrift Hoefler Text (links) wirkt klassisch, Libre Franklin (rechts) schn\u00f6rkellos modern.<\/figcaption><\/figure>\n\n\n\n
Tipp 4: Hintergrundfarbe der Kommentare \u00e4ndern<\/strong><\/h3>\n\n\n\n
Im originalen Layout h\u00e4ngen die Kommentare ein wenig \u201ein der\nLuft\u201c, da es keine Abgrenzung vom \u00fcbrigen Inhalt gibt. Abhilfe schafft hier ein\nfarbiger Hintergrund. \u00dcber die Eigenschaft \u201eborder-radius\u201c rundest Du zus\u00e4tzlich\ndie Ecken ab:<\/p>\n\n\n\n
.comment-list {\n\tbackground-color: #F99C31;\n\tpadding-left: 1rem;\n\tpadding-top: 0.1rem;\n\tborder-radius: 5px;\n}<\/code><\/pre>\n\n\n\n
\"\"
Der farbige Hintergrund hebt Kommentare hervor und l\u00e4dt zum Kommentieren ein. <\/figcaption><\/figure>\n\n\n\n
Tipp 5: Hover-Effekt bei Beitragsbildern<\/strong><\/h3>\n\n\n\n
Bei Twenty Nineteen sind die Vorschaubilder standardm\u00e4\u00dfig verlinkt. Das ist gut, weil es viele Deiner Besucher so erwarten. Noch besser w\u00e4re es, wenn die Verlinkung erkennbar wird, sobald man mit der Maus dar\u00fcberf\u00e4hrt. Die folgenden Zeilen sorgen f\u00fcr einen flie\u00dfenden Hover-Effekt, der die Transparenz des Bildes erh\u00f6ht:<\/p>\n\n\n\n
.entry .post-thumbnail .post-thumbnail-inner img:hover {\n\ttransition: 0.2s ease;\n\topacity: 0.9;\n}<\/code><\/pre>\n\n\n\n
Tipp 6: Widget-Schrift weniger fett<\/strong><\/h3>\n\n\n\n
Die im\nFooter platzierten Widgets wirken durch die fette Schrift recht dominant. F\u00fcr\nein dezenteres Erscheinungsbild kannst Du den Wert von \u201efont-weight\u201c reduzieren:<\/p>\n\n\n\n
.widget_archive ul li, .widget_categories ul li, .widget_meta ul li, .widget_nav_menu ul li, .widget_pages ul li, .widget_recent_comments ul li, .widget_recent_entries ul li, .widget_rss ul li {\n\tfont-weight: 400;\n}<\/code><\/pre>\n\n\n\n
\"\"
Weniger Strichst\u00e4rke ist manchmal mehr (links: Original).<\/figcaption><\/figure>\n\n\n\n
Twenty Nineteen mit CSS gestalten<\/strong><\/h3>\n\n\n\n
Mit CSS\nkannst Du Twenty Nineteen flexibel anpassen. Die WordPress-Funktion\n\u201eZus\u00e4tzliches CSS\u201c ist einsteigerfreundlich und eine bequeme L\u00f6sung f\u00fcr kleine\nAnpassungen. Im Customizer sind diese schon vor der Ver\u00f6ffentlichung sichtbar. <\/p>\n\n\n\n
F\u00fcr weitergehende\n\u00c4nderungen ist ein Child Theme die bessere Vorgehensweise. Hiermit kannst Du neben\nCSS bzw. Sass auch PHP-Code modifizieren. Die neuen WordPress-Blocks lassen\nsich ebenfalls \u00fcber das Theme editieren. Deine Anpassungen sind dann direkt im\nEditor zu sehen. <\/p>\n\n\n\n
Was mit CSS alles m\u00f6glich ist und wie die Sprache funktioniert, erf\u00e4hrst Du hier: https:\/\/wiki.selfhtml.org\/wiki\/CSS<\/a>. <\/p>\n","protected":false},"excerpt":{"rendered":"
Das Standard-Theme von WordPress kann mehr als nur Standard. Mit einfachen CSS-Anweisungen machst Du Twenty Nineteen noch sch\u00f6ner.<\/p>\n","protected":false},"author":191,"featured_media":46148,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,490],"tags":[170,51,55,261],"acf":[],"yoast_head":"\n6 Sch\u00f6nheitstipps f\u00fcr das WordPress-Theme Twenty Nineteen<\/title>\n<meta name=\"description\" content=\"Das Standard-Theme von WordPress kann mehr als nur Standard. Mit einfachen CSS-Anweisungen machst Du Twenty Nineteen noch sch\u00f6ner.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"6 Sch\u00f6nheitstipps f\u00fcr das WordPress-Theme Twenty Nineteen\" \/>\n<meta property=\"og:description\" content=\"Das Standard-Theme von WordPress kann mehr als nur Standard. Mit einfachen CSS-Anweisungen machst Du Twenty Nineteen noch sch\u00f6ner.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/schoenheitstipps-twenty-nineteen\/\" \/>\n<meta property=\"og:site_name\" content=\"STRATO Blog DE Staging\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/strato\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-30T11:24:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-11T11:38:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2019\/01\/make_up.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"728\" \/>\n\t<meta property=\"og:image:height\" content=\"410\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Vladimir Simovi\u0107\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vlad_perun\" \/>\n<meta name=\"twitter:site\" content=\"@STRATO_AG\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vladimir Simovi\u0107\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/schoenheitstipps-twenty-nineteen\/\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/schoenheitstipps-twenty-nineteen\/\",\"name\":\"6 Sch\u00f6nheitstipps f\u00fcr das WordPress-Theme Twenty Nineteen\",\"isPartOf\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website\"},\"datePublished\":\"2019-01-30T11:24:27+00:00\",\"dateModified\":\"2022-04-11T11:38:46+00:00\",\"author\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/d2bc2cf7a9963254156626a1bdbf8388\"},\"description\":\"Das Standard-Theme von WordPress kann mehr als nur Standard. Mit einfachen CSS-Anweisungen machst Du Twenty Nineteen noch sch\u00f6ner.\",\"breadcrumb\":{\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/schoenheitstipps-twenty-nineteen\/#breadcrumb\"},\"inLanguage\":\"de-DE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/schoenheitstipps-twenty-nineteen\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/schoenheitstipps-twenty-nineteen\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"6 Sch\u00f6nheitstipps f\u00fcr das WordPress-Theme Twenty Nineteen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/\",\"name\":\"STRATO Blog DE Staging\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de-DE\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/d2bc2cf7a9963254156626a1bdbf8388\",\"name\":\"Vladimir Simovi\u0107\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de-DE\",\"@id\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/04\/vladimir-simovic-strato-blog-110x110.jpg\",\"contentUrl\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/04\/vladimir-simovic-strato-blog-110x110.jpg\",\"caption\":\"Vladimir Simovi\u0107\"},\"description\":\"Vladimir Simovi\u0107 arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachb\u00fccher und Fachartikel publiziert. Seit April 2022 ist er als Senior Online-Redakteur f\u00fcr den Blog-Bereich von STRATO verantwortlich.\",\"sameAs\":[\"https:\/\/www.vladimir-simovic.de\",\"https:\/\/twitter.com\/vlad_perun\",\"https:\/\/de.wikipedia.org\/wiki\/Vladimir_Simovic\"],\"url\":\"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/author\/vladimir-simovic\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"6 Sch\u00f6nheitstipps f\u00fcr das WordPress-Theme Twenty Nineteen","description":"Das Standard-Theme von WordPress kann mehr als nur Standard. Mit einfachen CSS-Anweisungen machst Du Twenty Nineteen noch sch\u00f6ner.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"de_DE","og_type":"article","og_title":"6 Sch\u00f6nheitstipps f\u00fcr das WordPress-Theme Twenty Nineteen","og_description":"Das Standard-Theme von WordPress kann mehr als nur Standard. Mit einfachen CSS-Anweisungen machst Du Twenty Nineteen noch sch\u00f6ner.","og_url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/schoenheitstipps-twenty-nineteen\/","og_site_name":"STRATO Blog DE Staging","article_publisher":"https:\/\/www.facebook.com\/strato","article_published_time":"2019-01-30T11:24:27+00:00","article_modified_time":"2022-04-11T11:38:46+00:00","og_image":[{"width":728,"height":410,"url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2019\/01\/make_up.jpg","type":"image\/jpeg"}],"author":"Vladimir Simovi\u0107","twitter_card":"summary_large_image","twitter_creator":"@vlad_perun","twitter_site":"@STRATO_AG","twitter_misc":{"Verfasst von":"Vladimir Simovi\u0107","Gesch\u00e4tzte Lesezeit":"3 Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/schoenheitstipps-twenty-nineteen\/","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/schoenheitstipps-twenty-nineteen\/","name":"6 Sch\u00f6nheitstipps f\u00fcr das WordPress-Theme Twenty Nineteen","isPartOf":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website"},"datePublished":"2019-01-30T11:24:27+00:00","dateModified":"2022-04-11T11:38:46+00:00","author":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/d2bc2cf7a9963254156626a1bdbf8388"},"description":"Das Standard-Theme von WordPress kann mehr als nur Standard. Mit einfachen CSS-Anweisungen machst Du Twenty Nineteen noch sch\u00f6ner.","breadcrumb":{"@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/schoenheitstipps-twenty-nineteen\/#breadcrumb"},"inLanguage":"de-DE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/stg.blog-de.strato.wpcust.com\/blog\/schoenheitstipps-twenty-nineteen\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/schoenheitstipps-twenty-nineteen\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/"},{"@type":"ListItem","position":2,"name":"6 Sch\u00f6nheitstipps f\u00fcr das WordPress-Theme Twenty Nineteen"}]},{"@type":"WebSite","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#website","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/","name":"STRATO Blog DE Staging","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de-DE"},{"@type":"Person","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/d2bc2cf7a9963254156626a1bdbf8388","name":"Vladimir Simovi\u0107","image":{"@type":"ImageObject","inLanguage":"de-DE","@id":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/04\/vladimir-simovic-strato-blog-110x110.jpg","contentUrl":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-content\/uploads\/2022\/04\/vladimir-simovic-strato-blog-110x110.jpg","caption":"Vladimir Simovi\u0107"},"description":"Vladimir Simovi\u0107 arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachb\u00fccher und Fachartikel publiziert. Seit April 2022 ist er als Senior Online-Redakteur f\u00fcr den Blog-Bereich von STRATO verantwortlich.","sameAs":["https:\/\/www.vladimir-simovic.de","https:\/\/twitter.com\/vlad_perun","https:\/\/de.wikipedia.org\/wiki\/Vladimir_Simovic"],"url":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/author\/vladimir-simovic\/"}]}},"_links":{"self":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/46108"}],"collection":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/users\/191"}],"replies":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/comments?post=46108"}],"version-history":[{"count":9,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/46108\/revisions"}],"predecessor-version":[{"id":55608,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/posts\/46108\/revisions\/55608"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/media\/46148"}],"wp:attachment":[{"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/media?parent=46108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/categories?post=46108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stg.blog-de.strato.wpcust.com\/blog\/wp-json\/wp\/v2\/tags?post=46108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}