Banner - WP Bistro Sparringspartner für WordPress

Widgets mit Farbe und Bild verschönern

Bild im Widget

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

Kommentare

30 Kommentare zu „Widgets mit Farbe und Bild verschönern“

  1. […] (Widgets sind Inhaltsblöcke, die man ganz einfach per Drag&Drop im Administrationsbereich an die gewünschte Stelle ziehen kann – Was man mit Widgets machen kann habe ich z.B. in diesem Artikel beschrieben.) […]

  2. Gast

    Wow, so einfach und so schön erklärt, toll und lieben Dank!! 🙂

  3. Toller Tipp mit den Textwidgets, genau das habe ich gerade gesucht 🙂

    1. Michaela Steidl

      Hallo Sophie, ich freue mich, dass der Beitrag hilfreich für Dich war 🙂

  4. Michi

    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

    1. Michi

      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?

      1. Michi

        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

        1. Michaela Steidl

          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?

          1. Michi

            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

  5. […] WordPress Textwidgets mit Farbe und Bild verschönern › WordPress-Bistro […]

  6. Karin Mager

    Liebe Michaela,

    Supertipps und so schön von dir im Video erklärt. Genau das habe ich schon gesucht.
    Der Tipp wird bei mir gleich in OneNote gespeichert.

    Danke, Karin

    1. Michaela Steidl

      Hallo Karin,

      Danke für das schöne Feedback 🙂

      Herzliche Grüße
      Michaela

  7. Bild ins Widget einbauen, erst lange gesucht – und so ging’s jetzt ganz schnell. Danke dafür!

    1. Michaela Steidl

      Gerne 🙂

  8. Brothos

    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.

  9. Brothos

    Die Frage hat sich schon wieder erledigt- aber trotzdem danke:)

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

  10. […] Widgets mit Farbe und Bild verschönern (2.344 Seitenaufrufe) […]

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

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

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

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

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

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

  14. […] gibt zwar Workaround-Lösungen, wie ich Sie im Artikel „Widgets mit Farbe und Bild verschönern“ in diesem Blog schon einmal vorgestellt […]

  15. Der Beitrag hat mir sehr geholfen, vielen Dank!

  16. Hallo und Guten Abend,

    klasse Information, ich werde dieses Plugin gleich einmal installieren und testen.

    vielen lieben Dank für diesen Beitrag,
    Stefan

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

    […] gibt zum einen Behelfslösungen, eine hat Michaela Steidl in Ihrem Artikel Widgets mit Farbe und Bild verschönern auf Ihrem Blog vorgestellt […]

  18. Es ist im Prinzip so einfach. Danke für´s zeigen, jetzt kann ich endlich auch Links in mein Textwidget einbauen.

Antworte auf den Kommentar von Weaver II – Das unterschätzte WordPress-Theme › WordPress-Bistro Antwort abbrechen

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