in case you had to use this with columns ( and said above the dividers are always look inwards the container ) and want it like your example above outside the column give to the column a custom class like: divider-outside

#top .flex_column.divider-outside .avia-divider-svg.avia-divider-svg-top {
  transform: none;
  transform: rotate(180deg);
  transform-origin: top center;
}
#top .flex_column.divider-outside .avia-divider-svg.avia-divider-svg-bottom {
  transform: rotate(0deg);
  top: 100%;
  bottom: unset;
}

So far i understand you is the parent theme look thats what you like to have ( as before ) and after child is active some settings change …

I installed the child theme and followed all the instructions

import parent theme settings – sometimes it is better to do it manually – means : activate again your parent theme – export those settings to your local machine. – Activate the child again and import that file.

The image solution – but what if you like to have an image as background for the whole color-section area – where do you insert it in the alb? this is possible by css – to have multiple background-files : https://webers-testseite.de/multiple-background-images/
but had to be done in quick css for each section.

the alternative solution:
Enfold offers the option to have those dividers on color-sections and on columns.
One difficulty is to have this “border-styling” outside the container – and for columns this is the fact then.

how to have custom svg files as dividers? https://kriesi.at/documentation/enfold/columns/#adding-custom-svg-dividers

i do prefer the custom path to those svg files because i do organize my media library not per year and month. So all media are inside uploads folder.
Maybe a mod or a dev can tell us how to use the path independet solution with the attachment id ?

go to the example page again and see last color-section with the links of the two grass files. https://enfold.webers-webdesign.de/ryan2/#av_section_5
you can download them : open and then save page

this snippet is for making the uploads folder the folder for custom svgs:

function my_svg_path(){
  $path = get_site_url().'/wp-content/uploads';
      return $path;
}
add_filter( 'avf_custom_svg_shapes_files_directory', 'my_svg_path', 10 );

and now to register the custom svg files with their options:

function custom_avf_custom_svg_shapes( array $custom_shapes ) {
$custom_shapes = array(
	'grass'		=> 	array(
				'key'			=> 'grass',
				'title'			=> __( 'Grass', 'avia_framework' ),  // this notation with avia_framework offers the possibility to translate to other languages
				'has_width'		=> true,
				'has_flip'    	=> true,
				'attachment'	=> 1,
				'filename'		=> 'grass'
				),

	'grass-semi' => array(
				'key'			=> 'grass-semi',
				'title'			=> __( 'Grass Semi', 'avia_framework' ),
				'has_width'		=> true,
				'has_flip'    	=> true,
				'attachment'	=> 2,
				'filename'		=> 'grass-semi'
				),

	);
return $custom_shapes;
}
add_filter( 'avf_custom_svg_shapes', 'custom_avf_custom_svg_shapes', 10, 1 );

now you got on your color-section ( and colums too ) on layout – svg-dividers the chance to insert your own custom svg:

is that image enough info – or do you need further help?
( click to enlarge the image )
Select your layer with the text – on the right side you got that:

As said above – i had to see the concerning DOM to give exact advice.
i actually found the takeover of the tags quite nice. So you have even more design options.
i don’t know why my code is not working on your test page, because the structure has not been changed to Enfold5.
The difference is – that i use the magnificPopup api to give the popup title a different source.

Maybe it is because i set the titleSrc to false and have my own markup ( to avoid lightbox counter )

function popup_tooltips_with_links() { 
?>
<script type="text/javascript">
(function($){
$(window).on('load', function(){
    $('.av-image-hotspot_inner').magnificPopup({ 
      type: 'image',
      mainClass: 'avia-popup',
      closeOnContentClick:  false,
      midClick: true,
      gallery: {
      enabled: true
      },
      image: {
        titleSrc: false,
        markup: '<div class="mfp-figure">'+
                    '<div class="mfp-close"></div>'+
                    '<div class="mfp-img"></div>'+
                    '<div class="mfp-bottom-bar">'+
                      '<div class="mfp-title"></div>'+
                    '</div>'+
                  '</div>',
      },
      callbacks: {
        markupParse: function (template, values, item) {
          values.title = item.el.closest('.av-image-hotspot').attr('data-avia-tooltip');
        },
      },
  }); 

  $(document).on('click', '.popup-modal-dismiss', function (e) { 
    $.magnificPopup.close();
  });
});
})(jQuery);
</script>
<?php }
add_action('wp_footer', 'popup_tooltips_with_links');

i had to see the page it belongs. When seeing numbers on recurring elements i tend to use an index in each function.
But it is hard to give advice without the concrete page – so maybe Ueli send me an email if he does not like to make the link public.

Is it similiar to that demo page: https://kriesi.at/themes/enfold-restaurant/reservations/ but with links on the tooltips ?

try something like this:

function popup_tooltips_with_links() { 
?>
<script type="text/javascript">
(function($){
$(window).on('load', function(){
    $('.av-image-hotspot_inner').magnificPopup({ 
    type:               'image',
    mainClass:          'avia-popup',
    closeOnContentClick:  false,
    midClick:         true,
    gallery: {
      enabled:      true
    },
    callbacks: {
      markupParse: function (template, values, item) {
        values.title = item.el.closest('.av-image-hotspot').attr('data-avia-tooltip');
      },
    },
  }); 

  $(document).on('click', '.popup-modal-dismiss', function (e) { 
    $.magnificPopup.close();
  });
});
})(jQuery);
</script>
<?php }
add_action('wp_footer', 'popup_tooltips_with_links');

See: https://enfold.webers-webdesign.de/tooltips/
( i did not want on that lightbox a counter – so i got my own markup here )

If you do not like to show the tooltip:

.avia-tooltip.av-tt-hotspot {
  display: none !important;
}

but think of – that breadcrumbs are hampered on transparent headers.

first – see Mikes hint –
because we now have inline svg files – you maybe change the fill from a given path with change of darkmode.
second : the update must be a big one – because the click function is deprecated since jQuery 3 :

// $('.darkmode-toggle').click(function() {
// use instead:
$('.darkmode-toggle').on('click', function(){

and this is what i see on my Safari desktop :
( click to enlarge )

_______________

This is the old story – often discussed here on board. On uploading images to the media library – the images are uncompressed ( jpgs do have that indeed – a compression ratio ) and then the new file-sizes generated by Enfold are calculated on that uncompressed source. Because Enfold code does not compress these generated files – the file-size is for the bigger images (1500px x 630px etc. ) often higher than the uploaded optimized jpgs.

Now what can we do against this. – We can change that behavior on Enfold by a child-theme functions.php snippet:

add_filter("avf_jpeg_quality", "avf_set_quality_mod", 9999, 1);
add_filter("avf_wp_editor_set_quality", "avf_set_quality_mod", 9999, 1);
function avf_set_quality_mod($quality) { $quality = 55; return $quality;}

Unfortunately, this snippet does not affect existing images in the media library. Here you would have to recalculate the thumbnails all over again. There are some plug-ins for this. I use the one provided by shortpixel. : Link

svgs – and i guess pngs will be skipped.

After recalculation you can remove the plugin. The snippet above will then compress each uploaded new image.

PS: Sorry – i did not follow Yigits link – so it only differs in the amount of compression. That is up to you what you need. If you are a photographer with f.e. fine color – gradients ( like skin tones ) or sharp contrasts you had to choose a less compression level.

see here an older post of mine with the plugin illustration: https://kriesi.at/support/topic/media-upload-and-enfolds-thumbnail-sizes/#post-1271808
in addition it gives you a code to hamper generating of all enfold image_sizes. But read comments on the code to understand that it is not advisable to suppress all image_sizes.

this had to be on the 1/1 container ? – because you have a negative margin on top to shift over the color-section before.
What are these images – showing under the grass ? Is it a gallery?

And: What i see is not a transparent background – it is white image – laying over the previous color-section

• This reply was modified 3 years, 8 months ago by Guenni007.

Yes for child-theme functions.php
and this second line was only meant to show how further substitutions have to be set. Important is the break setting after each line.
– However, if you had asked for a different language translation ( f.e. the german translation of the read more phrase) , I probably would have recommended editing the lang file. Again, you could find a child theme solution.

Hello Günter – but is my statement correct or not?
The comment is clear or? Unfortunately now always opens the lightbox with the @2x image – I would have thought that this depends on the device used

if you look on top of this page here ( our forum ) you see kriesi logo with additional Text.
if you look to the DOM :

this might be done in a similar way – and because i do take the same classes – you can see how the board has set its css for it

add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub){
  $sub .= "<span class='logo-title'>";
  $sub .= get_bloginfo( 'name', 'display' );
  $sub .= "</span>";
  $sub .= "<span class='logo-title logo-subtitle'>";
  $sub .= get_bloginfo( 'description', 'display' );
  $sub .= "</span>";
  return $sub;
}

/*position logo text*/
#top .subtext{float:left; position: relative;}
#top .logo img{float:left;}
#top .logo, #top .logo a{overflow: visible;}
#top .logo-title{  
transition: 		opacity 0.4s ease-out;
-moz-transition: 	opacity 0.4s ease-out;
-webkit-transition: opacity 0.4s ease-out;
-o-transition: 		opacity 0.4s ease-out;
font-size: 12px; color: #000; position: absolute; left:7px; top:-7px; opacity: 1; white-space: nowrap; } 
#top .logo-subtitle{ color: #aaa; top:7px; }
#top .header-scrolled .logo-title{ opacity: 0; filter: alpha(opacity=0); }

@media only screen and (max-width: 989px) {
	.responsive #top .logo-title{ opacity: 0; filter: alpha(opacity=0); }
}

how did you insert it and how do you get the iframe code?

why do i ask this question – google map has a nice offer – similar to youtube to get the iframe code.
Open that map style the dimensions of that map
click than the button ( share or embed)

a popup will now give you options to do so – and navigate to the tab: embed
you see then:

you can even give the iframe dimensions as custom code – the offered code – if you embed it as a fullwidth element iframe change only the width to 100%
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d40384.48983850205!2d7.054894!3d50.756466!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x7fcf775f84623228!2sWeber%2C%20digitale%20Dienstleistung!5e0!3m2!1sde!2sde!4v1654932171981!5m2!1sde!2sde" width="100%" height="800" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>