Design sth. like this in Softr?

Ask the community
1

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.

image
image2410×1336 335 KB

2

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

image

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
3

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

2 Likes
4

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
5

@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.

6

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:

7

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

A custom code until then would be great!

8

Just quickly following up on this :slight_smile:

9

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:

<style>
#BLOCKID .css-oxx843 > p:first-child {
    font-family: serif!important;
}
</style>
2 Likes
10

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

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

11

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:

12

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

<style>
#BLOCKID .css-1kxu9ry span {
    font-family: serif;
}
</style>