do you have that logo as svg file? Vectorbased Files are sharper even on small dimensions
If not – what Font is the base for it? (the G and E and T and S will not be there on default – but it is much easier to make an svg of that – if we know the source font.

the button is there too!

It turns out to be very complex if you first want to open the gallery preview in the modal window, and then the items with the next click.

Example Page :
give to the button element a custom class f.e.: link_to_lightbox and link to an ID.
( or if you got many links inside to perform : give that class to a parent-elment (f.e. color-section) )

place your galleries on your page (preferably behind your other content on the site.)
Style them as lightbox galleries!
those galleries must have now a unique ID (that corresponds with your link ID’s) and a custom class: mfp-hide

put this to your child-theme functions.php:

function link_to_gallery_first_item_in_lightbox() {
?>
<script type="text/javascript">
(function($) {
    $(document).on('click', '.link_to_lightbox a', function(event) { 
        event.preventDefault();
        var linkTarget = $(this).attr('href');
        $(linkTarget).find("a.first_thumb").click();
    });
})(jQuery);
</script>
<?php
} 
add_action('wp_footer', 'link_to_gallery_first_item_in_lightbox');

allthough there is no such font-style for sanchez – browser rendering could simulate a 700 Style.

just set it in your quick css to do so for headings.
see on google and developer tools change – on top 400 style – on bottom 700 via css

maybe it has to do with your non existing certificates. Your page is only in http mode to view. But maybe a security setting or plugin hampers to load unsecure sources. Or your Content Security Header settings.

by the way: https://securityheaders.com/?q=http%3A%2F%2Finvebiwp.weblink.it%2Fcontatti%2F&followRedirects=on

Where did you insert those CSPs ? And did you do it the correct way?

Wenn es deine Internetseite betrifft, die sich hinter deinem Nick verbirgt, dann sind es hautpsächlich deine Bilder, die deiner Beachtung würdig sein sollten.

Mal davon abgesehen, das es gar keinen Sinn macht Bilder hochzuladen, die mehr als 2560px ( das ist eine Media-Library Grenze die WordPress selbst hat) groß sind. Dadurch tauchen Bilder auf, die dann WordPress auf diese Grenze herunter rechnet und mit dem addendum -scaled abspeichert.

schau dir den Bericht auf Gtmetrix mal an: Link
Es it garantiert nicht das Pseudo-Element was du oben anführst. ( Es sei denn es hat dort Hintergrundbilder oder ähnliches per css mit drin.)

Es werden auch viele kleinere Bilder (in den Dimensionen nicht vom Dateivolumen) hochscaliert, was auch Zeit benötigt.

Zur Info bezüglich der Art wie Enfold mit hochgeladenen Bildern neue Formate errechnet. : https://kriesi.at/support/topic/enfold-image-bigger-than-original/#post-1355204
Dort findest du dann auch ein Snippet mit dem man den Kompressionslevel von Enfold beim Upload der Bilder reduzieren kann. Und wie man mit der Nutzung von temporär installierten Plugins die anderen Bildformate erneut recalculieren läßt.

Meine Empfehlung : bevor du die Bilder hochlädst, berechne Sie neu in einem Grafikprogramm auf eine Größe, die auch später Verwendung finden könnte.
Wenn man sich die “most common browser viewing sizes” ansieht, sollte man mit 1920px meist auskommen.

hier mal ein Bildvergleich eines deiner Bilder – schau ob sich das wirklich lohnt, hochaufgelöste Bilder im Web zu nutzen ;)
https://webers-testseite.de/bildvergleich/

Yes Mike – but i can not decide it because either your red arrow shows the superflous Bracket – or the blue arrow shows a too early set closing bracket.
Which one is to remove now. My guess is that the former (blue) is more likely to be removed.

Further down there is also nesting of media querries, and I’m not sure if that works.
A bracket was opened, then new media query statements follow without closing the first one – after the insertions there is a closing bracket – but I don’t think that works. (maybe it works, because the parameters are the same).

After erasing the snippet – did you refresh enfold merging – or delete Cachings ( Browser Caching, maybe any other caching tools)

Bei dem Nick ausgesonnen, nehme ich mal an ich kann dir auch deutsch antworten:

Diese Fehler kann sind durch die vielen Media Querries entstanden. Eine Klammer die aufgeht – muß auch wieder geschlossen werden.
Da ich nicht weiß, was du mit deinen Regelen bewerkstelligen wolltest, kann ich auch nicht entscheiden ob der Fehler ein vorzeitiges Schließen der Klammer ist, oder eine überflüßig gesetzte Klammer ist.
Im Beispiel oben ob diese Regel nur unterhalb von 767px gelten soll oder eben generell:

.responsive #top.page-id-472 div .avia_responsive_table .avia-data-table td, 
.responsive #top.page-id-472 div .avia_responsive_table .avia-data-table th {
	padding: 0;
}

Davon ist abhängig ob die Klammer oben zu früh geschlossen wurde, oder ob die andere zu viel ist. etc.
Da die Fehler mannigfaltig sind, empfehle ich alle zu entfernen. Die jenigen die leicht als korrekt zu erkennen sind wieder einzufügen. Also die nicht in media-querries gesetzt sind und auf/zu gehen.

Und dann neu zu überdenken, was gemacht werden muss.

PS: um solche Fehler in Zukunft zu vermeiden; immer die Regeln, die du neu hinzufügen willst ganz an das Ende der Quick css zu setzen – niemals so zwischen drin reinzuschmeißen. Das birgt in sich Fehler Quellen. Dann am Ende – sortieren und die Media-Querries zusammenführen.

Ansonsten musst du eventuell auf die Hilfe eines Mods hoffen, der sich einloggt, und die verschiedenen Möglichkeiten durchspielt.

__________

With the nickname ausgesonnen, I assume I can also answer you in German:

These errors can be caused by the many media queries. A bracket that opens – must also be closed again.
Since I don’t know what you wanted to achieve with your rules, I can’t decide whether the error is a premature closing of the bracket or a bracket that was set superfluously.
In the example above whether this rule should only apply below 767px or in general:

.responsive #top.page-id-472 div .avia_responsive_table .avia-data-table td, 
.responsive #top.page-id-472 div .avia_responsive_table .avia-data-table th {
	padding: 0;
}

It depends on whether the bracket at the top was closed too early, or whether the other one is too much, etc.
Since the errors are manifold, I recommend removing all of them. The ones that are easy to recognize as correct should be reinserted. So the ones that are not set in media-querries and open/close.

And then rethink what needs to be done.

PS: to avoid such mistakes in the future; always put the rules you want to add at the end of the quick css – never throw them in between. This is a source of errors. Then at the end – sort and merge the media queries.

Otherwise, you may have to hope for the help of a mod who logs in and runs through the various options.

this is hard to say – because i do not know where to close an opended media query on your code, because I don’t know whether these errors occurred because you inserted a new media query rule into an existing one or simply forgot to put a closing bracket.

So i can’t tell you whether you should remove it where i wrote “closed too early?” (because then the bracket at “or an additional superfluous bracket” would be correct. Or just remove that bracket ( at “closed too early?”) . That depends on the intention of what you want to achieve. Both leads to a working code but do different things.

in other words :
i do not know if you like to have:

@media only screen and (max-width: 767px) {
	.responsive #top.page-id-472 .avia_responsive_table .avia-data-table tr:first-child th {
		display: block;
	}
	.responsive #top.page-id-472 div .avia_responsive_table .avia-data-table td, 
	.responsive #top.page-id-472 div .avia_responsive_table .avia-data-table th {
		padding: 0;
	}
} 

or that:

@media only screen and (max-width: 767px) {
	.responsive #top.page-id-472 .avia_responsive_table .avia-data-table tr:first-child th {
		display: block;
	}
} 
.responsive #top.page-id-472 div .avia_responsive_table .avia-data-table td, 
.responsive #top.page-id-472 div .avia_responsive_table .avia-data-table th {
	padding: 0;
}

etc.
_______

So, if I no longer knew exactly what belonged to which intention, I would first remove everything. Then reinsert the ones that are unproblematic (opening and closing brackets that are clear ) and then add the media queries step by step.

In most cases it happens with media-query instructions. A bracket that is forgotten to be closed or one that is set too much.

here is one extra – or before the closing media query bracket is set to early?

.responsive #top.page-id-472 div .avia_responsive_table .avia-data-table td, .responsive #top.page-id-472 div .avia_responsive_table .avia-data-table th {
padding: 0;
}
}

next here is an opening bracket – with no closing ( i do not know if all the rest should be inside the media query – or if you like to close directly after that)

@media only screen and (max-width: 767px) {
	#top .avia-icongrid.av-flex-cells.av-break-989 .av-icon-cell-item {
		flex: 1 1 100%;
	}

.av-burger-menu-main.menu-item-avia-special {
display: block;
}
}

Actually, you have already described it in sufficient detail above. Just to be on the safe side, there are posts that belong to both categories.
As you can see here on an example page, I chose the “and” in the logic, and in fact only those posts are listed that belong to both categories. So I cannot confirm this behavior.

https://webers-testseite.de/blog/

I will now test the masonry element you mentioned underneath. …

You can see that the Masonry also shows the same posts as the blog post element. ( of course the sorting option no longer makes sense here )

PS: btw. i want to test the magazine element too – but it does not have that logic option. Maybe a good idea to have it here too.

This is more difficult than you think. Because a shadow cast on these svg dividers would be directed outwards. But that would mean casting a shadow upwards over the film. If I understand you correctly, however, the shadow should be directed downwards; but that means an inset shadow on the svg itself, and only on one edge.

It is possible – albeit with some effort – by creating a custom SVG divider. To do this, you should familiarize yourself a little with how to integrate them into the general process.

If you take a look at the example page with developer tools, you will see how it works.
The svg has two identical polygons (red), but I fill one of them with a gradient (green arrow) that goes from black to white; however, the white only has 0% coverage at the end. This white must later be replaced by the color of the following section via the ID of the stop-color using quick css.

in my example page i gave to the section a custom class to better select that svg:
( benefit is now that we can select from outside the inner gradient )

.avia-section.shadow-special #nextBGColor {
  stop-color: #083a96 !important;
}

next : how to have custom svg dividers …

But both are not present now!
neither this: https://sample-page.li/wp-content/themes/enfold/style.css
nor that https://sample-page.li/wp-content/themes/enfold-child/style.css

If you use the same function name more than once (ava_custom_script_group_lightbox), an error is also displayed – but with a different message. Function names must be unique.

btw. i would have finished the variable setting with a semicolon – but as said above – no error on using it without.
var accordion = $('.accordion-lightbox-group') ;

oh sorry – then I misunderstood your request. To me it sounds like you want to see the icons inside the mobile menu as well (hamburger menu). – The above way is a quick and easy way to have this for small social icon lists. I didn’t see that these are hidden below. of 479px.

__________

or try to preserve the social-bookmarks on the same place – because even on 280px screenwidth ( most mobile phones got 320px and more ) the logo does not overlap that area:

@media only screen and (max-width: 989px) {
  .responsive.av-burger-overlay-active #top #header .main_menu .social_bookmarks a {
    color: #FFF;
  }
/** if you had changed the phone-info input field - see at bottom of my message **/
  .phone-info .header-meta-mail {
    display: none;
  }
}

@media only screen and (max-width: 479px) {
  .responsive #top #wrap_all .main_menu .social_bookmarks {
    display: block !important;
  }
  .responsive #top #wrap_all .main_menu .avia-menu .av-burger-menu-main {
    border-color: #1b5289;
    padding-right: 15px;
    margin-right: 5px;
    border-right-width: 1px;
    border-right-style: solid;
    transition: border-color 0.2s ease-in-out;
  }
}

but i guess you have to change then a bit your phone-info input field. The standard behavior of enfold between 768px and 989px here in your setting is to show the burger icon and the social-bookmarks besides each other and to hide header_meta social bookmarks, so the “of mail” is obsolete on top then.
maybe you can do this:
<div><a href="tel: +31595729729">Bel 0595 729 729</a><a class="header-meta-mail" href="https://noorderwindbewindvoering.nl/contact/#contactformulier"> of mail</a></div>
– and with that class we can hide it on demand

or in my opinion better – just to add the binding word to e-mail bookmark without link:
<div><a href="tel: +31595729729">Bel 0595 729 729</a><span class="header-meta-mail"> of mail</span></div>