if I had no respect for simple questions here, then I would be satisfied with hints at the solution approach. But I often mean to formulate precise instructions here. Some people may even be disturbed by the detail and illustrations – and many are not interested in a learning curve but just want to get the solution in the form of short snippets. But despite everything the questions are often not precise enough.
You presented me a picture of the slider above; then I mistakenly assumed that you wanted to achieve that. But in the end it’s not much different than the described procedure, because as the mods here already indicated, it’s not an ALB element, but just like I indicated above simple html insertion and css styling. So please always try to be as specific as possible in your question in order to avoid superfluous solutions.

And dear Gitte you aren’t able to transmit the more complicated case to an easier one?
the html code is above – put it in a text-block or code block element – the rest only had to be adjusted to not specific for sliders:

.avia-double-buttons {
    margin-top: 30px;
    text-align: center;
    position: relative;
}

#top #wrap_all  .avia-double-button, 
#top #wrap_all .avia-double-button {
    background: #000;
    background: rgba(0,0,0,0.4);
    border-color: #fff;
    color: #fff;
    padding-bottom: 11px;
    text-decoration: none;
}

#top .avia-double-button {
    letter-spacing: 1px;
    padding: 13px 20px;
    padding-bottom: 13px;
    text-transform: uppercase;
    font-size: 13px;
    text-align: center;
    min-width: 175px;
    display: inline-block;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    border: 4px solid #fff;
        border-top-color: rgb(255, 255, 255);
        border-right-color: rgb(255, 255, 255);
        border-right-width: 4px;
        border-bottom-color: rgb(255, 255, 255);
        border-left-color: rgb(255, 255, 255);
    text-decoration: none;
}

#top .avia-double-button-1 {
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    border-right-width: 2px;
}

#top .button_or {
    position: absolute;
    display: block;
    height: 26px;
    line-height: 21px;
    width: 40px;
    text-align: center;
    top: 50%;
    left: 50%;
    margin: -13px 0 0 -22px;
    background: #fff;
    color: #666;
    border-radius: 100px;
    font-size: 12px;
    border: 2px solid #FFF;
    font-style: italic;
    font-weight: 600;
    z-index: 11;
}

#top .avia-double-button-2 {
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    border-left: none;
        border-left-color: currentcolor;
}

#top #wrap_all .main_color .avia-double-button-1:hover, 
#top #wrap_all .main_color .avia-double-button-1:hover {
    background: rgba(0, 100, 190, 0.6);
    color: #fff;
}

#top #wrap_all .main_color  .avia-double-button-2:hover, 
#top #wrap_all .main_color .avia-double-button-2:hover {
    background-color: rgba(200,0,120,0.6);
    color: #fff;
}

@media only screen and (max-width:480px) {
 .responsive #top .avia-double-button {
  width:50%;
  min-width:50%;
  margin:0
 }
}

see test page

1) make a: Fullwidth Easy Slider
2) choose slide-show transition : fade
3) place an image and put html-code into : caption – caption text field:
<div>A subheading line included before the buttons</div><div class="avia-double-buttons "><a href="https://kriesi.at/themes/enfold-overview/" class="avia-double-button avia-double-button-1">View Demos</a><span class="button_or">or</span><a href="https://themeforest.net/item/enfold-responsive-multipurpose-theme/4519990?ref=Kriesi" class="avia-double-button avia-double-button-2">Purchase Now</a></div> (put it in without line-breaks !)
As you see – you can add infront of the buttons a subheading line!

4) put this to your quick css:

.avia-double-buttons {
    margin-top: 30px;
    text-align: center;
    position: relative;
}

#top #wrap_all .avia-slide-wrap .avia-double-button, 
#top #wrap_all .avia-hover-fx .avia-double-button {
    background: rgba(0,0,0,0.2);
    border-color: #fff;
    color: #fff;
    padding-bottom: 11px;
    text-decoration: none;
}

#top .avia-double-button {
    letter-spacing: 1px;
    padding: 13px 20px;
        padding-bottom: 13px;
    text-transform: uppercase;
    font-size: 13px;
    text-align: center;
    min-width: 175px;
    display: inline-block;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    border: 4px solid #fff;
        border-top-color: rgb(255, 255, 255);
        border-right-color: rgb(255, 255, 255);
        border-right-width: 4px;
        border-bottom-color: rgb(255, 255, 255);
        border-left-color: rgb(255, 255, 255);
    text-decoration: none;
}

#top .avia-double-button-1 {
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    border-right-width: 2px;
}

#top .button_or {
    position: absolute;
    display: block;
    height: 26px;
    line-height: 21px;
    width: 26px;
    text-align: center;
    top: 50%;
    left: 50%;
    margin: -13px 0 0 -14px;
    background: #fff;
    color: #666;
    border-radius: 100px;
    font-size: 10px;
    border: 2px solid #FFF;
    font-style: italic;
    font-weight: 600;
    z-index: 11;
}

#top .avia-double-button-2 {
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    border-left: none;
        border-left-color: currentcolor;
}

/** if you like to have different hover colors  **/
#top #wrap_all .main_color .avia-slide-wrap .avia-double-button-1:hover, 
#top #wrap_all .main_color .avia-hover-fx .avia-double-button-1:hover {
    background: rgba(0, 100, 190, 0.6);
    color: #fff;
}

#top #wrap_all .main_color .avia-slide-wrap .avia-double-button-2:hover, 
#top #wrap_all .main_color .avia-hover-fx .avia-double-button-2:hover {
    background-color: rgba(200,0,120,0.6);
    color: #fff;
}

for responsive behavior – test what fits best as width value:

@media only screen and (max-width:767px) {
 .responsive #top .avia-double-button {
  width:50%;
  min-width:50%;
  margin:0
 }
}

Result: https://webers-testseite.de/doublebutton/

i do not see your private content – but i suppose it is a svg file – which needs a width setting on chrome.

after the code Rikard gave to you – the font could be used on quick css this way:

font-family: 'Russo One', sans-serif;

to register it for enfold options you can place this to child-theme functions.php :

add_filter( 'avf_google_heading_font',  'avia_add_custom_font');
add_filter( 'avf_available_google_fonts',  'avia_add_custom_font');
function avia_add_custom_font($fonts)
{
$fonts['Russo One'] = 'Russo+One&display=swap';
return $fonts;
}

The Font is at the bottom of the list!

Click what i mean. here: Link

sorry – wrong answer.

can you try this in your child-theme functions.php:

function ava_exclude_current_post($query) {
  if (is_singular('post')) {
    $exclude = avia_get_the_ID();
    $query->set( 'post__not_in', array($exclude) );
  }
}
add_action('pre_get_posts', 'ava_exclude_current_post');

thanks ismael: https://kriesi.at/support/topic/how-to-change-related-post-style-to-grid/#post-1084541

i do not see the page you are concerning to- but
visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page.
The tag is rendered, it just isn’t seen on the page.
So maybe you can set it to display none.

What is your code you are trying to include.
( Please use code-tag here on board for that to post)

you have an example where these filters now work in conjunction with Borlabs cookies and videos.
I like to use this plugin myself – and would like to upgrade from my 1.9.9 Agency license to 2.0 soon, so it would be interesting for me to know if everything works fine with Enfold.

PS : please always use here on board for code the code-block tag – it is easier to test for us by copy paste the codes inside – as you can do now with the code above.