Jump to content

Make images clickable that currently don't allow for URL

Recommended Posts

I am redesigning my website and have a section where people can view logos and click the right or left arrow button to see more company logos.  I'd like to make each clickable but when you click on the image to edit this particular layout doesn't allow for URLs to be attached to each image.  Is there a way to make this work other than having to select a different page layout like picture gallery to make it work?

Logos Section.jpg

Link to comment
  • Replies 5
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

First, you need to enable Button

image.png.17d24e5a76f19c8d4718b3df535c6250.png

then when you edit each image >>> URL option will appear

image.png.fa6f30d3e977e752a55805b2bd1b2868.png

Here we will add link to button

Then you can share link to page where you use images, we can give some simple code to turn button link to image, so image will be clickable.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

I did as you suggested above.  So not a link is associated with every button I placed underneath each logo.  What would be the next step to make those buttons not appear on the page and only have the logos clickable?

Link to comment
7 hours ago, Grl4Real said:

Here is the link to the page where I used the images https://llama-koi-87ph.squarespace.com/config/pages

https://llama-koi-87ph.squarespace.com/?noredirect

Use this code to Website > Website Tools > Custom CSS

section[data-section-id="663974af9088133bbb6f6f70"] {
li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
.user-items-list-carousel .list-item-content__button-container a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
}
.user-items-list-carousel .list-item-content__button-container {
    position: static !important;
transform: unset !important;
}
a.list-item-content__button.sqs-block-button-element:before {
    visibility: hidden;
}
.user-items-list-carousel__slide {
    pointer-events: initial !important;
    user-select: unset !important;
}
.user-items-list-carousel__gutter {
    cursor: pointer;
}
.list-item-content--hidden {
    display: block !important;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.