just put his code name it f.e. prg_patterns.php – therefore you had to start that codesnippet of him by a leading <?php
– and upload it to your child-theme/shortcodes folder.
if you haven’t allready this littel snippet in your child-theme functions.php – insert it :

function avia_include_shortcode_template($paths){
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');
  return $paths;
}
add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);

see doku to have own alb elements

see example in the footer area with links to impressum and datenschutz

https://enfold.webers-webdesign.de/impressum/#footer

i just edited his code a bit to have on form element classes to style the form output better:

/* form output */
ob_start();
?>
	<?php if( $atts['newtab'] == 'true' ): ?>
	<form class="prg newtab" method="POST" target="_blank">
	<?php else: ?>
	<form class="prg" method="POST">
	<?php endif; ?>
		<button class="noLink" type="submit" name="prgpattern" value="<?php echo $redirect_slug; ?>"><?php echo $atts['title']; ?></button>
	</form>
<?php
return ob_get_clean();

then i can set for those forms:

#top form.prg {
  display: inline-block;
  margin-bottom: 0;
}

#top form.prg .noLink {
  border: none;
  font-size: inherit;
  color: inherit;
  background-color: transparent;
}

#top form.prg .noLink:hover {
  color: gold;
  cursor: pointer;
  transition: all 0.5s ease
}

hm – first of all – as far as i know the bots of the crawlers will not follow submit buttons – thats the trick on prg patterns. So a search form like yours would not be affected by the “linkjuice” issue anyway.

Is that an Enfold Search ALB element you put on the page? Because I don’t get a “link element” there in my DOM anyway:

(click to enlarge the image)

And even the search results beneath that form – do not have a rel : nofollow

So now my question regarding your Enfold version in which this occurs.

Edit: Ok now i see – this is the magnifier glass on top besides the navigation …
It is only that link that opens the search input form – But doesn’t it even make sense to set a nofollow at this anchor for SEO reasons?

or why don’t you choose on masonry all portfolio terms you have – and just hide those sort-buttons via css.

.av-masonry-sort .animation_sort_button {
  display: none;
}

Then All will show all – only the non wanted Sort Options are not seen ( like the home-sort )

f.e.: on that page here: https://kriesi.at/themes/enfold-2017/elements/masonry/
if you set :

.av-masonry-sort .illustration_sort_button {
  display: none;
}

The All Button will show illustrations too – but the sort option will not be there

Well – i use nearly almost the quick css – the only thing that always bothers me is that the window widths are limited. I’m now working on a high-resolution 4k 32” monitor. So I want to be able to take advantage of that.

I put in my child-theme functions.php file:

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; }
  #avia_quick_css .avia_description {float: none;margin-bottom: 20px !important;padding-left: 0 !important;width: 98%}
  #avia_quick_css .avia_control {float: left;max-width: 98% !important;width: 98% !important}
  .avia_footer_links li {float: left;padding-right: 20px}
  .avia_footer .avia_footer_save {float: left}
  .avia_reset {display: none !important } 
  #avia_options_page { max-width: 3000px!important}
</style>';
}
add_action('admin_head', 'admin_head_mod');

however, the latest enfold versions now have a “Theme Reset All Options” button on the import/export tab – I already include this in the code as seen above.

just put in the mainClass the enfold class: avia-popup
( mainClass: 'avia-popup mfp-fade', ) and to better select that popup maybe we put in an additonal class f.e.: people

function button_for_biography(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () {	
	(function($) {
		$('#people').each(function(){
		var that = this;
			$('.flex_column', this).each(function(i){
				if($(this).find('.mfp-hide').length){
					$(this).find('.avia-button').attr('href','#bio-'+(i+1)).addClass('no-scroll');
					$(this).find('.avia_image').attr('href','#bio-'+(i+1)).addClass('no-scroll');
					$(this).find('.mfp-hide').attr('id','bio-'+(i+1)).addClass('white-popup');
				}
			});
		});

		$('#people .flex_column').find('.avia-button[href^="#bio-"]').magnificPopup({
			type:'inline',
			midClick: true,
			removalDelay: 500,
			mainClass: 'avia-popup mfp-fade people',
			gallery: { 
				enabled:true,
			},
		});

		$('#people .flex_column').find('.avia_image[href^="#bio-"]').magnificPopup({
			type:'inline',
			midClick: true,
			removalDelay: 500,
			mainClass: 'avia-popup mfp-fade people',
			gallery: { 
				enabled:true,
			},
		});

	})(jQuery);
}); 	
</script>
<?php
}
add_action( 'wp_footer', 'button_for_biography');

now we can influence that close button “X” only for that popup (people) by:

div.avia-popup.people .mfp-close {
  right: -5px;
  top: -45px;
  color: #fff;
}