hm – even after replacing all files the script does not work on toggle titles as expected.
See on headings and in text block alb all is ok.
https://webers-testseite.de/accordion/

Edit : i removed the script to show that the fix is working on toggle titles

try that:
https://webers-testseite.de/rbh/

btw: it is advisable to use a custom hyphenation on those headings.
A wonderfull entity for a soft-hyphen (conditional word breaks) is ­

you can set this html entity in e.g. also headings – unfortunately this is no longer visible after reopening the Alb element. Therefore I use an edited version of Günter’s nice plugin: https://kriesi.at/documentation/enfold/intro-to-layout-builder/#using-special-characters

For the sake of simplicity, however, I did not do this with triple #, but only with single # and extended the array by many entities.

you can download it on : https://pastebin.com/jttc230x

A heading with softhyphen then looks in backend like :

PS: for that case i would use the flexbox layout.

but:
(click to enlarge)

I will now remove your “Superman” now – to come not into conflict with copy-right law ;)

• This reply was modified 1 year ago by Guenni007.

How can I now integrate a custom svg divider:

The default storage location for Enfold is: /wp-content/uploads/dynamic_avia/avia_custom_shapes/ if you put your custom files there (via ftp) then they would at least be in the right place. ( if that folder isn’t present – create it )

here is the code as you now tell Enfold that there is a custom divider:
( put this to your child-theme functions.php)

function custom_avf_custom_svg_shapes( array $custom_shapes ) {
$custom_shapes = array(

	'reha-bad-hamm'		=> array(
		'key'			=> 'reha-bad-hamm',
		'title'			=> __( 'Reha Bad Hamm Trenner', 'avia_framework' ),
		'has_width'		=> true,
		'has_flip'		=> true,
		'filename'		=> 'reha-bad-hamm'
		),

);

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

if you like to hold that solution – you can erase that code. ( it is based on a different custom class. )
hold the img-with-caption and blue-info css !

on inserting the images to the text-block – i edited the images – and gave them all the same width (250px)

Next: It might be best to switch to responsive design on 989px ( even for your menu too )

if you see this page – that has your initial setting with text-blocks in columns (equal height ) – images floating left and text directly behind it.
But you see on last column row – that with equal height option the space to top is much bigger than on the other images besides other landscape images.

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

Password: is the last name of that logo ( capitalize )

there are new filters: avf_dynamic_css_additional_vars and avf_dynamic_css_after_vars

but you can redefine those var color definitions in quick css too.
but that means all elements that use these enfold default values ( set in enfold options – general styling) are replaced.
All manually set colors inside alb elements stay as they are.

f.e. for your ID 777:

.html_entry_id_777,
#top.page-id-777 {
	--enfold-header-color-bg: #eee;
	--enfold-main-color-bg: #eee; 
	--enfold-footer-color-bg: #eee;
	--enfold-alternate-color-bg2: #eee;
	--enfold-header-color-bg2: #eee;
	--enfold-socket-color-bg: #eee;
	--enfold-socket-color-border: #eee;
}

you can now add all page id’s comma separated in that replacement.

or like mentioned above ( Günter provided me with a working filter code ) via child-theme functions.php
(after that it is neccessary to refresh all cachings):

function my_avf_dynamic_css_after_vars( $output = '' )
{
	$output .= "\n";
	/*** Override a defined var for a specific page id*/
	$output .= "html.html_entry_id_777,  html.html_entry_id_12345 {\n";
	$output .=		"--enfold-header-color-bg: #aaa;\n";
	$output .=		"--enfold-header-color-bg2: #aaa;\n";
	$output .=		"--enfold-main-color-bg: #aaa;\n";
	$output .=		"--enfold-footer-color-bg: #aaa;\n";
	$output .=		"--enfold-alternate-color-bg: #aaa;\n";
	$output .=		"--enfold-alternate-color-bg2: #aaa;\n";
	$output .=		"--enfold-socket-color-bg: #aaa;\n";
	$output .=		"--enfold-socket-color-border: #aaa;\n";
	$output .= "}\n";
	return $output;
}
add_filter( 'avf_dynamic_css_after_vars', 'my_avf_dynamic_css_after_vars', 10, 1 );

maybe that is the better way – because it is early in the page generation done – then replacement via css redefinition.
btw: it is possible too – to have even mediaqueries here on the filter .

you could go and set that one rule for non responsive case :
(grid-template-columns: 35% 65%;)

#top .avia_textblock.img-with-caption-right .wp-caption {
  border: 1px solid #cccccc;
  width: 100% !important;
  margin: 0;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: 35% 65%;
  grid-template-areas:
"feld2 feld1";
  align-items: flex-end;
  overflow: hidden;
}

But you had to manually insert softhyphens to some of your titles.
By the way: Self Contained and on the one image Selfcontained ?

It is difficult to fulfill all your requirements because the preconditions are of course not identical. Different image formats and aspect ratios paired with titles of different lengths.

try to change that one rule to:

(it is only that line changed: grid-template-columns: auto 1fr; )

#top .avia_textblock.img-with-caption-right .wp-caption {
  border: 1px solid #cccccc;
  width: 100% !important;
  margin: 0;
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: auto 1fr;
  grid-template-areas:
"feld2 feld1";
  align-items: flex-end;
}

you like to remove it everywhere – or only on those portrait fotos?

maybe try without equal-height flex-columns.
The equal height is something that will come with the grid-layout automatically ;)

after inserting the image – click on that image once – you can see a popup with a little pencil (edit) then a new popup with details to that image opens.

Well it seems to be best – to use the text block – because selectors stays the same for image with link or without.
On image alb – the selectors change – and we had to differ than if an image alb is used with or without.

See on the bottom of that example page – that on the image with lightbox link it does not work with the same class.
So we had than to make that twice with a different class.

PS: the field definitions are only set by css

you had to think of the custom class on the image with caption. that has to be done on the image alb.
The Text is the caption text. And the css comes to quick css. Every image with caption will than do this layout.

Further reading:
https://css-tricks.com/snippets/css/complete-guide-grid/
https://www.joshwcomeau.com/css/interactive-guide-to-grid/

You can see how easy it is to influence existing layouts with Gridlayout.
Here it is easier to assign field names to both (the image container and the caption text).
I can then use them in a grid.
This grid now has 2 columns. The rows are created automatically, but their heights are adjusted – and not fixed.
Use this (grid-template-areas: “field2 field1”) to define the order. The other way around, the caption text would be on the left.

Responsive Case had to be set in detail look to the real page.

the section itself is set to : av-small-hide av-mini-hide.
those flex_columns with .scroll-reveal trigger are set on visibility : av-hide-on-mobile
look at the column advanced tab under responsive. Your added Class could not work on that – because it is set to display : none by your responsive settings.

is it because you are working with the other option to show that animation?

if this section and the columns are set to be there on responsive case the class “active” is added.

_____________________

by the way – this is my observer sccript to get a new class added to flex-columns that comes into viewport.
( i do not stop observing, because i like the animation on scroll-in/out again and again ;)

function observe_columns() {
?>
<script type="text/javascript">	
	document.addEventListener("DOMContentLoaded", function() {
	  var flexcolumns = [].slice.call(document.querySelectorAll(".flex_column"));
		
		if ("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype){
			let flexcolumnObserver = new IntersectionObserver(function(entries, observer) {
				entries.forEach(function(entry) {
					if (entry.isIntersecting) {
						entry.target.classList.add("visible");

					}
					else {
						entry.target.classList.remove("visible");
					}  
				});

			}, {
				root: null,
				threshold: 0.1,
				rootMargin: "20px 0px -10px 0px",
			});
			
			flexcolumns.forEach(function(flexcolumn) {
				flexcolumnObserver.observe(flexcolumn);
			});
	  	}
	});
</script>
<?php
}
add_action( 'wp_footer', 'observe_columns' );

see in action f.e. under “Dienstleistungen”
https://webers-web.info/