Ratgeber · Elementor · Three.js

3D in Elementor einbinden.

Elementor macht Seitenbau einfach — bis man eine 3D-Szene hineinsetzen will. Dann funktioniert sie im Editor nicht, lädt doppelt oder verschwindet nach dem Speichern. Hier sind die drei Wege, 3D sauber in Elementor zu bringen, vom schnellen HTML-Widget bis zum eigenen Widget mit Einstellungen.

Live-Demos ansehen →Projekt anfragen

Kurz gesagt

Für einen schnellen Test reicht das HTML-Widget von Elementor mit model-viewer. Für eigene Three.js-Szenen ist ein Shortcode aus einem kleinen Plugin robuster, weil Skripte sauber geladen werden. Sollen Redakteure Höhe, Modell oder Kamera direkt in Elementor einstellen, ist ein eigenes Elementor-Widget der beste Weg.

Drei Wege im Überblick.

	HTML-Widget	Shortcode	Eigenes Widget
Aufwand	Minuten	Ein kleines Plugin	Ein Plugin mit Widget-Klasse
Eigene Three.js-Szene	Möglich, aber fehleranfällig	Gut	Sehr gut
Einstellungen im Editor	Nein, nur Code	Über Parameter	Ja, mit Reglern und Feldern
Mehrere Szenen pro Seite	Fehleranfällig	Gut	Gut
Updatesicher	Ja	Ja	Ja
Geeignet für	Einzelnes Modell, Test	Individuelle Szenen	Wiederverwendbare Bausteine

Weg 1: Das HTML-Widget.

Das HTML-Widget ist in Elementor enthalten und nimmt beliebigen HTML-, CSS- und JavaScript-Code auf. Für ein einzelnes 3D-Modell mit model-viewer ist das der schnellste Weg: Widget auf die Seite ziehen, Code einfügen, fertig.

HTML-Widget: 3D-Modell mit model-viewer

<script type="module"
  src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>

<model-viewer
  src="/wp-content/uploads/2026/09/produkt.glb"
  alt="Produkt in 3D — ziehen zum Drehen"
  camera-controls
  auto-rotate
  touch-action="pan-y"
  loading="lazy"
  shadow-intensity="0.8"
  style="width:100%;height:480px;background:transparent;">
</model-viewer>

Taucht das Widget mehrfach auf einer Seite auf, lädt das Skript nur einmal — der Browser erkennt identische Modul-URLs. Die Höhe muss gesetzt sein, sonst hat der Viewer im Elementor-Container keine Fläche.

Für eigene Three.js-Szenen ist das HTML-Widget dagegen nur bedingt geeignet. Die Probleme:

Der Code steht in der Datenbank und ist schwer zu versionieren oder zu testen.
Import Maps dürfen auf einer Seite nur einmal definiert werden. Zwei HTML-Widgets mit je einer Import Map führen zu Fehlern.
Im Elementor-Editor wird das Widget bei jeder Änderung neu gerendert. Eine Three.js-Szene wird dabei immer wieder neu gestartet, ohne dass die alte aufgeräumt wird — der Editor wird langsam.
Größere Szenen mit mehreren hundert Zeilen Code gehören nicht in ein Textfeld.

Weg 2: Shortcode aus einem Plugin.

Die robustere Lösung: Der Three.js-Code liegt als Datei in einem kleinen Plugin. Das Plugin registriert einen Shortcode, und in Elementor setzt du ihn mit dem Shortcode-Widget ein. Vorteile: Der Code ist versionierbar, wird über WordPress sauber und nur einmal geladen, und derselbe Shortcode funktioniert auch in Gutenberg oder im klassischen Editor.

Wie ein solches Plugin aufgebaut ist, zeigt der Ratgeber Three.js in WordPress einbinden ausführlich. Für Elementor gibt es nur eine Besonderheit: Die Szene sollte nicht beim Laden des Skripts starten, sondern jedes Element mit einer bestimmten Klasse suchen und dort eine eigene Szene erzeugen. So funktionieren auch mehrere Shortcodes auf einer Seite.

Ein eigenes Widget erscheint in der Elementor-Seitenleiste wie jedes andere, etwa unter „3D-Modell“. Redakteure ziehen es auf die Seite und stellen in der gewohnten Oberfläche ein: welches Modell, welche Höhe, automatisch drehen ja oder nein, Hintergrundfarbe. Kein Code, keine Shortcode-Parameter.

Elementor bietet dafür eine offizielle Entwickler-Schnittstelle. Ein Widget ist eine PHP-Klasse mit Name, Titel, Symbol, Einstellungen und einer Ausgabefunktion.

Grundgerüst eines eigenen Elementor-Widgets

<?php
/**
 * Plugin Name: Elementor 3D-Modell Widget
 */

add_action( 'elementor/widgets/register', function ( $widgets_manager ) {

    class Modell_3D_Widget extends \Elementor\Widget_Base {

        public function get_name()       { return 'modell_3d'; }
        public function get_title()      { return '3D-Modell'; }
        public function get_icon()       { return 'eicon-image-box'; }
        public function get_categories() { return [ 'general' ]; }

        protected function register_controls() {
            $this->start_controls_section( 'inhalt', [ 'label' => '3D-Modell' ] );

            $this->add_control( 'modell', [
                'label'      => 'GLB-Datei',
                'type'       => \Elementor\Controls_Manager::MEDIA,
                'media_types'=> [ 'model' ], // setzt erlaubten GLB-Upload voraus
            ] );
            $this->add_control( 'hoehe', [
                'label'   => 'Höhe (px)',
                'type'    => \Elementor\Controls_Manager::NUMBER,
                'default' => 480,
            ] );
            $this->add_control( 'drehen', [
                'label'        => 'Automatisch drehen',
                'type'         => \Elementor\Controls_Manager::SWITCHER,
                'return_value' => 'ja',
                'default'      => 'ja',
            ] );

            $this->end_controls_section();
        }

        protected function render() {
            $s = $this->get_settings_for_display();
            if ( empty( $s['modell']['url'] ) ) {
                echo '<p>Bitte eine GLB-Datei auswählen.</p>';
                return;
            }
            wp_enqueue_script_module( 'model-viewer',
                'https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js' );

            printf(
                '<model-viewer src="%s" camera-controls touch-action="pan-y" %s style="width:100%%;height:%dpx;"></model-viewer>',
                esc_url( $s['modell']['url'] ),
                'ja' === $s['drehen'] ? 'auto-rotate' : '',
                absint( $s['hoehe'] )
            );
        }
    }

    $widgets_manager->register( new Modell_3D_Widget() );
} );

Das ist ein vereinfachtes Grundgerüst zum Verständnis. In einem echten Plugin gehört die Klasse in eine eigene Datei, und es wird geprüft, ob Elementor aktiv ist. Ob media_types mit model in deiner Elementor-Version die Mediathek korrekt filtert, sollte getestet werden — sonst ein URL-Feld verwenden.

3D im Elementor-Editor.

Der Elementor-Editor zeigt die Seite in einem eingebetteten Fenster und rendert Widgets bei jeder Einstellungsänderung neu. Für 3D hat das Folgen:

Szenen aufräumen: Eigene Three.js-Szenen müssen beim Neurendern ihre alte Instanz beenden — Renderer freigeben, Animationsschleife stoppen, Ereignisse entfernen. Sonst laufen nach zehn Änderungen zehn Szenen parallel.
Auf Elementor-Ereignisse reagieren: Elementor bietet im Frontend eine Schnittstelle, über die Skripte erfahren, dass ein Widget neu gerendert wurde. Darüber lässt sich die Szene gezielt neu starten.
Vorschau vereinfachen: Für aufwendige Szenen ist es oft sinnvoller, im Editor nur ein Vorschaubild mit dem Hinweis „3D-Szene — in der Vorschau sichtbar“ zu zeigen. Das hält den Editor schnell.

model-viewer ist hier unkomplizierter, weil er als Web-Komponente sein Aufräumen selbst erledigt.

Layout, Container und Responsive.

Feste Höhe oder Seitenverhältnis: Ein 3D-Canvas hat keine natürliche Höhe. Ohne feste Höhe oder aspect-ratio ist er im Container null Pixel hoch.
Größenänderungen erkennen: Elementor-Container ändern ihre Breite beim Wechsel zwischen Desktop-, Tablet- und Mobilansicht. Eigene Szenen sollten mit einem ResizeObserver auf den Container reagieren, nicht nur auf die Fenstergröße.
Mobile Höhe separat: 480 Pixel auf dem Desktop sind auf dem Smartphone oft zu viel. Bei eigenen Widgets lässt sich die Höhe als responsive Einstellung anlegen.
Tabs, Akkordeons und Popups: Liegt die Szene in einem versteckten Bereich, hat sie beim Laden keine Größe. Sie muss neu vermessen werden, sobald der Bereich geöffnet wird.
Bewegungseffekte: Elementors Scroll- und Parallax-Effekte auf demselben Container können mit der 3D-Interaktion kollidieren. Lieber am übergeordneten Element anwenden.

Typische Fehler.

Szene ist leer, keine Fehlermeldung: Container hat keine Höhe, oder das Modell ist falsch skaliert.
„Import map“-Fehler in der Konsole: Mehrere Import Maps auf einer Seite, etwa aus zwei HTML-Widgets oder einem Plugin. Import Map zentral einmal ausgeben.
Funktioniert in der Vorschau, nicht live: Ein Optimierungs- oder Caching-Plugin verzögert oder bündelt die Skripte. Ausnehmen, siehe 3D in WordPress schnell halten.
Editor wird immer langsamer: Alte Three.js-Szenen werden beim Neurendern nicht beendet.
GLB-Upload in der Mediathek wird abgelehnt: WordPress erlaubt den Dateityp standardmäßig nicht, siehe GLB-Dateien hochladen.

Ehrlich gesagt

Für ein einzelnes Modell auf einer Landingpage reicht das HTML-Widget völlig. Ein eigenes Widget lohnt sich, wenn 3D-Bausteine auf vielen Seiten von verschiedenen Redakteuren eingesetzt werden sollen — oder wenn es um einen Konfigurator geht, bei dem mehr passiert als Drehen.

Transparenz zu den Demos

Die Horizont-Baureise läuft eingebettet in einer WordPress-Website. Die übrigen Demos laufen als eigenständige Three.js-Anwendungen — technisch dieselbe Grundlage, die sich genauso in WordPress einbinden lässt. Die Markennamen sind überwiegend erfundene Showcases.

Live-Demos

Nicht glauben — ausprobieren.

Alle Demos laufen live im Browser, auch auf dem Smartphone.

Live-Demo

Horizont Bau

Scrollgesteuerte Baureise, eingebettet in WordPress.

Ausprobieren ↗

Live-Demo

AXIOM Maschinenbau

Explosionsansicht einer Antriebseinheit — Hotspots erklären jede Baugruppe.

Ausprobieren ↗

Häufige Fragen

FAQ — 3D in Elementor einbinden.

Wie binde ich ein 3D-Modell in Elementor ein?

Am schnellsten mit dem HTML-Widget von Elementor und Googles model-viewer: Skript und model-viewer-Element mit der URL der GLB-Datei einfügen und eine feste Höhe setzen. Für eigene Three.js-Szenen ist ein Shortcode aus einem Plugin oder ein eigenes Elementor-Widget robuster.

Warum wird meine 3D-Szene in Elementor nicht angezeigt?

Häufig hat der Container keine Höhe, weil ein 3D-Canvas keine natürliche Höhe besitzt. Weitere Ursachen sind ein falsch skaliertes Modell, mehrere Import Maps auf einer Seite oder ein Optimierungs-Plugin, das die Skripte verzögert oder bündelt.

Kann ich mehrere 3D-Modelle auf einer Elementor-Seite nutzen?

Ja. Mit model-viewer lädt das Skript nur einmal, auch bei mehreren Widgets. Eigene Three.js-Szenen sollten so geschrieben sein, dass sie alle passenden Elemente auf der Seite suchen und für jedes eine eigene Szene erzeugen, und die Import Map darf nur einmal ausgegeben werden.

Kann ich ein eigenes 3D-Widget für Elementor bauen?

Ja. Elementor bietet eine offizielle Entwickler-Schnittstelle. Ein Widget ist eine PHP-Klasse mit Name, Titel, Symbol, Einstellungen wie Modell, Höhe oder automatischer Drehung und einer Ausgabefunktion. Es wird über den Hook elementor/widgets/register registriert.

Warum wird der Elementor-Editor mit 3D-Szene langsam?

Der Editor rendert Widgets bei jeder Einstellungsänderung neu. Eigene Three.js-Szenen, die ihre alte Instanz dabei nicht beenden, laufen dann mehrfach parallel. Die Lösung ist, Renderer und Animationsschleife beim Neurendern aufzuräumen oder im Editor nur ein Vorschaubild zu zeigen.

Funktioniert 3D in Elementor auf dem Smartphone?

Ja, wenn die Höhe für mobile Ansichten angepasst ist, die Szene auf Größenänderungen des Containers reagiert und senkrechtes Wischen zum Scrollen erhalten bleibt, etwa mit touch-action auf pan-y.

Brauche ich Elementor Pro für 3D?

Nein. Das HTML-Widget und das Shortcode-Widget sind in der kostenlosen Version enthalten, und eigene Widgets lassen sich über die Entwickler-Schnittstelle auch ohne Pro registrieren.

Passt dazu.

Grundlagen

Erzähl mir, was du zeigen willst.

Ich sage dir ehrlich, ob sich 3D für dein Vorhaben lohnt — und wenn nicht, was stattdessen mehr bringt.

Zum Anfrageformular → WhatsApp

Antwort meist innerhalb von 24 Stunden · hallo@manuelkillert.de