Aktualisiert: Oktober 24, 2021 von Sandra Stammberger
Wie erstelle ich einen HTML und CSS Rahmen um Text in WordPress?
Wenn du in WordPress Textfragmente hervorheben möchtest und einen Box-Effekt erzeugen willst, dann kannst du dies ganz einfach auch ohne Plugin und ohne ein Profi zu sein.
Ich zeige dir, wie du mit HTML und CSS einen Rahmen um Text setzt. Die Methode funktioniert nicht nur in WordPress, sondern für jede Seite.
Um einen Rahmen um Text zu erzeugen, benötigst du im Grunde nur zwei Dinge: HTML Tags und CSS Code.
- Einen HTML Tag, der am Anfang und Ende des Textes gesetzt wird, der in eine Box gesetzt werden soll. Geeignet sind hierfür
die HTML Tags: <span>, <div>, oder <p>.
- Du brauchst außerdem den passenden CSS Code. Mit Hilfe des CSS Code wird das Erscheinungsbild der Box erzeugt.
In der Regel ist CSS Code in deiner style.css hinterlegt. Man kann aber auch im Einzelfall CSS Code inline setzen, d.h. innerhalb der Seite im HTML einfügen.
Mittel zum Zweck ist das sogenannte „Style Attribut“.
Wie lautet die Syntax, um per CSS einen Rahmen um Text zu setzen?
Die CSS Syntax ist, wie folgt: border: #rahmendicke# #rahmentyp# #farbe#;
Der Code kann als zum Beispiel wie folgt aussehen:
border: 2px solid blue;
„blue“ gibt die Farbe an und kann auch mit einem Hexameter Code angegeben werden. Somit: #0000FF
Damit du weißt, wovon ich spreche, ein paar Beispiele für Code, der Rahmen um Text setzt und ihn wie in einer Box erscheinen lässt.
Beispiel 1:
Beispiel für Text mit Rahmen mit span Tag.
Dies ist ein Rahmen um Text – Beispiel
Zu verwendender CSS Code:
<span style=”border: 2px solid blue;”>Dies ist ein <span> Rahmen um Text – Beispiel</span>
Beispiel 2:
Beispiel für Text mit Rahmen mit p Tag
Dies ist ein Text mit Rahmen mit p Tag
Zu verwendender CSS Code:
<p style=”border: 2px solid red;”>Dies ist ein Text mit dem p Tag Rahmen</p>
Beispiel 3:
Ein Rahmen, der gepunktet ist, umgibt einen Text.
Ein dicker, gepunkteter Rahmen, der Text umgibt
Zu verwendender CSS Code:
<span style=”border: 5px dotted #0000FF;”>Ein dicker, gepunkteter Rahmen, der Text umgibt</span>
Beispiel 4:
Text umgeben von einem dicken Rahmen mit Hex-Code für die Farbangabe
Beispiel für einen dicken Rahmen, der einen Text umschließt
Zu verwendender CSS Code:
<span style=”border: 5px solid #0000FF;”>Beispiel für einen dicken Rahmen, der einen Text umschließt</span>
Beispiel 5:
Rahmen um Text im Box Stil mit Hexameter-Code
Rahmen mit Hexameter Farbcode
Zu verwendender CSS Code:
<span style=”border: 2px solid #0000FF;”>Rahmen mit Hexameter Farbcode</span>
Wie fügt man CSS Rahmen um Text in WordPress ein?
Gleich, ob du den Gutenberg Block Editor oder den klassischen WordPress Editor benutzt. In beiden Fällen ist es einfach, den CSS Box Code einer Seite hinzuzufügen.
Rahmen CSS einfügen im Classic Editor
Wenn du im Textmodus bist, gehe an die Stelle, an der Text mit einem Rahmen umschlossen werden soll.
Als Vorlage kannst du die weiter oben angeführten Beispiele verwenden.
Nutze einfach den vorgegebenen Code, ändere die gewünschten Parameter ab und füge im HTML den Code an der Stelle ein, an der der Text mit CSS Rahmen erscheinen soll.
CSS Text Box einfügen im Gutenberg Editor
Um im Gutenberg Editor eine Textbox zu erzeugen, musst du ein wenig anders vorgehen.
Gehe zu der Stelle im Text, an der die Textbox erscheinen soll. Nutze nun das Blockelement „individuelle HTML“.
Füge den gewünschten Code ein!
Wie du siehst, einen Text in WordPress mit einem Rahmen zu umgeben, ist nicht schwer und du musst kein Experte sein, um tolle Ergebnisse zu erzielen.
Du brauchst Hilfe mit WordPress CSS? Du hast Fragen? Wende dich an uns! Gerne übernimmt unsere SEO Agentur die gesamte Suchmaschinenoptimierung für deine WordPress Seite und bringt dich für wichtige Keywörter in Google nach vorne!
Kostenlose SEO Erstberatung! – Hier klicken
Andere interessante Beiträge
Gerne übernehme ich die SEO für Ihr Unternehmen oder berate Sie seotechnisch, um Ihre Google Rankings zu optimieren. Profitieren Sie von meiner mehr als 24-jährigen Erfahrung im Bereich der Suchmaschinenoptimierung. Nehmen Sie mit mir Kontakt auf. Ich freue mich, Sie und Ihr Projekt kennenzulernen.