{"id":5152,"date":"2021-12-27T13:04:28","date_gmt":"2021-12-27T12:04:28","guid":{"rendered":"https:\/\/wpfellows.com\/de\/?p=5152"},"modified":"2021-12-27T13:04:33","modified_gmt":"2021-12-27T12:04:33","slug":"wordpress-rahmen-um-text","status":"publish","type":"post","link":"https:\/\/wpfellows.com\/de\/wordpress-rahmen-um-text\/","title":{"rendered":"In WordPress Rahmen um Text legen"},"content":{"rendered":"
In diesem kleinen WordPress<\/span> Tutorial<\/span> zeige ich dir, wie du in WordPress<\/span> Rahmen um Text ziehen kannst. Und zwar einfach nur mit Hilfe von CSS<\/span>. Dies ist eine sehr einfache Technik, die deiner Website ein besseres und professionelleres Aussehen verleihen kann. Au\u00dferdem kannst du die Aufmerksamkeit deiner Leser auf dich ziehen, indem du eine kontrastreiche Farbe f\u00fcr deinen Textrahmen verwendest.<\/p> Dein erster Gedanke w\u00e4re, ein Plugin zu installieren, das diese Aufgabe f\u00fcr dich \u00fcbernimmt. Wenn du jedoch zu viele Plugins installierst, setzt du deine Website Sicherheitsrisiken aus. Daher ist es besser, kein Plugin f\u00fcr eine so kleine Aufgabe zu installieren.<\/p> Ein weiterer Nachteil von zu vielen Plugins ist die Ladezeit<\/a> deiner Website. Viele Plugins machen deine WordPress<\/span>-Website langsamer, und das will niemand.<\/p> Da wir nun wissen, warum es eine gute Idee ist, kein Plugin zu verwenden, wollen wir lernen, wie wir das Problem mit einem einfachen CSS<\/span>-Code selbst l\u00f6sen k\u00f6nnen<\/p> Wie schon geschrieben, ist diese Aufgabe relativ leicht zu bew\u00e4ltigen. Ein Plugin brauchen wir daf\u00fcr nicht. Nur zwei kleine \u00c4nderungen an deinem Text und im CSS<\/span>.<\/p> Keine Sorge, das bekommst du auch als Anf\u00e4nger super einfach hin.<\/p> Um in WordPress<\/span> ohne Plugins einen Rahmen um den Text zu erstellen, brauchen wir die Hilfe von zwei Dingen, die in HTML<\/span> und CSS<\/span> eingebaut sind: IDs und Klassen<\/span>. Eine ID ist ein Bezeichner f\u00fcr ein bestimmtes Element, w\u00e4hrend eine Klasse<\/span> ein Bezeichner f\u00fcr mehrere Elemente ist, die dieselben Eigenschaften haben (z. B. eine Farbe).<\/p> Mit anderen Worten: Wir geben dem Element, das du \u00e4ndern m\u00f6chtest, einen eindeutigen Namen. Mit diesem Namen kannst du den Stil des Elements mit einfachem CSS<\/span>-Code \u00e4ndern.<\/p> Normalerweise br\u00e4uchtest du daf\u00fcr einen eigenen Code, aber zum Gl\u00fcck hat der WordPress<\/span> Gutenberg-Editor ein Feld eingebaut, mit dem wir jedem Element oder jeder Gruppe auf unserer Seite eine eigene Klasse<\/span> (einen Namen) geben k\u00f6nnen.<\/p> W\u00e4hle den Textblock, den du \u00e4ndern m\u00f6chtest, und scrolle rechts in der Seitenleiste ganz nach unten. Dort findest du den Bereich \u201eErweitert\u201c, den du aufklappen musst.<\/p> Im Feld \u201ezus\u00e4tzliche CSS<\/span>–Klasse<\/span>(n)\u201c gibst du nun borderedtext ein. Nat\u00fcrlich kannst du auch jeden anderen Namen f\u00fcr deine CSS<\/span>–Klasse<\/span> nutzen. Dann musst du das nur beim Rest dieses WordPress Tutorials<\/a> weiter unten ber\u00fccksichtigen.<\/p> Tipp:<\/strong> In Schritt 2 m\u00fcssen wir die CSS<\/span>-Datei deines Themes bearbeiten. Dazu kannst du den integrierten Dateieditor von WordPress<\/span> verwenden.<\/p> \u00d6ffne dein WordPress<\/span>-Dashboard und klicke auf Design > Editor.<\/p> Klicke auf die CSS<\/span>-Datei deines Themes (style.css) und scrolle bis zum Ende der Datei. Das ist der richtige Ort, um unseren CSS<\/span>-Code hinzuzuf\u00fcgen.<\/p> Wenn du den folgenden Code hinzuf\u00fcgst, wird der gesamte Text in der Klasse<\/span> borderedtext mit einem d\u00fcnnen, schwarzen Rahmen versehen:<\/p> Damit der Text nicht direkt am Rahmen klebt, habe ich noch Padding<\/span>-Angaben dazu gepackt. Padding<\/span> steht f\u00fcr Innenabstand, regelt in diesem Fall also den Abstand zwischen Text und Rahmen.<\/p> Um die Dicke des Rahmens zu \u00e4ndern, k\u00f6nnen wir einfach den Wert des Rahmens anpassen. Anstelle des Attributs „thin“ kannst du auch Pixelwerte verwenden (z. B. „border-width: 20px;“). Wie du deine Rahmen noch weiter gestalten kannst, erf\u00e4hrst du hier<\/a>.<\/p> Das war’s! Du hast jetzt Rahmen um Text in WordPress<\/span> hinzugef\u00fcgt, ohne ein Plugin zu verwenden!<\/p> Auf WPFellows markieren wir wichtigen Text oder Anmerkungen mit einem roten oder blauen Rahmen. Genau so:<\/p> Dies ist ein wichtiger Text mit sehr wichtigen Anmerkungen.<\/p> Mit der oben beschriebenen Technik kannst du diese K\u00e4sten ganz einfach selbst erstellen.<\/p> F\u00fcge einfach eine Hintergrundfarbe, etwas Polsterung und einen Rahmenradius (f\u00fcr abgerundete Ecken) zu deinem CSS<\/span> hinzu, so wie hier:<\/p> Ich bevorzuge diesen Weg nicht, aber wenn du deine CSS<\/span>-Datei nicht bearbeiten willst, gibt es eine andere M\u00f6glichkeit.<\/p> Mit dem Gutenberg-Editor k\u00f6nnen wir Bl\u00f6cke in HTML<\/span> bearbeiten. Dazu klickst du auf den Textblock, um den du einen Rahmen erstellen m\u00f6chtest, und klickst dann auf die drei Punkte des Schnellmen\u00fcs.<\/p> W\u00e4hle nun „Als HTML<\/span> bearbeiten“ und dein Block wird bearbeitbar. In diesem Modus k\u00f6nnen wir unser CSS<\/span> direkt (inline) in unseren Block schreiben.<\/p> Bearbeite deinen Text so, dass du einen Rahmen um ihn herum bekommst.<\/p> Der gro\u00dfe Nachteil dieser Methode:<\/strong> In diesem kleinen WordPress Tutorial zeige ich dir, wie du in WordPress Rahmen um Text ziehen kannst. Und zwar einfach nur mit Hilfe von CSS. Dies ist eine sehr einfache Technik, die deiner Website ein besseres und professionelleres Aussehen verleihen kann. Au\u00dferdem kannst du die Aufmerksamkeit deiner Leser auf dich ziehen, indem du eine kontrastreiche … Weiterlesen …<\/a><\/p>\n","protected":false},"author":1,"featured_media":5166,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"limit_modified_date":"1","last_modified_date":"2021-12-27T13:04:33","inline_featured_image":false,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-5152","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33"],"yoast_head":"\nWarum du kein Plugin installieren solltest, um in WordPress Rahmen um Text zu legen<\/h2>
So f\u00fcgst du ohne Plugin einen Rahmen um deinen Text ein<\/h2>
Schritt 1: Gib deinem Text eine eigene Klasse<\/h3>
<\/figure>
W\u00e4hle einen Namen, den du dir leicht merken kannst. Wenn du in Zukunft einen Rahmen um den Text brauchst, kannst du dem gew\u00fcnschten Element einfach diesen Klassennamen geben und schon bist du fertig.<\/p>Schritt 2: Bearbeite die CSS-Datei deines Themas<\/h3>
.borderedtext {\n border-style: solid;\n border-width: thin;\n border-color: #000000;\n padding: 15px 15px 15px 15px;\n}<\/code><\/pre>
Bonus-Idee:<\/h3>
So f\u00fcgst du einen Rahmen um Elemente hinzu, ohne deine CSS-Datei zu bearbeiten<\/h2>
<\/figure>
<p style=\"border: 1px solid #000; padding: 15px 15px 15px 15px;\">Dies ist dein Text.<\/p><\/code><\/pre>
Du \u00e4nderst nur diesen einzelnen Textblock. Wann immer du einen anderen umrandeten Text auf deiner Website brauchst, musst du genau die gleichen Schritte wiederholen.<\/p>","protected":false},"excerpt":{"rendered":"