How I can create number Icons

Liebes Sitejet Team,

for a section on our website we would need the following number icons. Here the link to the section: www.pianofly.at/mentoring (http://www.pianofly.at/mentoring)

Preview link
[https://my.sitejet.io/goto/1941021/3430a5d755138ca4532b22c7e5879eceb19b25d356b32e166dc2d574aac53a25/my_website_presentation]

Thanks Clara

3 Likes

Hi Clara!

SiteJet doesn’t take specific requests, but I was happy to design those for you.

Here you go!

1: https://svgshare.com/i/Xao.svg
2: https://svgshare.com/i/XcX.svg
3: https://svgshare.com/i/Xax.svg
4: https://svgshare.com/i/Xap.svg

Edit: the font isn’t exactly the same, but I did my best!

3 Likes

Hi Clara,

if you don’t feel comfortable creating your own SVGs you can also achieve this layout within Sitejet alone. Just follow these steps:

Add a 4 column preset to your page

Within the first column, create a container by clicking Create element → Container. This will become a circle by adjusting the settings as follows (adjust width and height to your needs):

Switch to the Background tab and set a black or dark grey background
image

Go to Style → Element → Border and set Rounded corners to 50%
image

Go to Add content → Elements and use drag & drop to add a text element into the container
image

Change text to “1”, center, change color and set your desired font
image

To center the circle within the column, double-click the column and adjust Main axis
image

Now use Duplicate 3x to get 4 circles, you can remove the 3 empty ones

Change numbers to “2”, “3” and “4”. Voilà!

Hope that helps

5 Likes

Wow, kicking it out of the park with this response! So detailed!

3 Likes

This is the way.

1 Like