Connecting 3D/360° Virtual Tour Buyers to Service Providers powered by
the Most In-Depth, Relevant and Up-to-Date Content and Training for the 3D/360° Community
Join FREE! 50+ Benefits
Option #1 - Find a 3D Tour Photographer Map
We Get Around Network Find a Pro Service
Matterport Service Provider? Join We Get Around Network
Option #2 - Book a Matterport Pro in 60 Seconds
We Get Around Network Instant Booking Service
Powered by Koaware. Matterport Service Provider (USA)? Join KoaWare Free! Register Now
Last 30 Days: 48,550 Page Views | 12,356 Visitors | 72 New Members
WGAN Knowledge Base | Total Posts: 61,459  |  Total Topics: 9,555
5,300 WGAN Members in 129 Countries
We Get Around Network Forum
WGAN-TV Training U in Matterport
WGAN-TV Channel
How to Make Money in the AEC Space with
Matterport with MSP ToPa 3D CEO Paul Tice
WGAN-TV Training U
21 Subject 'Matter' Expert Instructors
30 Courses | 12 Major Topics
Training via Recorded Videos
More Info WGAN-TV Program Schedule | Need Help? | Podcast
WordPressWordPress Avada Theme

WordPress Avada Help8889

htimsabbub23 private msg quote post Address this user
I am working with the avada wordpress theme for and using the fusion slider. My problem is that the button I am using when you click on the link it opens another window. I would like to click on the button and open up the virtual tour over the existing page and then as an iframe. Can someone please help me with the code to do that

[fusion_button link="" size="" type="" shape="" target="_self" title="" gradient_colors="#2d8cc0" gradient_hover_colors="#2d8cc0" accent_color="#000" accent_hover_color="#2d8cc0" bevel_color="#2d8cc0" border_width="1px" shadow="" icon="" icon_divider="yes" icon_position="left" modal="" animation_type="0" animation_direction="down" animation_speed="0.1" class="" id=""]Virtual Tour.[/fusion_button]

Post 1 IP   flag post
Adjusters_IO private msg quote post Address this user
Good evening Brad,

Have a look at this page we put together for you on a demo site running the latest version of Avada. If this is something you are looking for, PM me here and we will be happy to give you admin access to the site so you can do a stare and compare.

Note - The test page was put together in a hurry and is currently optimized for desktop, it may look a funky on a mobile device. If you decide you want to get in there and mess around, this is sandbox site running at AWS, you can play with it, break it - no worries.


Michael Clendening
Post 2 IP   flag post
Adjusters_IO private msg quote post Address this user
The short answer to getting this work is to do the following:

Create a one column container anywhere on the same page the slider is on.

On the Container Design tab, adjust the parameters for the Padding to be 0px, otherwise you will unnecessary space on the page.

Add the modal element in the one column with the following fields filled in:
- Name of Modal: matterport_modal
- Modal Heading: Put anything in here you want, or leave it blank
- Size of Modal: Either Small or Large
- Adjust the rest of parameters to suite.

Replace the button code in your slider to be:

[fusion_button link="" text_transform="" title="" target="_self" link_attributes="" alignment="center" modal="matterport_modal" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="" id="" color="default" button_gradient_top_color="" button_gradient_bottom_color="" button_gradient_top_color_hover="" button_gradient_bottom_color_hover="" accent_color="" accent_hover_color="" type="" bevel_color="" border_width="" size="" stretch="default" shape="" icon="" icon_position="left" icon_divider="no" animation_type="" animation_direction="left" animation_speed="0.3" animation_offset=""]Matterport Virtual Tour[/fusion_button]
Post 3 IP   flag post
Adjusters_IO private msg quote post Address this user
I left out an important part of making this work in the previous post (smh)!
Add the following to the Modal element plugin.

Contents of Modal field: Select the Text tab on the right and then paste in the following code:

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='' width='853' height='480' frameborder='0' allowfullscreen='allowfullscreen'></iframe></div>

We also adjusted the code to be Mobile, Desktop and Tablet friendly.

Michael Clendening
Post 4 IP   flag post
htimsabbub23 private msg quote post Address this user
@Adjusters_IO Thanks for getting back to me. I wont be able to look into this until Sunday but just wanted to say thanks and I appreciate you taking the time to help.
Post 5 IP   flag post
Adjusters_IO private msg quote post Address this user
No problem Brad. Also, we have working examples of Matterport embedded in an Elementor slider, which is a much lighter framework than Avada Fusion builder.

Michael Clendening
Post 6 IP   flag post
62214 6 6
This topic is archived. Start new topic?