Design sth. like this in Softr?

Does anyone have an idea how I could create something like this in Softr? I can’t just use an image, since it should adapt to the format of the page.

To create a website like this, I would combine the following blocks.

  1. For the title, description and numbers with text: a “simple counter” block. You can find it in the static blocks, in the “other” category and it looks like this


You can tweak it a little bit to make it look like in your screenshot. Obviously won’t look the same.

  1. For the “all functions, all seniority levels” part, it depends a lot on what happens when you click on those labels. If the labels are buttons that lead the user to a filtered search, for example, or if they aren’t buttons at all.
    If you’re planning to do the former, let me know and I can tell you how I implemented something like that in my webapp.
    For the latter, just use a feature grid (blocks > static > feature grid) and remove all content but the titles.

  2. For the button, just use a CTA block (blocks > static > CTA)

Hope it helps

1 Like

Thank you @funkycoldmedina. I can help with customizing part 1 and also for part 2 I would suggest to use the “Hero with call to action”, make the image position top or bottom, remove the image and add as many buttons as needed with corresponding styles


Ahaa to just add a bunch of buttons without an action. I hadn’t thought of that one :pray:t3::pray:t3::pray:t3:

Will give it a try now! Thank you!! :blush:

1 Like

@Astghik one thing I can’t figure out is how to change the font of the numbers on the “Counter Block”. Any idea how to do that? Once can only change the Title’s and description’s font.

Hi @Tim_ClimatEU , this will be fixed soon so you can have the settings, if not, I’ll provide a custom code :upside_down_face:

Do you have a timeline on the fix? :slight_smile:

A custom code until then would be great!

Just quickly following up on this :slight_smile:

Hello @Tim_ClimatEU, you can use this for now, but if it stops working then the fix is there so you will be able to set it from the settings :star_struck:

#BLOCKID .css-oxx843 > p:first-child {
    font-family: serif!important;

Awesome, thank you!!
Is there any date already for the fix?

Just so that I realize when it stops working :smiley:

I have the same problem with the “Pricing in card view with details” - I can’t change the font of the Monthly price. Would you also have a code snippet there? :slight_smile:

Try this one, but it will change the yearly as well which I guess should be fine:

#BLOCKID .css-1kxu9ry span {
    font-family: serif;