Jump to content

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

Recommended Posts

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/)799560672_Screenshot2020-05-22at21_01_24.thumb.png.9d34d7e48990fd4a9c91929e6033835d.png 

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

Link to comment

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?

Link to comment
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. 

 

spacer.png

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

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! 🙂

Link to comment
  • 3 months later...
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!

 

Captura de pantalla 2020-08-27 a las 21.38.28.png

Captura de pantalla 2020-08-27 a las 21.40.31.png

Link to comment
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. 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
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.

Link to comment
  • 1 year later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.