Beschrijving

websites inpassen in pages & berichten

Communicatie

Yes, it’s possible to embed another website in a Divi module, similar to how frames were used in earlier years. The modern approach is to use an iframe, which can be easily implemented using Divi’s Code Module.

Here’s how you can do it:

In your Divi Builder, add a Code Module to your layout.
Inside the Code Module, paste an iframe code snippet like this:
```
<iframe src="https://example.com" width="100%" height="600px" frameborder="0"></iframe>
```
Replace “https://example.com” with the URL of the website you want to embed. You can adjust the width and height as needed.

The Code Module allows you to insert HTML, CSS, and JavaScript, making it perfect for embedding external content like websites. Remember to ensure you have permission to embed the external website, as some sites may have restrictions on framing their content.

Source

The Divi Code Module

Is that what you were looking for?

Did you get everything you needed? If you still need assistance, you can always reach out to our Support Team by replying here. 👇

Fin

Help Fin understand how they’re doing:

Rate your conversation

Terrible

Bad

Great

Amazing

It’s not working. How can i manage permission of the other site? it’s from another domain, which i control myself.

Fin • AI Agent

To embed a website from another domain you control in a Divi module using an iframe, you’ll need to manage permissions on both the source and target sites. Here’s how:

On the source site (the one being embedded):
• Modify the server’s X-Frame-Options header to allow embedding from your target domain.
• You may need to contact your hosting provider or adjust server settings to do this.
On the target site (where you’re embedding):
• Use Divi’s Code Module to add the iframe.
• Here’s an example of the code you can use:

   <iframe src="https://yourdomain.com" width="100%" height="600px" frameborder="0"></iframe>

Adjust the src, width, and height as needed.
a. If you encounter issues, check for conflicts with plugins or custom code by enabling Divi’s Safe Mode temporarily.

Remember to test the embed thoroughly, especially on different devices, to ensure it displays correctly.

Source

The Divi Code Module

Was that helpful?

Where can i find that in Plesk

Fin • AI Agent

To modify the X-Frame-Options header in Plesk to allow embedding from another domain, you’ll need to access your server settings. While Plesk doesn’t have a specific interface for this, you can modify the .htaccess file to set the header.

Here’s how you can do it:

Log in to your Plesk control panel.
Navigate to the domain where you want to modify the header.
Look for the “File Manager” or a similar option to access your website files.
Find the .htaccess file in your website’s root directory.
Edit the .htaccess file and add the following code:
```
<IfModule mod_headers.c>
    Header set X-Frame-Options "ALLOW-FROM https://yourdomain.com"
</IfModule>
```
Replace “https://yourdomain.com” with the domain you want to allow embedding from.

If you’re not comfortable making these changes yourself, it’s best to contact your hosting provider for assistance, as they can guide you through the process specific to your server setup.

Was that helpful?

Did you get everything you needed? If you still need assistance, you can always reach out to our Support Team by replying here. 👇

Fin

Help Fin understand how they’re doing:

Rate your conversation

Terrible

Bad

Great

Amazing

Thanks it works. Is there a code to implement a scrollbar with the embedded site?

Fin • AI Agent

To add a scrollbar to an embedded site in a Divi module, you can use the Code Module and adjust the iframe’s CSS. Here’s how:

Add a Code Module to your Divi layout.

Insert this HTML and CSS code:

<div style="height: 600px; overflow-y: scroll;">
    <iframe src="https://yourdomain.com" width="100%" height="100%" frameborder="0"></iframe>
</div>

You can adjust the height (600px) to fit your needs. The overflow-y: scroll; property adds a vertical scrollbar.

For more control, you can modify the Vertical Overflow setting in the Code Module’s Advanced tab. Set it to ‘Scroll’ to ensure a scrollbar appears when content exceeds the set height.

Remember to replace “https://yourdomain.com” with the actual URL you want to embed.

Source

The Divi Code Module

Did that answer your question?

Did you get everything you needed? If you still need assistance, you can always reach out to our Support Team by replying here. 👇

Fin

Help Fin understand how they’re doing:

Rate your conversation

Terrible

Bad

Great

Amazing

The marges of the section, left and right, don’t work in Safari and Chrome, with the embedded website in the code module

Fin • AI Agent

To fix the issue with left and right margins not working in Safari and Chrome for an embedded website in the Divi Code Module, try these steps:

Check the Code Module settings:
• Go to the Design Tab → Spacing
• Ensure that the left and right margins are set correctly
• Make sure the padding values are appropriate

Adjust the iframe code:
• Wrap the iframe in a div with specific width and padding
• Example:

     <div style="width: 100%; padding: 0 15px;">
       <iframe src="your-url" width="100%" height="600px" frameborder="0"></iframe>
     </div>

Inspect element widths:
• Ensure no elements have a width or max-width exceeding 100%
• Check the Design Tab → Sizing in the Code Module settings
Look for negative margins:
• Check the Design Tab → Margin
• Ensure Margin Left/Right isn’t set with negative values

If these steps don’t resolve the issue, consider using Divi’s Safe Mode to identify potential conflicts with plugins or custom code.

Source

The Divi Code Module

Did that answer your question?

Did you get everything you needed? If you still need assistance, you can always reach out to our Support Team by replying here. 👇

Fin

Help Fin understand how they’re doing:

Rate your conversation

Terrible

Bad

Great

Amazing

In the Visual Builder Mode i do see margins (10vw left and right) But in de browsers i do not see that.

Fin • AI Agent

The discrepancy between what you see in Visual Builder Mode and in browsers like Safari and Chrome for the embedded website in the Divi Code Module could be due to a few reasons:

Caching issues: The Visual Builder might be showing a cached version that doesn’t reflect the actual front-end display.
CSS conflicts: The Code Module’s CSS might be conflicting with the embedded website’s CSS.
Iframe limitations: The embedded website might have restrictions on how it’s displayed within an iframe.

To troubleshoot:

Clear your browser cache and any caching plugins you’re using.
Check the Code Module’s Spacing settings in the Design tab. Ensure the left and right margins are set correctly.
Try adjusting the width settings in the Code Module’s Sizing options.
If the issue persists, consider wrapping your iframe in a div with specific width and padding to control the margins.

If these steps don’t resolve the issue, you may need to investigate further for potential conflicts with other elements or custom code on your page.

Sources

The Divi Code Module

An Overview Of Divi Sections

Is that what you were looking for?

That is working. Thanx. Next problem: My top section is about 100px high, but in the browsers it’s 450px high. How is that possible. how can i fix that?

Fin • AI Agent

There could be several reasons why your top section is displaying as 450px high in browsers when it’s set to 100px. Here are some steps to troubleshoot and fix this issue:

Check section settings: Go to the section’s Design tab → Sizing. Ensure the height is set correctly and there are no conflicting max-height settings.
Clear caches: Clear your browser cache, Divi cache, and any server-side cache. Go to Divi → Theme Options → Builder → Advanced tab and click “Clear” for the Static CSS File Generation options.
Check for conflicts: Enable Safe Mode from the Divi Support Center to disable plugins and custom codes temporarily. If this resolves the issue, it might be a cache problem or a conflict with a plugin.
Inspect custom CSS: Ensure there’s no custom CSS overriding your section height settings.
Check responsive settings: Use Divi’s responsive preview to see if the issue occurs on specific device sizes and adjust accordingly.

If these steps don’t resolve the issue, you may need to investigate further for potential conflicts with other elements or custom code on your page.

Source

How to Fix Display Issues After Updating Divi

Did that answer your question?

Did you get everything you needed? If you still need assistance, you can always reach out to our Support Team by replying here. 👇

Fin

Help Fin understand how they’re doing:

Rate your conversation

Terrible

Bad

Great

Amazing

No, it’s still not solved the problem

Fin • AI Agent

To fix the issue with your top section displaying at 450px instead of 100px, try these steps:

Check section settings: Go to the section’s Design tab → Sizing. Ensure the height is set correctly and there are no conflicting max-height settings.
Adjust responsive settings: Click the mobile icon next to the height setting and check the Mobile tab. Set the height to 100px or Auto for mobile devices.
Clear caches: Go to Divi → Theme Options → Builder → Advanced tab and click “Clear” for the Static CSS File Generation options.
Enable Safe Mode: Navigate to Divi > Support Center and turn on Safe Mode. This will temporarily disable plugins and custom codes to check if they’re causing the issue.

If the problem persists, consider setting the section’s min-height to 100vh in the Sizing options to ensure it takes up the full screen height.

Source

How to Fix Display Issues After Updating Divi

Is that what you were looking for?

Did you get everything you needed? If you still need assistance, you can always reach out to our Support Team by replying here. 👇

Fin

Help Fin understand how they’re doing:

Rate your conversation

Terrible

Bad

Great

Amazing

How van i export a complete lay-out?

Fin • AI Agent

To export a complete layout in Divi, follow these steps:

Open the page with the layout you want to export in the Divi Builder.
Click on the purple ellipsis icon at the bottom of the screen to expand the menu.
Click on the “Import/Export” icon (it looks like two arrows pointing up and down).
In the export tab, name your layout.
Click the “Export Divi Builder Layout” button.

This will download a .json file containing your complete layout. You can use this file to import the layout on another page or website.

The exported file includes everything in your layout, such as images, custom CSS, and Advanced Design Settings. This makes it easy to transfer your designs between different Divi websites or share them with others.

Source

Importing & Exporting Divi Builder Layouts & Library Collections

Did that answer your question?

Did you get everything you needed? If you still need assistance, you can always reach out to our Support Team by replying here. 👇

Fin

Help Fin understand how they’re doing:

Rate your conversation

Terrible

Bad

Great

Amazing

Attentie

Nog verder in te vullen………

Systeem aanpassen thema • Divi option > general > aangepaste css

Nog verder in te vullen………

Aanvullende Css • Divi option > general > aangepaste css

Nog verder in te vullen………

Divi options > integration > Voeg code toe aan de < head> van uw blog

Nog verder in te vullen………

Divi options > integration > Voeg code toe aan de < body >

Nog verder in te vullen………

Divi options > integration > Voeg code bovenaan uw posts toe.

Nog verder in te vullen………

Divi options > integration >

Voeg code onderaan uw posts toe, geplaatst voor de reacties

Nog verder in te vullen………

Divi componenten. aangepaste cs

Nog verder in te vullen………

Css in vrije vorm

Elementen voor

Hoofd elementen

Elementen na

Afbeeldingen

Nog verder in te vullen………

Divi Fin: Embedding website in pages and post & adding scrollbar

Beschrijving

websites inpassen in pages & berichten

Communicatie

Source

Source

Source

Source

Sources

Source

Source

Source

Attentie

Systeem aanpassen thema • Divi option > general > aangepaste css

Aanvullende Css • Divi option > general > aangepaste css

Divi options > integration > Voeg code toe aan de < head> van uw blog

Divi options > integration > Voeg code toe aan de < body >

Divi options > integration > Voeg code bovenaan uw posts toe.

Divi options > integration >

Voeg code onderaan uw posts toe, geplaatst voor de reacties

Divi componenten. aangepaste cs

Css in vrije vorm

Elementen voor

Hoofd elementen

Elementen na

Afbeeldingen