Viele WordPress Themes bieten farbige Boxen an, in denen du etwas besonders hervorheben kannst. Es gibt aber auch (meist kostenlose) Themes, die dieses Feature nicht anbieten. Dann müsstest du dir ein zusätzlichen Plugin installieren, was aber deine Website langsamer macht. Aus diesem Grund empfehle ich dir das CSS Box Modell, denn mit ein bisschen CSS-Code kannst du schöne farbige Boxen selber gestalten.
Die Definition der CSS Box
Bevor du die CSS Box im HTML einbinden kannst, musst du den Container im CSS-Stylesheet definieren. Entweder ist im WordPress Theme ein Menüpunkt für die Custom-CSS Einstellungen vorhanden, ansonsten kannst du auch dazu ein Plugin verwenden, wie z.B. Simple Custom CSS
.info_box {
background: #ff0000;
color: #ffffff;
padding: 10px;
border: 1px solid #888888;
border-radius: 5px;
font-size: 16px;
text-align: center;
}
Die Box im HTML Quelltext einfügen
Gerade haben wir das Aussehen des Buttons in der Custon-CSS eingestellt. Damit die Box auch auf deiner Website erscheint, musst du im HTML Quelltext das CSS Box Modell aufrufen. Dazu gehst du zu der Stelle, wo die Box erscheinen soll und gibst folgenden HTML Quellcode ein:
<div class="info_box">Der Text, der in der Box stehen soll</div>
Mit dem Befehl „div“ wird ein Container erstellt, der die Eingenschaften der Klasse „info_box“ besitzt. Und der Text, der zwischen <div class=“info_box“> und </div> steht, erscheint dann in der erstellten Box.
So sieht das fertige CSS Box Modell aus
Was bedeuten die einzelnen CSS Regeln ?
| .info_box | Hierbei handelt es sich um den Selektor für die CSS Regel |
| background | Hier wird die Hintergrundfarbe der CSS Box definiert |
| color | Die Schriftfarbe |
| padding | Hier wird der Innenabstand vom Text zum Rahmen definiert |
| border | Das Aussehen des Rahmens unserer Box |
| border-radius | Die Rundungen der Ecken |
| font-size | Schriftgröße |
| text-align | Die Ausrichtung der Schrift in der Box |
