![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: iframe
-
AuthorPosts
-
August 5, 2017 at 8:54 am #834639
Hello,
We need to show an external website inside an iframe on a page.
But for some reason we can’t get it working. See the demo link in private.<iframe src=”http://edition.cnn.com” name=”silkphotos” scrolling=”auto” frameborder=”no” align=”left” height = “100%” width = “100%”>
</iframe>-
This topic was modified 7 years, 1 month ago by
tech500.
August 5, 2017 at 9:06 am #834644Please provide a working iframe code that would work using the “blank template” in Enfold.
We need to go live with this page today.Thanks
DanAugust 5, 2017 at 11:51 am #834728*** SOLVED ***
HELLO,
I’ve figured how to achieve this, and here are instructions how I did it:
(If the Kriesi team finds an error here or any suggestions for improvement, please feel free to make changes to my post.)
I hope that would save time for others looking for such option.
Option No. 1:- Make sure your page template is set to Blank.
- Place a Color Section > Section Minimum Height > “At least 100% Browser Window Height”
- Under “Section ID” place this Attribute: fullwidthsection
- Save
- Into that color section add a Text Block module.
- move to the text mode (not Visual) and paste that code:
- Save
<iframe src="http://kriesi.at/" width="100%" height="1500px" scrolling="no" allowfullscreen="allowfullscreen"></iframe>
(replace the kriesi link I use for this demo with the link you want to display in the iframe)Then add this CSS in Enfold’s “Quick CSS” area (under the theme General Settings):
#fullwidthsection .container { width: 100% !important; padding:0px; max-width: none !important; } .avia-section.av-minimum-height .container .content p{ margin:0px; }
Option No. 2:
If you enable the Enfold debug mode then you can paste my code and then use the builder to edit the Enfold element with your URL.- First enable debug mode by looking at that link:
Enable Debug Mode - Then paste this shortcode on the relevant page “debug area:
[av_section min_height='100' min_height_px='500px' padding='no-padding' shadow='no-border-styling' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' id='fullwidthsection' color='main_color' custom_bg='' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' av_element_hidden_in_editor='0'] [av_textblock size='' font_color='' color='' admin_preview_bg=''] <iframe src="http://kriesi.at/" width="100%" height="1500px" scrolling="no" allowfullscreen="allowfullscreen"></iframe> [/av_textblock] [/av_section]
- Then add this CSS in Enfold’s “Quick CSS” area (under the theme General Settings):
#fullwidthsection .container { width: 100% !important; padding:0px; max-width: none !important; } .avia-section.av-minimum-height .container .content p{ margin:0px; }
Best
Dan-
This reply was modified 7 years, 1 month ago by
tech500.
August 6, 2017 at 8:35 am #834974Hi Dan,
Great, glad you found a solution thanks a lot for sharing. Much appreciated :-)
Best regards,
RikardSeptember 12, 2017 at 10:15 am #850924Thanks Dan, much obliged, I managed to get this to work first time around :-)
I used option 1, is there much difference between them?
My next task is to try and make it work in a column, as opposed to a full page. So far not getting anywhere!
Would option 2 permit this? So far staying with things I understand!
Many thanks
AngusApril 20, 2018 at 12:09 pm #944542I have tested this with option 1 and it works perfectly with <iframe src=”http://kriesi.at/” width=”100%” height=”1500px” scrolling=”no” allowfullscreen=”allowfullscreen”></iframe>
But as soon as i put my own link in, it does not pull through ie – <iframe src=”https://www.behance.net/ACCOUNTSd914″ width=”100%” height=”1500px” scrolling=”no” allowfullscreen=”allowfullscreen”></iframe>Any Suggestions?
Just realized this is probably because im trying to display a page that i am logged in on. So it probably wont work.
Logged out now, and tried displaying a public page https://www.behance.net/search, but it does not work :/
any suggestions?
-
This reply was modified 6 years, 4 months ago by
MDOTDesignStudio.
April 21, 2018 at 7:37 am #944821Hi MDOTDesignStudio,
It can’t display pages where a login is required, though it should display public pages. Where can we see the actual issue?
Best regards,
RikardMay 11, 2018 at 2:37 am #954955I was able to add a content element of “code block” and paste in an <iframe> tag
May 11, 2018 at 3:31 am #954969May 24, 2018 at 6:45 pm #961773Thank you so much! Option 1 was easy to follow and worked!
March 11, 2021 at 11:33 am #1287383Another simple way is to create an HTML “Widget” and then use that in your page.
March 11, 2021 at 2:19 pm #1287432 -
This topic was modified 7 years, 1 month ago by
-
AuthorPosts
- The topic ‘Embedding external site in enfold iframe’ is closed to new replies.