hm – you can see my test-page above. there is the hot-spot and it works – this way.
and even more – the side navigation works on lightbox too ! switching between the videos in the lightbox

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

on default there will be on grid.css :

.avia-icon-list li {
    margin: 0;
    padding: 0 0 30px 0;
   list-style-type: none;
    list-style-position: outside;
    clear: both;
    position: relative;
    min-height: 60px;
}

you have in the source code some line-breaks <br> remove them – these are start points as if there was a new listpoint !

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 7 years, 1 month 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 7 years, 1 month 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