Lesezeit:3 Minuten

Aktualisiert: Februar 23, 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>.

Anmerkung: Die genannten Tags haben unterschiedliche Verhaltensweisen und verschiedene Eigenschaften. Du solltest alle drei einfach einmal selbst probieren und herausfinden, welcher für dein Vorhaben am besten geeignet ist.

  • 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.

Beitrag LESEN  Wordpress Gutenberg abschalten - 2 Tricks + Video

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#;

Die in Raute gesetzten Werte musst du durch die gewünschten Werte ersetzen! Die Rautensymbole lässt du bitte unbedingt weg!

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:

Beitrag LESEN  Wordpress von HTTP auf HTTPS umstellen

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.

Wichtig ist nur, dass du dies im HTML / Text Modus durchführst und nicht im Visual Editor!

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.

Um es nochmals zu betonen: Du musst die Änderung im HTML Modus vornehmen, nicht im Visual Editor!

 

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 SEO für deine WordPress Seite und bringt dich für wichtige Keywörter in Google nach vorne!

Beitrag LESEN  Wordpress Version herausfinden

 

Kostenlose SEO Erstberatung! – Hier klicken

 

 

WordPress: HTML und CSS Rahmen um Text
Sandra Stammberger on FacebookSandra Stammberger on InstagramSandra Stammberger on LinkedinSandra Stammberger on Twitter
Sandra Stammberger
Bis 1996 studierte ich Germanistik an der LMU München. Seit dem Abschluss zum Magister Artium widme ich mich seit 1997 hauptberuflich der Suchmaschinenoptimierung. Bis 2012 war ich primär in den USA als selbständige SEO Managerin tätig. Seit 2012 betreue ich Kunden in Deutschland im Bereich SEO und leite mehrere Themenportale. Erfahren Sie mehr über meine berufliche Vergangenheit in meiner Vita.

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.
Markiert in:     
SEO UlmSEO Agentur Ulm, SEO Augsburg, SEO Landshut, SEO Kempten hat 4,81 von 5 Sternen701 Bewertungen auf ProvenExpert.com