How to Create a Modula Gallery with Captions and Titles Under the Images

The Modula Grid Gallery plugin is a powerful tool for creating beautiful and customizable galleries on your WordPress website. In this documentation article, we’ll walk you through the process of creating a gallery using the Modula plugin and adding image captions and titles beneath each image.

Prerequisites

Before you get started, you’ll need the following:

1. WordPress Website: Ensure you have a WordPress website up and running.
2. Modula Grid Gallery Plugin: Install and activate the Modula Grid Gallery plugin. You can find it in the WordPress plugin repository and install it from the WordPress dashboard.
3. Modula Pro: the ‘Under Image’ hover effect is available only in Modula Pro. It can be found in all premium plans: Starter, Trio, or Business.
4. Images: Prepare the images you want to include in your gallery. Make sure they are appropriately sized and optimized for the web.

Step 1: Create a New Gallery

1. Log in to your WordPress admin dashboard.
2. In the left sidebar, click on “Modula” to access the Modula plugin settings.
3. Click the “Add New” button to create a new gallery.
4. Give your gallery a name to help you identify it later.

Step 2: Upload and Organize Images

1. After creating your gallery, you’ll be redirected to the gallery edit page. Click the “Upload Image Files” or “Select from the Library” buttons.
2. Upload the images you want to include in your gallery or select them from your WordPress Media Library. You can select multiple images at once by holding down the Shift or Ctrl key (Windows) or Command key (Mac).
3. Once the images are uploaded, you can click and drag them to rearrange their order. This determines the order in which they appear in your gallery.

For more in depth steps on creating a gallery, you can follow the instructions on our documentation article: How to Create Your First Gallery.

Step 3: Configure Gallery Settings

1. Scroll down to the “Settings” > “General” section to configure your gallery’s appearance and behavior.
   • Gallery Type: You can select between Custom Grid, Masonry, and Creative Gallery. You can learn more about each gallery type from our documentation article: Modula Gallery Types.
   • Image Size: Adjust the image size to your preference.
   • Width: Set the width of your gallery. We recommend keeping it to 100%.
   • Height: Set the height of the gallery.
2. Customize other settings such as captions, lightbox settings, and more according to your requirements.

Step 4: Add Captions and Titles

1. Scroll back up to the “Gallery” section.
2. You will see the list of images you uploaded. To add captions and titles:
   • Hover over an image and click the pencil icon on that image.
   • Caption: Click on the caption input next to each image to add a caption.
   • Title: Click on the title input next to the image to add a title.
   • Click on the button ‘Save’ to save the caption and title.
   • Repeat for the rest of the images.
3. Save your changes.

For more information on title and caption settings, you can read our documentation article: Modula Caption and Title Configuration.

Step 5: Select the Hover Effect “Under Image”

Once you have configured your gallery and added captions and titles, it’s time to select the hover effect that will display them under your images.

1. Go to “Hover Effects” section in your gallery.
2. From the list of effects select “Under Image”.
3. Save the gallery.

Step 6: Display the Gallery

1. Once you finished configuring your gallery click the “Save Gallery” button.
2. Copy the shortcode provided for your gallery, which looks like [modula id="your-gallery-id"].
3. Create a new post or page where you want to display the gallery.
4. Paste the shortcode into the content area of your post or page. You can also read in our documentation how to insert Modula galleries into posts and pages.
5. Publish or update your post or page.

Now, when you view the post or page, your Modula gallery with captions and titles under the images will be displayed. Visitors can click on the images to view them in a lightbox, along with their captions and titles.

For a live demo of a gallery with captions and titles under the images, please visit our Under Image Demo Gallery page.