KeyShot

Nachdem Sie den KeyShotXR erstellt haben, finden Sie die Dateien in Ihrem KeyShot-Ressourcenordner unter Animationen oder an dem Ort, den Sie im KeyShotXR-Assistenten ausgewählt haben.

Das Anzeigen des KeyShotXR oder des Webkonfigurators auf einer WordPress-Webseite ähnelt dem Anzeigen auf einer Webseite mit statischen Seiten. Wenn Sie den KeyShotXR oder Web Konfigurator in Ihre WordPress-Seite aufnehmen möchten, können Sie ihn mithilfe eines WordPress-Plugins einbetten oder einfach über einen Iframe hinzufügen, z.B. in einem HTML-Block im Gutenberg-Editor.

Voraussetzungen:

Speicherort: Bevor Sie Ihren KeyShotXR oder Web Konfigurator in Ihre WordPress-Seite einbetten können, müssen Sie ihn online verfügbar machen. Laden Sie den gesamten Ordner KeyShotXR oder Web Konfigurator auf Ihren Webserver hoch. (Wenn Sie beispielsweise den Ordner my_keyshotxr nach /srv/www/wordpress/xr/ hochladen, wird der KeyShotXR unter yourwebsite.com/xr/my_keyshotxr/ angezeigt.)

Betten Sie einen KeyShotXR über iframe ein

Wenn Sie Ihren KeyShotXR rendern, enthält der Ordner auch instructions.html. Hier finden Sie einen Codeabschnitt, der fast direkt in den WordPress-Editor auf der Seite/dem Beitrag kopiert werden kann, in die Sie ihn einbetten möchten. Sie müssen lediglich die src-URL bearbeiten, damit sie auf den Speicherort auf dem Webserver verweist.

1. Laden Sie den Ordner KeyShot XR auf Ihren Webserver hoch
2. Kopieren Sie den KeyShotXR-Code aus der Dateiinstructions.html.
3. Melden Sie sich im Admin-Bereich Ihrer WordPress-Seite an und wählen Sie die Seite/den Beitrag aus, auf der/der KeyShotXR angezeigt werden soll.
4. Stellen Sie sicher, dass Sie im WordPress-Bildschirm zum Bearbeiten von Posts / Seiten die Registerkarte Text (nicht die Registerkarte Visuell) auswählen.
5. Fügen Sie den Code aus der Anweisungsdatei in den Editor ein.

• Stellen Sie sicher, dass der Speicherort der src-URL der HTML-Datei im Code mit dem Speicherort des Uploads übereinstimmt.
• Wenn Sie mit SSL auf eine sichere Website hochladen, stellen Sie sicher, dass in der src-URL https anstelle von http verwendet wird.

Details

Das Styling und die Divs um den Iframe stellen sicher, dass das Element in einem ansprechenden Layout funktioniert. Es passt sich der Breite des Containers an, ohne das Seitenverhältnis zu verlieren.

<div style="max-width: 1000px; max-height: 1000px">
  <div style="left: 0px; width: 100%; height: 0px; position: relative; padding-bottom: 100%; overflow: hidden;">
    <iframe style="position: absolute; top: 0px; left: 0px; height: 100%; width: 1px; min-width: 100%;" src="https://mywebserver.com/my_keyshotxr.html" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>
  </div>
</div>

Beispiele

<div style="max-width: 800px; max-height: 450px">
  <div style="position: relative; padding-bottom: 56.25%; height: 0px; overflow: hidden;">
    <iframe src="https://media.keyshot.com/web/keyshot9/hovr-xr/hover-xr.html" scrolling="no" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" style="position: absolute; top: 0px; left: 0px; height: 100%; width: 1px; min-width: 100%; *width: 100%;" frameborder="0"></iframe>
  </div>
</div>

<div style="max-width: 800px; max-height: 450px; border:1px solid #ccc;">
  <div style="position: relative; padding-bottom: 56.25%; height: 0px; overflow: hidden;">
    <iframe src="https://media.keyshot.com/web/keyshot9/assistant-xr/index.html" scrolling="no" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" style="position: absolute; top: 0px; left: 0px; height: 100%; width: 1px; min-width: 100%; *width: 100%;" frameborder="0"></iframe>
  </div>
</div>

Betten Sie einen Web-Konfigurator über iframe ein

1. Laden Sie den Webkonfigurationsordner auf Ihren Webserver hoch
2. Melden Sie sich im Admin-Bereich Ihrer WordPress-Seite an und wählen/erstellen Sie die Seite/den Beitrag, auf der/dem KeyhotXR angezeigt werden soll.
3. Stellen Sie sicher, dass Sie im WordPress-Bildschirm zum Bearbeiten von Posts / Seiten die Registerkarte Text (nicht die Registerkarte Visuell) auswählen.
4. Fügen Sie den folgenden Code in diesen Bereich ein. Stellen Sie sicher, dass Sie die unten genannten Werte ersetzen, um sie an Ihren Webkonfigurator anzupassen.

<iframe src="https://mywebserver.com/my_webconfigurator.html" frameborder="0" scrolling="no" style="max-width: 1600px; max-height: 900px; height: 100%; width: 100%;"> </iframe>