Sich selber auf der eigenen Webseite vorzustellen ist natürlich Pflicht. Nur wie kann man dies auf einfache Weise und ohne besondere HTML-Kenntnisse bewerkstelligen? Klar, einige Themes (z.B. mein Theme ‚ACHTZEHN‘) haben dafür eigens vorbereitete Theme-Optionen, in die lediglich noch Überschrift und Text eingegeben und ein Bild oder Logo per Dialog eingebunden werden muss. Was aber, wenn das WordPress-Theme diese Möglichkeit nicht bietet?
Wie wäre es, wenn wir das „Text“-Sidebar-Widget dazu nutzen und die Vorstellung in die Sidebar einbinden? Coole Idee, oder? Und eventuell noch ein Bild oder Logo dazu? Okay, kommt sofort.
Wie ich in diesem Artikel bereits gezeigt habe, ist es möglich das „Text“-Sidebar-Widget nicht nur mit reinem Text, sondern auch mit HTML-Code zu füttern.
Jedes halbwegs moderne WordPress-Theme sollte über mindestens eine Sidebar verfügen, die mit dem „Text“-Widget bestückt werden kann.
Setzen wir voraus, dass auch euer Theme über diese Möglichkeit verfügt, öffnet ihr die Widgets über das „Design“-Menü und klickt auf den Punkt „Widgets“. Zieht nun per Drag & Drop das „Text“-Widget in die entsprechende Sidebar.
Das Eingabefeld „Titel“ bestückt ihr mit einer aussagekräftigen Überschrift und darunter ist dann massig Platz für eure kurze (oder auch lange) Vorstellung.
Speichern nicht vergessen.
Um das ganze noch etwas aufzupeppen wollen wir noch ein Bild oder Logo in das Widget einfügen. Wie bereits erwähnt können wir in das „Text“-Widget auch HTML-Code einfügen und Inline-Styles nutzen.
Ladet die Datei mit eurem Bild oder Logo über den Menüpunkt „Medien“ -> „Datei hinzufügen“ auf euren Webserver hoch. Ist der Upload beendet, klickt ihr auf den Button „Bearbeiten“. Ihr findet nun auf der rechten Seite einen Bereich der mit „Speichern“ überschrieben ist. Hier findet ihr unter anderem den Link zur Bilddatei (Datei URL), die wir gleich noch benötigen. Markiert den Link mit der Maus und kopiert ihn in die Zwischenablage.
Wechselt nun wieder zum Text-Widget und fügt an der Stelle, an der das Bild erscheinen soll, folgendes hinzu:
<img src="http://deinedomain.de/deinbild.jpg" style="float: right; margin: 0 0 20px 20px" alt="Meine Bildbeschreibung">
Kurz zur Erlärung: mittels des img
-Tags binden wir die Bilddatei in den HTML-Code ein. Das Attribut src
bestimmt die URL zu unserer Bilddatei, also wo die Datei auf dem Webserver gespeichert ist. Hier fügt ihr die Datei URL ein, die wir zuvor in die Zwischenablage kopiert haben.
Es folgen mit dem Attribut style
einige Deklarationen, sogenannte Inline-styles. In diesem Fall reihen wir das Bild mittels float
rechts in den Textfluss ein und geben dem Bild mit margin
einen Außenabstand nach unten und nach links, damit es einen gleichmäßigen Abstand zum Text erhält.
Das Attribut alt
ist eine Pflichtangabe bei Bildern und wird angezeigt, wenn das Bild nicht geladen werden kann.
Und so sieht das Ganze dann in der Sidebar, hier am Beispiels meines kommenden Themes ‚ZWANZIG‘, aus:
Ich finde es etwas schade, dass man bei den Text-Blöcken keine „class“ und/oder „id“ vergeben kann. Klar, WordPress macht das einfacher, aber was ist, wenn man das Ding löscht und dann wieder haben will? Genau, man muss wieder in die CSS Datei und die ID abändern.
Hallo Paul,
du kannst nicht benötigte Widgets ja unter „Inaktive Widgets“ ablegen. Bin mir nur nicht sicher, ob die ID bestehen bleibt.
Gruß Olli
Hat mir super weitergeholfen. Vielen Dank!
Hallo,
hat mir auch super geholfen, aber ich möchte gerne Abstände in der Vorstellung haben. Wie mache ich dies?
Viele Grüße
Michael