yes that is why i said the surrounding container.
if you want to use it like a textmarker you can use your code – but you have to be carefull. If classes belong to one element they are not separated by a space! Just one after the other ( and order is also important to preserve) so your code:

.avia_textblock.text-black-background {
    background-color: #000;
}

first try without important – the reason why i take the hex code is to save bytes ;) #000 ist shorter than black :lol

these custom classes are not set in the custom fields. These custom classes are only setable if you are working with the advanced layout builder ( shortend as ALB).
When you have your text-block element from Enfold ALB – open that element

Under the inputfiled for the text there is now an input field for Custom Css Class

set the link of the hotspot as manually link.

see here. https://webers-testseite.de/image-with-hotspost-linking-to-youtube-in-iframes/

link for example with youtube options and at the end with iframe=true:

https://www.youtube.com/watch?v=38cMOweKcxM?autoplay=1&cc_load_policy=1&enablejsapi=1&ecver=2&playsinline=1&rel=0&showinfo=0&color=white&iv_load_policy=3&iframe=true

It would have been nice to get an answer not only from mods here!
I’m really thinking about not actively standing up for other issues any more. If I should have another problem of my own, then I always find competent contacts in the mods here – and the rest doesn’t interest me anymore. Frankly – dear co-users of Enfold – is it so difficult to give feedback on an answer?

if you don’t like to make it manually – you can change the backlink by this code-snippet in your function.php of your child theme

you have to adjust your data

function new_nolink(){
$kriesi_at_backlink = "<a href='https://webers-webdesign.de'>Webers WordPress Webdesign</a>";
return $kriesi_at_backlink;
}
add_filter("kriesi_backlink","new_nolink");

hey Dude – I can’t understand why it should work there (see link above) either.

to be shure that you have no curly exclamation mark issues on that can you please try this by copy&paste in your text :

<script src="https://www.cqc.org.uk/sites/all/modules/custom/cqc_widget/widget.js?data-id=1-2810512121&data-host=www.cqc.org.uk&type=location" type="text/javascript"></script>

check if you have different plugins on those pages – and first try to test if there is a conflict by deactivating those.

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

but sorry but again the question : how do you try to embed this?

On Enfold ( and on other Themes too) you can not enter a script in a site by putting a script in a text-area as you like.
https://kriesi.at/documentation/enfold/add-custom-js-or-php-script/

scroll down to : https://kriesi.at/documentation/enfold/add-custom-js-or-php-script/#add-a-script-to-head-section
or below to see how to insert in footer.

Or to enqueue a custom external script: https://kriesi.at/documentation/enfold/add-custom-js-or-php-script/#load-shortcodejs-from-child-theme-folder

you can do that for single pages, page arrays , categories or single posts only etc

1) Create an enfold heading in a flex-column.
2) if there are columns besides each other it is best to have the equal-height option.
3) i gave to the heading itself a custom class: change-on-hover
4) the hover effect will be active if i’m over the whole column
5) Put in the heading input field:
<span data-hover="About">About </span> <span data-hover="Me">Me</span>

6) The data-hover values do not need to be the same – but it looks better if so
7) do this to quick css:

.change-on-hover .av-special-heading-tag {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    z-index: 111;
    width: 100%;
    margin: 0 auto !important;
    overflow: hidden;
}

.change-on-hover .av-special-heading-tag span {
font-weight: bold;
    display: inline-block;
    position: relative;
    transition: transform 0.3s;
}

.change-on-hover .av-special-heading-tag span:first-child {
	color: #fff
}
.change-on-hover .av-special-heading-tag span:nth-child(2) {
	color: #ffb400
}

.change-on-hover .av-special-heading-tag span:first-child::before,
.change-on-hover .av-special-heading-tag span:nth-child(2)::before {
	position: absolute;
	content: attr(data-hover);
}

.change-on-hover .av-special-heading-tag span:first-child::before {
	top: 105%
}

.change-on-hover .av-special-heading-tag span:nth-child(2)::before {
	bottom: 105%
}

.flex_column:hover .change-on-hover .av-special-heading-tag span:first-child {
    transform: translate3d(0, -105%, 0);
    color: #ffb400
}

.flex_column:hover .change-on-hover .av-special-heading-tag span:nth-child(2) {
    transform: translate3d(0, 105%, 0);
    color: #fff
}

PS: it works responsive – but maybe it is important to take a relative font-size as i do in the above example 4.5vw

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

here with enfold and only css – if this is it – tell me:
hover the about me column: https://webers-testseite.de/buttonlink/

it is all in the code of you link you gave to us ;)

and by the way on default i think svgs allways shrink to the center when surrounding container gets smaller.

But you could set a different behavior on the svg code itself ( open with a good editor like sublime-text on OSX or notepad++ for windows)
you see the header of the svg – f.e.:

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

before that space preserve you can add : preserveAspectRatio=”xMinYMin meet” so that there is:
Link : https://developer.mozilla.org/de/docs/Web/SVG/Attribute/preserveAspectRatio

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Webdesign" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 570 200" enable-background="new 0 0 570 200" preserveAspectRatio="xMinYMin meet" xml:space="preserve">

xMinYmin – means it shrinks to the left top
xMinYmax – means it shrinks to the left bottom etc. etc.

options are Min , Mid, Max

you can see it here : https://webers-testseite.de/wp-content/uploads/webers-webdesign.svg and difference to :
https://webers-testseite.de/wp-content/uploads/webers-webdesign2.svg
shrink the height of your browser window on both links and see

Dear Rikard – i think a screenshot is not a good advice. This seems to break the copyright of google.
Screenshots (even it is concerning to the api images):
Private use on the Internet: not permitted
Commercial use on the Internet: not permitted
If you use Screenshot of maybe Google Earth: then you could get into copyright conflicts with third party providers (satellite operators etc.).

i use firefox developer edition on Mac OS X – but i do not see these icons.
( Same with : Safari and Chrome)
What happend if you are logged out ? did you see those icons aswell on your browser?

by the way : on GDPR (DSGVO) Reasons – wouldn’t it be better if you are using a non embedded Youtube Video – and use instead f.e. an image of the film and link to the youtube video in a lightbox?:
(just place a screenshot as Avia Image and link to a manually link:

https://www.youtube.com/watch?v=lhZsLYmmZWM?autoplay=1&cc_load_policy=1&enablejsapi=1&ecver=2&playsinline=1&rel=0&showinfo=0&color=white&iv_load_policy=3&iframe=true

https://webers-testseite.de/video-with-image-link/

what you see might be the alternative Logo for transparency option.
Look if you got an entry on Enfold (or Enfold-Child) – Header – Transparency Options

hm – i see it is hard to style if you got a header sticky to top. Because it scrolls away.
so i’m testing it right now to have the same behavior as #header

take better the hook: ava_main_header

add_action( 'ava_main_header', 'enfold_customization_widget_area_before_header' );
function enfold_customization_widget_area_before_header() {
  dynamic_sidebar( 'before-header' );
}

and create a new widget called: before-header

but even this is hard to obtain rightly designed – because – the offset to main was wrong calculated then.
On non shrinking headers you can adjust this by giving the main container a different padding-top.

#header_main > .widget {
    width: 100%;
    max-width: 1310px;
    margin: 0 auto;
    padding: 0 50px;
}

/*** depends on your header settings  ***/
.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 380px;
}

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

The ecver setting prevents the video recommendations when pausing the film. The playsinline setting ensures that the whole thing runs on a mobile phone like on a desktop. etc pp

you only have to add this to the film link always

?autoplay=1&cc_load_policy=1&enablejsapi=1&ecver=2&playsinline=1&rel=0&showinfo=0&color=white&iv_load_policy=3&iframe=true