Widgets mit Farbe und Bild verschönern

Letzte Woche habe ich das Page Builder Plugin vorgestellt, mit dem man das Layout seiner WordPress-Seite mit Hilfe von Widgets ganz individuell gestalten kann.

Ein Leser meines Blogs fragte mich, wie ich es geschafft habe, auf der Startseite des WordPress-Bistros die vier Widgets in der Mitte mit einem farbigen Hintergrund zu versehen. Dies ist im Pagebuilder Plugin nämlich nicht vorgesehen.

Tatsächlich habe ich diese Widgets mit Hilfe von CSS-Regeln eingefärbt. Weil das aber nicht für jeden so ohne weiteres möglich ist, möchte ich Ihnen heute zwei Plugins und einen kleinen Trick vorstellen, mit denen Sie Ihre Widgets aufhübschen können:

Colourful Text Widget

Mit dem Colorful Text Widget-Plugin bringen Sie Farbe in Ihre Widgets. Nach Aktivierung des Plugins finden Sie unter „Design“ -> „Widgets“ das neue Widget „Colorful Text Widget“.

WordPress Plugin Colorful Text Widget

Sie können mit diesem Widget die Hintergrundfarbe („Background Color“), die Farbe der Überschrift („Title Color“) und die Textfarbe („Text Color“) ganz nach Ihren Vorstellungen einfärben. Dazu geben Sie einfach den Hex-Code der gewünschten Farbe an.

Sie wissen nicht, wie Sie den Hex-Code Ihrer Lieblingsfarbe herausfinden können? Dann werfen Sie doch einmal auf die Website von Computerhope.de – Das ist meine Lieblingsseite wenn es um das Ermitteln von Farbwerten geht.

Nach dem Speichern sieht das Widget dann so aus:

Farbiges Widget für WordPress

Image Widget

Die Standard-Textwidgets bieten leider keine Möglichkeit ein Bild einzufügen, wenn man nicht über HTML-Kenntnisse verfügt. Da hilft das Image Widget-Plugin weiter. Einmal aktiviert, findet sich im Widget-Bereich das neue Widget „Image Widget“

Widget für Bilder

Mit diesem Widget können Sie ganz einfach ein Bild auswählen, dass Sie vorher in die WordPress-Mediathek hochgeladen haben. Das Bild kann mit einer Bildunterschrift („Caption“) versehen und sogar verlinkt werden.

So sieht das Widget nach dem Speichern aus:

Bild im Widget

Den visuellen Editor für Widgets nutzen

Sie vermissen bei den Textwidgets die Möglichkeiten, die Ihnen der visuelle Editor von WordPress bei der Gestaltung von Seiten oder Beiträgen bietet? Müssen Sie gar nicht – Mit einem kleinen Kniff, den mir der Blogtrainer Karl-Heinz Wenzlaff verraten hat, stehen Ihnen alle Möglichkeiten des visuellen Editors auch für Widgets offen:

Starten Sie damit, dass Sie eine neue Seite erstellen:

Dashboard -> Seiten -> Erstellen

Diese Seite füllen Sie wie gewohnt mit den Inhalten, die später im Widget zu sehen sein sollen: Text, Bilder, Formatierungen, etc.

Wenn Sie fertig sind, wechseln Sie in den Text-Editor

Reiter für Text Editor

Jetzt sehen Sie Ihre Eingaben alle im HTML-Code vor sich. Markieren Sie einfach den gesamten Inhalt des Editors, kopieren Sie den Text ( Strg + C ), wechseln Sie in den Widget-Bereich ( Design -> Widgets ), öffnen Sie ein gewöhnliches Textwidget und fügen Sie den kopierten Text dort ein ( Strg + V ). Speichern nicht vergessen. Das war’s – schon haben Sie vollständig formatierte Inhalte in Ihrem Widget.

Hier dürfen Sie mir dabei über die Schulter schauen:

Hat Ihnen der Artikel gefallen? Dann teilen Sie ihn gern in Ihrem Netzwerk 🙂

Auf welche Widgets würden Sie nicht verzichten wollen? Schreiben Sie es mir in den Kommentaren.

Bildquelle:
© masterzphotofo – Fotolia.com

Print Friendly, PDF & Email

Kommentare

Widgets mit Farbe und Bild verschönern — 30 Kommentare

  1. Pingback: Weaver II - Das unterschätzte WordPress-Theme › WordPress-Bistro

  2. Hallo,

    hab gerade probiert einen Text im Word Press Editor zu formatieren und mit dem Standard Text Widget, das schon vorinstalliert ist zu verwenden. Dort formatiert man z.B. eine Überschrift mit Überschrift. Kopier ich anschließend diesen Text in das Text Widget und schreib darunter einen normalen Text sieht dieser genau gleich aus wie die Überschrift. Das Standard Text Widget sollte jedoch HTML interpretieren können?

    Liebe Grüße

    • Hier noch einmal der Text irgendwie sind die HTML Tags verschwunden. Hab den Text jetzt als HTML Kommentar () formatiert, damit das HTML Zeugs nicht verschwindet.

      hab gerade probiert einen Text im Word Press Editor zu formatieren und mit dem Standard Text Widget, das schon vorinstalliert ist zu verwenden. Dort formatiert man z.B. eine Überschrift mit <!–Überschrift–>. Kopier ich anschließend diesen Text in das Text Widget und schreib darunter einen normalen Text sieht dieser genau gleich aus wie die Überschrift. Das Standard Text Widget sollte jedoch HTML interpretieren können?

      • Ok, nun der dritte Versuch 🙂

        h3 vor und nach der Überschrift stehen jeweils für das öffnen und schließen Tag. Da die größer und kleiner Zeichen und das schließen Tag immer verschwinden bei den Kommentaren.

        hab gerade probiert einen Text im Word Press Editor zu formatieren und mit dem Standard Text Widget, das schon vorinstalliert ist zu verwenden. Dort formatiert man z.B. eine Überschrift mit h3 Überschrift h3. Kopier ich anschließend diesen Text in das Text Widget und schreib darunter einen normalen Text sieht dieser genau gleich aus wie die Überschrift. Das Standard Text Widget sollte jedoch HTML interpretieren können?

        Liebe Grüße

        • Hallo Michi,
          die Kommentarfunktion hier interpretiert HTML – Deswegen sind Deine HTML-Einfügungen wohl verschwunden.

          Zu Deiner Frage: Wenn Du die Überschrift mit [h3]Überschrift[/h3] formatierst, dann sollte das Textwidget das eigentlich korrekt interpretieren.

          Wenn Du schreibst, der Text nach der Überschrift sieht gleich aus wie die Überschrift, kann es sein dass Du das „/“ im abschließenden Tag vergessen hast?

          • Hallo,

            vielen dank für deine schnelle Rückmeldung!

            Ich habe nun einaml das Template gewechselt und dort funktioniert es. Daher muss wohl irgendwo ein Problem beim Template sein.

            Liebe Grüße
            Michael

  3. Pingback: Erklärungen zu Plugins | Pearltrees

  4. Pingback: Bildergalerien in WordPress erstellen › WordPress-Bistro

  5. Hallo,
    Ich hab ein Problem mit meiner ThemePacific: Category Posts Widget, nähmlich gefallen mir da die Postbimages vom Format her nicht, da sie die Thumpnails von meinen Youtube Videos sein sollen. Das sieht ziemlich blöd aus, da sie standartmäßig nähmlich quadratisch sind. Ich benutze das Theme iMag Mag und hoffe das du mir weiter helfen kannst.

    • Sorry, dass ich noch nicht dazu gekommen bin, Deine Frage zu beantworten. Ich bekomme zwischenzeitlich so viele Kommentare auf der Seite dass es mir nicht immer gelingt, Fragen für die ich recherchieren muss zeitnah zu beantworten.

      Um so schöner, dass Du offenbar selbst eine Lösung gefunden hast.

      Herzliche Grüße
      Michaela

  6. Pingback: Das WordPress Bistro hat Geburtstag › WordPress-Bistro

  7. Hallo, ich habe gerade das colorful text widget installiert, aber jetzt weiß ich nicht weiter. Wo muss das widget denn liegen – bei den verfügbaren oder in der Sidebar? Wenn ich den Color code von Computerhope eingebe, passiert garnichts.
    Ich hoffe sehr auf eine antwort, danke.
    Beste Grüße
    Heidi Schumacher

    • Hallo Heid, Du musst das Widget unter „Design“ – „Widgets“ in die Sidebar verschieben, in der es später auch angezeigt werden soll. Und dann natürlich mit Inhalt befüllen (das Widget), weil leere Widgets in der Regel nicht angezeigt werden.

  8. Hallo Michaela,

    ich habe diesen Plug-in für die Images jetzt runter geladen und extrahiert. Allerdings kann ich keine EXE ausführen oder sonst was. Wie sage ich meinem WordPress denn jetzt, dass ich dieses Plug-in habe und gern ein Bild in meinen Zweiten Widgetbereich legen möchte?

    Ich freue mich auf deine Antwort und Hilfe.
    Vielen Dank
    Liebe Grüße
    Franzi

    • Hallo Franzi, am einfachsten kannst Du das Plugin installieren wenn Du im WordPress-Dashboard direkt „Plugin“ – „Installieren“ auswählst und dann nach de Name des Plugins suchst – je nachdem, welches Plugin Du installieren möchtest. Dann klickst Du einfach auf „Installieren“ und den Rest erledigt WordPress für Dich.

      Du musst also nichts auf Deinem Rechner extrahieren und auch keine EXE ausführen.

      Wenn das Widget korrekt installiert ist findest Du dann unter „Design“ – „Widgets“ das entsprechende Widget in der Auswahl links und kannst es ganz einfach in den Widgetbereich auf der rechten Seite ziehen, in dem Du das Widget angezeigt bekommen möchtest.

  9. Hallo Michaela,

    ich finde den Reiter Plugin leider nicht. Auch nicht über die Suchfunktion. Ich nutze das kostenlose WordPress. Kann es daran liegen?

    Liebe Grüße

    • Ja, wenn Du Deinen Blog auf wordpress.com führst, dann wirst Du dort leider vergeblich nach der Möglichkeit suchen, Plugins zu installieren.

      Diese Möglichkeit gibt es nur bei selbstgehosteten WordPress-Blogs und -Websites.

  10. Pingback: Alternative zum Text-Widget in WordPress › WordPress-Bistro

  11. Pingback: WordPress Text-Widget: alternativ formatieren | Internet-Marketing-Start

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.


Ich möchte auch den WordPress-Rundbrief abonnieren