Einen Rahmen um einen Text kann nützlich sein, wenn du z.B. eine Art Box-Darstellung erzeugen möchtest oder ein Text besonders hervorgehoben werden soll. Deshalb zeige ich dir wie du ganz einfach mit HTML und CSS einen Rahmen um einen Text hinbekommst.
So machst du mit HTML und CSS einen Rahmen um deinen Text
Für deinen Rahmen benötigst du im Grunde zwei entscheidende Sachen:
- Einen HTML-Tag der deinen Text umschließt. Du kannst dafür die Tags
<div>,<p>oder<span>benutzen. Sie haben unterschiedliche Eigenschaften und Verhaltensweisen. Daher probiere am besten einfach alle drei aus. - Den CSS-Code (für deinen HTML-Tag) welcher den Rahmen erzeugt. Diesen fügen wir der Einfachheit halber inline per „styles“-Attribut ein. Die Syntax für den benötigten CSS-Code lautet
border: *rahmendicke* *rahmentyp* *farbe*;. Die in Sternchen eingerahmten Paramter müssen durch die tatsächlichen Werte (ohne Sternchen) ersetzt werden. Der Code könnte also folgendermaßen aussehen:border: 1px solid green;. Bei dem letzten Wert (also die Farbe) kann auch alternativ ein Hex-Code (mit Hashtag davor) angegeben werden.
Ein paar Code Beispiele für Rahmen um einen Text
Beispiel 1:
Dies ist ein <p> Text mit Rahmen
<p style="border: 1px solid black;">Dies ist ein <p> Text mit Rahmen</p>
Beispiel 2:
Dies ist ein <span> Text mit Rahmen
<span style="border: 1px solid black;">Dies ist ein <span> Text mit Rahmen</span>
Beispiel 3:
Rahmen mit Hex-Code als Farbe
<span style="border: 1px solid #ff00ee;">Rahmen mit Hex-Code als Farbe</span>
Beispiel 4:
Ein dickerer Rahmen
<span style="border: 4px solid #ff00ee;">Ein dickerer Rahmen</span>
Beispiel 5:
Ein gepunkteter Rahmen
<span style="border: 4px dotted #ff00ee;">Ein gepunkteter Rahmen</span>
Rahmen um Text in WordPress einfügen
Den Code in WordPress einzufügen ist ganz einfach und schneller erledigt. Gehe dazu einfach in den Bearbeitungsmodus deiner Seite/Beitrag und gehe an die gewünschte Stelle, wo dein Text mit dem Rahmen erscheinen soll.
Classic Editor und Page Builder
Wenn du den Classic WordPress Editor oder einen Page Builder benutzt, dann füge ein ganz normales Text- oder HTML-Element ein. Wichtig: du musst deinen Code nun in dem „Text“-Modus (NICHT in dem „Visuell“-Modus) einfügen.
Gutenberg Editor
Im Gutenberg Editor kannst du nicht das normale Text-Element benutzen, bzw. einfach den Code einfügen, sondern musst stattdessen das „individuelles HTML“ Element/Block benutzen. Füge also an der gewünschten Stelle den „individuelles HTML“ Block hinzufüge und füge dort deinen Code ein.