Jump to content

Add subhead/one line of body text to the thumbnails of the portfolio page

Recommended Posts

Hi! Does anyone know how to add a line of text underneath the title text of the thumbnail images on the portfolio page. There is no space to do this in the individual project settings (which is where the title text populates from). Not sure if this is possible?

I'm not familiar with anything but Custom CSS so adding any code feels a bit dubious, but I'm willing to try if it's considered simple for a beginner. I can't share the site URL because it's for a client and unpublished. There are screenshots attached of what I'm talking about indicating where the ask to add a line of body text is. 

Thanks so much in advance for help/advice/pointing in the right direction.

Screen Shot 2022-01-26 at 11.30.42 AM.png

Screen Shot 2022-01-26 at 11.31.14 AM.png

Link to comment
  • Replies 11
  • Views 2.1k
  • Created
  • Last Reply

Top Posters In This Topic

I was able to get permission to publish the site from the client. Here is the portfolio page https://fuchsia-celery-4wtw.squarespace.com/brand-strategy-insight

 

Will adding custom code make my client ineligible to receive squarespace support if she needs it in future? She will not have me on retainer so any future content updates will be made by her.


 @tuanphan thank you!! 

Link to comment
22 hours ago, hecinthecity said:

I was able to get permission to publish the site from the client. Here is the portfolio page https://fuchsia-celery-4wtw.squarespace.com/brand-strategy-insight

 

Will adding custom code make my client ineligible to receive squarespace support if she needs it in future? She will not have me on retainer so any future content updates will be made by her.


 @tuanphan thank you!! 

Add to Design > Custom CSS

a.grid-item[href="/brand-strategy-insight/project-one-5kysf"] h3:after {
    content: "adidas sub";
    display: block;
    font-size: 18px;
}
a.grid-item[href="/brand-strategy-insight/project-two-tj33s"] h3:after {
    content: "Foot sub";
    display: block;
    font-size: 18px;
}
a.grid-item[href="/brand-strategy-insight/project-three-fj3xd"] h3:after {
    content: "Dr.Martens sub";
    display: block;
    font-size: 18px;
}

image.thumb.png.71d1161d4cd3ded651db72a649e44883.png

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
  • 1 year later...
On 1/24/2024 at 9:42 PM, KamilaHypnar said:

It's almost a year later, but i have a question of you also can put text on top of the image, like a small description when you click on it? If there is a code i would love to know 🙂

Yes possible. If you share link to your portfolio page, I can give some code to add text on top of image

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 months later...
5 hours ago, jorohaco said:

Hi @tuanphan or anyone available to help. I'd like to do something similar here and insert a subhead text block into this Services section. I attached screens to illustrate

vanilla-megalodon-ejlw.squarespace.com

password: sqs331

 

Screenshot 2024-03-31 at 10.04.10 PM.png

Screenshot 2024-03-31 at 10.28.06 PM.png

Which page are you referring to? I don't see it on homepage or any portfolio pages on header

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
6 hours ago, tuanphan said:

Which page are you referring to? I don't see it on homepage or any portfolio pages on header

Different use case—not a portfolio page, just a Services section that needs an additional text block below the Title as a <p2>. It's a single landing page so it should be there below the "20x faster" section.

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.