Connecting 3D/360° Tour Buyers to Service Providers powered by
the Most In-Depth, Relevant and Up-to-Date Content for the 3D/360° Community
Join FREE! 50+ Benefits
Should I buy a Camera? Quiz How Much to Start 3D Tour Business? Calculate How Much Can I Make as a Pro? Calculate Win More Listings? Calculate
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 byKoaWare
Matterport Service Provider (USA)? Join KoaWare Free! Register Now
Last 30 Days: 61,866 Page Views | 12,712 Visitors | 131 New Members
WGAN Knowledge Base | Total Posts: 57,753  |  Total Topics: 8,756
4,914 WGAN Members in 124 Countries
We Get Around Network Forum
WGAN Training Academy (Learn more)
WGAN-TV Now Playing
WGAN-TV Town Hall: Matterport New Pricing
with Matterport's Chris Bell and Damien Leostic
WGAN-TV: Town Hall
Live at 5 Special Edition
See Video Above
First Aired Live on Thursday, 16 May 2019
Join WGAN-TV When Live WGAN-TV Program Schedule | Need Help? | All Videos
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
58453 6 6
Log in or sign up to compose a reply.