Jump to content

How to create text in circles in Gallery, instead of images like this:

Recommended Posts

Site URL: https://www.bondprosper.com/london-property-market

Hi there,

I created a gallery section as shown below and made the images in Photoshop with teh information I wanted to display, but have since realised that because I used images Google and other search engines won't be able to read the information in the text which will affect SEO performance.   

With this in mind, I'd like to recreate this but with actual text in circles instead.  

Is this possible?

image.png

Link to comment
  • Replies 14
  • Views 3.1k
  • Created
  • Last Reply
  • 2 weeks later...
On 3/17/2021 at 3:01 PM, KickinGa said:

I added the text to the image caption for each one, however I don't want to change the images until I have the code to move the text position.  

You can duplicate page, add there, then we can check easier

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
20 hours ago, KickinGa said:

OK I've set up the page under url https://www.bondprosper.com/london-test and added the images as blank blocks with the test in the description.  

Your name is the password for the page.  

Can you enable gallery caption? I don't see any text here.

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 3/25/2021 at 4:40 PM, KickinGa said:

Oops, sorry! Haha. Done.  

Try adding to Design > Custom CSS

figcaption.gallery-caption.gallery-caption-reel {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin-top: 0 !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
On 3/27/2021 at 9:48 AM, tuanphan said:

Try adding to Design > Custom CSS


figcaption.gallery-caption.gallery-caption-reel {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin-top: 0 !important;
}

 

Done.  Just need to make the images circles, and then align the text centrally.  

I tried to add the font color and type to the code you gave me but it didn't work? 

Link to comment
On 3/30/2021 at 4:50 PM, KickinGa said:

Done.  Just need to make the images circles, and then align the text centrally.  

I tried to add the font color and type to the code you gave me but it didn't work? 

Use this

figcaption.gallery-caption.gallery-caption-reel * {
	color: red !important;
	font-size: 20px !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
On 3/31/2021 at 4:59 PM, tuanphan said:

Use this


figcaption.gallery-caption.gallery-caption-reel * {
	color: red !important;
	font-size: 20px !important;
}

 

HI tuanphan, that didn't work.  I'ver left that code in the custom css for now.  Any other ideas?

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.