Help - how to create a list of services/features/products with an icon on top?

Hi,

I'm trying to create a list of services with an icon on top and text under the icon, like the attached image (that’s https://www.aesopwines.com/) 

How can I do this? If I insert an image the icon expands. Also, if I insert an image and a text block below it wouldn't behave properly on mobile.

Whats the best way to do this? Whats the best module for this?

(I'm using the Basil template, in case that helps)

Can you please help?

Kind regards,

Fabian

Hi, you can use Image Block

or follow this gude. https://beaverhero.com/squarespace-templates-icon-boxes/#Icon_Boxes_02

Thank you so much tuanphan! That works great! :)

Is there any way I can do that with icons from thenounproject.com or from flaticon.com? I guess that would mean to insert an image. Is ther a way to do this through markdown or through the code block so they would show up in a similar way as you put it on your page for Icon Boxes 02?

On 5/22/2020 at 9:06 PM, Fabians said:

I'm trying to create a list of services with an icon on top and text under the icon, like the attached image

You can also do this with any image file. To do this:

• Add three Image Blocks and place them side-by-side to create three columns.
• Size the icons to the required size before you upload them to the Image Blocks.
• If the icon is narrower than the content area (as it is in the example you provided) then you will see the required blank space on both sides of the image. This preserves the original image quality. 
• Add a Text Block below each icon for the associated text. 

Thank you Paul! That worked great! I thought that wouldn't preserve the right order in mobile (I thought that would put the 3 images first and than the 3 text blocks), but I was wrong. I must have done some mistake when I tried it the first time! Problem solved, thank you! This works great for the image icons I intend to use and tuanphan's way is a great alternative for the other items. Thank you! 🙂

On 5/24/2020 at 12:12 PM, paul2009 said:

You can also do this with any image file. To do this:

• Add three Image Blocks and place them side-by-side to create three columns.
• Size the icons to the required size before you upload them to the Image Blocks.
• If the icon is narrower than the content area (as it is in the example you provided) then you will see the required blank space on both sides of the image. This preserves the original image quality. 
• Add a Text Block below each icon for the associated text. 

 

Hi Paul, I found this very useful but I have one more question:

I did it your way but I have to put white space to the icons, because if I don´t do i the icon takes the full box width and it looks enormous.

In the first attachment you can see the white space I have to add to the right (I want the icons align left) so they look small as I want.

In the second attachment you'll see what happens if I don´t put white space and just upload the icon as a full image (without margins)

Is there a way to put the icon small and with space to the sides or one side and avoid put that space to the image?

THANKS!

3 minutes ago, jaustin said:

I did it your way but I have to put white space to the icons, because if I don´t do i the icon takes the full box width and it looks enormous.

If the image files are the correct width before you upload them, they will not get larger. For example, if you want them to appear 100-pixels wide, use images that are 100-pixels wide. 

1 minute ago, paul2009 said:

If the image files are the correct width before you upload them, they will not get larger. For example, if you want them to appear 100-pixels wide, use images that are 100-pixels wide. 

Wow, fast response! 

Yes I tried that but I want to upload (for example) a 200px wide image and show it like 100px wide, so it looks sharp on retina displays.

Hi, 

I would love to do the same in Squarespace 7.0 Brine template, but with 6 icons. Do you guys have a code for that? Thanks a lot in advance!

Bori