Embed-Widget Tutorial


Embed-Icon

Sie können das Embed-Widget benutzen, um externe Inhalte (Code, Internetseite etc.) in Ihrer Homepage einzubinden. 

Ziehen Sie einfach das Widget in den gewünschten Bereich Ihrer Webseite ein. Machen Sie sich keine Sorgen - Sie können jederzeit die Größe und die Position der Anzeige anpassen. Dies ermöglicht eine optimale Darstellung der von Ihnen eingebundenen Inhalte genau nach Ihren Wünschen!

embed-config-resize

Sie sehen nun den Konfigurationsdialog. Bei "Art der Einbindung" haben Sie die Wahl zwischen 2 Möglichkeiten - Embed-Code und Internetadresse. Die zweite Variante eignet sich am besten an, wenn Sie eine komplette Webseite integrieren möchten.

embed-config-internetandresse

Im Feld "Seiten-URLtragen Sie bitte die gewünschte Internetadresse nach dem gezeignet Muster ein. Klicken Sie anschließend auf den Button "OK".

Die zweite Möglichkeit besteht in der Einbindung eines Embed-Codes, d.h. wenn Sie keine komplette Webseite, sondern einzelne Inhalte (z.B. Informationsartikel, Werbungsbanner etc.) einbinden möchten, ist das die richtige Option für Sie.

Im Feld "Embed-Code" tragen Sie bitte Ihren HTML-Code ein - einfach per Copy-Paste. Sie können den Code selber erstellen oder einen exterenen vorgenereierten Code verwenden. Falls Sie über keine HTML-Kenntnisse verfügen, ist die folgende Webseite eine gute Lernressource für Anfänger: http://www.w3schools.com/

embed-config-code

Mit Hilfe von CSS (Cascading Style Sheets) können Sie Ihren HTML-Code anpassen - das sind Regeln, die Sie für bestimmte Elemente in Ihrem Code definieren können und sie somit optisch verschönern können. Auf der oben genannten Webseite können Sie wertvolle CSS-Kenntnisse erwerben.

Im Konfigurationsdialog können Sie zwischen 3 Möglichkeiten der CSS Einbindung auswählen:

1) "kein CSS" - es werden keine CSS-Regeln angewendet, Ihr HTML-Code erscheint unverändert auf der Webseite

2) "globales CSS" (Standardeinstellung) - Ihr HTML-Code passt sich an die Umgebung an, d.h. Ihre Einbindung hat die gleichen Schrift, Schriftfarbe und -größe usw. wie Ihre Webseite.

3) "eigenes CSS" - Ihr HTML-Code übernimmt die von Ihnen selbst definierten Regeln.

Achtung: Diese Funktion gibt Ihrer Webseite einen einzigartigen Gestalt, erfordert aber auch gewisse Kenntnisse in HTML & CSS!

embed-config-css

Im folgenden sehen Sie ein einfaches Beispiel für die Einbindung des Embed-Widgets:

Konfigurationsdialog mit globalem CSS:

embed-example-1

Ausgabe mit globalem CSS:

embed-example-2

Konfigurationsdialog mit eigenem CSS: 

embed-example-3

Ausgabe mit eigenem CSS: 

embed-example-4