Jump to content

Linking banner images to separate pages

Recommended Posts

Site URL: https://strawberry-octagon-l8ej.squarespace.com/config/pages

Is it possible to link different banner images on a main navigation page to separate pages on my site? As you can see from the screenshot I have several projects displayed for each banner image and would like these to direct the user to the relevant separate pages when clicked on.

If anyone knows how to do this or has some code that would make this possible please?

Screenshot 2021-06-09 at 12.21.08.png

Link to comment
  • Replies 11
  • Views 768
  • Created
  • Last Reply
19 hours ago, jessclark98 said:

 

Sorry this should be fixed now I've upgraded my subscription and made the site public.

https://strawberry-octagon-l8ej.squarespace.com/config/settings/domains/jessclarkdesign.com

Hi. Why don't use Image Blocks? You can add image, links?

 

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
On 6/11/2021 at 7:03 AM, tuanphan said:

Hi. Why don't use Image Blocks? You can add image, links?

 

Okay I've tried this with gallery images and it works thank you, do you have any code that would allow me to change the images for mobile use like I did with the previous banners please?

Screenshot 2021-06-12 at 10.40.03.png

Link to comment
On 6/12/2021 at 4:40 PM, jessclark98 said:

Okay I've tried this with gallery images and it works thank you, do you have any code that would allow me to change the images for mobile use like I did with the previous banners please?

Screenshot 2021-06-12 at 10.40.03.png

You mean resize image on mobile??

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
23 hours ago, jessclark98 said:

Yes resize, but more so like how I did this previously with banner images? So when the image is viewed on mobile a different image is used?

 

Screenshot 2021-06-15 at 09.00.29.png

Screenshot 2021-06-15 at 09.00.38.png

You can add more images on desktop. Then let me know. We will give the code to show 1 image on desktop, show another on mobile.

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
3 minutes ago, tuanphan said:

You can add more images on desktop. Then let me know. We will give the code to show 1 image on desktop, show another on mobile.

All the images I want to change can be found on the 'new page' section of my site, as I've linked these to the separate pages. https://strawberry-octagon-l8ej.squarespace.com/config/pages

I've used gallery images for each project to allow me to get a similar size image for each section and removed the arrows so it's only the one image for each.

This is the code I previously used when I did this for banner images. Is there some similar code that allows this to work for gallery images?

 

@media only screen and (max-width: 640px){

#page .page-section:nth-child(1)
   .section-background img {
  opacity:0 
   }
#page .page-section:nth-child(1)
   .section-background {
background-image: url(https://static1.squarespace.com/static/607fd834cc2b3d1c6038d54a/t/608175fa695dc47c58640bb7/1619097084730/studysuite+mobile+banner+ai.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}

Screenshot 2021-06-16 at 09.17.08.png

Link to comment
18 hours ago, jessclark98 said:

All the images I want to change can be found on the 'new page' section of my site, as I've linked these to the separate pages. https://strawberry-octagon-l8ej.squarespace.com/config/pages

I've used gallery images for each project to allow me to get a similar size image for each section and removed the arrows so it's only the one image for each.

This is the code I previously used when I did this for banner images. Is there some similar code that allows this to work for gallery images?

 

@media only screen and (max-width: 640px){

#page .page-section:nth-child(1)
   .section-background img {
  opacity:0 
   }
#page .page-section:nth-child(1)
   .section-background {
background-image: url(https://static1.squarespace.com/static/607fd834cc2b3d1c6038d54a/t/608175fa695dc47c58640bb7/1619097084730/studysuite+mobile+banner+ai.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}

Screenshot 2021-06-16 at 09.17.08.png

/config is admin url. We can't access it.

See how to find page url.

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.