HTML Texteditor

texteditor wordpress website gestalten

Du willst den Footer deines WordPress-Projektes schön gestalten und bist eher der Anfänger?

Dazu musst du kein HTML-Profi sein und benötigst kein zusätzliches Programm. Um Verlinkungen oder Bilder in die Webbereiche einzufügen, genügt es, dieses als HTML-Code zu schreiben.

Natürlich kannst du auch den kostenfreien Windows-Texteditor Notepad++ nutzen (für iOS-Anwender steht im App Store der EasyEditText-Editor zur Verfügung).

Fangen wir an …

Von Visuell auf Text umschalten

Ich zeige dir anhand eines Beispieles, wie einfach du den Visuell- und Text-Editor in WordPress nutzen kann.

Beispiel: Du willst in den Footer neben Text auch eine Verlinkung und ein Bild einfügen.

 

Öffne einen neuen Beitrag und schreibe den Text mit Verlinkung. Bearbeite mit den vorhandenen Formatierungsmöglichkeiten den Inhalt.

Beispiel 1 Einfügen eines Links

Ansicht im visuellen Dashboard
Ansicht im visuellen Dashboard

Wenn du rechts von „Visuell“ auf „Text“ umschaltest, dann sieht es wie folgt aus. Diese Textzeile kannst du mit copy & paste kopieren und danach in ein „Individuelles HTML-Widget“ einfügen.

Ansicht im Texteditor (Dashboard)
Ansicht im Texteditor (Dashboard)

Und so sieht es dann für deine Besucher aus.

Ansicht für den Besucher einer Website
Ansicht für den Besucher einer Website

 

Beispiel 2 Einfügen eines Bildes

Das gleiche Spiel machen wir mit einem Bild.

Einfach den Text schreiben und ein Bild zentriert einfügen.

Bild einfügen im Dashboard
Bild einfügen im Dashboard

Nun schaltest du wieder von Visuell auf Text um und machst copy & paste.

Umschalten von visuell auf Text
Umschalten von Visuell auf Text

Die letzte Kontrolle zeigt, wie das für deinen Website-Besucher aussieht.

Ansicht für den Website-Besucher
Ansicht für den Website-Besucher

 

Letzter Schritt – HTML-Code in Widget einfügen

Zum Schluss verbinde ich Beispiel 1 und 2 und füge den Inhalt in ein „Individuelles HTML-Widget“ ein. Dieses Widget bietet mir mehr Gestaltungsfreiraum als ein herkömmliches Text-Widget.

Zuerst wieder Text verlinken und Bild einfügen (im „visuellen Editor – siehe gelbe Markierung).

zuerst Text einfügen und Bild dazu
Text und Bild in einen Beitrag einfügen

Danach in den Text-Editor (siehe gelbe Markierung) umschalten und mit copy & paste den Code in ein Widget einfügen.

im Texteditor den HTML-Code kopieren
im Texteditor den HTML-Code kopieren

Als Widget verwende ich das „individuelle „HTML-Widget“.

individuelles Widget

 

Nun klickst du auf „Individuelles Widget“ und es öffnet sich eine Auswahlmöglichkeit für den Ort, wohin der Inhalt auf deiner Website gehört.

verfügbare Widgets
unter den verfügbaren Widgets findest du „Individuelles HTML-Widget“

Das Widget fügst du in den Footer. Danach kopierst du den Code in das Widget hinein. Klickst abschließend auf „Speichern“ und „Fertig“. Dann ist alles fertig!

footer programmieren

 

So sieht es final aus!

footer mit texteditor gestalten

 

Tipp: Du kannst mit dieser Methode viele andere Bereiche in deiner Website gestalten. Du siehst, es ist nicht notwendig ein HTML-Profi zu sein. 

 

(Screenshots angefertigt zur Veranschaulichung einer WordPress.org-Website – Stand 14.12.2020)

Seit 2011 unterstütze ich Menschen in ihrer online Sichtbarkeit. Freiberufler, Tourismusregionen oder kreative Menschen suchen meine Beratung und Unterstützung in Social Media und Online Marketing. Für die Website-Erstellung mit Suchmaschinenoptimierung und Seminare, ob Blog oder Social Media, bin ich Ansprechpartnerin. Mit meinem zweiten Standbein, dem Fahrradblog Sonnenfernweh, berühre ich Herzen und bewege Menschen. Seit 2016 bin ich mit meinem Fahrrad in Niedersachsen und deutschlandweit unterwegs. Für Fahrradthemen mache ich mich stark und berichte auf meinem Blog.
Beitrag erstellt 102

Verwandte Beiträge

Beginne damit, deinen Suchbegriff oben einzugeben und drücke Enter für die Suche. Drücke ESC, um abzubrechen.

social letter anmelden

Social Letter -> anmelden