That was what you meant?

Step 3
– create a file inside heading’s folder called heading.php and paste the code in private content.

Is there any reason for not make it public? I like to learn from other coding skills ;)

If I understand you correctly, you want to create this Accordion Slider once, and then embed it several times in different pages/posts. It should then change with the one created page on all others.

Go and test if it fits your needs if you place that accordion slider on a single page and nothing else – name that page as you like.
click to see that page with two variations:

On the other pages/posts insert that page with alb : page content – choose your page with that accordion.

PS: if you like to insert that accordion to pages/posts with sidebar your insertpage must have the accordion slider in a 1/1 column ( Variant : B ) but without fullwidth elements ( color-sections, grid-row)

here in my case i named that page my-accordion:

can you try to set it as defintion between your enfold options breakpoint and the new one
f.e. as:

@media only screen and (min-width: 990px) and (max-width: 1300px) {
…

or do you have a setting for header left or right? – but even then – it has to work this way you have on top in your code.
PS : i tested it on a Enfold 5.6.3 – it works with your code too.

Is there a page we can inspect?

maybe the setting which page is choosen for that 404 page preserves in the background – allthough the first setting is switched back to : “no custom 404….

try …

u bent van harte welkom

ich persönlich bearbeite die svgs nach in einem guten Texteditor. Dort tausche ich dann durch “suchen und ersetzen” die klassen aus und setze wenn nötig noch Gruppen Identitäten.

I personally edit the svgs in a good text editor. There I replace the classes by “search and replace” and set group ID’s if necessary.

do you have entered this snippet to your child-theme functions.php ?

from docu: Link

From within your child theme, you may want to add or edit an Advanced Layout Builder element. To do so, first add the following function to your child theme’s functions.php: …
Now add a new folder in your child theme directory called shortcodes. If you copy an element from enfold>config-templatebuilder>avia-shortcodes to this folder it will replace the one in the parent and be used instead. You can also add new ones using the other shortcode elements as examples.

function avia_include_shortcode_template($paths){
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');
  return $paths;
}
add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);

and just put the edited alb element directly to that subfolder : shortcodes

This is a problem of adobe illustrator – they do alway set the same classes ( st0, st1 etc. )
I do open these svgs in a good texteditor – and change those class names to something different – but be carefull – you had to think of not to change only in the styles but also in the path etc. the class=”st0″ etc.

PS : if you go and Group inside Illustrator the parts of your logo – and name these Groups – these Names became ID’s in the svg code.

you can have your own grapic-styles on : goto Window – Graphic Style ( Fenster – Grafikstile ) create a new one:
then the classes are named that new style ( and not st1, st2 etc )

Next tip: if you only want to change a fill color inside an inline svg – you do not need to upload a different logo. That is one of the big advantages of inline svg. you can select that group or class by quick css. So just use one logo – and on transparency change the fill color by css – or after scroll.

f.e.:

#header.av_header_transparency .st0 {
  fill: red !important;
}

That snippet should handle both – if you do not see it – refresh all cachings / merged files – and browser cache too.

if that does not work – we had to give a custom-class to the anchor link itself: no-scroll
but to be more selective a custom class on those parent container would be helpfull.

But before testing: How did you initialize the modal opening of the hidden section?
Edit : aha – i see …

what kind of php version is installed? because if php 8.x. (comes with jQuery 3.x ) look to your inline popup script and replace those deprecated functions. – f.e:

jQuery(window).load(function() {
//replace with:
jQuery(window).on('load', function(){

under that line add :

jQuery('.conditional_popup_link a, .popup_link a, .inline_popup, .avia-buttonrow-center.spaced-between a[href^="#"]').addClass('no-scroll');

auf screenweiten kleiner als 768 px ist der Hamburger Button in geöffnetem Zustand rot – daher nocht folgendes:

@media only screen and (max-width:767px) {
 .av-burger-overlay-active #top .header_color .av-hamburger-inner,
 .av-burger-overlay-active #top .header_color .av-hamburger-inner::before,
 .av-burger-overlay-active #top .header_color .av-hamburger-inner::after {
  background-color: #FFF
 }
}

und den einen selctor müssen wir auch selectiver machen:

.responsive.av-burger-overlay-active #top #wrap_all .av-logo-container a .language_flag img {
 outline:2px solid #FFF
}

on that masonry you entered : .group-1

remove the dot on that class – and look if that is the trick.

Also ich habe es in einer Testinstallation mittels WPML Menü Sprachumschalter gemacht, und dann nur css angewandt.
Eventuell hatte ich dadurch etwas andere Selectoren als Du. Lass es doch einfach jetzt so – so sieht es gut aus.

Unfortunately, this is not a matter that you can control yourself. Even if the pdf links have this download attribute, the browser settings determine what happens – you can force a download – but the pdf file will open anyway in the browser.

// with file-extension
function force_pdf_link_to_download() { 
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
(function($){
      $('a[href$=".pdf"]').each(function() {
         pdfName = $(this).attr('href').match(/\/([^\/?#]+)[^\/]*$/)[1];
         $(this).attr('download', pdfName ).attr('target', '_blank'); 
      });
})(jQuery);
});   
</script>
<?php 
}
add_action('wp_footer', 'force_pdf_link_to_download');

it is not possible to add a download attribute to a link with no value – even if you try that –
texteditor will correct it to: download="" so the script above will insert download="filename.pdf"

Even an entry in the htaccess file does not have to be followed by the browser:

<FilesMatch "\.(?i:pdf)$">
ForceType application/octet-stream
Header set Content-Disposition attachment
</FilesMatch>

so what could be reached is that the file downloads on click – but it will open in browser tab too.

Perhaps a more skilled programmer than me can force this behaviour – but I think it will be futile, especially since it is supposed to be browser independent.