by the way: if you like to have it under the normal widget area of enfold –
use this hook:

add_action( 'avia_after_footer_columns', 'enfold_under_footer_widget_area' );
function enfold_under_footer_widget_area() {
  dynamic_sidebar( 'after-footer' );
}

or – if this is the font-resizer you are using do this to your child-theme functions.php:

function font_resize_shortcode() {
     return fontResizer_place();
}
add_shortcode('font-resize', 'font_resize_shortcode');

and add this to your phone number field: [font-resize]
the rest will be css ( height and floating behavior)

But did a linked url has to be readable as url ? For SEO options this is not necessary to have it.
That is the reason for buttons , Text links etc.
Why it is important for you to show the whole url? you can set a “read more…” etc.
even this will do it – and it looks very clear without the linked url : f.e:
Owner/Builder Risk (3 articles)

you can make it as Icon List Small
and have for pdfs a pdf icon in front etc. pp.

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

And by the way all concerns to the same hook ( ava_after_main_menu) this is the elegant method – but if you like to add to a different hook ( not only the ava_after_main_menu ) in the header area you only have to change the functions name.
A function needs to be bijective – one-to-one , if not you got your white screen

add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
	dynamic_sidebar( 'header' );
}

add_action( 'ava_main_header', 'a_different_function_name' );
function a_different_function_name() {
	dynamic_sidebar( 'headertel' );
}

you will find the settings on shortcodes.css look for :
/*animation variations*/

f.e.:

.avia_transform .avia_start_delayed_animation.bottom-to-top {
-webkit-animation: avia-btt 0.8s 1 cubic-bezier(0.165, 0.840, 0.440, 1.000); /* Safari 4+ */
animation:         avia-btt 0.8s 1 cubic-bezier(0.165, 0.840, 0.440, 1.000); /* IE 10+ */
opacity: 1;
}

try this above ( 2 rules)

.js_active .grid-image {
    opacity: 1 !important;
}

.avia-slideshow li {   
visibility: visible;
opacity: 1 !important;
}

After that we will see if the functionality is ok – because on my simulation the slider did not work.

don’t know where it comes from. I have to have a deeper look to your codes :

but first look if you have set an opacity to 0
add to quick css :

.js_active .grid-image {
    opacity: 1 !important;
}

don’t know if the important is necessary – try it first without – that is one part of the solution.
Now i have to look to slider.

ok – a screenshot isn’t the way a good advice can be given.
The code above works (as you can see on my page above on image overlay )

To have only the colored field behind:

.av-caption-image-overlay-bg {
    opacity: 1;
    background-color: #1885ad;
    transform: scale(0.9);
}

you than have to do this with caption text:

.av-image-caption-overlay-center {
    padding: 20px;
}

i would try to eliminate the fontello icon and than place instead a background-image:

.image-overlay .image-overlay-inside::before {
    background: url(https://homeurl/wp-content/uploads/2015/07/service_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    content: "\00a0" !important;
}

see here: Link
if you like to influence the transparency of the overlay color:

.avia_transform a:hover .image-overlay {
    opacity: 0.8 !important;
}

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

:lol

öffne dein svg mal in einem Editor (nicht text editor oder wordpad, die fügen blödsinnigen code hinzu – nimm notepad++ oder eben sublime text am mac)

das sieht man oben im Kopf (ps ich entferne immer die generator zeile) dann so aus:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 821.8 296.7" style="enable-background:new 0 0 821.8 296.7;"  xml:space="preserve">

Durch hinzufügen einer Anweisung nimmt man einfluss auf das Shrink Verhalten und die Position in der Viewbox:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 821.8 296.7" style="enable-background:new 0 0 821.8 296.7;" preserveAspectRatio="xMinYMid meet" xml:space="preserve">

dann bleibt das svg linksbündig und wird aber in der höhe vermittelt !

oder eben hier runterladen: Link

Den einen Link oben sollte dir zeigen, was ein svg so alles vorherbestimmen kann.

Dein Logo

wenn du das Browserfenster mal in der x Richtung verkleinerst, und danach in der y-Richung siehst du das es nach links sich verkleinert.
in der y-Richtung aber in der Mitte bleibt.

das kann man durch manuelles bearbeiten des svg in einem Texteditor erreichen.

du hast irgendwo das svg als background eingesetzt.

.logo {
background: url('http://www.contigo-personal-training.de/wp-content/uploads/2017/05/cpt-Logo.svg') no-repeat;
height: 60px;
top: 15px;
width: 170px;
}

das muss inline code sein ( hast du zB. das customize von WP benutzt ?)

Such das mal , und lösche das.

Dann setzt du das logo ( man kann auch svgs nehmen) im Enfold Dialog ein (ps ist wohl auch schon geschehen; daher doppelt !)
da du mit der Anweisung oben höhe und weite gesetzt hast ist auch das hier eingesetzte svg mit den gleichen Daten sichtbar !

Bei Firefox fällt es nicht auf weil offensichtlich deckungsgleich – in den anderen browsern ist es wohl anders.

click to enlarge:

wenn das geht, dann füge um das Logo sichtbar zu machen in das quick css ein:
.logo img { width: 170px; height: auto}

Da ist WordPress ein wenig hinterher mit der svg Unterstützung . Es interpretiert die svgs als hätten sie 0px höhe und 0px weite.

Und natürlich entferne die Anweisung
.logo img {display: none }

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

ich hasse den neuen Firefox – mein geliebtes Firebug läuft nicht mehr; da hätte ich das ganze schneller gefunden.

Übrigens sieh mal hier was du am svg machen kannst, damit du das shrinken beeinflussen kannst: Link

you have inserted the svg on a different way?
i do not see why there are two times the svg but

if you set the .responsive .logo img to display none too

.responsive .logo img {display: none}

it disappears ! ??? it is a riddle

how do you insert the logo svg?