Timeline Image - Forum | JoomShaper
Solved SP Page Builder

Timeline Image

Asked by Georgios 5 months ago Last activity 5 months ago

Hi,
I want to use the timeline addon, but instead of a date I want to insert and Image or Icon.
Is it possible in any way?
Best Regards
George

Accepted answer

Marked as the solution
Georgios Asked this
5 months ago

Yes you are right. Isolved it wit the custom CSS.
It only works, when you activate the start date form by typing something words or better keywords for your SEO ;) .
This example is for an image that is used as a global placeholder. You can also use a custom image for each individual item.
Thanks Ziaul.

/ 1. Make the placeholder text invisible /

.timeline-date {
font-size: 0 !important; / Makes the text "Keywords" invisible without breaking the layout /
margin: 0;
padding: 0;
}

/ 2. Insert the PNG / Icon /

.timeline-date::before {
content: ""; / Essential for the element to be rendered /
display: inline-block;
background-image: url('https://www.yourpage.com/yourImage'); / INSERT YOUR IMAGE URL HERE /
background-size: contain;
background-repeat: no-repeat;
background-position: left top; / Aligns the icon to the left /

/* Icon size (adjust these values as needed) */
width: 140px; 
height: 140px;

}

Ziaul Kabir Staff
5 months ago

You are welcome.

1 more reply

Ziaul Kabir Staff
5 months ago

Hi Georgios,

Thank you for reaching out to us.

Currently, the Timeline addon in SP Page Builder is designed to use a date field as part of its default structure, and there isn’t a built-in option to replace the date directly with an image or icon.

As a workaround, you may:

  • Use custom CSS to hide the date and visually replace it.

If you need this functionality as a native feature (e.g., replacing the date field entirely with an image/icon), it would require overriding or customizing the addon. For that level of modification, you would need to hire a developer.

Best regards,

Log in to reply.