Squarespace allows you to add text overlays onto gallery images in order to convey a message or highlight an aspect of them, making your images more engaging for visitors and contributing towards an improved user experience.
Gallery Blocks provide an easy way to display media on your site. In this article, we’ll show how to add custom title text hover effects for Gallery Blocks using CSS.
Image Captions
Image captions can add extra information about your images while keeping their appearance professional and neat. They help visitors better comprehend what each photo represents – this is particularly beneficial when the images form part of a gallery or collection. Adding image captions to Squarespace galleries is simple, with various ways of customizing captions according to your needs.
Prior to Squarespace’s new editor, adding text to gallery images could be difficult, but now this task can be accomplished easily with just a few clicks. Furthermore, galleries of different types – stack displays, slideshows and carousels can all be created easily as can the ability to mix images with videos in one gallery.
By default, images on your site will display with only basic descriptions below them. But using a Gallery Block allows you to give each photo its own Title and Description for quick identification by visitors while still maintaining its aesthetic appeal.
Captions are not only attractive visual elements; they’re also critical components of SEO. Captions will allow visitors to find your images easily in search engines, and increase the chance that someone clicks them. In addition to using descriptive alt text and keywords in captions, include them for maximum effect.
Squarespace 7.1 now lets you add captions to images in a Gallery Section. To do so, first create the Gallery Section using the Picture Icon before uploading images and providing descriptions for each. Afterward, enable Captions for that specific Gallery Item using Pencil Icon.
Add text to your Squarespace gallery images quickly and effortlessly using either its built-in tool or adding custom CSS code – this process should only take minutes!
Squarespace’s gallery page feature is an effective way to showcase your media. Creating one is quick and simple; choose from grid, slideshow or carousel layout options and get going right away! However, it should be noted that this feature has some restrictions which should be considered carefully before creating one of your own.
Text Captions
Image captions are an effective way of providing context and storytelling through photos. Captions help users comprehend your photos more clearly and increase user-friendliness on your website, while simultaneously increasing SEO value by including keywords in captions – this will allow your website to rank higher on search engine results pages.
Squarespace makes it simple and efficient to add text overlays to your gallery images by using its built-in Gallery Block. Choose from various font sizes and colors that suit your style while adding descriptions for each photo in your gallery. Furthermore, the background color of your text overlay can also be set so it matches up seamlessly with its surroundings.
Gallery Block allows you to quickly and easily create either a grid or scrolling gallery on your website. Scrolling galleries are ideal for websites with lots of content as it enables visitors to quickly navigate through it efficiently – not to mention that they will help reduce bounce rate which is an indicator of low ranking for websites.
Lightbox galleries allow users to enable captions by clicking the “Edit Gallery Settings” button within them and entering your caption text in a pop-up window that opens when clicking it. Alternatively, use the “Add Caption” button within a Gallery Block for individual images in your gallery to add caption text directly onto them.
Text captions added to galleries will display under each image on a web page. If you would like it to display when a user hovers over an image, enable Title Text Hover Effect within Gallery Block settings – however this feature only available within Grid: Simple Gallery not Grid: Stack Gallery nor Collage Gallery.
Add the following code to your custom CSS, and use the Grid: Simple Gallery in Squarespace 7.1 or earlier as a starting point; however, with just a little additional work you can apply this same effect across other Gallery blocks on your site. It will only work for this gallery though!
Captions on Hover
Text overlays for Squarespace gallery images are an effective way to provide additional context and draw the viewer’s eye directly towards one image, particularly product photos. Text overlays also make it easy to incorporate keywords into alt texts for increased SEO power.
When adding text to gallery images, make sure it’s short and easily readable – use just a single word or phrase that describes each picture’s relevance to your site content. Also strive to reduce file sizes as much as possible so as to improve page load speeds and overall user experience by decreasing image resolution or aligning all your pictures at equal pixel height and widths.
To add captions to a gallery image, click the gear icon at the top right of your photo and type your text into the “Caption” field. Alternatively, set whether or not hover text appears by selecting it in your image options menu – however this feature is only available in gallery blocks and not any other types of image layouts.
Poster, Card, Overlap and Collage image blocks use captions as alternative tags instead. You can change this option by editing filename in Content tab.
Gallery Section blocks provide another way of adding text to gallery images using Squarespace 7.1 sites (and index pages as well). When creating one, select Gallery as the page type before clicking + Add Gallery section. Next, you’ll have the option to enter descriptions and titles for every image in your gallery section. These text additions will display in lightbox when users hover over an image, or deselecting the “Show titles” box in design options menu if they no longer wish for their titles to display.
Captions on Click
Add captions to images on your website as a great way of providing context and making them more engaging for visitors, while improving accessibility and search engine optimization. In Squarespace, simply open up the image editor. In the top-right corner is an option called “Add Caption”. Here you can enter text that will appear when someone hovers their mouse over an image.
Add text directly to an image for captioning purposes or when using special fonts; however, note that this approach won’t link back to any pages on your site as its use won’t allow clickable text links.
Squarespace provides another method for adding text to images: using text boxes. Simply create a new text block and type out what text should appear within it before moving it around to suit your image’s needs.
An easy rule of thumb for writing text should be to keep it as short and easily readable as possible, which will also reduce website load time. Use fonts such as sans serif or monospaced which are easier to read; fancy fonts may look pretty, but may prove challenging for people with dyslexia or vision impairments.
Squarespace recently upgraded the ways image blocks are displayed. Before, your options for image display were either plain images or ones with captions; now there’s even more choice – standard layout, grid, slideshow or carousel! Furthermore, you have full control of spacing, font color and other details to find just the look that matches your brand identity.
Now you can add titles and descriptions to gallery grid and slideshow images, making your galleries truly stand out. In this video I will demonstrate how to customize captions so they appear overtop the image when hovering.
