![]() When you move your mouse off the image, the image with text disappears and is replaced with the original image. This is what appears when you hover over the image. The second image is a photo with the tidbit text. The first image that appears is a photo that relates to the tidbit I’m sharing. In my example, I use hover to alternate between two images. This line tells Squarespace that these content blocks are related to to group them together. Slow websites get clicked away from real quick. You should run all your site’s images through an image optimizer, so they don’t slow down the load time for your site. Once I had selected, styled and standardized the size (cropping to squares at 1500 pixels), I ran the images through to optimize/bring their size down. So it’s better for you to optimize your images. ![]() ![]() Once you get into doing this regularly it becomes second nature More posts about Squarespace SEO that you might be interested in 5 Quick & Easy SEO Improvements for Squarespace The Ultimate Blog Post SEO Pre. Think: Image Size + Compress, Rename, Quality. Your page size must be 5MB or under in order not to have any issues. Those are the 3 things that you need to do when uploading images to Squarespace. I chose to use 9 square images in a 3x3 grid. Having a large number of images on your Squarespace website’s page is not recommended as even if all of them are under 500 KB, it can affect your Squarespace site’s loading speed. So I made sure all my images were squares and that I would have the right number of photos to complete even rows within the grid. Grids look best when the images visually go together, share the same style, are the same size and fill the entire grid. You can create something similar or use your imagination to come up with other ways to use the code. You can see it for yourself right here and see example images a bit below in this post.įor this post, I’m going to show you how I created the fun tidbits image grid. When you move your mouse off the image, the original photo returns. The photos are beautiful and eye catching and when you hover over each one, a fun tidbit about me (related to the image) appears. Instead of a boring learn more about me list on my About page, I decided to have a bit more fun by using a grid of photos with hover effects.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |