Homepage-Baukasten-Widgets: So baust Du externe Inhalte in Deine Website ein

Homepage-Baukasten-Widgets: So baust Du externe Inhalte in Deine Website ein

Die eigene Internetseite erweiterst Du mit dem Homepage-Baukasten von STRATO ganz einfach um Inhalte anderer Seiten, zum Beispiel um Facebook-Posts, YouTube-Videos oder Karten von Google Maps. Wir zeigen Dir, was Du alles auf Deiner Website einbinden kannst und wie einfach das geht.

Widgets: Kleine Bausteine, um Inhalte einzufügen

Im Homepage-Baukasten gibt es sogenannte Widgets: Das sind Bausteine, die Du frei in den Design-Feldern des Homepage-Baukastens platzieren kannst, um Inhalte anderer Seiten schnell und einfach einzufügen oder Deine Website um sinnvolle Funktionen zu erweitern. Im Baukasten findest Du folgende Arten von Widgets:

  • Social-Media-Widgets, um Nachrichten und Statusmeldungen einzubinden
  • Shop-Widgets, um Produkte zu verkaufen
  • Widgets zur Vereinbarung von Terminen oder zum Einbinden von Karten
  • Widgets, um Fotos, Bildergalerien oder Videos einzubinden
  • Ein Embed-Widget, um Inhalte über HTML-Code aus anderen Seiten einzubinden

Klicke im Homepage-Baukasten auf den Reiter Inhaltselemente: Damit blendest Du eine Übersicht mit allen verfügbaren Widgets ein.

Der STRATO Homepage-Baukasten hat viele Widgets, um Inhalte anderer Seiten einzufügen. Damit integrierst Du zum Beispiel Inhalte aus sozialen Netzwerken in Deine Homepage.

1. Widgets für soziale Netzwerke

Im Bereich Inhaltselemente gibt es viele Widgets zu entdecken, mit denen Du Nachrichten und Status-Updates aus sozialen Netzwerken auf Deiner Webseite anzeigen kannst. Zu den Widgets in diesem Bereich gehören:

  • Facebook
  • Twitter
  • YouTube
  • Vimeo
  • Xing
  • Linkedin
Per Drag und Drop ziehst Du Widgets auf Deine Website und erzeugst so im Handumdrehen Kontaktformulare, Karten, Fotoalben und vieles mehr.

Wie Du die Social-Media-Widgets und andere Widgets einbindest, erfährst Du in unserer FAQ zum Homepage Baukasten.

2. Widgets für Shops, Termine und Karten

Widgets helfen Dir auch, Produkte und Services auf Deiner Website anzubieten. Mit dem Shop-Widget kannst Du einen eigenen Shop auf Deiner Website integrieren. Mehr über das Shop-Widget erfährst Du in unserem Blogbeitrag „Kann ich mit dem Homepage-Baukasten auch Produkte verkaufen?“.

Möglichkeiten für Terminvereinbarungen oder Reservierungen auf Deiner Website bietest Du mit dem Kalender-Widget an. Über das Kontaktformular-Widget bindest Du ein Kontaktformular auf Deiner Website ein, damit Dir Besucher Nachrichten schreiben können. Das Widget Lage/Anfahrtsplan hilft Deinen Website-Besuchern beim schnellen Auffinden von Orten und bei der Routenplanung.

Binde ein Kontaktformular ein, um für Besucher erreichbar zu sein.

3. Widgets für Fotos, Diashows und Collagen

Einfach nur Bilder auf der Website sind heute für eine gelungene Präsentation nicht mehr genug. Die Widgets Fotogallerie, Foto-Diashow und Foto-Collage geben Dir kreative Möglichkeiten Deine Bilder oder Produkte ansprechend auf Deiner Website zu präsentieren. Nach dem Einfügen der Widgets lädst Du nur noch die Motive hoch und konfigurierst das Modul nach Deinen Vorstellungen. In sehr kurzer Zeit entstehen so effektvolle Hingucker.

Im Diashow-Editor des Diashow-Widgets lassen sich Bilder ganz einfach hochladen und zusammenstellen.

4. Embed-Widget: HTML-Code aus anderen Websites einfügen

Sollte kein passendes Widget für den externen Inhalt zur Verfügung stehen, den Du einbinden willst, setzt Du das Widget Embed ein. Darin fügst Du HTML-Code ein, den Dir andere Websites zur Verfügung stellen. Das funktioniert beispielsweise mit folgenden Online-Angeboten:

  • Pinterest-Boards
  • Bilder bei Deviant Art
  • Spotify-Playlisten
  • Deezer-Playlisten
  • Etsy-Shops
  • Meerkat-Video
  • Periscope-Video
  • u.v.m.

Das folgende Beispiel zeigt Dir, wie Du ein Pinterest-Widget einbindest:

  1. Öffne den Reiter Inhaltselemente im Homepage-Baukasten und ziehe das Embed Widget auf der Website an die gewünschte Position.

  2. In einem neuen Browser-Fenster rufst Du den Widget Builder von Pinterest auf. Hier wählst Du aus, ob Du einen einzelnen Pin, ein Pin-Board oder ein Profil verlinken willst. In unserem Beispiel wählen wir ein Board. Gib dann die URL des Boards ein.

  3. Kopiere den Code aus dem Eingabefeld in die Zwischenablage und gehe zum Homepage-Baukasten. Öffne mit einem einfachen Klick auf das Zahnrad-Symbol die Einstellungen für das Embed Widget.

  4. Wähle bei Art der Einbindung die Option Embed-Code und füge den HTML-Code aus der Zwischenablage im Feld darunter ein. Bestätige mit OK.
Über den Widget Builder von Pinterest generierst Du den HTML-Code, den Du im nächsten Schritt im Homepage-Baukasten einfügst.
Gib den HTML-Code im Embed-Widget ein, um das Pinterest Board auf Deiner Website einzubinden.

Ab sofort zeigt Deine Website automatisch die letzten 30 Einträge vom eingebundenen Pinterest-Board an.

Auf Deiner Startseite erscheinen nun die aktuellsten Pins in Deinem Pinterest Board.

Du hast schon Widgets über Deinen Homepage-Baukasten eingebunden? Dann kommentiere diesen Beitrag und zeige uns Deine Website mit Deinen Widgets.

Hast Du Lust bekommen, Deine eigene Website mit dem Homepage-Baukasten zu erstellen?

Zum STRATO Homepage-Baukasten

Dieser Beitrag erschien ursprünglich am 25. Februar 2016, geschrieben von
Jörn-Erik Burkert. Wir haben den Beitrag aktualisiert.

Schlagworte:

Teilen

  1. Avatar

    Michael Stute sagte am

    Hallo, ich nutze den Homepage Baukasten und möchte ganz einfach einen Link auf einer komplett neuen Seite öffnen lassen. Leider finde ich die Möglichkeit dazu nicht?
    Kann mir da bitte jemand helfen?

    Antworten
    • Avatar

      Oliver Meiners sagte am

      Hallo Michael,

      einen Link kannst Du auf zwei Arten setzen:

      1. Über Text: Markiere den Text, von dem aus Du verlinken möchtest. Im Menü wählst Du dann Hyperlink. Wähle unter Art der Verlinkung die Option „Externe Seite“. Du kannst entscheiden, ob sich der Link in einem neuen Tab öffnet.

      2. Über ein Bild: Bewege den Cursor über das Bild, von dem Du verlinken möchtest. Klicke auf das Rädchen mit der Schaltfläche Konfiguration öffnen. Unter Beim Anklicken des Bildes kannst Du hier die Option „Externer Link“ auswählen. In diesem Fall kannst Du entscheiden, ob sich der Link in einem neuen Fenster oder in einem Popup-Fenster öffnet.

      Viele Grüße
      Oliver

      Antworten
  2. Avatar

    Sebastian sagte am

    Hallo,

    ich würde gerne einen externen Link in ein Portfolio Widget einfügen. Leider funktioniert es nicht mit den vorhandenen Tipps. Es geht nur um eine zur Verfügungsstellung des direkten Weiterleitens!

    Liebe Grüße

    Antworten
    • Avatar

      Oliver Meiners sagte am

      Hallo Sebastian,

      leider ist es nicht möglich, Hyperlinks in das Portfolio Widget einzufügen. Ich habe Deinen Wunsch aber an die Kollegen vom Produktmanagement weitergegeben.

      Viele Grüße
      Oliver

      Antworten
  3. Avatar

    erotikfakten sagte am

    Hallo, auch bei mir funktioniert die Einbindung von Inhalten anderer Seiten mit einem HTML Code nicht. Auch nicht mit dem Widget Embed. Der Inhalt wird nicht angezeigt, in keinster Weise. Es ist ein Code für ein Partnerprogramm von adclick.net und der sieht so aus:
    Sollte jetzt ein Werbebanner angezeigt werden nach Veröffentlichung dann entschuldige ich mich dafür ^^
    Ich finde auch keine Möglichkeit die Seite auf HTML umzustellen, was vielleicht helfen würde wie es bei blogger.com der fall ist, wo man das ganze in den HTML Modus umstellen kann und dann HTML Codes einfügen kann. Wie mache ich das in meinem Strato Baukasten?

    Antworten
    • Avatar

      erotikfakten sagte am

      Liegt es vielleicht an dem HTML Code, dass der Inhalt nicht angezeigt wird? Weil auch hier in meiner Anfrage wird nichts angezeigt obwohl ich den Code eingefügt habe um es als Beispiel anzuzeigen.
      Ich bin gerade total verwirrt und habe keine Ahnung ob und/oder was ich falsch mache oder ob es an dem HTML Code von adclick.net liegt. Ich brauche bitte schnelle Abhilfe von Fachleuten. Vielen Dank!

      Antworten
      • Avatar

        Oliver Meiners sagte am

        Hallo,

        ich empfehle Dir einen Blick auf diesen Beitrag: https://strato.de/blog/fussball-homepage-baukasten/

        Darin erklären wir anhand eines fussball.de-Widgets, wie man HTML Code in den Homepage-Baukasten einbindet.

        Wenn das nicht funktioniert, kann das mehrere Gründe haben. Ein Faktor ist der HTML Code selbst. Habe bitte Verständnis dafür, dass wir Dich bei diesem nicht unterstützen können.

        Für alle Fragen, die den Homepage-Baukasten und das Embed-Widget betreffen, kannst Du Dich auch an unseren Kundensupport wenden. Du erreichst ihn über Facebook, Twitter oder über Hilfe & Kontakt.

        Viele Grüße
        Oliver

        Antworten
  4. Avatar

    Stark sagte am

    Hallo,

    ich benutzre den Baukasten jetzt mitlerweile 4 Jahre.
    Nun habe ich mal etwas wo ich beim Einbinden nicht weiter komme.
    Für meine Kunden habe ich die Möglichkeit einen Finanzierungsrechner von einem Finanzdienstleister auf meiner Seite einzubinden.

    Leider funktioniert dies aber nicht.

    Es handelt sich dabei um ein Java Skript.

    Wie kann ich Java-Skript einbinden?

    Vielen Dank

    Antworten
    • Avatar

      Michael Poguntke sagte am

      Hallo,

      was die Einbindung von externen Inhalten angeht, können wir grundsätzlich immer nur bedingt helfen, da wir selbst nicht das Wissen über jeden einzelnen externen Dienst und sein Funktionsweise haben können.

      Grundsätzlich ist es aber korrekt, hierfür das Embed-Widget einzusetzen und einen entsprechenden Code zu schreiben, der hier eingefügt wird.

      Bei JavaScript gibt es bestimmte Anforderungen an den Code, dazu findet man zum Beispiel auf dieser Website weitere Informationen: html-seminar.de/javascript-einbinden.htm

      Viele Grüße
      Michael

      Antworten
  5. Avatar

    Adrian sagte am

    Hallo liebes Team,

    ich versuche gerade die Objektliste von Immowelt auf meiner Homepage einzubinden. Das mit dem Embed habe ich alles verstanden und dort auch den code von Immowelt reinkopiert. Es wird mir auch angezeigt, dass es „powered bei Immowelt aG ist“, aber leider keine Inhalte .. woran kann das liegen ?

    Antworten
Weitere Kommentare laden

Sie können erst kommentieren, wenn Sie unseren Datenschutzbestimmungen und den Cookies zugestimmt haben. Aus Datenschutzrechtlichen Gründen dürfen wir andernfalls keine personenbezogenen Daten von Ihnen aufzeichnen.

Klicken Sie dazu einfach unten im Browser Fenster auf den blauen Button Akzeptieren. Nach dem Neuladen der Seite können Sie Ihr Kommentar schreiben.