Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


KickinGa

Question

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 post
  • Answers 14
  • Created
  • Last Reply

Top Posters For This Question

14 answers to this question

Recommended Posts

  • 0

Hi. You can use image (no text), then add image caption, then let me know. We will give the code to move text's position over image

Link to post
  • 0

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.  

Link to post
  • 0
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

Link to post
  • 0

OK so I need to set this up with blank block images, then we can code the text over the blank image?  Can we also make the images circular using code too then please?

Link to post
  • 0
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.

Link to post
  • 0
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;
}

 

Link to post
  • 0
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 post
  • 0
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;
}

 

Link to post
  • 0
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 post
  • 0
On 4/8/2021 at 4:04 PM, KickinGa said:

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

I don't see text here. Can you take a screenshot?

image.thumb.png.f1b6072f5831343d915b30ea6a6b1109.png

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...