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
Find a 3D Tour Photographer Map
We Get Around Network Find a Pro Service
Matterport Service Provider? Join We Get Around Network
Free Referral
Engage an EyeSpy360 Service Provider to
Shoot, Create and Publish the tours for you.
One Order  |  One Quote  |  One Contact
Book Multiple USA Commercial Locations
  • ✔  As-Builts
  • ✔  Construction Progress
  • ✔  Facillities Management
Last 30 Days: 59,038 Page Views | 15,751 Visitors | 108 New Members
WGAN Knowledge Base | Total Posts: 64,951  |  Total Topics: 10,248
5,720 WGAN Members in 133 Countries
We Get Around Network Forum
WGAN-TV Training U in Matterport
WGAN-TV Live at 5
EyeSpy360 Virtual Tour Platform Demo for Pros
with EyeSpy360 Founder/CEO Andrew Nicholls
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="https://my.matterport.com/show/?m=Pr31AeHS1kQ" 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]

Thanks,
Brad
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.

https://avada.adjusters.io/?page_id=639

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.

Regards,

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='https://my.matterport.com/show/?m=Pr31AeHS1kQ' width='853' height='480' frameborder='0' allowfullscreen='allowfullscreen'></iframe></div>

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

Regards,
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.

Regards,
Michael Clendening
Post 6 IP   flag post
65786 6 6
This topic is archived. Start new topic?
destitute