So verwendest du das Simplio3D WordPress Plugin in Elementor

Das Plugin Simplio3D WordPress verfügt über keine separaten Elementor-Widgets – und benötigt sie auch nicht. Jeder Simplio3D-Block ist zugleich ein Shortcode, den Sie mit Elementors eigenem Shortcode-Widget platzieren – ein Widget pro Block. Der Shortcode gibt exakt das aus, was der Block ausgibt. Daher funktioniert ein Produktkonfigurator in Elementor genauso wie einer, der im WordPress-Block-Editor erstellt wurde: eine Live-Konfiguration, die von allen Widgets geteilt wird, einschließlich 3D-Toolbar, Abmessungen, AR, Live-Preis, Zusammenfassung, Angebotsanfragen und dem WooCommerce-Warenkorb.

Dieser Leitfaden zeigt den schnellen Weg: Ihre IDs finden, das Layout erstellen, zum Warenkorb hinzufügen und typische Fehler beheben. Er wurde für Plugin-Version 2.0.3 geschrieben und funktioniert mit der kostenlosen Version von Elementor.

Bevor Sie beginnen

• Das Plugin Simplio3D, Version 2.0.3 oder neuer, aus dem Plugin-Verzeichnis von WordPress.org, das im Modus Simplio3D v3 läuft. Neue Installationen starten in diesem Modus. Eine von Version 1.x aktualisierte Website bleibt im Legacy-Modus, bis Sie unter Simplio3D → Migration wechseln.
• Ihr verbundenes Simplio3D-Konto: Gehen Sie in WordPress zu Simplio3D → Bei Simplio3D anmelden.
• Ein veröffentlichtes Projekt: Öffnen Sie in Simplio3D Teilen, aktivieren Sie den Freigabelink und lassen Sie ihn ohne Passwort. Wenn Sie Einbettungsdomains einschränken, fügen Sie die Domain Ihrer Website hinzu.
• Elementor. Die kostenlose Version genügt.
• Für „Zum Warenkorb hinzufügen“: WooCommerce und ein einfaches Produkt mit Preis.

Mit WooCommerce zum Warenkorb hinzufügen

Im Block-Editor verknüpft die Auswahl eines Produkts im Block „Zum Warenkorb hinzufügen“ dieses mit Ihrem Projekt. Ein Shortcode kann das nicht, daher müssen Sie das Produkt zuerst selbst verknüpfen:

1. Bearbeiten Sie unter Produkte ein einfaches Produkt mit regulärem Preis.
2. Öffnen Sie Produktdaten → Simplio3D, setzen Sie Simplio3D-Projekt auf Ihr Projekt und Warenkorbpreis auf von Simplio3D berechneter Preis (serverseitig verifiziert) oder auf den eigenen WooCommerce-Preis des Produkts. Klicken Sie auf Aktualisieren.
3. Notieren Sie die Produkt-ID: Fahren Sie in der Produktliste mit der Maus über das Produkt oder lesen Sie post=123 in der Adressleiste des Bearbeitungsbildschirms ab.
4. Ersetzen Sie das Submit-Widget durch [simplio3d block="action" project="PROJECT-ID" mode="cart" product="123"]. Fügen Sie quantity_mode="selector" hinzu, damit Käufer eine Menge auswählen können, und after_add="cart", um sie zum Warenkorb weiterzuleiten.

Im Warenkorb, Checkout, in Bestell-E-Mails und unter WooCommerce → Bestellungen werden dann die Konfiguration, ein Bild davon und der verifizierte Preis angezeigt.

Ein mit dem Simplio3D-Preis verknüpftes Produkt kann nur über den Konfigurator gekauft werden. Daher fordert die normale Schaltfläche „Zum Warenkorb hinzufügen“ von WooCommerce auf der Produktseite Käufer dazu auf, es zuerst zu konfigurieren. Mit der kostenlosen Version von Elementor sollten Sie den Konfigurator auf einer eigenen Seite belassen und von der Produktseite darauf verlinken, beispielsweise mit einem Link „Ihren konfigurieren“ in der Kurzbeschreibung. Mit Elementor Pro können Sie eine Vorlage für einzelne Produkte erstellen, die Simplio3D-Shortcode-Widgets anstelle von Elementors „Zum Warenkorb hinzufügen“-Widget verwendet; testen Sie diese Einrichtung in der Vorschau, bevor Sie live gehen.

Die am häufigsten verwendeten Einstellungen

Fügen Sie Einstellungen innerhalb des Shortcodes mit geraden Anführungszeichen und Unterstrichen hinzu. Beim Kopieren aus Word, Google Docs oder Slack können Anführungszeichen typografisch werden, woraufhin WordPress die Einstellung ignoriert.

• height="620px" mobile_height="400px" im Viewer legt seine Höhe auf Desktop-Geräten und auf Bildschirmen mit einer Breite von bis zu 781 px fest.
• loading="eager" bei einem Viewer am Seitenanfang lädt ihn sofort, statt erst, wenn er in den sichtbaren Bereich gescrollt wird.
• layout="dropdown" bei einem Options-Widget wandelt dessen Auswahlmöglichkeiten in ein Dropdown-Menü um. Je nach Optionstyp funktionieren auch grid, list und buttons.
• columns="4" thumbnails="small" ermöglicht mehr Auswahlmöglichkeiten pro Zeile.
• prefix="From" tax_display="exclude" beim Preis fügt Text davor hinzu und zeigt den Preis vor Steuern an, passend zum WooCommerce-Warenkorb.
• summary_mode="compact" hide_defaults="yes" bei der Zusammenfassung setzt jede Option in eine eigene Zeile und lässt Optionen aus, die auf ihrem Standardwert verbleiben.
• display="hosted" beim Viewer zeigt den vollständigen Simplio3D-Konfigurator einschließlich Optionen in einem einzigen Widget an, ohne dass Options-IDs erforderlich sind.
• instance="oak" bei jedem Widget einer Gruppe trennt zwei Konfiguratoren auf einer Seite voneinander. Widgets mit derselben Instanz teilen eine Konfiguration.

Ihr Elementor-Design übernehmen

• Im Tab Erweitert jedes Shortcode-Widgets können Sie Außenabstand, Innenabstand, Hintergrund, Rahmen und responsive Sichtbarkeit festlegen. Der Viewer füllt seine Spalte aus; stellen Sie daher die Breite der Spalte oder des Containers ein, um ihn breiter oder schmaler zu machen.
• Die Blöcke übernehmen Schriftart und Textfarbe von der Seite. Die Akzentfarbe – für die ausgewählte Option, den Fokusring und die Schaltflächen – fällt bei klassischen Themes wie Hello Elementor auf nahezu Schwarz zurück. Legen Sie sie daher unter Design → Customizer → Zusätzliches CSS auf Ihren Elementor-Akzent fest: .simplio3d-block { --s3d-accent: var(--e-global-color-accent); }
• Weitere Eigenschaften sind unter anderem --s3d-radius für Ecken, --s3d-thumb für die Größe der Vorschaubilder und --s3d-button-bg für die Schaltfläche. Um nur ein Widget zu gestalten, fügen Sie class="my-finish" zu seinem Shortcode hinzu und sprechen Sie .my-finish in Ihrem CSS an.