Mobirise Tutorials

Lightwidget

Ich habe diese Anwendung am 8. Juli 2025 in Mobirise integriert.

Hier ist ein Beispiel für ein Widget von lightwidget.com , das derzeit 15,00 USD pro Widget kostet und jederzeit auch nachträglich geändert werden kann. Die kostenlose Version unterstützt lediglich das HTTP-Protokoll und kann daher nicht auf Seiten mit einem HTTPS-Zertifikat verwendet werden. Hier die Preise 

Mit diesem Tool könnt ihr mühelos Instagram-Feeds erstellen. Es gibt verschiedene Layouts, mit denen man sein Widget über den Editor der Anwendung gestalten kann, wie zum Beispiel ein Grid-, Slider- oder Masonry-Widget. Das Masonry-Layout wird ausschließlich auf Desktop-Geräten angezeigt. Hier geht es zu Beispielen 

Die einzelnen Bereiche können in drei verschiedenen Displaygrößen unterschiedlich formatiert werden. So kann beispielsweise auf dem Smartphone ein anderes Layout gewählt werden als auf dem Desktop. Header und Footer jedes Layouts können individuell gestaltet oder vollständig weggelassen werden.

Ihr müsst lediglich eure E-Mail-Adresse hinterlassen und euer Instagram-Konto angeben. Die Erstellung der Widgets ist intuitiv und selbsterklärend. Am Ende kopiert ihr einfach den JavaScript- und Iframe Code, den ihr unten im Editor unter "Embed Code" findet, und fügt den gesamten Code an einer beliebigen Stelle in euren Mobirise-Block ein.

Unter der Rubrik "Fortgeschritten" (Advanced) können die CSS-Klassen des Widgets nach eigenen Wünschen angepasst werden. Im Widget-Editor habe ich zum Beispiel diese CSS unter Advanced eingetragen:

/* Footer 20px padding */
.lightwidget__footer {
  padding-top: 20px;
}

/* Display <= 500px */
@media (max-width: 500px) {
  /* Widget Header center */
  .lightwidget__header {
    margin: auto;
    width: 50%;
  }
  /* Homepage-Link none - 10px margin */
  .lightwidget__bio {
    display: none;
    margin-bottom: 10px;
  }
}

Die CSS der Lightbox hingegen kann nur über eine Style-Anweisung im Head-Bereich von Mobirise eingefügt werden. Ich habe beispielsweise einen Abstand von 60px nach oben hinzugefügt, damit die Lightbox nicht hinter meiner Menüleiste verschwindet:

<!-- Lightbox Lightwidget -->
<style>
.lightwidget__lightbox--active {
  padding-top: 60px !important;
}
</style>


Bitte stellt sicher, dass ihr unter den Einstellungen ⚙️ das Kästchen "Expired token notifications" (Benachrichtigungen bei ablaufenden Tokens) aktiviert, damit ihr über eine E-Mail rechtzeitig informiert werdet, wann der Token des Widgets erneuert werden muss. Lightwidget verwendet Zugriffstokens, um die neuesten Bilder und Videos von eurem Instagram-Konto abzurufen und in das Widget einzufügen. Wenn die Verbindung abläuft, können die Instagram-Widgets nicht mehr mit den aktuellsten Inhalten aktualisiert werden.