The Image Caption module by Divigrid is a powerful tool designed to enhance the visual appeal of your website by allowing you to easily add and customize captions on images. This module is particularly useful for creating photo galleries, portfolios, and other image-rich content sections. The module operates with a parent-child relationship, giving you control over both global settings and individual caption items.
This documentation provides a comprehensive guide to the settings available under the Content and Design tabs, enabling you to fully utilize the module's capabilities to achieve your desired design.
Content Tab Customization
The Content tab is where you configure the fundamental elements of the Image Caption module. It’s divided into sections for managing both global settings (parent) and specific settings for each individual image caption (child).
Parent Content Tab
The parent content settings apply globally to the entire grid of image captions, establishing the overall layout and structure.
Add New Item: This option allows you to add a new captioned image to your grid. When you click "Add New Item," a new child item is created where you can customize its content and design settings. This feature is crucial for incrementally building your grid by adding images and their corresponding captions one by one. Each item can be individually configured to create a diverse and dynamic grid layout.
Grid Settings
Column Number: Define how many columns will be displayed within your grid. For instance, if you choose 4 columns, the images will be evenly distributed across these columns, creating a balanced layout. Adjusting this number is crucial for ensuring that your grid is responsive and fits well within the page’s design. Depending on the content, you might opt for fewer columns for a more spacious look or more columns for a compact and dense presentation.
Column Gap: Control the space between the columns in your grid. This feature is essential for maintaining a clean and organized layout. A smaller gap can create a more tightly packed grid, suitable for showcasing a large number of images in a limited space. Conversely, a larger gap can give each image more breathing room, making the grid feel more open and spacious. This setting is particularly important in responsive design, as it ensures that the grid looks balanced and visually appealing across different screen sizes.
These global settings in the parent content tab are crucial for setting up the basic structure of your image grid. By fine-tuning the column number and gap, you can achieve various layouts, each suited to different types of content and visual preferences.
Child Content Tab
The child content tab is where you manage the settings for each individual image caption. This section offers extensive customization options, allowing you to tailor how each image and its accompanying caption are presented.
Content
Image: Upload the image to be displayed with the caption. This is the visual centerpiece of your caption, so it’s important to choose high-quality images that align with your content. The image you select will serve as the focal point for the caption, and you can change it anytime by uploading a new file.
Image Alt: Image alt text is critical for accessibility and search engine optimization (SEO). This text is used by screen readers to describe the image to visually impaired users and by search engines to index the image’s content. It’s important to provide clear and descriptive alt text that accurately reflects the image’s content.
Image Position: Determine the position of the image within the module. Options include Initial, Top, Center, Bottom, Left, and Right. This feature allows you to create unique layouts by positioning the image in different areas. For example, positioning the image at the top with the caption below creates a classic look, while centering the image with the caption overlaying it can create a more modern and dynamic effect.
Title: Enter the main caption text that will accompany the image. This title is typically the most prominent text associated with the image, so it should be descriptive, relevant, and engaging.
Title Tag: Choose the HTML tag for the title, which impacts both the styling and SEO of your content. Common options include H1 through H6 tags, corresponding to different levels of heading importance in HTML.
Enable Description Switch: Toggle this to enable or disable an additional description area beneath the title. When activated, a text box appears where you can enter supplementary information or context related to the image. This description can provide more details, offer commentary, or even include a call to action. It’s a useful feature for adding depth to your captions and guiding users through the content.
Grid Settings
Grid Column Start: Specify the starting position of the grid column for each individual item. This is especially useful in more complex layouts where you want to control the exact placement of each image within the grid.
Grid Column End: Similar to the start setting, this option lets you determine where the grid column should end for each item. This level of control is essential for creating custom layouts that go beyond simple grid structures. By adjusting these settings, you can achieve intricate designs that guide the viewer’s eye across the content in a deliberate and engaging way.
The child content tab provides the flexibility needed to create unique and engaging image captions. By adjusting these settings for each individual item.
Design Tab Customization (Global)
The Design Tab of the Image Caption module in Divigrid provides a comprehensive set of tools to fine-tune the overall appearance of your image captions. These settings apply to all items within the grid, ensuring that your design remains consistent across the module.
Image Settings
Image Width & Height: Here, you can adjust the dimensions of the images. This is important for ensuring that all images in the grid are the same size, which contributes to a neat and organized layout. You can set specific pixel values or use percentage-based sizes for responsive design.
Image Opacity: The opacity setting allows you to adjust the transparency of the images. Lowering the opacity can create a subtle, faded effect, which can be useful for background images or when you want the caption text to stand out more.
Image Margin & Padding: Margin and padding settings give you control over the spacing around the images. Margins affect the space outside the image, while padding affects the space inside the image’s border. These settings are crucial for fine-tuning the layout and ensuring that each image has enough space around it.
Border: The border setting allows you to add a border around each image. You can customize the color, width, and style of the border to match your site’s design. Borders are useful for creating visual separation between images or drawing attention to specific items.
Box-Shadow: Box-shadow settings let you add a shadow effect around the images, creating depth and dimension. You can customize the color, blur, spread, and offset of the shadow to achieve the desired effect.
These image settings provide a wide range of options for customizing how your images are displayed. By adjusting these settings, you can create a cohesive and visually appealing grid that enhances your website’s overall design.
Font Styles
Blend Style: The blend style setting allows you to blend the text with the background, creating unique visual effects. This can be useful for creating subtle overlays or integrating the text more seamlessly with the image.
Title Font Styles: Here, you can further customize the title font by choosing different font families, sizes, colors, and weights. This level of control allows you to create a title that stands out and matches your site’s overall design.
Description Font Styles: Similar to the title font styles, this setting allows you to customize the font for the description text. You can choose a different font or use the same font as the title for consistency.
Title Margin & Padding: These settings control the spacing around the title text. Adjusting the margin will affect the space outside the title, while padding will affect the space inside the title’s container. This is useful for ensuring that the title text is properly aligned and spaced within the grid.
Font styles are crucial for creating a visually appealing and readable layout. By adjusting these settings, you can ensure that your text is both attractive and easy to read, enhancing the overall user experience.
Item Settings
Background: The background setting allows you to set a background color or image for each caption item. This is useful for creating contrast between the text and the image, ensuring that the caption is readable and visually distinct.
Margin & Padding: These settings give you control over the spacing around each item. Adjusting the margin will affect the space outside the item, while padding will affect the space inside the item’s border. Properly adjusting these settings is crucial for creating a clean and organized layout.
Border & Box-Shadow: Further customize the appearance of each item by adding borders and shadow effects. These settings help create depth and visual interest, making each item stand out.
These design settings provide the flexibility to create a cohesive and visually appealing grid of image captions that align with your overall site design. By carefully adjusting these parameters, you can ensure that your captions are informative and enhance your website's aesthetic appeal.
FAQs About Image Caption
1. What is the Image Caption module, and how does it function?
The Image Caption module by Divigrid is a tool that allows users to add captions to images within a grid layout. It supports a parent-child relationship, where the parent controls global settings, and each child item represents an individual image with its caption.
2. Can I control the spacing around the images?
Yes, the module offers margin and padding settings under the "Image Settings" and "Item Settings" sections in the Design Tab. You can adjust these to control the space inside and outside of each image.
3. What are the grid settings in the Parent Content Tab?
The Parent Content Tab includes grid settings like the number of columns and the column gap. These settings control the overall structure of the grid layout, determining how many images are displayed per row and the spacing between them.
4. Is the Image Caption module responsive on different devices?
Yes, the module is designed to be fully responsive, ensuring that your image captions look great on all devices, including desktops, tablets, and smartphones. The responsive design settings ensure that the layout adjusts dynamically to different screen sizes.
5. What is the Blend Style option, and how does it work?
The Blend Style option in the Design Tab allows you to apply blending effects to text and images within the Image Caption module. This feature helps you create unique visual effects by merging the image and text layers in various ways. You can customize the blend mode to achieve effects like darkening, lightening, or adding contrast, which can enhance the overall aesthetic of your captions.
6. Is it possible to add multiple images with different captions?
Yes, you can add multiple images with unique captions by using the "Add New Item" feature in the Parent Content tab. Each image can have its own caption and settings.
7. How many blend styles are in the image caption module?
There are 7+ blend styles in the blend style options called ( Difference, Luminosity, Color, Normal, Multiply, Exclusion, and Color Dodge).