Helping You Connect the Dots to Succeed Faster
WGAN-TV: Now Playing
Next on WGAN-TV Live at 5
Free WGAN Map
Locations of Matterport Pro3 Camera Service Providers and see the number of Matterport Pro3s and/or BLK360s for each Matterport Pro.
View WGAN Map
Contact Info
Locations of Matterport Pro3 Camera Service Providers and see name, company, website, email and mobile phone for each Matterport Pro.
Join WGAN Sponsor
Get on the Map | A Service of We Get Around Network (not affiliated with Matterport)
One Order  |  One Quote  |  One Contact
Book Multiple GLOBAL Commercial Locations
  • ✔  As-Builts
  • ✔  Construction Progress
  • ✔  Facilities Management
Last 24 Hours: 817 Unique Visitors
9,053 WGAN Members in 148 Countries
Last 30 Days: 34,913 Page Views | 19,259 Unique Visitors | 29 New Members
We Get Around Network Forum
Quick Start | WGAN Forum
WordPressWordPress Avada Theme

WordPress Avada Help8889

Hartland, Wisconsin
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
Hartland, Wisconsin
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
101636 6 6
This topic is archived. Start new topic?