How to edit my grid gallery?

The Grid Gallery adds the ability to insert a collection of images and/or solid coloured blocks into a stack. You now have the ability to upload images individually or in bulk and have full design control over each picture (Zoom/Crop) and the entire grid gallery block. Here you will learn how to edit the grid gallery. 

What can I edit gallery wide?

How to edit individual grid gallery cell/picture boxes?

Rocketspark's Grid Gallery Inspiration page

Watch the 6-minute video below to learn how to create a responsive image gallery using Rocketspark’s Grid Gallery 2.0 feature. This is an example for an apparel e-commerce store, however, the same principles apply for say the food industry or an architectural website.


What can I edit gallery wide?

There are a number of design settings you can change grid gallery wide. Here are the steps on how you can edit the global design settings of your grid gallery.

To edit the grid gallery, just follow these easy steps:

1. Click the edit pencil on the grid gallery block. This will slide open a sidebar for the editing grid gallery.
   
   
2. To add more pictures, open the Add Pictures bar in the sidebar and click the Choose file button to start uploading. Or drag and drop images to the upload area. If there are grey placeholders, you can click the blue plus button or drag and drop an image to the placeholder to upload pictures.
   • If you don’t have any pictures prepared you can click on the Autofill with stock images button in the sidebar to fill your gallery.
3. Once your images upload successfully, you can start editing them. Click the edit pencil on each individual picture to make specific picture edits like Zoom or Crop.
   

Enable popup to enlarge to all

You can enable a popup to enlarge all pictures in your grid gallery. This means that you can click on a picture to view a larger image in a popup.

1. Click the edit pencil on the grid gallery block.
2. Open Add Pictures bar in the sidebar.
3. Tick the Apply popup enlarge to the new uploads checkbox. A popup will appear to confirm that you would like to enable the popup to enlarge on all of your current pictures.
4. Click Save.
   

 

Edit the number of columns

You can set the number of columns of your grid gallery

1. Click the edit pencil on the grid gallery block.
2. Open Grid Gallery Settings in the sidebar.
3. Under the Columns heading, you can click the plus and minus buttons or select a number from the dropdown to edit the number of columns of your grid gallery.

Adding additional Rows

If you are wanting to add additional rows to your Grid gallery it's a slightly different process to add additional columns. To add more rows you just need to add more pictures to your grid gallery and by default, the Grid will add an additional row to show your additional pictures. No settings adjustment is required here, just add more pictures.

 

Edit the gap

You can adjust the spacing between the pictures.

1. Click the edit pencil on the grid gallery block.
2. Open Grid Gallery Settings in the sidebar.
3. Under the Gap heading, you can click the plus and minus buttons or select from the dropdown to edit the gap between the pictures in your grid gallery.

 

Edit the box shape

You can edit the shape of the pictures in your grid gallery.

1. Click the edit pencil on the grid gallery block.
2. Open Grid Gallery Settings in the sidebar.
3. Under the Box Shape heading, you drag the handle of the slider from left to right to change the box shape of each picture in your grid gallery. 

 

Apply a picture mouseover effect

You can add transitions to pictures when you hover over them.

1. Click the edit pencil on the grid gallery block.
2. Open Grid Gallery Settings in the sidebar.
3. Under the Picture Mouseover Effect, you can select from the dropdown the transition you want to apply to your pictures. There are six options - Zoom in slightly, Zoom out slightly, Darken, Lighten, Fade in overlay and Fade out overlay.

Fade in overlay and Fade out overlay is only available when the colour overlay is enabled. Find out how to enable colour overlay on a picture here.

How to edit your Text Styling?

You can change the font, size, colour and background colour, the spacing between lines, and letter spacing. You can also change where your text is positioned in regards to the picture, choose the alignment, and add transitions to it. Just click the edit pencil on the grid gallery block and open Text Styling in the sidebar.

NOTE: To add Title and Secondary text to a grid gallery cell/picture, see How to add Title Text (heading) and Secondary Text (subtitle)?

Changing the text position and alignment

Text Position:

1. Click on a box on the position grid where you want to place your text. You'll notice that you have the option to place text underneath the image. The position you choose will apply to all images in your grid gallery.
   

Text Alignment: Use the controls to align your text in your grid gallery. The setting you choose will apply to all images in your grid gallery.

Changing font family, size and colour of Title Text (heading)

Under the Title Text heading, select a font family from the font dropdown, select a size from the font size dropdown and select a colour from the colour picker.

Changing display style, font, size and colour of Secondary Text (subtitle)

Under the Secondary Text heading, you can choose how you would like this text to be displayed. You can also change the font, font size and colour of your secondary text. 

 

NOTE: When you change the display style of the secondary text (subtitle) to 'Display as a button, the font, font size and font colour pickers will be hidden.  This means that you won't be able to change the font, font size, font colour in the Grid Gallery Settings. 

How to edit button font, font size and font colour pickers for Grid Gallery?

You will need to go to Stack Specific Design Options and open the 'Buttons' tab to edit your button font styling.

If you want to change your button style across your whole site, you can do this in your sitewide design settings under the CHANGE DESIGN tab (top left of page)
 

Adjusting the spacing of your text in Grid Gallery

Select the '3 dots' above the colour picker to open Text Spacing tools to edit the spacing for either Title Text or Secondary text.

 

Here you have the option to:

1. Adjust your letter-spacing (tracking) by clicking + (plus) for more space, or - (minus) to reduce the space.
   
2. Adjust the line height ie. the spacing between your Title text OR your Secondary text lines (if they extend across 2 or more lines.

 

     

 

Changing the Text Area Background for your Title text and Secondary text

Note: If you choose a different colour for your stack background colour, padding around your text will be adjusted automatically.

 

 

Applying a text mouseover effect

• Under the Text Mouseover Effect heading, you can select from the dropdown the transition you want to apply to the texts. There are three options available, Fade in, Fade in and move slightly on mouseover, and Move slightly on mouseover.

 

Mobile: Edit the number of columns and font size on mobile

You can change the number of columns and the size of your Title and/or Secondary text on mobile.

1. Click the edit pencil on the grid gallery block.
2. Open Mobile in the sidebar, a mobile preview area will appear on the right-hand side of the grid gallery sidebar.
3. To change the number of columns, you can click the plus and minus buttons or select from the dropdown.
4. To change the Title Text Size and the Secondary Text Size, you can select from the font size dropdown.

 

Changing the order of your Grid Gallery cells

You can easily reorder and delete an individual grid gallery cell (picture) by clicking the move and delete controls.

 

 

How to edit individual Grid Gallery cell/picture boxes?

1. Click edit pencil on individual grid gallery cell/picture to reveal specific controls.

How to add a link to individual Grid Gallery cell/picture box/Secondary text?

You can link individual grid gallery cells to a page or to an item in your store, external URL, blogpost or product. If you've added a Button Display for your Secondary text, the link you set up here will apply to that button too.

1. Click the edit pencil on the grid gallery block.
2. Click the edit pencil on the picture you want to add a link to, a sidebar for editing the picture will appear.
   
   
   
3. Click the ADD LINK button on the sidebar, a popup will appear.
   
   
4. Choose the link type you want to add.

•    Page - if you want the picture to link to a specific page on your website.
•    Website - if you want the picture to link to an external URL.
•    Blog - if you want the picture to link to a blog post.
•    Ecommerce - if you want the picture to link to a product in your store.
  

     5. Click the blue back button once you're done. Click Save changes.

* If you want to remove the link, just click the Remove link button in the popup and then hit Save.

Replace image

 You can replace the image of a particular grid gallery cell.

1. Click the edit pencil on the grid gallery block.
2. Click the edit pencil on the picture you want to replace.
3. Click the Replace button on the sidebar to upload a new photo for the cell.
   • Aside from clicking the Replace button, you can also drag and drop a picture into the preview image area to replace the image.
4. Once you’re done, click the blue back button on the top of the sidebar.
5. Click Save.

 

Enable popup to enlarge a picture

You can enable a popup to enlarge a picture in your grid gallery. This means that you can click on a picture to view a larger and full version of it in a popup.

You can also add a title and caption for each image on the popup.

1. Click the edit pencil on the grid gallery block.
2. Click the edit pencil on the picture.
3. Tick the Enlarge the full picture in a popup box checkbox to enable full picture display. This will give you an option to add a title text and caption text which displays with the popup.
4. Once you’re done, click the blue back button on the top of the sidebar.
5. Then click Save.

* You can preview the full picture popup when flicking to preview mode or on the live site.

 

How to add Title text (heading) and Secondary text (subtitle)?

You can add title and alternative text to a particular cell /picture in your grid gallery. Just follow these easy steps:

1. Click the edit pencil on the grid gallery block.
2. Click the edit pencil on the picture.
3. Open the Text bar in the sidebar.
4. Type the title and/or secondary text and alt text into the text boxes. As you type, the text will update on the picture. Alt-text is an alternative text which is used to describe the image to Google.  
5. Once you’re done, click the blue back button on the top of the sidebar.
6. Then click Save changes.

NOTE: You can change the font, size, colour and background colour, the spacing between lines, and letter spacing. You can also change where your text is positioned in regard to the picture, choose the alignment, and add transitions to it. See how to edit your Text Styling?

 

Effects: Add colour overlay/block colour

You can add colour overlay over a picture. You can set the colour overlay to 100% to make it appear as a solid colour block.

1. Click the edit pencil on the grid gallery block.
2. Click the edit pencil on the picture.
3. Open the Effects bar in the sidebar.
4. Under the Picture Colour Overlay heading, you can pick a colour and adjust its opacity by clicking on the plus-minus buttons or by selecting an opacity value in the dropdown.
5. Once you’re done, click the blue back button on the top of the sidebar.
6. Then click Save changes.

 

Set a specific text colour

You can add a specific text colour for a particular grid gallery cell. When there’s no specific text colour set, the text will just inherit the global/sitewide text colour.

1. Click the edit pencil on the grid gallery block.
2. Click the edit pencil on the picture.
3. Open the Effects bar in the sidebar.
4. Tick the Add a specific text colour for this box checkbox and a colour picker will appear. Choose the colour you want.
5. Once you’re happy with the colour/s you’ve chosen, click the blue back button on the top of the sidebar.
6. Then click Save changes. 

 

Disable mouseover effects

You can disable mouseover effects applied to a particular picture by these easy steps:

1. Click the edit pencil on the grid gallery block.
2. Click the edit pencil on the picture.
3. Open the Effects bar in the sidebar.
4. Untick the Mouseover effects enabled on this box checkbox to disable both text and picture mouseover effects.
5. Click the blue back button on the top of the sidebar.
6. Then click Save changes.