first there will be only the chance to give the heading more place to use.
Either you increase the normal content width from 1310px to something differnt – you see on my installation there is a 1510px choosen.
Or you go and set a smaller font-size:

.home #av-layout-grid-1 h1.av-special-heading-tag {
  font-size: 42px;
  line-height: 58px;
  background-color: transparent;
}

On default the order is set to have on responsive case on top the first column ( cell ) – but you can change that on :
“Column behavior when fullwidth”

is it that what you mean:
https://kriesi.at/support/topic/design-layout/#post-1339077

this is your page? : https://negotiations-masterclass.com/
you see both lines where the text is differs.

So that this rule does not take effect everywhere, I have set a custom class on the grid-row element : special-grid-row
if you remove that for inspecting purpose and insert to quick css:

@media only screen and (min-width:768px) {
	.flex_cell.avia-builder-el-first {
	    padding-left: calc(50% - 655px) !important;
	}

	.flex_cell.avia-builder-el-first .flex_cell_inner {
	    padding: 30px 50px !important;
	}
}

you will see the result as follows:

both content texts are now left-aligned in an alignment

so did you try my solution?
Upload your image – copy that url and replace in my code the url.
Put this to your quick css:

#top #footer::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 122px; 	/*** these two values reflects the image dimensions ***/
  top: -122px;  	/*** these two values reflects the image dimensions ***/
  background-image: url(https://webers-testseite.de/wp-content/uploads/grass.png);  /*** my example image has a height of 122px - and is seamless ***/
  background-repeat: repeat-x;   /*** because my image is seamless I can tile here ***/
}

#top #footer {
  overflow: visible !important;
}

__________________

PS – if you use curtain effect – the selectors will be different.

First of all – do you like to add this image to #footer or to #socket?
Have you both on your installation or only one?
Is it with curtain effect or not?
Do you want that on all pages/posts or only on a specific page?

See here on one page of mine: https://webers-testseite.de/impressum/
this is a seamless png file – but it will work with one big png the same way except repeat.

#top.page-id-2466 #footer::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 122px;
  background-image: url(https://webers-testseite.de/wp-content/uploads/grass.png);
  background-repeat: repeat-x;
  top: -122px;
}

#top.page-id-2466 #footer {
  overflow: visible !important;
}

Take on the alb heading the option on style: heading style elegant with optional icon
now the heading got these two lines on default.

you can change the line by :

body .av-special-heading.elegant-centered .av-special-heading-tag .heading-wrap::before, 
body .av-special-heading.elegant-centered .av-special-heading-tag .heading-wrap::after {
  border-bottom-width: 3px;
  border-color: red;
  width: 200px ;  /*** what you like ***/
}

the color can be changed in the alb itself if you go to styling – and choose on colors: custom-color – and then set the : Custom Seperator Line Color

the links must reflect the path to your anchors ( so use individual link ) – if you got an anchor on page: imprint – you can use relative path /imprint/#anchor or the absolute path to it. One disadvantage is here – the smooth scroll does not work then.
i use on many installation the nice plugin : page scroll to ID
it has that option to first oben the different page on top – then scroll to the anchor.

is it on a heading or inside block-text?
even in the heading alb you can use span tags like: Juniper <span class="alternate-font">and</span> Sage
there will be a warning – but you can ignore that – the rest is quick css

i guess your option 2 was the way to go.
If you see that startpage of the demo: https://kriesi.at/themes/enfold-shop/
That is a enfold styled shop landing page. And to that it is easy to insert that svg divider you like.

For the copyright text you only have to add a little shortcode after your inserted content: [nolink]

For your footer:
You want to preserve the space for column 1 and 3 empty – and have the column in the center filled with content ?
Or do you like to have only 1 Column for the whole width?

Yes, but if you replace that, please don’t forget to replace it in all language files as well, otherwise we will have an untranslated phrase. ;)

@sitesme: you see my image above – on Enfold Options Page.
These links work with the enfold integrated Google Fonts. But it will show the preview with a longer delay – because all fonts had to be loaded on that preview page.

And as Ismael mentioned you can see the preview on top. – thats why this section has the topic: A rough preview of the frontend
btw. to better evaluate the font – you can increase the font-size by adding this to your child-theme functions.php:

function admin_head_mod() {
  echo '<style type="text/css">
  	#avia_options_page .live_bg_wrap .main_h3 { font-size: 36px !important; }
  	#avia_options_page .content_p, #avia_options_page .bg2 { font-size: 24px; }
  </style>';
}
add_action('admin_head', 'admin_head_mod');

__________________________

see font-size relation if you enter that snippet above:

can you post the script here!
i’m participant as you are – so no private content for me to see.

maybe you only deactivate the ampersand filter – try in your child-theme functions.php:

add_filter('avia_ampersand','__return_false');

or you can set the class inserted by that filter to be not special:

.special_amp {
  font-family: inherit;
  font-style: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

try:

function posts_iframe_popup() { 
?>
<script type="text/javascript">
(function($) {
	if (top === self) { 
		// no frame
	} else { //frame 
		$('#header, #footer, #socket').remove();
		$('#main').attr('style', 'padding-top: 0px !important');  
	};
	
	$(window).on('load', function(){
	  $('.open-in-lightbox a.av-masonry-entry').magnificPopup({
	    type:'iframe',
	    disableOn: 768,
	    mainClass: 'spezial-masonries',
	  }); 

	  $('.open-in-lightbox a.slide-image, .open-in-lightbox .slide-entry-title > a').magnificPopup({
	    type:'iframe',
	    disableOn: 768,
	    mainClass: 'spezial-blogposts',
	  }); 
	});
})(jQuery);
</script>
<?php }
add_action('wp_footer', 'posts_iframe_popup');

play with the 768 value to get what you like to have f.e.:
if you take 769
you have that case where an ipad mini (1024×768) will open on portrait the new page without lightbox – if you tilt it to landscape – it will open the lightbox.
However, it will not undergo any change after the link is opened.