Jump to content

Anchor links and carousel image links

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.4squaredglobal.com/

Hi,

Looking for some support to a) create anchor/jump links from my homepage to relevant sections of my Services page.
b) would like those links to be clickable images from within the carousel on my homepage.

So for example the icon for Business Strategy in the homepage carousel would link directly to the section of the Services page where Business Strategy is listed. 

And so on for all 4 images in carousel. Prefer no buttons, clickable images instead.

Would be great to know if this is possible and how. Thanks heaps for any support!

Link to comment
  • Solution

First, you can add url to button in Homepage, something like this

/services#value-creation
/services#value-creation

Next, use this code to Website Tools > Custom CSS to turn button link to image link

section[data-section-id="66d390252e0e1a5482e3e985"] {
li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
.user-items-list-carousel .list-item-content__button-container a {
    position: absolute !important;
    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;
}}

Next, add a Code Block to this position

image.thumb.png.b46b28c7ea0e3cf2602ac545b452a29d.png

and enter this code into Code Block

<div id="value-creation"></div>

Repeat same for other items

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
  • 2 weeks later...

Thanks @tuanphan for that! Worked a treat!

The only thing that has happened is it seems the infinite scroll on the carousel has stopped. This is still turned on in the design but not displaying as such, checked on a few devices. Ive turned it off for now. Is there a way to add it to the CSS or otherwise to keep the scroll?

Thanks again!

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.