List block image links

Site URL: https://sarahandmadejewellery.com.au/

Hi Guys, 

I've added a list block (simple list) to my homepage.  I want to make each image link to a different service page on my site.  There doesn't appear to be anywhere i can do this when editing the content for this list.  Is it possible to do or am I better off using a gallery?  If I do use a gallery can I get the same effect?

Many thanks 

Ahser

Hi Asher,

Did you ever get this figured out? I'm trying to do the same thing and can't figure it out. I see that you can add a button as a link, but I just want the image and Title, no button.

On 10/27/2021 at 4:34 AM, tesiab said:

Hi Asher,

Did you ever get this figured out? I'm trying to do the same thing and can't figure it out. I see that you can add a button as a link, but I just want the image and Title, no button.

Hi,

You can add button, then we will give the code to pass button link to image/title (& use code to make button invisible)

Did you ever get some code to get this going?

Anyone?

On 10/29/2021 at 10:12 AM, tuanphan said:

Hi,

You can add button, then we will give the code to pass button link to image/title (& use code to make button invisible)

Do this. And we will check & give the code

Can I get the code too please?

On 11/23/2021 at 2:04 PM, djshiflet said:

Anyone?

On 11/30/2021 at 11:49 AM, Dclr_Branding-Solutions said:

Can I get the code too please?

On 11/5/2021 at 3:37 AM, Brent_Dickens said:

Did you ever get some code to get this going?

First, add buttons, then Use this code (Design > Custom CSS)

/* Make list images clickable */
li.list-item {
    position: relative !important;
}
.list-item-content__button-container {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
a.list-item-content__button.sqs-block-button-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
    background-color: transparent !important;
}

@tuanphan 

What if button styles are set to outline not solid?

On 2/16/2022 at 12:50 PM, Kal said:

@tuanphan 

What if button styles are set to outline not solid?

I think the code is same. If it doesn't work, please share link to page where you use list block, we will check it again

@tuanphan

I have an interesting problem with this code. Worked perfectly until I added site-wide animations at the client request and now I have boxes over the click target area I cant find the selector to remove. Any ideas?

On 2/22/2022 at 4:30 AM, treeSQSP said:

@tuanphan

I have an interesting problem with this code. Worked perfectly until I added site-wide animations at the client request and now I have boxes over the click target area I cant find the selector to remove. Any ideas?

Can you share link to page in screenshot? We can check problem easier

On 5/25/2022 at 9:49 AM, ZABS860 said:

I'm having almost this exact same issue, you can see the website here: https://aimeesternluxuryrealestate.squarespace.com/press password: Newpassword. 

I really want both the image and the text below to link without any button displaying. Can you show me how to get rid of the black outlines? Much appreciated.

Add to Design > Custom CSS

.user-items-list-item-container[data-section-id="628d64b57c0c6a0128543652"] a.list-item-content__button.sqs-block-button-element.sqs-block-button-element--medium.sqs-button-element--primary {
    border: none !important;
}

Hi there, 

@tuanphan I added in your above code which worked (thank you!) but i have the black bordered which are still there after adding in the below:

.user-items-list-item-container[data-section-id="628d64b57c0c6a0128543652"] a.list-item-content__button.sqs-block-button-element.sqs-block-button-element--medium.sqs-button-element--primary {
    border: none !important;
}

Could you help?

Thanks!

On 6/23/2022 at 10:31 PM, HMagorRoberts said:

Hi there, 

@tuanphan I added in your above code which worked (thank you!) but i have the black bordered which are still there after adding in the below:

.user-items-list-item-container[data-section-id="628d64b57c0c6a0128543652"] a.list-item-content__button.sqs-block-button-element.sqs-block-button-element--medium.sqs-button-element--primary {
    border: none !important;
}

Could you help?

Thanks!

Can you share link to page where you use list? We will check it again

On 6/24/2022 at 11:48 PM, tuanphan said:

Can you share link to page where you use list? We will check it again

here - https://the-second.co.uk/miu-miu-embroidered-organza-dress password is thesecond. 

Thank you!

On 6/28/2022 at 10:10 PM, HMagorRoberts said:

here - https://the-second.co.uk/miu-miu-embroidered-organza-dress password is thesecond. 

Thank you!

Add this to Design > Custom CSS

.user-items-list-item-container[data-section-id="62b478deb15ed0503287a5f7"] a.list-item-content__button.sqs-block-button-element {
    border-color: transparent !important;
}

On 6/30/2022 at 8:15 AM, tuanphan said:

Add this to Design > Custom CSS

.user-items-list-item-container[data-section-id="62b478deb15ed0503287a5f7"] a.list-item-content__button.sqs-block-button-element {
    border-color: transparent !important;
}

 

This worked great on that page but its not carrying through to any others - https://the-second.co.uk/rachel-gilbert-french-mini-dress

1 hour ago, HMagorRoberts said:

This worked great on that page but its not carrying through to any others - https://the-second.co.uk/rachel-gilbert-french-mini-dress

Use this new code

a.list-item-content__button.sqs-block-button-element {
    border-color: transparent !important;
}