Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
Fabians

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

Share this post


Link to post

Hi, you can use Image Block

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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

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?

Share this post


Link to post
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


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, Variant Availability and Datepicker Extension
Note that links in my posts may be affiliate links. Need personal help? 
Book a Squarespace Expert.

Share this post


Link to post

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

Share this post


Link to post
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

Share this post


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


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include.
Explore our range of Squarespace Extensions, including the Wishlist, Variant Availability and Datepicker Extension
Note that links in my posts may be affiliate links. Need personal help? 
Book a Squarespace Expert.

Share this post


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

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...