How to make embed clickable in cms?

How to make this embed clickable in CMS, without “Convert to Link block”?

<div class="s9-cms-item-in">
	<div class="s9-cms-item-shadow s9-(animation)-shadow">
  	<div class="s9-cms-item-shadow-spray-1"></div>
    <div class="s9-cms-item-shadow-spray-2"></div>
    <div class="s9-cms-item-shadow-spray-3"></div>
    <div class="s9-cms-item-shadow-spray-4"></div>
    <div class="s9-cms-item-shadow-spray-5"></div>
  </div>
  <div class="s9-cms-item-img s9-(amination) s9-NAME" style="background-image:url(IMAGE)"></div>
  <p class="s9-cms-item-text">NAME</p>
</div>
<!–– Code below make it clickable, but link not connected to cms and result is 404 ––>
<a href="CMS SLUG">
  <div class="s9-cms-item-in">  
  </div>
</a>

Thanks you so much, is this perfect answer. Both methods are working, but its breaks the aminations. Sorry, i just forgot that i can put embed inside link block, and its working with animations now on published site. I think, I forgot to check if embed in link block works when project published.

Hi @Andrew_Nk, thanks for the post, I have not tested it, but you might try putting some code in the footer of the page like so:


$( document ).ready(function() {
    
    $( ".s9-cms-item-in" ).click(function() {
    
    location.href='https://www.example.com/collection-slug/item-slug'; 
    
    });
});

Example.com should be changed to your domain.

Collection slug in the path is the collection slug and item slug is the item slug using the ADD field in the Footer code section of page settings in the template page.

For the location.href path, you may also be able to use just ‘/collection-slug/item-slug’, I did not try that though.

A non-code method might be to put the div embed within a parent div having relative position, then add a link block to the parent div and layer that above the div embed with a 100% height and Width of the parent div with a transparent color and absolute position with a higher z-index than the div embed.

The result would be a link block that is transparent, covers the whole div and is clickable.

I might try that and see if it helps.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.