Schnelleinstieg "Cheetah"

Arbeiten mit dem Webseiteneditor

SCHNELLEINSTIEG CHEETAH

iFrames und Inline-HTML :  Objekte einbetten  

Oftmals möchte man Inhalte von Plattformen wie Youtube (Videos), Google (Maps), Blogger (Blogartikel) oder Yumpu (pdf's) in seine eigene Webseite einbetten. Die genannten Plattformen stellen dafür einen sogenannten "Einbettungscode" zur Verfügung, der in den Webseitencode an der entsprechenden Stelle einzufügen ist. Nur leider hat man im Fall des Cheetah Sitebuilders keinen Zugriff darauf. Aber Cheetah bietet in seiner Elementeliste ein entsprechendes Element an, mit dem sich kinderleicht iFrames und Einbettungscodes in eine Webseite integrieren lassen. Es ist im rechten Randmenü unter "Neu" - "Elemente" - "iFrame / HTML" zu finden. 

Einbetten von Google Maps

Als erstes ist dazu im Browser auf die Plattform "Google Maps" zu wechseln und dort der Ort "Cheops-Pyramide, Al Haram, Nazlet El-Semman, Al Giza Desert, Ägypten" zu suchen. Anschließend ist über die Zoom-Funktion der gewünschte Kartenausschnitt zu wählen. Ist das geschehen, muss nur noch das linke Randmenü von Google Maps geeöffnet und dort der Eintrag "Karte teilen und einbetten" angeklickt werden, worauf sich folgendes Fenster öffnet:

Manchmal möchte man - meist auf der Kontaktseite - ein Stück "Stadtplan" einbinden, aus dem ein potentieller Besucher z. B. den genauen Ort einer Firma entnehmen kann. Während man mit Screenshots aus diversen Stadtplänen leicht mit dem Urheberrecht in Konflikt gerät, ist das Einbetten von Karten aus Plattformen wie Google Maps völlig unproblematisch, wenn man den Einbettungscode direkt der Plattform entnimmt.  Und wie das genau geht, soll nun im Einzelnen anhand eines Beispiels schrittweise erläutert werden.

Angenommen, die Nachlassverwalter des Pharaos "Cheops" möchten auf ihre Webseite ein zoombares Satellitenbild bzw. Karte mit dem (leeren) Grabmal ihres Mandanten integrieren. Welche einzelnen Arbeitsschritte sind dafür notwendig?

Unter dem Tab "Karten einbetten" finden Sie den von Google Maps automatisch generierten Einbettungscode, den Sie mit einem Klick auf den Link "HTML KOPIEREN" in die Zwischenablage kopieren müssen. Der Rest ist schnell getan. Sie wechseln wieder zurück in den Cheetah Sitebuilder und ziehen sich dort aus dem rechten Randmenü den HTML-Container auf ihre Webseite. Anschließend kopieren Sie in dessen Editiermodus den Inhalt der Zwischenablage unter "Allgemeine Einstellungen" in das Feld Einbettungscode". Und das ist schon alles. Jetzt können Sie, wenn Sie möchten, den Container noch etwas skalieren, platzieren und formatieren - und dann dessen Funktionalität und Aussehen im Vorschau-Modus überprüfen.

Einbetten von Youtube-Videos

Wie Sie bereits wissen, stellt Cheetah für das Einbetten von Youtube-Videos in eine Webseite ein eigenes Element zur Verfügung. Sie können aber auch das Inline-HTML-Element dafür verwenden:  Auf der Youtube-Seite das gewünschte Video aussuchen, dessen Einbettungscode in die Zwischenablage kopieren (unter "Teilen" zu finden - "Einbetten") und anschließend in das Inline-Element eintragen - also genauso, wie bei der Google-Map:

Beachten Sie aber, dass Sie im Fenster, in dem der Einbettungscode bei Youtube angezeigt wird, noch weitere diverse Einstellungen vorgenommen werden können. Erst wenn Sie damit fertig sind, drücken Sie die Schaltfläche "Kopieren". Der Einbettungscode befindet sich jetzt in der Zwischenablage und kann so zum iFrame / Inline HTML - Element übertragen werden:

Einbetten von pdf-Dateien

Es gibt verschiedene Methoden, wie sich pdf-Dokumente in eine Webseite einbetten lassen. Auf jeden Fall muss eine solche Datei natürlich an einem Ort gespeichert sein, von wo sie von der Webseite aus erreichbar ist. Hier bieten sich Online-Plattformen wie "Yumpu" oder diverse Cloudspeicher wie "Onedrive" an. In diesem Beispiel hier soll explizit "Yumpu" verwendet werden, welches mit geringen Einschränkungen kostenlos genutzt werden darf und zugleich auch Einbettungscode für die Dokumentenanzeige auf der Webseite über einen speziellen Wizard zur Verfügung stellt.

Das folgende Video gibt Ihnen eine kleine Einführung in dieses PDF-Publishing-System:

Nach dem Sie Ihre pdf auf die Plattform hochgeladen und die entsprechenden Metadaten in die dafür vorgesehene Maske eingetragen haben, können Sie über die Funktion "Embed" den Einbettungscode im Dialog erstellen:

Ein Klick auf die im Screenshot gekennzeichnete Schaltfläche eröffnet Ihnen den Zugang zu einem Wizard ("Einbettungsoptionen festlegen"), in dem Sie diverse Einstellungen bezüglich des später auf ihrer Webseite sichtbaren pdf-Betrachters vornehmen können. Das betrifft u. a. den Stil, die Größe und die Seitenzahl der Startseite sowie das Zuschalten diverse Bedienelemente (einige Funktionen sind jedoch nur in der kostenpflichtigen Variante zugänglich). Mit jeder Einstellung wird dabei simultan der im oberen Teil des Wizards angezeigte Einbettungscode modifiziert. Am Ende müssen Sie nur noch diesen Einbettungscode in die Zwischenablage übernehmen und anschließend dem Inline / HTML - Element auf Ihrer Webseite zuweisen:

Beachten Sie, dass Sie die Größe des Einbettungsbereichs möglichst gleich der Größe des im Einbettungscode angegebenen Embed-Fensters wählen (hier 940x846 Pixel), dass Sie anschließend noch ein klein wenig vergrößern, bis die Rollbalken verschwinden). Das Ergebnis könnte dann so aussehen:

In der Smartphone-Ansicht ist es aber meist besser, die pdf direkt per iFrame einzubinden. Dazu brauchen Sie in diesem folgenden Code, der den Google-Viewer explizit verwendet,  nur den Zugriffspfad zur pdf-Datei (rot) zu Ihrer pdf auszutauschen:

 < iframe style="width: 260px; height: 420px;" src= "https://docs.google.com/gview? url= {URL zur PDF} &embedded=true" height="240" width="320" frameborder="0"> < /iframe>

Hinweis: Die beiden Varianten müssen Sie natürlich wechselseitig verbergen, so dass die erste Variante nur in der Desktop-Ansicht und die zweite Variante nur in der Smartphone-Ansicht angezeigt wird (auf dieser Seite ist das nicht geschehen, um den Unterschied zu zeigen).

Einbetten von mit dem Builderall Digital Magazine Editor erstellten Magazinen

Im PREMIUM-Plan von Builderall ist der "Digital Magazine Editor" enthalten, mit dem man mit wenig Aufwand hochwertige pdf-Magazine erstellen kann. Diese Magazine können sowohl als pdf-Dateien gespeichert (und damit natürlich auch ausgedruckt) als auch in Webseiten eingebettet werden, wobei der Einbettungscode direkt im Editor erzeugt wird. Auch dazu ein kleines Beispiel.

Wenn das Magazin fertiggestellt ist, kann der Einbettungscode durch Betätigung der Scaltfläche "Überenehmen" erzeugt werden:

Mit dem Button "Kopieren" können Sie ihn dann leicht in die Zwischenablage übernehmen und auf diese Weise in das iFrame / HTML - Element auf Ihrer Webseite übertragen:

Beispiel für ein pdf-Magazin

-  Cheetah-Einstieg: -

Startseite  Anwendungsgebiete  Cheetah-Sitebuilder  Mockup-Studio  Digital-Magazine-Editor  OnPage-SEO  Wordpress  3D-Photo-Editor-Studio  FAQ