PDF contains shortcodes from Divi builder

Hi,

If “Full Page PDF” option is enabled please use beforeImageToPdf() and afterImageToPdf() JavaScript functions for changing PDF document.
For example, go to the plugin settings page -> “Custom Code” tab, mark “Activate custom JavaScript code.” checkbox in the “JavaScript” section and add the following code:

function beforeImageToPdf() {
document.getElementById(“site-header”).style.display = “none”;
}
function afterImageToPdf() {
document.getElementById(“site-header”).style.display = “block”;
}
Replace “site-header” on the id of the element you need to hide.

I don’t think that this is the solution for our problem. Here are some Divi shortcodes which end up in my pdf document:

[et_pb_section fb_built="1" fullwidth="on" _builder_version="4.6.6"
_module_preset="default"][et_pb_fullwidth_header title=" " _builder_version="4.7.7"
_module_preset="default" background_enable_color="off" background_image="https://mydomain.com/wp-content/uploads/header_08_1920x1080.jpg"][/et_pb_fullwidth_header][/e t_pb_section][et_pb_section fb_built="1" _builder_version="4.6.6"
_module_preset="default"][et_pb_row _builder_version="4.6.6"
_module_preset="default"][et_pb_column type="4_4" _builder_version="4.6.6"
_module_preset="default"][et_pb_text _builder_version="4.7.7" _module_preset="default" hover_enabled="0" sticky_enabled="0"]

The JavaScript code you gave us is suited to target (and hide) certain HTML elements – not WordPress shortcodes.

Hi,

Yes, you can do this by adding styles. To add CSS styles into PDF/Print versions, it is necessary to mark the checkbox “Custom CSS” on the plugin settings page. After that, you’ll see a field where you can add the necessary styles.

Find the id of the element you want to hide (if it is not, then add your own).
Example:

#element-id {
display: none;
}

I know all this, but I still don’t see how I could target a shortcode (which is not an HTML element) with CSS.

But maybe I’m wrong. So can you please provide the necessary code to hide the following shortcode?

[et_pb_section fb_built="1" fullwidth="on" _builder_version="4.6.6"
_module_preset="default"]

Thank you.

Hi,

Could you please provide the page you need help with?

This one example:

https://www.metoki.ch/angebot/wordpress-support/

The PDF button is placed in the lower right corner.

And this is the custom CSS:

h1 {
  color: red;
  text-transform: uppercase;
}

h2 {
  color: blue;
  font-style: italic;
}

h3 {
  color: green;
}

div#me-teaser-section {
  display: none !important;
}

So as you can see, there are a lot of shortcodes in the generated PDF. These need to be removed.

The second problem is that I try to hide the teaser section at the bottom (as you have suggested), but it’s still visible in the PDF.

The colored titles are just to show that the custom CSS is working in general.

Hi,

Please feel free to contact us via our Help Center – https://support.bestwebsoft.com/.

Hi,

We consider this topic as resolved. If you have any questions, please feel free to contact us.