Embedding external site in enfold iframe

*** 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:

<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)

• Save

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, 4 months ago by tech500.