Create an amazing WordPress image gallery with Gallery CC
In this tutorial you will learn how to create and customize a gallery to show your content in the most elegant way possible.
1. Before you start: Installing the plugin
If you haven’t installed Gallery CC yet, it’s a good moment do to it – follow the Installation Manual to learn how to activate the plugin.
2. Create or edit a gallery
To create a new gallery, navigate to Gallery CC Pro > Add New Gallery CC Pro.
To edit an existing pop-up, go to Gallery CC Pro > Galleries CC Pro, and click the name of the gallery that you want to edit.
You can also add a new gallery from here by clicking “Add New Gallery CC Pro” on top of the screen.
3. Gallery dashboard: Overview
Whether you create a new gallery or edit an existing one, you will see the same screen: four tabs (Templates, Settings, Images, Advanced), of which the first one (Templates) will be active and the templates thumbnails will be visible.
First select a template for your gallery.
Gallery CC offers six templates of various types. Here is a quick overview:
The basic Gallery template with square thumbnails. Images’ titles appear on hover and the descriptions are hidden. If a URL is specified, the whole image becomes a link.
Masonry Grid with selectable thumbnails size (big, small, horizontal, vertical). If arranged properly, the images will form a gap-free grid.
It’s best to plan the images’ size and position beforehand for the best result.
Images’ titles appear on hover and the descriptions are hidden. If a URL is specified, the whole image becomes a link.
Simple Gallery grid with rounded thumbnails. Images’ titles appear beneath the images and the descriptions are hidden. If a URL is specified, the whole image becomes a link.
A vertical grid where the images keep their proportions (i.e. if you upload a vertical rectangular image, it will not be cropped). Images’ titles appear beneath the images and the descriptions are hidden. If a URL is specified, the whole image becomes a link.
A vertical grid with rectangular thumbnails. Images’ titles and descriptions appear on the right and if a URL is specified, “Read More” button appears.
A vertical grid with rectangular thumbnails. Images’ titles and descriptions appear on the side (left or right, alternately) and if a URL is specified, “Read More” button appears.
Click “Customize” under the template of your choice to start modifying it in Live Preview mode.
Live Preview mode is a powerful tool that allows you to customize almost every aspect of the templates. Open the categories in the left panel to modify various parts of your gallery. When you’re happy with the template, click “Save & Close” on top of the screen.
In the second tab you can adjust your gallery’s settings. Here are the available options:
Lightbox – Select this option if you want your images to open in a lightbox.
Slides – This option appears if you select Ligthbox > Yes above. When you activate it, you will be able to navigate forward and backward between your gallery images in the open lightbox.
The order of the gallery images will be randomized on page refresh.
“Read More” Button Text
This is where you can enter the translation of “Read More” button, if you want it to say something else.
This is the most important part of the gallery: the place where you actually add the images. Click “Toggle Image Details” to show/hide the image meta (title, description, etc.)
Hover over “?” icon to see help tooltips.
7. Advanced Custom CSS
Put your custom CSS in this box to adjust the gallery’s styles manually.