Building a Viewer

Show instructions for:

Choosing Your Editor

You can build a 3D viewer in three ways: with the Gutenberg block, as a Classic saved viewer, or with Elementor. Visitors see the same kind of viewer either way. What changes is where you set it up and where you can use it.

ProItems marked (Pro) need 3D Viewer Pro.

In short: use the Model Viewer block if the model belongs on one page in the block editor. Build a saved viewer if you need it on several pages, in a widget area or in another page builder. Use the Elementor widget if you build with Elementor.

The three ways to build a viewer

Two terms first. A saved viewer is a viewer you build once under 3D Viewer → Add New. A shortcode is a short code in square brackets, such as [3d_viewer id="123"], that shows a saved viewer wherever you paste it.

Gutenberg: the Model Viewer block

Add the Model Viewer block to any post or page and set it up in the block sidebar. The viewer lives in that post or page.

You can also build a saved viewer with the same block, under 3D Viewer → Add New, when the Enable Gutenberg setting is on. It gets a shortcode, so you can place it anywhere.

Classic Editor: a saved viewer with a meta box

Build a saved viewer under 3D Viewer → Add New. You set it up in the 3D Viewer Settings meta box: a settings box below the title, with all options laid out in tabs. Then show the viewer anywhere with its shortcode.

This is what Add New opens when Enable Gutenberg is off.

Elementor: the Model Viewer widget

Drag the Model Viewer widget onto an Elementor page and set it up in the Elementor panel. The viewer lives in that page. For WooCommerce product templates there is also a Product Model widget, covered in Widget, Shortcode, Shop & Popups.

Which switch button to pick

Many pages in these docs have a Gutenberg / Classic Editor / Elementor switch. Pick Gutenberg for the block, in a page or as a saved viewer. Pick Classic Editor for a saved viewer with the meta box. Pick Elementor for the widget.

What “Classic” means in this plugin

In these docs, Classic Editor means a saved viewer built with the meta box. You do not need the Classic Editor plugin for it.

WordPress replaces the shortcode with the viewer when the page loads. Because of that, a Classic viewer works almost anywhere text goes:

a Shortcode block in the block editor,
a post or page in the Classic Editor,
a widget area,
the shortcode element of Elementor or another page builder.

Compare them at a glance

Way to build	Where you set it up	Where it can appear
Model Viewer block in a post or page	The block sidebar, with Settings and Style tabs	Only that post or page
Saved viewer built in the block editor	The same block sidebar, under 3D Viewer → Add New	Anywhere, with its shortcode
Classic saved viewer	The meta box, with Model, Settings, Elements, Style and Preview tabs	Anywhere, with its shortcode
Elementor widget	The Elementor panel, with Content and Style tabs	Only that Elementor page

Question	Answer
Can I reuse one viewer on many pages?	Only saved viewers, through their shortcode. Edit the saved viewer once and every page that uses it updates.
Do I see the model while I work?	Yes in all three. The block and the widget show it in the editor. The meta box has a Preview tab and a Live Preview button.
How do I place hotspots? (Pro)	Block: click Add Hotspot, then click the model. Elementor: click Place Hotspot on Model, then click the model. Classic: pick the spot in the Visual Editor and copy the values over.
Can I edit the model’s textures? (Pro)	Only in the block, in the Texture (Experimental) panel. See Textures (Experimental).

Which one should you use?

The model belongs on one page and you use the block editor: add the Model Viewer block to that page.
The same model goes on several pages, in a widget area or in another page builder: build a saved viewer and use its shortcode.
You like every option laid out in tabs: build a Classic saved viewer.
You build pages with Elementor: use the Model Viewer widget. If you need the same viewer on many pages, build a saved viewer and paste its shortcode into Elementor’s shortcode element.
The model is for a WooCommerce product: add it on the product’s edit screen instead. See Add a 3D Model to a Product.

Not sure? Start with the block if your site uses the block editor. You can mix all three on the same site.

Choose what Add New opens

One setting, Enable Gutenberg, decides which screen opens when you create a saved viewer under 3D Viewer → Add New. It is off on a new site.

The Setup Wizard turns it on if you pick Gutenberg there, and off if you pick Shortcode.

On: Add New opens the block editor with the Model Viewer block already in place. It is the only block in the viewer. Select it to see a Copy Shortcode button at the top of the block sidebar.
Off: Add New opens the Classic screen. The shortcode shows right below the title, with the meta box under it.

The setting does not affect the Model Viewer block in your posts and pages, or the Elementor widget. Those work either way. To change it:

Go to 3D Viewer → Settings.
Click Shortcode Generator in the left menu.
Turn Enable Gutenberg on for the block editor, or off for the meta box.
Click Save.

Existing viewers keep their editor

A saved viewer remembers which editor it was created in. Changing Enable Gutenberg only affects viewers you create after the change.

Viewers built in the block editor keep opening in the block editor, even after you turn the setting off.
Classic viewers keep opening with the meta box, even after you turn the setting on.
A copy made with Duplicate opens in the same editor as the original.

No conversion

There is no button to move a viewer from one editor to the other. To switch, create a new viewer in the other editor and set it up again. The new viewer has a new number, so replace the old shortcode on your pages.

Where Elementor fits

Enable Gutenberg has nothing to do with Elementor. The Model Viewer widget keeps its settings inside the Elementor page, so it does not appear under All 3D Viewers and has no shortcode.

The widget covers the same main settings as the block. Two things work differently:

Hotspots are available when the widget shows one model, not several.
Texture editing is not available in the widget.

When you need either of those on an Elementor page, build a saved viewer and place its shortcode with Elementor’s shortcode element. For textures, build that saved viewer in the block editor.

Frequently asked questions

Do I need the Classic Editor plugin to use Classic viewers?

No. Classic viewers are built on the plugin’s own screen and work in the block editor through a Shortcode block.

Will changing Enable Gutenberg break my existing viewers or pages?

No. Existing viewers keep their editor and their shortcode, and pages that show them do not change.

Does a block I added to a page have a shortcode?

No. Only saved viewers under 3D Viewer have one. If you want to reuse that viewer, build it as a saved viewer instead.

Next steps

Create and Embed a Viewer: the full flow in each editor, and where each setting lives.
Quick Start: Your First 3D Viewer: the fastest way to a working viewer.
Blocks, Widgets & Page Builders: every block and widget the plugin adds.

Create and Embed a Viewer

This page walks through the whole life of a viewer. You create it, find each group of settings and put it on your pages. Later you can edit, copy or remove it.

ProItems marked (Pro) need 3D Viewer Pro.

In short: create the viewer, set its model file and publish. A block or Elementor widget is then already on its page. A saved viewer shows wherever you paste its shortcode.

Before you start

3D Viewer is active, and you have a model file ready (a .glb file is the easiest start).
To build a saved viewer in the block editor, turn on Enable Gutenberg in 3D Viewer → Settings → Shortcode Generator. You don’t need it for a block inside a post or page.

3D Viewer is active, and you have a model file ready (a .glb file is the easiest start).
Enable Gutenberg is off in 3D Viewer → Settings → Shortcode Generator, so Add New opens the 3D Viewer Settings meta box.

3D Viewer is active, and you have a model file ready (a .glb file is the easiest start).
Elementor is active.

Not sure which editor to use? Read Choosing Your Editor first.

Create the viewer

In a post or page

Open the post or page in the block editor.
Click the + button at the top of the editor.
Search for Model Viewer.
Click the Model Viewer block to add it. Skip the separate, basic 3D Viewer block.
Set your model with the upload icon next to Model URL, or paste the file’s web address.
With the block selected, adjust the settings in the sidebar (see the map below).
Click Publish. On a page that is already published, click Save instead.
If a panel opens, click Publish again.

As a saved viewer

Go to 3D Viewer → Add New. The block editor opens with the Model Viewer block already in place.
Type a name in the title field. Only you see it.
Click the block to select it.
Set your model with the upload icon next to Model URL.
Adjust the settings in the sidebar.
Click Publish.
In the panel that opens, click Publish again.

Go to 3D Viewer → Add New.
Type a name in the title box. Only you see it.
In the meta box, on the Model tab, choose the viewer type in the Viewer field. Pick Lite for .glb and .gltf, or Advanced for other file types (see Lite & Advanced Viewer).
Under 3D Source, click Upload Source.
Pick or upload your file.
Click Select.
Work through the other tabs (see the map below).
Open the Preview tab, or click Live Preview in the box on the right, to check the result.
Click Save in the box on the right.

Open the page with Edit with Elementor.
Search the widget panel for Model Viewer.
Drag the widget onto the page.
In the Content tab, open the Model section.
Choose the viewer type under Viewer. Keep Lite, the default, for .glb and .gltf, or pick Advanced for other file types.
Set the file in Select Model, with the media library button or by pasting a web address.
Open the other sections to adjust the viewer (see the map below).
Click Publish to save the page.

Where each setting lives

The settings are split into groups. Use this map to find a setting and the page that explains it.

Select the block to see its sidebar. It has two tabs, Settings and Style, and an Additional panel below them.

Some panels appear only with the Lite viewer (the default, for .glb and .gltf) or with a single model. With the Advanced viewer, Options holds a shorter list that includes edge lines.

The meta box under the title has five tabs down its left side. Some fields appear only after you pick the Lite viewer or a model type.

Click the widget to open its settings. The Content tab holds most sections, and the Style tab holds the look. Some sections appear only with the Lite viewer or a single model.

Panel	What’s in it	Read more
Copy Shortcode (saved viewers only)	Copies the viewer’s shortcode	This page, below
Model	Viewer type (3D Viewer: Lite or Advanced), Use Multiple Model?, Model URL, Model Poster, Use Decoder	Model Sources, Multiple Models, Lite & Advanced Viewer, Poster & Loading
Lighting & Environment	HDR skybox, environment image, exposure, tone mapping	Lighting, Shadows & Background
AR	Enable AR, the iPhone and iPad file, placement and mode	Augmented Reality (AR)
Texture (Experimental) (Pro)	Changes the colors and textures of the model’s materials. Shows with the Lite viewer and one model.	Textures (Experimental)
Options	Mouse control, zoom, auto rotate, rotation locks, lazy load, autoplay, shadow, on-screen buttons, progress bar, variant and animation selectors	Camera, Zoom & Rotation, On-Screen Controls, Poster & Loading, Animations & Material Variants
Mobile (Pro)	What phones show, the tap button text, the mobile breakpoint, reduced motion	Mobile Options
Controls (Pro)	Button labels and where each button sits	Control Placement & Labels
Dimensions (Pro)	Show dimensions, unit and line color	Dimensions & Ruler
Hotspots/Annotations (Pro)	Hotspot style, pin look and the list of hotspots	Hotspots
Style (Style tab)	Width and height per device, thumbnail size, button size and spacing, background color and image, progress bar color	Size & Layout
Additional (Pro)	ID, class and custom CSS for the viewer	Size & Layout

Tab	What’s in it	Read more
Model	Viewer type (Viewer), one model or several (Model Type), the model file, poster, initial view, hotspots, environment, skybox and tone mapping	Model Sources, Multiple Models, Poster & Loading, Hotspots, Lighting, Shadows & Background
Settings	Autoplay, mouse and touch control (Moving Controls), zoom, edge lines for the Advanced viewer, rotation locks, loading type, mobile options, dimensions, auto rotate, zoom level, shadow, exposure	Camera, Zoom & Rotation, Poster & Loading, Mobile Options, Dimensions & Ruler
Elements	Thumbnails and arrows, AR, on-screen buttons, progress bar, variant and animation selectors, button labels and positions	On-Screen Controls, Augmented Reality (AR), Control Placement & Labels
Style	Button size and spacing, width and height per device, alignment, background, thumbnail size, progress bar color, CSS, ID and class	Size & Layout, Lighting, Shadows & Background
Preview	A live preview that updates as you change fields	This page

Section	What’s in it	Read more
Content → Model	Viewer type (Viewer), Use Multiple Model?, Select Model, poster, initial view, thumbnails and arrows	Model Sources, Multiple Models, Lite & Advanced Viewer
Content → Lighting & Environment	Environment, skybox and tone mapping	Lighting, Shadows & Background
Content → AR	Enable AR, the iPhone and iPad file, placement and mode	Augmented Reality (AR)
Content → Options	Mouse control, zoom, auto rotate, rotation locks, on-screen buttons, variant and animation selectors, progress bar, exposure	Camera, Zoom & Rotation, On-Screen Controls
Content → Advanced Viewer (Pro)	Edge lines for the Advanced viewer	Lite & Advanced Viewer
Content → Mobile (Pro)	What phones show, the tap button text, the mobile breakpoint, reduced motion	Mobile Options
Content → Controls (Pro)	Button labels and positions	Control Placement & Labels
Content → Dimensions (Pro)	Show dimensions, unit, line color and real size	Dimensions & Ruler
Content → Hotspots/Annotations (Pro)	Place Hotspot on Model, hotspot style and the list of hotspots	Hotspots
Style → Style	Alignment, width and height per device, background, thumbnail size, progress bar color, button size and spacing	Size & Layout
Style → Additional (Pro)	Additional ID, class and CSS	Size & Layout

Two terms from the table: AR (augmented reality) places the model in a real room through a phone camera. A skybox is a 360-degree image shown behind the model.

Each feature page lists every option with its default, and marks the ones that need Pro.

Put the viewer on your pages

A block you added to a post or page is already in place: publish the page and you are done. A saved viewer appears wherever you paste its shortcode, a short code in square brackets such as [3d_viewer id="123"].

A saved viewer appears wherever you paste its shortcode. The shortcode looks like [3d_viewer id="123"], where the number is the viewer’s ID.

The widget is already part of the page, so there is nothing to copy. It does not create a saved viewer or a shortcode.

Copy the shortcode

In the saved viewer’s editor, select the block, then click Copy Shortcode at the top of the block sidebar. It changes to Copied.
Or go to 3D Viewer → All 3D Viewers and click the copy icon in the ShortCode column.

On the viewer’s edit screen, click the shortcode button under Copy and paste this shortcode into your posts, pages and widget. It shows Copied! for a moment, and the shortcode is now on your clipboard.
Or go to 3D Viewer → All 3D Viewers and click the copy icon in the ShortCode column.

Paste it where the viewer should appear

Block editor: add a Shortcode block and paste the shortcode.
Classic Editor: paste the shortcode on its own line.
Widget areas: add a Shortcode block (or a text widget) and paste it.
Elementor or another builder: use the builder’s shortcode element.

To show one viewer on many pages, build a saved viewer instead and paste its shortcode into Elementor’s shortcode element. See Choosing Your Editor.

In a theme template

If you edit theme files, you can print a saved viewer with PHP. Replace 123 with your viewer’s ID:

text

<?php echo do_shortcode('[3d_viewer id="123"]'); ?>

Edit a viewer later

For a block in a post or page, open that post or page. For a saved viewer, go to 3D Viewer → All 3D Viewers and click its title.
Click the Model Viewer block to select it.
Change the settings in the sidebar.
Click Save. Older WordPress versions call this button Update.

Go to 3D Viewer → All 3D Viewers.
Click the viewer’s title.
Change the fields in the meta box.
Click Update. WordPress shows Model Updated.

Open the page with Edit with Elementor.
Click the Model Viewer widget.
Change the settings in the panel.
Click Publish to save your changes.

Changes to a saved viewer show on every page that uses its shortcode. You never need to paste the shortcode again.

Duplicate a viewer

You can copy a saved viewer with all its settings. This is handy for a set of similar products.

Go to 3D Viewer → All 3D Viewers.
Hover over the viewer and click Duplicate.

WordPress creates a draft named after the original with Copy at the end, and opens it. The copy opens in the same editor as the original.

The copy gets its own ID, so it has its own shortcode. That shortcode works right away, even while the copy is a draft.

To copy a block inside a post or page, select it, open the block toolbar’s options menu and click Duplicate.

To copy the widget, right-click it on the canvas and choose Duplicate. To reuse one set of settings across pages, build a saved viewer and use its shortcode.

Delete a viewer

Select the widget on the canvas and delete it, then publish the page.

For a block in a post or page, select the block, delete it and save the page. For a saved viewer, follow the steps below.

Remove the viewer’s shortcode from the pages that use it.
Go to 3D Viewer → All 3D Viewers.
Hover over the viewer and click Trash.
To remove it for good, open the Trash view of the list.
Click Delete Permanently.

Platform limitation

A viewer in the Trash still shows on every page that has its shortcode. It disappears from those pages only when you delete it permanently. Remove the shortcode from your pages first.

Check that it works

Open the page on the front end. The model loads in its box, and you can turn and zoom it.

Saved viewers are listed under 3D Viewer → All 3D Viewers, each with its shortcode.

Frequently asked questions

I changed my viewer, but the page still shows the old version.

Your browser or a caching plugin is probably showing a stored copy of the page. Clear the cache and reload the page.

Why is there no View link for my saved viewer?

Saved viewers do not have a page of their own. They only appear where you place their shortcode, so the list shows no View or Quick Edit links.

Can I change the number in the shortcode?

No. The number is the viewer’s ID, which WordPress assigns when you create it. A duplicate gets a new number.

Can I turn a block on a page into a saved viewer?

No. Build a new saved viewer with the same settings, then replace the block with a Shortcode block that holds its shortcode.

Do I need Elementor Pro?

No. The Model Viewer widget works with the free Elementor plugin.

Can I show the same widget on other pages?

Not directly, because the widget belongs to one page. Build a saved viewer instead and paste its shortcode into Elementor’s shortcode element on each page.

Next steps

Model Sources: upload a file, link to one or use cloud storage.
Size & Layout: set the width and height for each device.
Camera, Zoom & Rotation: control how visitors move the model.
Shortcode Reference: every shortcode the plugin adds.

Was this page helpful?