– see this site here: https://webers-testseite.de/cynthia/
i make a svg image that is near to your image divider.

This code in child-theme functions.php:

function insert_dividers(){
?>
<script>
(function($){

// just give a custom-class to the color-section or the slider : divider
// and a custom class for top or bottom position: top / bottom
// so there is in that input field f.e.:  "divider bottom"
  $('.avia-section.divider.top').prepend('<svg version="1.1" class="top" title="big_arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="200px" viewBox="0 0 1500 200" preserveAspectRatio="none"><path class="jan" d="M766.69,192.84c-10.94,2.88-22.43,2.88-33.37,0L0,0h0v200h1500V0L766.69,192.84z" fill="#EEEEEE"/></svg>');
  $('.avia-section.divider.bottom').append('<svg version="1.1" class="bottom" title="big_arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="200px" viewBox="0 0 1500 200" preserveAspectRatio="none"><path class="jan" d="M766.69,192.84c-10.94,2.88-22.43,2.88-33.37,0L0,0h0v200h1500V0L766.69,192.84z" fill="#EEEEEE"/></svg>');
  $('.divider.top .avia-slideshow .avia-slideshow-inner').after('<svg version="1.1" class="top" title="big_arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="200px" viewBox="0 0 1500 200" preserveAspectRatio="none"><path class="jan" d="M766.69,192.84c-10.94,2.88-22.43,2.88-33.37,0L0,0h0v200h1500V0L766.69,192.84z" fill="#EEEEEE"/></svg>');
  $('.divider.bottom .avia-slideshow').append('<svg version="1.1" class="bottom" title="big_arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="200px" viewBox="0 0 1500 200" preserveAspectRatio="none"><path class="jan" d="M766.69,192.84c-10.94,2.88-22.43,2.88-33.37,0L0,0h0v200h1500V0L766.69,192.84z" fill="#EEEEEE"/></svg>');
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'insert_dividers');

this to quick css:

.avia-section.divider {
    position: relative !important;
}

.avia-section.divider .container a {
    z-index: 10;
}

.avia-section.divider svg {
    position: absolute;
    z-index: 5;
    width: 100vw;
}

.avia-section.divider svg.top {
    top: -2px !important;
    height: 150px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.avia-section.divider svg.bottom {
    bottom: -2px !important;
    height: 100px;
}

Now – how to insert the dividers:
you only have to give to a color-section – or a slider the class f.e. : divider bottom
then the divider will be inserted as inline svg. On that you can influence the fill color:

.avia-section.divider svg.top path {
  fill: #fff;
}
.avia-section.divider svg.bottom path {
  fill: #fff;
}

e.g. on that example page you see the section with the button “get in touch”
the following color-section has a different background-color!
just solve this by:

#av_section_3 svg.bottom path {
    fill: #c5e3ea;
}

or on top i gave to that color-section the custom-classes: divider top bottom
so there are two dividers in the same section

ok – now i see – and that was my suggestion – this image is a cmyk jpg !
Rendering of cmyk images with browsers tend to have a cast.

by the way: i would take a png file and let the top area transparent – then you can even have on the previous section a background-image.

• This reply was modified 5 years, 6 months ago by Guenni007.

@DimaP : this is long time ago – why don’t you use the alb itself and goto Advanced Tab of the Slide Image:

we are posting nearly the same time : please read again my comment above.

Best would be to have a custom-class on those img – but you can select them this way too:

img.avia_image[src*="anbwhite"] {
-webkit-filter: drop-shadow(2px 2px 0 black) drop-shadow(-2px -2px 0 black);
    filter: drop-shadow(2px 2px 0 black) drop-shadow(-2px -2px 0 black);
}

img.avia_image[src*="vrwslogonoyearwhite"] {
	-webkit-filter: drop-shadow(2px 2px 0 black) drop-shadow(-2px -2px 0 black);
    filter: drop-shadow(2px 2px 0 black) drop-shadow(-2px -2px 0 black);	
}

here you can have 4 drop-shadows similar to the heading above – but performance is important too.

With new DOM Elements ( mfp-top-bar) and for the mfp-bottom-bar a callback function with new content.
here is my magnific popup script written for that page here: https://webers-testseite.de/pureinstall/masonry-gallery/

See popup script code on that page please.

______

Off Topic : i just realized that a masonry with fixed size got a totaly different markup than the flexible masonry – so code must be changed.

• This reply was modified 5 years, 6 months ago by Guenni007.

what is always a good way and even on GDPR Reasons is to show the map in an iframe.
This is “outside” your site and you do not need an api key for it.
Click the image:

besides that i will have a look what i have for maps : Maps Javascript API only is needed.

• This reply was modified 5 years, 6 months ago by Guenni007.

hm – i can not confirm to this: on my opinion the poor rendering is given on firefox – chrome and safari are very near to each other.
Click to enlarge the images:

left to right: firefox, chrome, safari

what makes me wonder is that on firefox it shows a jpg but on info about that image there is webp

besides this it seems to be a high compression : an image of that dimension with only 48kb !

if these are headings then yes – might be done this way.
But as far as i can see is “Vacation Rental World Summit” and “A new beginning” etc. pp a png file and no text.

easiest way and not so performance intensive as f.e. filter : drop-shadow : just edit your images as png files with an outline in f.e. Photoshop.

you can see with drop-shadow :

.avia-image-overlay-wrap .avia_image {
   -webkit-filter: drop-shadow(2px 2px 0 black) drop-shadow(-2px -2px 0 black);
    filter: drop-shadow(2px 2px 0 black) drop-shadow(-2px -2px 0 black);
}

but you had to find a custom selector on your page. Bring a custom class to those containers.

yes – Günter that works as the file from before. with f.e. 7sec transition speed
( with that fix on line 838ff for fading last to next )
https://webers-testseite.de/pureinstall/fullwidth-slider/

but

use the correct variable (key instead of i)

when inserting this it is gone – even the transition speed goes back to default. not to the custom value.
So that above from grizzlydev could not be the whole truth

sorry i try again.

• This reply was modified 5 years, 6 months ago by Guenni007.

it works ! i tested it afterwards

But indeed i like to know how the syntax might be if i only want to have it on a given page.

did you fill something in the caption:

and:

you had to see it on mobile advices.

you break your menu at 990 so try please first remove the other code and try this in quick css:
if it is done we will see if there will be more css to add – but i guess not.

/****** responsive case when burger is visible *************/
@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all #header .container {
    width: 90%;
    max-width: 90%;
  }
   
  #header {
    position: fixed !important;
    height: 80px !important;
    max-height: 80px !important;
  }
  
  .responsive #top .header_bg {
    opacity: 1;
    filter: alpha(opacity=100);
    background-color: #fff !important;
  }
  
  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img {
    height: 80px !important;
    max-height: 80px !important;
  }
  
  .responsive #top .av-main-nav .menu-item-avia-special a {
    height: 80px !important;
    line-height: 80px !important;
  }
}

there is one image loaded via http ( Inlite_logo_payoff_black_small.png ) that causes a warning.

This of course does not explain why it is only now appearing.
The server-side caching is not bad in principle, but probably leads to such inconveniences.

have you installed that: SG Optimizer plugin ?
maybe you try that first and see if the two listpoints will do the job

on That Plugin:

Manual Cache Purge
Pressing this button will completely clear the Dynamic Cache stored for your website. Useable, if you want to make sure that you’re loading the latest version of your site.

And:

Automatic Cache Purge

Enabling this option will allow our plugin to clear parts of your cache once it detects changes in your content. We’ve developed a set of rules to purge the dynamic cache in a smart, efficient way depending on the change that has occured on your site. We do a full purge on events like category deletion, plugin and theme update or switch, WordPress core update, etc. On the other hand, we do smart purge when a post is modified, a comment is added or a category is updated for example.